Mempercantik Postingan | Cara membuat postingan menarik | Animasi pada quote post | Animasi Hover sekarang menjadi salah satu cara tersendiri bagi seorang blogger untuk mempercantik blognya. Benar sekali dengan cara yang cukup simpel yaitu dengan menambah effect CSS pada blog sobat. Tentunya sobat bisa menikmati postingan yang lebih menarik. So, para pengunjung menjadi tidak bosen ni sob kalok berkunjung ke blognya sobat.
Lihat Demo
Kali saya mencoba berbagi tips ini sob, tips ini sering juga disebut2 dengan "eyes catching readers" so. Jadi bagai mana caranya si pembaca terhibur ketika mereka membaca postingan kita. Tentunya tidak lepas dari mendapatkan Informasi yang bermanfaat. :D
Cara mudah mempercantik blog pada postingan
 |
| Gambar Demo |
Kali saya mencoba berbagi tips ini sob, tips ini sering juga disebut2 dengan "eyes catching readers" so. Jadi bagai mana caranya si pembaca terhibur ketika mereka membaca postingan kita. Tentunya tidak lepas dari mendapatkan Informasi yang bermanfaat. :D
Langkah-langkah membuat effek pada postingan
Berikut adalah langkah-langkah sederhana tentang cara membuat effect hover pada postingan blog. Silahkan sobat perhatikan langkanya dibawah ini.
- Buka Template >> Edit HTML >> Lalu Expand Widget Template (Contreng)
- Cari Script ]]></b:skin> (Biar cepat, gunnakanlah Cntrl+F)
- Lalu paste kode dibawah ini tepat di atasnya.
/*****************************************
King HTML COde Block Quote Animated post blockquote
******************************************/
.post-blockquote1
{
font-size: 15px;font-family: Verdana;font-weight: normal;font-style:italic;
background-color: #F2F1F1;
color: #000;
margin: 5px 10px;
padding: 20px 20px 20px 20px;
border: 2px dotted lightgrey;
border-radius: 10px;
box-shadow: -1px -1px 12px 2px gainsboro;
transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
}
.post-blockquote1:hover
{
background-color: darkgreen ;
color: #fff;
}
.post-blockquote1:active
{
background-color: CornflowerBlue ;
color: #000;
}
- Save template
- Finish
Langkah selanjutnya untuk penerapan ke postingan blog
- Perhatikan, saat sobat ingin membuat postingan blog.
- Disana ada Compose dan HTML
- Pilih HTML
- Sekarang masukan kode berikut ini ketika sobat ingin membuat postingan yang di "BlockQuote"
<div class="post-blockquote1">
Isilah text sobat disini
</div>
Isilah text sobat disini
</div>
- Finish Deh .... :D
Demikian cara mudah mempercantik blog dengan CSS Hover Post sob.
Notice : Terima kasih sudah berkunjung dan membaca artikel KingHTMLCode. Silahkan tinggalkan komentar sobat jika berkenan. Semoga sukses selalu buat sobat-sobat reader KingHTMLCode. Salam SUKSES selalu, Aamiin. Terus semangat ya sob ;)
0 comments:
Post a Comment