Cara Membuat dan Mengedit Blockquote Blog Jadi Keren
Blockquote blogger - Kebanyakan para blogger saat memposting kode script html pastinya akan menggunakan fitur blockquote yang disediakan blogger. Gunanya adalah untuk membedakan yang mana kode yang mana teks biasa. Namun diantara banyak sobat blogger ada juga yang bosan dengan tampilan blockquote yang terkesan "konvensional".
Muncul ide saya untuk memberikan tutorial tentang Cara Membuat Blockquote Blog Dengan Efek Keren ini agar sobat blogger tidak bosan dengan tampilan blockqoute di blognya.
Ok langsung saja berikut Tutorial Tentang Cara Membuat Blockquote Blog Dengan Efek Keren
- Buka akun Blogger Anda
- Template-> Edit HTML
- Copy Kode dibawah ini
.post blockquote {Diatas kode ]]></b:skin> . Demo blockqoutenya bisa anda lihat di blog ini :D heheheh
background: #F2F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLq8epk5iJ7feP3gKT-V9OV0mZo23wwTyG1njhuL95cLqnB8CVp_GaL9OLY-bQd32_tNITH8bRzpk6uG2A0pMDejJDRAYn_YgfFcbjb9SezcX1R4E0TIJJ63JXF0Ifdg4lvppe3QZch-8/s400/quote1.gif)top left repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
font-size: 0.9em;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.post blockquote:hover {
background: #F2F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcgyQUaWnUQ_IcsNa4DFQH2wE5-lWz2vnk7I1yAqLC7RyQcD4huDHqEJfJd6Jh0o-YAd80-KsqWYmLsDeDg4OglO-lZVlVWmjtReL94OkIHKuPM1da1-RFaRG2XM3CjgdYivhifknZMFU/s400/quote2.gif)top left repeat-y;
}
Anda bisa mengganti tulisan yang berwarna biru dengan URL Gambar yang anda inginkan. Blockqoute ini juga memiliki kelebihan yaitu selain tampilannya yang keren juga memiliki efek hover (berubah saat disorot mouse) plus SEO dan tidak memberatkan loading blog :)
Mudah sekali bukan Cara Membuat Blockquote Blog Dengan Efek Keren semoga tutorial ini bermanfaat ya :) salam blogger indonesia!
0 Response to "Cara Membuat Blockquote Blog Keren dan SEO"
Post a Comment