Pada kesempatan kali ini saya ingin posting mengenai Tutorial 'Membuat Blockquote' ,dimana pada postingan saya sebelumnya pernah juga membahas cara membuat 'Cara Membuat Blockquote Indah', dan 'Cara Membuat Blockquote Indah2', nah kali utta, membahas tutorial yg sama,.. eits,.. jgn slh paham dulu sob, karna postingan kali sangatlah berbeda pada postingan 'Cara Membuat Blockquote Indah', tp pada postingan yang kedua 'Cara Membuat Blockquote Indah2', itu sama saja, dan disini saya sudah memodifnya dengan memberikan efek 'Box Shadow Hover', 'CSS' dan fungsi 'Auto Scroll Down', nah, barikut Preview Gambarnya :
Sebelum :
Saat :
Gimana tertarik untuk mencobanya??
Berikut langkah - langkah pembuatannya.
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin>
Lalu letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin>
.post-body blockquote {
overflow:auto;
height:220px;
background-position:-10px -7px;
border: 1px dashed #fff;
margin: 10px;
padding: 10px;
background:#666;
text-align: justify;
line-height:1.4em;
opacity:0.5; filter:alpha(opacity=40); this.style.opacity=6;border-radius:15px; -moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000}
.post-body blockquote:hover{color:#fff; font-size:15px; background:#666;
opacity:0.9; filter:alpha(opacity=40); this.style.opacity=6;border-radius:15px; -moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F;}
.post blockquote{ margin:1em 15px}
.post blockquote p{ margin:.75em 0}
::: Sobat dapat mengedit code yang berwarna diatas sesuka anda,
5. Terakhir Save template, dan lihat hasilnya...
Jangan lupa untuk memberikan pendapat anda, mengenai Posting ini. terima kasih....
