Kata Share | Mas Sehat | Ston SEO Responsif Blogger Template
» » Cara membuat related post ala Kang Ismet

Cara membuat related post ala Kang Ismet

Tutorial Blog
Saturday 3 May 2014
Belum ada komentar
Cara membuat Related Post ala Kang Ismet - 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.

at

Untuk yang ingin menggunakan ikuti tutorial dibawah ini:


1. Masuk ke akun blogger.com
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 Cara membuat Related Post ala Kang Ismet bisa bermanfaat.
Terima kasih telah membaca artikel tentang Cara membuat related post ala Kang Ismet di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Artikel terbaru :

Kata Share | Mas Sehat | Ston SEO Responsif Blogger Template