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/AVvXsEhYYgyU_cfZhktePV5dVtD-YGiftHSdi86niKTDt8S9FGqFULWzCgatCnlOBCjQnH25UM18iSRqrwejOhj1pBMko5AadUUdhEQ9GtsE70naQNxQ2liyJNkOYg8IzKfa0GO6iHonHnR7Pm8/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 == "item"'>
<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: 7,
titleLength: "auto",
containerId: "related-post",
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
