CARA MEMBUAT RELATED POST BLOG

Ini artikel hanya iseng-iseng aja sobh soalnya udah kehabisan ide nih, hehe. Oh iya siapa yang tidak kenal dengan blogger yang paling Top di Indonesia yaitu Kang ismet ( Blog.kangismet.net ) dengan tampilan template dari blog kang ismet itu, banyak juga blogger-blogger yang mengclone template kang ismet itu, mengapa? Ya jelas, orang template kang ismet itu keren hehe.

Ya sudah gak usah ngomongin orang lagi ah! lebih baik kita langsung saja menuju pembahasan, yaitu cara membuat related post ala kang ismet , seperti yang saya bilang tadi , tampilan blog kang ismet kan keren tuh, yang jelas related post dari kang ismet ini pasti keren banget dong, Sampai-sampai saya juga memakai related post dari kang ismet hehe.

Baiklah tidak usah banyak cincong lagi mari kita hajar, yang pertama tama yang harus kita lakukan adalah logging ke akun blogger masing-masing yang jelas hehe itu pasti wajib dong.

1. Yang pertama adalah , Pilih langsung Template Edit HTML.
    dan tambahkan kode ini, tepat di atas kode </head>

<link href='https://kang-is.googlecode.com/svn/trunk/css/font-awesome.min.css' rel='stylesheet'/>

2. Kemudian Letakkan Kode dibawah ini, tepat Di atas kode <data:post.body/>  Biasanya kode ini ada 3 bagian, cari kode yang paling bawah.

<!-- Related Post Widget Start -->
<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://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js' type='text/javascript'/>
</b:if>
<!-- Related Post Widget End -->

3. Nah, apabila kode di atas sudah anda masukkan kemudian kita akan memasukkan CSS nya lagi, agar kelihatan lebih keren dan menarik hehe. Silahkan anda masukkan CSS nya tepat di atas kode </style> atau ]]></b:skin>.

/* RELATED POST PUNYE KANG ISMET */
.related-post {margin:2em auto 0;font-size:15px;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. Semua nya sudah selesai, yang terakhir adalah Simpan Template.

Bagikan Artikel ini