Cara Membuat Artikel Terkait Ala Kang Ismet

Cara Membuat Artikel Terkait Ala Kang Ismet - Selamat siang sobat blogger. Apa kabar nih ? semoga pada sehat-sehat ya . Maaf mimin jarang update,soalnya lagi sibuk sama dunia nyata hehehehe.Nah pada kesempatan kali ini saya akan share Cara Membuat Artikel Terkait Ala Kang Ismet, pada sebelumnya saya sudah share Cara Membuat Artikel Terkait Dengan Thumbnail.Oke langsung saja langkah-langkah di bawah ini di simak baik-baik ya

1. Masuk ke Blogger

2. Pilih Template > Klik Edit HTML

3. Letakkan kode di bawah ini tepat di atas kode </head>

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

#NB : Lewati langkah ini jika Blog agan sudah Terpasang Font awesome

4. Letakan kode ini tepat di atas kode ]]></b:skin>

.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}

5. Langkah terakhir, letakkan kode dibawah ini tepat dibawah kode <data:post.body/>

<!-- 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://bung-rizqi.googlecode.com/svn/trunk/Related-Post.min.js'/>
</b:if>
<!-- Related Post Widget End -->

#NB: Biasanya kode <data:post.body/> ini ada 2 atau lebih. Silahkan agan pilih yang terakhir saja atau kalau bisa dicoba satu persatu.

6. Simpan Template dan Lihat hasilnya!

 تم النشر يوم  السبت، 5 يوليو 2014 ' الساعة  3:37 م

Facebook Twitter Google+ Linkedin Digg Print