Membuat Related Post atau Artikel terkait di Bawah Postingan Pada Blogger

Membuat Related Post atau Artikel terkait di Bawah Postingan Pada Blogger - Kemarin ada yang Request Tutorial di Ruang NGOPI (NGObrol sambil minum koPI) Request tentang Bagaimana Membuat Artikel Terkait / Related Post Seperti blog ini . Baiklah akan saya bagikan di tutorial kali ini ,

Apa Itu Artikel Terkait / Related Post

Artikel Terkait / Related Post adalah bisa dikatakan widget yang berfungsi untuk memudahkan pengunjung untuk mencari artikel yang serupa/sama ketika setelah membaca salah satu postingan jadi cara kerjanya artikel terkait ini adalah sesuai dengan label/kategori yang sudah anda setting pada setiap postingan di blogger

Demo Widget Artikel Terkait/Related Post

Demo Artikel Terkait ini seperti gambar berikut:

Related Post disini Scriptnya akan membaca secara acak dan sesuai label tentunya jadi artikel terkait ini tidak membaca secara artikel yang terbaru , dengan demikian Postingan lama dapat muncul di related post ini

Cara Memasang Related Post

1. Copy  Kode CSS dibawah tepat di atas kode </b:skin> atau </style>

/*TERKAITNYA LTB*/
#related-post {
margin:2em auto 0;
font-size:13px;
background:#fff;
border-radius:4px;
}
#related-post h4 {
font-size:14px;
margin:0 0 .5em;
background:#34495e;
color:#fff;
padding:14px 20px 14px 15px;
font-weight:normal;
border-radius:4px 4px 0 0;
position:relative;
font-family:Oswald,Arial, Sans-Serif;
text-transform:uppercase;
}
#related-post li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjDE-_oNrS410Hzj-S3RTXCW9sLssus8foINQpuhiLeg_jZ4kcQBa7D20UOnZdSvZ6MKVhkke1sWahhdMHBNPP5eTjGDm3Puiv-I8WKRGYdpDZqkJz4_-h-ZhzziI5_awFBD5mEgHjhC0/s1600/bullet-Relatedpost-LTB.png) no-repeat 1px 2px;color:#2c3e50;}
#related-posts ul li a{
padding: .4em .4em .4em .8em;
position: relative;
transition: all .3s ease-out;  
display: block;
margin: 0em 0 .5em 2em;
color: #444;
*padding: .4em;
text-decoration: none;
background: #fff;
}
#related-post ul{list-style:none;margin:0px; padding:10px 15px;}
#related-post ul li a{
padding: .4em .4em .4em .8em;
position: relative;
transition: all .3s ease-out;  
display: block;
margin: 0em 0 .5em 2em;
color: #444;
*padding: .4em;
text-decoration: none;
background: #fff;
}
#related-posts ul li a:before{  
top: 50%;
margin-top: -1em;
left: -2.5em;
font-weight: bold;
background: #c0392b;
height: 2em;
line-height: 2em;
width: 2em;
position: absolute;
text-align: center;
}
#related-post ul li a:after{
border: .5em solid transparent;
position: absolute;
top: 50%;
content: '';
left: -1em;
transition: all .3s ease-out;
margin-top: -.5em;              
}
#related-post ul li a:hover{
background: #FF6B57;
}
#related-post ul li a:hover:after{
border-left-color: #FF6B57;
left: -.5em;
}

2. Kemudian Cari Kode berikut <div class='post-footer-line post-footer-line-1'> Jika tidak ada ,Cari kode <data:post.body/> atau bisa juga <div class='post-footer'> Dan letakan Kode Berikut tepat dibawahnya :

<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: &quot;<data:blog.homepageUrl/>&quot;,
widgetTitle: &quot;&lt;h4&gt;Artikel Terkait:&lt;/h4&gt;&quot;,
numPosts: 7,
titleLength: &quot;auto&quot;,
containerId: &quot;related-post&quot;,
newTabLink: false,
widgetStyle: 1,
callBack: function() {}
};
</script>
<script src='https://googledrive.com/host/0B2KamfXIslknRkxBVTNtOE54azg/labeltutorial-relatedpost.js' type='text/javascript'/>
</b:if>
<!-- Related Post Widget End -->

3. Simpan Template dan Lihat hasilnya

Semoga ada manfaatnya , salam labeltutorialcom

Incoming Tutorial :

- Membuat Related Post dengan Thumbnail atau gambar


Script related by: +Taufik Nurrohman
Author : +Asep Septian