Rizqi Official

Rizqi Official

» » Cara Membuat Artikel Terkait Ala Kang Ismet

Cara Membuat Artikel Terkait Ala Kang Ismet

Unknown
Tutorial Blog
Sabtu, 10 Mei 2014
Belum ada komentar

Cara Membuat Artikel Terkait Ala Kang Ismet - Selamat siang sobat blogger. gimana kabarnya 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! :D

Sekian dari saya, semoga bermanfaat.

0 Response to "Cara Membuat Artikel Terkait Ala Kang Ismet"

Catatan:
• Dilarang menulis link aktif!
• Dilarang ngiklan di kolom komentar!
• Untuk menyisipkan kode pendek, gunakan tag <i rel="code"> ... KODE ... </i>
• Untuk menyisipkan kode panjang, gunakan tag <i rel="pre"> ... KODE ... </i>
• Untuk menyisipkan catatan, gunakan tag <b rel="quote">.. TEKS ... </b>
• Untuk menyisipkan gambar, gunakan tag <i rel="image"> ... URL GAMBAR ... </i>

Sebelum menyisipkan kode silahkan gunakan Tool Konversi Kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar

Emoticon