Saturday 22 February 2014

Cara Membuat Artikel Terkait Yang Simple

14:38    

Disini saya akan berbagi tips kepada sobat blogger, tentang cara membuat artikel terkait di blogger, gimana sih caranya?? kita simak bersama cara-caranya di bawah ini,,



 Langkah-langkah membuat artikel terkait :

 1. Pertama buka setelan, Template pilih Edit HTML.
2. Lalu cari kode seperti ini <data:post.body/>, (untuk lebih mudah mencari kode gunakan Ctrl+F)
3. Kemudian copy paste kode berikut ini tepat di bawah kode <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='related-post' id='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 src='https://tugasku4u.googlecode.com/files/Related-post-Valid-HTML5.js' type='text/javascript'/></b:if>
4. Setelah itu cari kode seperti ini ]]></b:skin> atau </style>
5. Kemudian copy kode dibawah ini, tepat di atas kode ]]></b:skin> atau </style>
 .related-post { margin:0 auto; font-size:13px; background:#fff; border-radius:4px}
.related-post h4 {margin:0 0 10px;border-bottom:4px solid #999;color:#333;padding:6px 20px 6px 5px;font-weight:normal;position:relative;font-family:Oswald,Arial, Sans-Serif;text-transform:uppercase}
ul.related-post-style-1 {padding-left:0 !important; margin-top:-12px}
.related-post-style-1 li {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4o7aBY8OoyP_CccGaonM9JG47nbQizuoHiNRKLZKX0xqrRlrhyphenhypheny2u1KMofvO7zRUlaLZbbNhia8GcXD9y_qW5FJrLE8xkhorXBvD_POjA_W7yiNgIwYYq3k4xBxJC9wIBf4C0p29VsVM/s1600/Art-tugasku4u.png) no-repeat 8px 14px;list-style:none; padding:10px 20px 8px 30px; border-top:1px solid #eceef5}
.related-post-style-1 li a{ color:#555; text-decoration:none}
.related-post-style-1 li a:hover{ color:#39a6f3; text-decoration:none}
6. Setelah selesai simpan template tersebut.

Total Pageviews