6:40 PM
Vanestorrz
Malem semuanya, sebelum menghapal buat praktek besok, saya sempetin dulu buat bikin postingan hari ini, sesuai dengan request Kang Ghani, saya langsung kasih tutorial nya. Tutorial apa lagi tuh?, ini nih, buat Blockquote lebih Keren, pertama-tama saya berterima kasih kepada Yudan Blog, terima kasih mau bagi-bagi ilmu mas, scriptnya bagus banget. Berhubung saya dapet script dari orang lain, jadi saya harus sopan dong, hhe. ya udah, saya langsung aplikasiin ya.
CONTOH 1:
#kutip1 {
width:85%;
margin-left:30px;
padding:5px 5px 5px 10px;
background:#eaf6ed url(http://i44.tinypic.com/2076aet.jpg) no-repeat right bottom;
border:#04fc38 solid 1px;
border-left:#04fc38 solid 10px;
}
CONTOH 2:
#kutip2 {
width:85%;
margin-left:30px;
padding:5px 5px 5px 10px;
background:#f9edf7 url(http://i41.tinypic.com/o6d5hs.jpg) no-repeat right bottom;
border:#d301b7 solid 1px;
border-left:#d301b7 solid 10px;
}
width:85%;
margin-left:30px;
padding:5px 5px 5px 10px;
background:#f9edf7 url(http://i41.tinypic.com/o6d5hs.jpg) no-repeat right bottom;
border:#d301b7 solid 1px;
border-left:#d301b7 solid 10px;
}
CONTOH 3:
width:85%;
margin-left:30px;
padding:5px 5px 5px 10px;
color:#04570a;
background:#f2fbf4 url(http://i41.tinypic.com/35a8ayb.jpg) no-repeat right bottom;
border:#017b19 solid 1px;
border-left:#f906fc solid 10px;
}
margin-left:30px;
padding:5px 5px 5px 10px;
color:#04570a;
background:#f2fbf4 url(http://i41.tinypic.com/35a8ayb.jpg) no-repeat right bottom;
border:#017b19 solid 1px;
border-left:#f906fc solid 10px;
}
untuk menerapkannya caranya:
1. Login ke Blogger » Layout » Edit HTML » Centang “Expand Template Widget“
2. Cari kode ]]></b:skin> , kemudian pilih salah satu kode CSS yang ada diatas, dan letakan di atas ]]></b:skin> tadi.
3. Klik Simpan
ket: untuk memasangnnya gunakan scipt <div id=nama kutip>Kata-Kata Anda</div> saat posting. contoh: <div id=kutip3>Percobaan</div>
Disarankan pilih warna yang sesuai sama background and warna tulisan blog, biar matching.
Sekian aja postingan hari ini, ditunggu komentannya. Thx banget.....
Posted in 
4 Response to "Membuat Blockquote Lebih Menarik"
wheh bagus nih, langsung praktekin
@Ghani
minta Tutorial Emoticon dong ghan, saya udah ngubrak ngabrik banyak Web, error semua.
Thanks banget infonya sob........... muantab...............
@Ghani
ghan gak jadi, soalnya saya udah dpet..... :))
@Reyhan
sama-sama mas..... =))
Post a Comment
Silahkan Komentarnnya Mas, Tapi Jangan SPAM!!!