Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Menampilkan Artikel Terkait / Related Posts

Cara menampilkan Artikel terkait / Related Post di Blogger
Artikel Terkait atau Related Posts digunakan untuk memudahkan pembaca menemukan artikel pada "label"yang sama. Selain pada label yang sama, related post ini juga membuat random artikel, sehingga bukan hanya artikel yang terkait saja yang akan muncul.

Contohnya seperti gambar dibawah ini:



Pembaca akan langsung bisa menemukan judul postingan kita yang berkaitan dengan judul posting. Hal ini dilakukan supaya mereka tidak lekas-lekas pergi dari blog kita...

Tahu caranya? Saya akan jelaskan satu-persatu :
  1. Back up Template Anda sebelum melakukan perubahan apapun!
  2. Dari Dashboard Blogger Anda Buka > Template > Edit HTML.
  3. Simpan kode ini di atas ]]></b:skin>
  4. #related-post background:none;width:100%;margin-top:35px;margin-bottom:10px;padding:5px 0 10px 0px}
    #related-post h4{font-size:150%;text-transform:uppercase;margin:0 0 15px;padding:0;font-weight:normal}
    #related-post li{background:url(http://4.bp.blogspot.com/-Bt0JYGRHfpk/T7ZpN5RNSQI/AAAAAAAAGJQ/zQtrWVZwgHA/s1600/bullet.png) no-repeat 1px 5px;color:#2c3e50;text-indent:0;line-height:1.6em;margin:0;padding:0 0 3px 19px}
    #related-post .widget{margin:0;padding:0}
    #related-post ul{list-style:none;margin:0;padding:0}
  5. Tambahkan kode berikut dibawah <div class='post-footer-line post-footer-line-1'>
  6. <!-- 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://cdn.rawgit.com/kangismet/javascript/gh-pages/javascripts/related-post.min.js'/>
    </b:if>
    <!-- Related Post Widget End -->
  7. Save, lihat hasilnya...

Untuk membuat Related Posts dengan Thumbnail kik disini.

Enjoy it...
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.