Membuat Artikel Terkait ala Kang Ismet Valid HTML 5

Membuat Artikel Terkait ala Kang Ismet Valid HTML 5

Membuat Artikel Terkait ala Kang Ismet Valid HTML 5 - Memasang Artikel Terkait atau Related Post sangatlah penting dimana pengunjung bisa membaca artikel lainnya yang masih berhubungan dan tentunya membuat pengunjung bisa betah untuk membaca artikel yang bermanfaat lainnya. Untuk DEMO bisa lihat pada bagian bawah postingan :)

Untuk yang ingin menggunakan ikuti tutorial dibawah ini:
1. Masuk ke akun Blogger
2. Pilih Template dan Edit HTML
3. Silahkan simpan kode CSS dibawah ini di atas kode ]]></b:skin> atau kode </style>

.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:#9dcb63;
 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:#8db857;
 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:#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. Letakkan kode berikut diatas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

5. Cari kode <data:post.body/> Dan letakan kode HTML berikut tepat dibawahnya.

Biasanya ada 3 atau 4 kode tersebut silahkan letakkan pada kode nomor 2 atau yang sudah ada  tinggal mengganti kode HTML dibawah ini 

<!-- 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 -->

Pada tulisan Artikel Terkait anda bisa menggantinya dengan keinginan anda dan numPosts: 5 adalah jumlah yang akan ditampilan.
6. Simpan Template

Semoga Postingan tentang Membuat Artikel Terkait ala Kang Ismet Valid HTML 5 bisa bermanfaat.