Cara Membuat Related Post

gtrslnc

Tricks Blogger, Tutorial

Monday 2 June 2014

Belum ada komentar

Pada kali ini saya akan memberi sedikit tutorial untuk membuat Related Post, memang sih tutorial ini sudah banyak yang nge-share. yah, daripada tidak ada kerjaan ya lebih baik saya sedikit berbagi tutorial.

Oke daripada berlama-lama, mending langsung saja menuju langkah membuatnya.

Tutorialnya :

1. Lebih baik anda memback up Template Anda sebelum melakukan cara ini
2. Terus anda bukalah menu Edit HTML blog anda
3. Simpan kode berikut ini diatas ]]></b:skin>

/* CSS Related Post */
.related-post {
margin:0em auto 0;
font-size:13px;
background:rgb(29,33,36);
margin-left:5px;
margin-right:5px;
margin-bottom:9px;
}
.related-post h4 {
font-size:15px;
margin:0 0 .5em;
color:#fff;
padding:14px 20px 14px 75px;
font-weight:normal;
position:relative;
text-transform:uppercase;
background:rgb(10,11,13);
}
.related-post h4:before {
content: "f074";
font-family:fontAwesome;
font-size:19px;
font-style: normal;
background-color:#494A5D;
color:#fff;
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 rgb(10,11,13);
}
.related-post-style-1 li a{
color:#79798d;
text-decoration:none;
}
.related-post-style-1 li a:hover{
color:#33aea5;
text-decoration:none;
}
.related-post-style-1 li:before {
content: "f08e";
font-family:fontAwesome;
color:#c7cbd4;
font-style: normal;
top:0;
left:0;
margin-right:13px;
}

4. Tambahkan kode berikut dibawah <div class='post-footer-line post-footer-line-1'>

<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <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'>
          &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: 5,
      titleLength: &quot;auto&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      widgetStyle: 1,
      callBack: function() {}
  };
  </script>
  <script type='text/javascript' src='https://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js'/>
</b:if>
<!-- Related Post Widget End -->

5. Kemudian save dan lihat hasilnya

Jika ada kekuranggan saya minta maaf, dan silahkan bertanya jika ada keraguan