Monday, 2 June 2014

Cara Membuat Related Post

related-post

Pada kali ini saya akan memberi sedikit tutorial untuk membuat Related Post, memang sih tutorial ini sudah banyak yang nge-share. yah, daripada tidak ada kerjaan ya lebih baik saya sedikit berbagi tutorial.

Oke daripada berlama-lama, mending langsung saja menuju langkah membuatnya.

Tutorialnya :

1. Lebih baik anda memback up Template Anda sebelum melakukan cara ini
2. Terus anda bukalah menu Edit HTML blog anda
3. Simpan kode berikut ini diatas ]]></b:skin>

/* CSS Related Post */
.related-post {
margin:0em auto 0;
font-size:13px;
background:rgb(29,33,36);
margin-left:5px;
margin-right:5px;
margin-bottom:9px;
}
.related-post h4 {
font-size:15px;
margin:0 0 .5em;
color:#fff;
padding:14px 20px 14px 75px;
font-weight:normal;
position:relative;
text-transform:uppercase;
background:rgb(10,11,13);
}
.related-post h4:before {
content: "f074";
font-family:fontAwesome;
font-size:19px;
font-style: normal;
background-color:#494A5D;
color:#fff;
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 rgb(10,11,13);
}
.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;
}
4. Tambahkan kode berikut dibawah <div class='post-footer-line post-footer-line-1'>

<!-- 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 -->
5. Kemudian save dan lihat hasilnya

Jika ada kekuranggan saya minta maaf, dan silahkan bertanya jika ada keraguan

~ ATURAN BERKOMENTAR ~

1. Dilarang menulis link aktif
2. Dilarang ngiklan di kolom komentar
3. Komentar yang hanya titip link, akan dimasukan ke kotak SPAM
4. Berkomentar sesuai tema artikel, untuk OOT sebaiknya cari tempat lain

Untuk menyisipkan QUETO,CODE,PRE,GAMBAR,VIDEO. silahkan gunakan cara berikut :

<b rel="quote">Tulis catatan di sini</b>
<i rel="code">Tulis kode yang sudah diparse di sini</i>
<i rel="pre">Tulis kode yang sudah diparse di sini</i>
<i rel="image">Tulis URL gambar di sini. gunakan HTTP:// jangan HTTPS://</i>
<i rel="youtube">Tulis URL Video Youtube di sini. gunakan HTTP:// jangan HTTPS://</i>

Terima kasih telah berkomentar.

Out Of Topic Konversi

Terima kasih telah berkomentar