» » Cara Membuat Artikel Terkait Keren di Postingan Blog

Cara Membuat Artikel Terkait Keren di Postingan Blog

Edit
Artikel Terkait atau dikenal dengan nama Releated Post, terletak di bawah postingan Blog atau akhir postingan ini memilik daya tarik bagi pengunjung karena menampilkan postingan menarik lainnya untuk di baca.

Releated Post memiliki dua jenis, bergambar dan tidak bergambar. Tergantung dari selera, saya sendiri lebih suka yang bergambar karena dengan adanya gambar bisa menarik pengunjung untuk membuka atau membaca halaman postingan kita.

Terkait :

Selain itu, dengan memasang widget ini kita bisa mempercantik tampilan pada Blog. Nah, untuk Anda yang sedang mencari widget artikel terkait/Releated Post Anda bisa menemukannya disini


Widget satu ini lebih memiliki tampilan sederhana tanpa gambar/Tumbhnail, keuntungan yang bisa diambil tanpa adanya gambar adalah bisa meringankan loading blog. Untuk pemasangannya Anda bisa mengikuti panduannya dibawah ini :

1. Log-in ke dashbord Blogger
2. Pilih Template dan Edit HTML
3. Selanjutnya, Anda cari kode <head> dan pastekan di bawahnya :

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

4. Langkah berikutnya, Anda cari kode  ]]></b:skin> , lalu copy kode CSS di bawah ini dan pastekan diatasnya :

.related-post{margin:0em auto 0;font-size:14px;background:#fff;border-radius:4px}
.related-post h4{font-size:14px;margin:0 0 .5em;background:#285BFC;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:#285BFC;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:#1A1A1A;text-decoration:none}
.related-post-style-1 li a:hover{color:#285BFC;text-decoration:none}
.related-post-style-1 li:before{content:"\f08e";font-family:fontAwesome;color:#1A1A1A;font-style:normal;top:0;left:0;margin-right:13px}

5. Kemudian Anda cari kode <data:post.body/>, copy kode dibawah ini dan pastekan dibawahnya :

<!-- 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://aakyos.googlecode.com/svn/share.js'/>
</b:if>
<!-- Related Post Widget End -->

4. Simpan Template
Perlu di perhatikan Biasanya kode <data:post.body/> ini ada 2 atau lebih. Silahkan anda pilih yang terakhir saja atau kalau bisa dicoba satu persatu dan lihat hasilnya.

Demikian saya sampaikan cara membuat Artikel Terkait Keren dibawah Posting Blog, mohon maaf jika ada kekurangan, semoga bermanfaat!

Subscribe to receive free email updates:

0 Response to "Cara Membuat Artikel Terkait Keren di Postingan Blog"

Post a Comment

Subscribe to: Post Comments (Atom)