Cara Membuat Artikel Terkait Ala Kang Ismet Valid HTML 5

Unknown

Blogging

Sunday 9 March 2014

6 Komentar

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 

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