Membuat artikel terkait/related post unik dengan efek hover

Membuat artikel terkait/related post unik dengan efek hover >>

Hallo ketemu lagi di blog DEWATA dan kali ini saya akan share tentang cara membuat artikel terkait/related post dimana sebelumnya saya sudah pernah share tentang cara Membuat artikel terkait dengan thumbnail namun artikel DEWATA kali ini berbeda yaitu kita membuat Artikel terkait/related post pada sidebar blog, yang unik menggunakan efek hover.
ni aq dah siapin screenshotnya.

Artikel terkait/related post ini juga dapat diberi gambar atau sebagian text dari artikel tersebut.

Ni screenshot dengan menggunakan sebagian text artikel

Dan ini screenshot menggunakan gambar/thumbnail.

Gimana ingin mencoba artikel terkait/related post diatas..! Langsung aja.

1. Login ke blog kamu,klik rancangan,edit html jangan lupa centang expand template, lalu kamu cari kode ]]></b:skin> dan letakkan kode berikut tepat diatas kode ]]></b:skin>

.popular-posts ul{padding-left:0px}
.popular-posts ul li{background:#000 url(&amp;amp;amp;amp;quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5mZ0UlRs3Lm7EH4WeK0RMOleeeRJspcOMCDpXk2uM-FpTfxwq2rVJvDIesB4X9DmlKePjJal_iRyMTJ8BNpaP2QE7Fc8qjiMQ55iXd2m6jWr4VI5-ZxBAl_2IPo5ifQ1H2dYI5a3nh5Od/s1600/skincornerbutton1.gif&amp;amp;amp;amp;quot;) no-repeat scroll 5px 5px;
list-style-type:none;
margin:0 0 px 0px;
padding:5px 5px 5px 20px !important;
border-style: solid;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomright: 0px;
-webkit-border-radius:10px;
}
.popular-posts ul li:hover{background:#484B52;border-style: solid;
border-bottom: 1px solid #ff0000;
border-right: 1px solid #ff0000;
border-top: 1px solid #00ff00;
border-left: 1px solid #00ff00;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-radius:10px;}
.popular-posts ul li a:hover{text-decoration:none;
}

2.Simpan template.

Kemudian lanjut ke tahap berikutnya yaitu.
menuju ke

3.Tata letak
4.Add gadget
5.Pilih Artikel terkait/related post.
Lalu klik simpan, dan lihat hasilnya.

Sekian artikel tentang Membuat artikel terkait/related post unik dengan efek hover semoga bermanfaat.