Membuat Related Post atau Artikel terkait di Bawah Postingan Pada Blogger

No Comments
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 ,

Membuat Related Post atau Artikel terkait di Bawah Postingan Pada Blogger



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:

Membuat Related Post atau Artikel terkait di Bawah Postingan Pada Blogger


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/AVvXsEj-EPlSt9xxHvXoWyAn-huMDDVZAAVMMDp2F4-3ZcPhCtj5aymCPAbY4BINswD_M1Cci09U4G2fcnYuNYJc7ZsyI1pAuinjDVIeTYMMR54C0-Wth2ZqVDWDFiQDUWRN0jKNwoO6cRslSCM/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

back to top