Cara Membuat Artikel Terkait Keren Ala Kang Ismet di Blog

Tampilan Artikel Terkait

Cara Membuat Artikel Terkait Keren Ala Kang Ismet di Blog - Selamat Pagi sobat Blog Bang Billy semuanya.. apa kabar nih? pastinya sehat² ajakan? mimin doa'in yang lagi sakit²'an semoga disembuhkan kembali dan bisa Beraktivitas kembali ya. Maaf ya Akhir² ini mimin jarang posting artikel soalnya Fokus ke UN sebentar. Nah, pada pensaran kan apa topik yang kita akan bahas pada kali ini??? yup bener! yaitu Cara Membuat Artikel Terkait Keren Ala Kang Ismet di Blog. Artikel terkait ini cukup elegan loh sobat! tapi inget yak liat² template sobat dulu! cucok nggak dengan Artikel Terkait ini :D udah pada penasarankan tutorialnya seperti apa.. yuk langsung aja kita ke tutorialnya ciattt..

DISIMAK BAIK² YA GAN! ^_^

1. Masuk ke Blogger

2. Pilih Template > Klik Edit HML

3. Letakkan kode dibawah ini tepat diatas 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. Eiitt! jangan disimpen dulu, Letakkan kode ini juga tepat diatas 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. Langah 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://kang-is.googlecode.com/svn/trunk/javascript/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 dan lihat hasilnya sebaiknya jika ingin mencoba gunakan tombol Pratinjau Template seperti gambar dibawah ini : 

6. Simpan Template dan Lihat hasilnya! :D

 UPDATE ARTIKEL 22 APRIL 2014

Jika Ingin Mengubah Warna Artikel Terkaitnya silahkan agan simak Cara ke 4 yaitu ada Kode : 

• background:#9dcb63 = Hijau Tua
• background-color:#8db857 = Hijau Muda 

Silahkan Cari kode warna yang agan inginkan Disini 

Nah Blognya jadi tambah amazing deh :D yee... sekian dulu ya sobat pelajaran kita tentang Cara Membuat Artikel Terkait Keren di Blog Jika ingin Request Artikel harap menuju kesini. Terimakasih atas kunjungannya sebelumnya.. see u next post sobat! ^_^

Tweet