Cara Membuat Related Post Thumbnail Dan Kotak Subscribe

Cara Membuat Related Post Thumbnail Dan Kotak Subscribe - Kali ini saya akan membahas Tutorial Blog yaitu Cara Membuat Related Post Thumbnail Dan Kotak Subscribe maksud judul diatas adalah, dalam satu kotak ada Related Post Thumbnail (Artikel Terkait Dengan Gambar) dan Kotak Subscribe (Kotak Berlangganan) jadi disatukan. Disebelah kiri nya kotak subscribe/berlangganan, di sebelah kanan nya Related Post dengan Thumbnail (Artikel Terkait Dengan Gambar), apalagi Related Post dengan thumbnailnya ada efek hover nya pastinya keren. DEMO

Jika sobat tertarik, silahkan iktui langkah-langkah di bawah ini :

1. Login ke Blog sobat.
2. Pilih Rancangan.
3. Pilih EDIT HTML, jangan lupa Centang dulu Expand Widget Template nya.
4. Cari kode ]]> setelah ketemu letakan kode dibawah ini tepat diatas kode ]]>

#related{background:#222; border:1px solid #000; border-bottom:1px solid #444; border-right:1px solid #444;text-shadow:0 1px 0 #000;margin:0 0 5px;padding:10px}
ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0}
#related .related-posts{font-weight:400;width:50%;float:right}
#related .related-posts p{margin:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #333;display:block;height:72px;position:relative;width:72px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.7}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}
#related .subscribe{width:43%;float:left;color:#bdbdbd;}
#related .subscribe p.intro{font-weight:400}
#related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV3Ow3ipNQtr8qFlpWRhakM_UN0Yqp0YC3UjjbCt4OTKzkWLv0AeoKO4k7aS87XpP2yhqmk6pjLYm1sYMfkdlqLuhkn_6yb-cF34Z25_9u9ujGeOArUJOdHCFCZtm-rIXXub97psQM3HE/) 0 50% no-repeat;vertical-align:middle}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}

5. Selanjutnya cari kode  jika sudah ketemu letakan kode di bawah ini tepat di atas kode

Related Articles

If you enjoyed this article just
click here, or subscribe to receive more great content just like it.

Subscribe via RSS Feed

Your information will not be shared. Ever.

Yang berwarna merah ganti dengan URL Feedburner anda contoh : http://feeds.feedburner.com/blazer_blog 
Yang berwarna biru ganti dengan URL Blog sobat.

Sepertinya cuma segitu yang bisa saya jelaskan mengenai Cara Membuat Related Post Thumbnail Dan Kotak Subscribe jika ada kesulitan harap tinggalkan pesan di kotak komentar.

Script By : http://creatingwebsite-maskolis.blogspot.com/