-->

Situs Multi Pengetahuan Meliputi Pendidikan, Informasi Teknologi, Tutorial, Serta Pengetahuan Penting Lainya

Membuat Related Post Ala Kang Ismet

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.
Cara Membuat Artikel Terkait
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.

Ya sudah gitu aja, gimana tidak terlalu sulit bukan membuat Artikel terkait/Related post ala kang ismet ini, Nah bagi anda ada yang merasa kesulitan silahkan tanyakan di kolom komentar yang telah saya sediakan, apabila ada kekurangan saya mohon maaf, Happy Blogging

Previous
Next Post »

10 komentar

siti aminah delete June 29, 2014 at 9:20 PM

Langsung di praktekin

Munawir Alfikri delete June 29, 2014 at 9:42 PM

Bah, dak bace bismillah dulu ye min :D

Jumiansyah Arifien delete June 29, 2014 at 11:19 PM

Ini yang saya cari gan.. Thanks banget dah :D

Wahyu Eka Prasetiyarini delete June 30, 2014 at 4:04 PM

keren juga ya related post nya ada efek nya, bisa dicoba nih ;)

Munawir Alfikri delete July 1, 2014 at 12:04 AM

Sama-sama gan :)

Munawir Alfikri delete July 1, 2014 at 12:04 AM

Silahkan di coba mba ririn :)

Mochamad Syarief Maulana delete July 2, 2014 at 10:48 AM

Widih, yang dicari ada juga, langsung praktek ah buat www.alan97.cf

Munawir Alfikri delete July 2, 2014 at 11:00 AM

SIlahkan langsung di coba gan

Yosua Cinaga delete October 29, 2014 at 8:30 PM

Kunjungan balik gan!
public-hacking.blogspot.com

Hasnan Rifki delete December 19, 2014 at 5:25 PM

Alhamdulillah ketemu juga yang saya cari usagi-ku.blogspot.com

Apa tanggapan anda tentang artikel diatas?

 

Contact Form

Name

Email *

Message *