MNeDKmj8lHT6qXRaQ6HYfuTER1g Cara Membuat Artikel Terkait Ala Kang Ismet Valid HTML 5 ~ Maulana Gols Blog
Sunday 9 March 2014

Cara Membuat Artikel Terkait Ala Kang Ismet Valid HTML 5

Membuat Artikel Terkait ala Kang Ismet Valid HTML 5 - Artikel terkait seperti ini sudah ditemukan di blognya kang ismet pada template yang masih digunakan sampai sekarang, artikel terkait seperti ini ternyata banya juga peminatnya termasuk saya juga :D. oleh karena itu saya menggunakan artikel terkaitseperti ini juga

yuk jika ingin tau bagaimana cara buat nya silahkan ikuti langkah dibawah ini 


Cara Membuar Artikel Terkait Ala Kang Ismet Valid HTML 5

1. Masuk ke akun Blogger > dahsboard
2.  Template dan Edit HTML
3. Taruh kode dibawah ini diatas kode  ]]></b:skin> atau kode </style>

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

4.  jika belum ada jquery silahkan taruh kode dibawah ini diatas kode </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>


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

Biasanya ada 3 atau 4 kode. taruh saja kodenya di bawah kode <data:post.body/> yang terakhir


<!-- 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 -->


6. silahkan simpan template anda.


Oke sekian dulu dari saya. semoga dapat bermanfaat bagi anda semua dan Terimakasih
Share This Article Facebook +Google Twitter Digg Reddit

6 komentar

Wahh Keren Om Ramzi :D

wah keren patut dicoba tuh

silahkan mas untuk dicoba

Wah ini dia yang gw cari gan :D

mantap gan.
kapan-kapan saya coba.
jangan lupa kunjungan baliknya :)

Terimakasih sudah berkunjung di blog ini
untuk peraturan komentar ada dibawah

-jangan menaruh link aktif maupun mati
-berkomentarlah sesuai dengan topik yang dibawah
-tidak diperbolahkan berkomentar dengan menambah/ada unsur sara
-jika anda ingin memperoleh backlink silahkan berkomentar dengan openid atau name/url

Thanks