Cara Membuat Related Post,Artikel Terkait Dengan Gambar / Thumbnails di Blog. Sobat Blogger, Artikel terkait atau related post adalah sebuah widget yang biasanya terdapat di bawah posting blog atau di bawah postingan artikel, Related post atau artikel terkait berfungsi untuk menunjukan sebuah artikel yang berhubungan dengan label posting atau label blog artikel tersebut.
Related post atau artikel terkait sangat bermanfaat juga untuk menurunkan tingkat bouncing pada blog, karena secara otomatis artikel terkait atau related post menawarkan artikel yang berhubungan dengan posting yang kita baca, sehingga pembaca bisa melihat lebih artikel yang berhubungan dan meningkatkan jumlah klik halaman di blog kita.
Untuk itu di artikel saya kali ini, ingin membuat tutorial cara membuat related post atau artikel terkait dengan menggunakan gambar atau thumbnails agar related post tersebut terlihat lebih keren dalam tampilannya, sehingga pengunjung lebih tertarik untuk melihat artikel lainnya di blog kita karena ditambahkan item gambar atau thmbnails tersebut.
Bagi sobat yang ingin membuat related post keren dengan menggunakan style gambar, silahkan ikuti tutorialnya. Simak baik-baik ya sobat
Cara Membuat Related Post, Artikel Terkait Dengan Gambar / Thumbnails
1. Buka akun bloggersobat.
2. Pilih menu template dan klik edit HTML.
3. Letakan kode dibawah ini diatas kode </head>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/* css related posts DTE */
#related-wrapper{margin:auto;padding:0 20px}.related-post{width:auto;margin:0 -20px;padding:0}.related-post h4{margin:15px 0 15px 10px}.related-post-style-3{margin:0 3px!important;}.related-post-style-3 li{margin:0!important;width:100%;}.related-post-style-3,.related-post-style-3 li{padding:0;list-style:none;word-wrap:break-word;display:inline-block}.related-post-style-3 .related-post-item{display:block;float:left;height:auto;padding:0 0 10px;margin:0 10px!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:calc(33.33% - 20.2px);}.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0;width:100%;height:140px;padding:0;z-index:0;overflow:hidden}.related-post-style-3 .related-post-item-tooltip{background:#f5f5f5;padding:13px 10px 16px;overflow:hidden;display:block;position:relative;margin:0 0}.related-post-style-3 .related-post-item-tooltip a.related-post-item-title{font-size:12px;font-weight:700;display:block;color:#444;padding:0;text-transform:uppercase;font-family: Trebuchet MS, sans-serif;}.related-post-style-3 .related-post-item-title:hover{color:#222}.download{background:#dc4b3b;text-align:center;list-style:none;max-width:150px;padding:8px 14px;font-weight:400;transition:all .3s ease-in;display:block;margin:15px auto 25px;color:#fff;border-radius:5px}.klik-download a:link,.klik-download a:visited,.klik-download a:active,.klik-demo a:link,.klik-demo a:visited,.klik-demo a:active{color:#fff;text-transform:capitalize;font-size:135%;transition:all .3s ease-in-out;line-height:30px;text-align:center}.download:hover{background:#d94231;transition:all .3s ease-in}.demo{background:#097ac7;text-align:center;list-style:none;max-width:150px;padding:8px 14px;font-weight:400;transition:all .3s ease-in;display:block;margin:25px auto 0;color:#fff;border-radius:5px}.demo:hover{background:#4586f3;transition:all .3s ease-in;}.klik-download a:hover,.klik-demo a:hover{}#inline_wrapper{display:block;padding:0;margin:0 auto}.related_inline_wrapper{width:100%;display:block;overflow:hidden}.related-post-by-title{width:70%;margin:15px auto;display:block;float:left;position:relative}.related-post-by-title ul{padding:18px 17px 17px 30px;border:1px solid #ddd;margin:0}.related-post-by-title h4{display:inline-block;background:#fff;padding:0 15px;margin:0;position:absolute;top:-12px;left:40px;font-size:15px;font-weight:700}.related-post-by-title li a{font-size:14px;font-weight:700!important;margin-top:10px!important}.ads_middle{margin:15px auto 0;padding:0;text-align:center;display:block;position:relative;}ding:0;text-transform:uppercase;}.related-post-style-3 .related-post-item-title:hover{color:#222}
}
</style>
</b:if>
4. Selanjutnya letakan kode dibawah ini dibawah kode </article> atau tempatkan dibawah posting anda sesuai selera anda.
<b:if cond='data:blog.pageType == "item"'>
<div id='related-wrapper'>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>];var relatedPostConfig={homePage:"<data:blog.homepageUrl/>",widgetTitle:"<h4>Artikel Terkait</h4>",numPosts:3,summaryLength:0,titleLength:"auto",thumbnailSize:320,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Read More",widgetStyle:3,callBack:function(){}}
</script></div>
</b:if>
5. Jika sudah, silahkan save template blog sobat dan lihat hasilnya.
Oke sobat blogger, sekian untuk tutorial "Cara Membuat Related Post,Artikel Terkait Dengan Gambar / Thumbnails di Blog" jika ada yang ditanyakan untuk tutorial ini, silahkan bertanya dikolom komentar blog, lebih dan kurangnya saya mohon maaf.
1 komentar:
baru tahu caranya, ty!
poker online pilihan