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;quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqVg4SVsGprQoQw2R5dFzdDitDv8M-k_USPyPU49kJVRx8CgCPhQk-a4XhwMQiP-6wpT3j_sVcxnifZ54PVcNKbzk1-KJat21WRkabEo1eXj_HJbRE6b74n6lgUvUpe4aTOb5nShiEXJ4o/s1600/skincornerbutton1.gif&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.
