Releated Post memiliki dua jenis, bergambar dan tidak bergambar. Tergantung dari selera, saya sendiri lebih suka yang bergambar karena dengan adanya gambar bisa menarik pengunjung untuk membuka atau membaca halaman postingan kita.
Terkait :
- Membuat Artikel Terkait Bergambar Responsive di Bawah Postingan Blog
- Membuat Relate Post Thumbnail/Gambar Vertikal V.2
- Cara Membuat Related Post Thumbnail Horizontal di Blog
- Membuat Related posts Thumbnail Terbaru
Selain itu, dengan memasang widget ini kita bisa mempercantik tampilan pada Blog. Nah, untuk Anda yang sedang mencari widget artikel terkait/Releated Post Anda bisa menemukannya disini
Widget satu ini lebih memiliki tampilan sederhana tanpa gambar/Tumbhnail, keuntungan yang bisa diambil tanpa adanya gambar adalah bisa meringankan loading blog. Untuk pemasangannya Anda bisa mengikuti panduannya dibawah ini :
1. Log-in ke dashbord Blogger
2. Pilih Template dan Edit HTML
3. Selanjutnya, Anda cari kode <head> dan pastekan di bawahnya :
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
4. Langkah berikutnya, Anda cari kode ]]></b:skin> , lalu copy kode CSS di bawah ini dan pastekan diatasnya :
.related-post{margin:0em auto 0;font-size:14px;background:#fff;border-radius:4px}
.related-post h4{font-size:14px;margin:0 0 .5em;background:#285BFC;color:#fff;padding:14px 20px 14px 75px;font-weight:normal;border-radius:4px 4px 0 0;position:relative;font-family:Oswald,Arial,Sans-Serif;text-transform:uppercase}
.related-post h4:before{content:"\f074";font-family:fontAwesome;font-size:22px;font-style:normal;background-color:#285BFC;color:#fff;border-radius:4px 0 0 0;top:0;left:0;padding:13px 20px;position:absolute}
ul.related-post-style-1{padding-left:0!important;margin-top:-12px}
.related-post-style-1 li{list-style:none;padding:15px 20px;border-top:1px solid #eceef5}
.related-post-style-1 li a{color:#1A1A1A;text-decoration:none}
.related-post-style-1 li a:hover{color:#285BFC;text-decoration:none}
.related-post-style-1 li:before{content:"\f08e";font-family:fontAwesome;color:#1A1A1A;font-style:normal;top:0;left:0;margin-right:13px}
5. Kemudian Anda cari kode <data:post.body/>, copy kode dibawah ini dan pastekan dibawahnya :
<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-post' class='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: 5,
titleLength: "auto",
containerId: "related-post",
newTabLink: false,
widgetStyle: 1,
callBack: function() {}
};
</script>
<script type='text/javascript' src='https://aakyos.googlecode.com/svn/share.js'/>
</b:if>
<!-- Related Post Widget End -->
4. Simpan Template
Perlu di perhatikan Biasanya kode <data:post.body/> ini ada 2 atau lebih. Silahkan anda pilih yang terakhir saja atau kalau bisa dicoba satu persatu dan lihat hasilnya.
Demikian saya sampaikan cara membuat Artikel Terkait Keren dibawah Posting Blog, mohon maaf jika ada kekurangan, semoga bermanfaat!
No comments:
Post a Comment