Artikel Terkait atau dikenal dengan nama Releated Post, terletak di bawah postingan Blog atau selesai postingan ini memilik daya tarik bagi pengunjung sebab menampilkan postingan menarik lainnya untuk di baca.
Releated Post mempunyai dua jenis, bergambar dan tidak bergambar. Tergantung dari selera, aku sendiri lebih suka yang bergambar sebab dengan adanya gambar dapat menarik pengunjung untuk membuka atau membaca halaman postingan kita.
Terkait :
Selain itu, dengan memasang widget ini kita dapat mempercantik tampilan pada Blog. Nah, untuk Anda yang sedang mencari widget artikel terkait/Releated Post Anda dapat menemukannya disini
Widget satu ini lebih mempunyai tampilan sederhana tanpa gambar/Tumbhnail, laba yang dapat diambil tanpa adanya gambar ialah dapat meringankan loading blog. Untuk pemasangannya Anda dapat mengikuti panduannya dibawah ini :
1. Log-in ke dashbord Blogger
2. Pilih Template dan Edit HTML
3. Selanjutnya, Anda cari isyarat <head> dan pastekan di bawahnya :
4. Langkah berikutnya, Anda cari isyarat ]]></b:skin> , kemudian copy isyarat CSS di bawah ini dan pastekan diatasnya :
5. Kemudian Anda cari isyarat <data:post.body/>, copy isyarat dibawah ini dan pastekan dibawahnya :
4. Simpan Template
Demikian aku sampaikan cara menciptakan Artikel Terkait Keren dibawah Posting Blog, mohon maaf kalau ada kekurangan, supaya bermanfaat! Sumber http://www.websiteedukasi.com/
Releated Post mempunyai dua jenis, bergambar dan tidak bergambar. Tergantung dari selera, aku sendiri lebih suka yang bergambar sebab dengan adanya gambar dapat 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 dapat mempercantik tampilan pada Blog. Nah, untuk Anda yang sedang mencari widget artikel terkait/Releated Post Anda dapat menemukannya disini
Widget satu ini lebih mempunyai tampilan sederhana tanpa gambar/Tumbhnail, laba yang dapat diambil tanpa adanya gambar ialah dapat meringankan loading blog. Untuk pemasangannya Anda dapat mengikuti panduannya dibawah ini :
1. Log-in ke dashbord Blogger
2. Pilih Template dan Edit HTML
3. Selanjutnya, Anda cari isyarat <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 isyarat ]]></b:skin> , kemudian copy isyarat 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 isyarat <data:post.body/>, copy isyarat 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 isyarat <data:post.body/> ini ada 2 atau lebih. Silahkan anda pilih yang terakhir saja atau kalau dapat dicoba satu persatu dan lihat hasilnya.
Demikian aku sampaikan cara menciptakan Artikel Terkait Keren dibawah Posting Blog, mohon maaf kalau ada kekurangan, supaya bermanfaat! Sumber http://www.websiteedukasi.com/
