Saturday, 18 January 2014

Membuat Artikel Terkait Ala Kang Ismet

Cara Membuat Artikel Terkait Ala Kang Ismet - di pagi yang cerah ini saya akan menjawab request teman saya tentang bagaimana sih cara atau trik dan tutorial membuat related post ( artikel terkait ) ala kang ismet .? sebetulnya cara ini sudah ada di blog kang ismet itu sendiri namun di blog kang ismet tutorialnya  masih menggunakan css yang sederhana , al-hasil hasilnya pun sederhana , oke  kali ini saya akan memberikan tutorial kepada anda related post seo , keren dan valid html5 dan css ala kang ismet

Membuat Artikel Terkait Ala Kang Ismet

Berikut Cara Membuat Artikel Terkait Ala Kang Ismet :
1- Pertama sobat harus Simpan kode CSS ini di atas ]]></b:skin> atau </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}

2- Setelah anda pasang kode diatas kemudian langkah selanjutnya adalah sobat pasang HTML ini di bawah kode <data:post.body/> ( biasanya kode tersebut lebih dari 2 , sobat pilih aja yang terakhir atau di coba satu persatu )

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

Oh ya , karena widget related post ini menggunakan font awasome maka anda harus memasang dahulu css awesome ini dibawah kode <head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Langkah Terakhir sebelum anda menyimpannay alangkah baiknya jika anda pratinjau dulu , jika sudah tidak ada kesalahan maka simpan template anda dan lihat hasilnya . Taraaa kini anda sudah dapat Membuat Artikel Terkait Ala Kang Ismet . ( selamat ya )
Diposkan oleh di
Label:

11 comments:

  1. cindy agtifa18 January 2014 at 16:07

    makasih mas tutorial nya saja mau coba praktekan saja ya :D

    ReplyDelete
  2. Friska Lee18 January 2014 at 16:38

    sipp deh mas suyadi saya mau praktek dulu tapi tetap gak bisa ya itu style nya diterap kan ..

    ReplyDelete
    Replies
    1. Ahmad Suyadi18 January 2014 at 18:35

      Bisa mbak , style nya bisa di terapkan ( itu tergantung pada template nya )

      Delete
    2. Friska Lee18 January 2014 at 22:31

      oh gitu ya tapi saya sudah coba mas kalau di mozila tidak tampil tapi saya pake safari kok kelihatan ya mas

      Delete
  3. Muhammad Luthfi18 January 2014 at 22:12

    Kalau sama gambarnya bisa engga mas? soalnya saya blog game nih

    ReplyDelete
  4. Wahyu Eka Prasetiyarini19 January 2014 at 00:56

    wah keren juga ya mas kang ismet itu desain nya artikel terkait :)

    ReplyDelete
    Replies
    1. Ahmad Suyadi19 January 2014 at 06:55

      ya mbak , design kang ismet memang keren semuanya mbak :)

      Delete
  5. Syarif Lee19 January 2014 at 20:19

    buat admin semoga bisa bersabar... karena sedang banyak yang membully... :)

    ReplyDelete
  6. Adhitia Rizki6 February 2014 at 00:11

    sukses mas suyadi, hehe...
    cek di http://btemplates-id.blogspot.com

    ReplyDelete
  7. Udhy Asbudi20 February 2014 at 06:09

    thanks gan , bermanfaat banget :)

    ReplyDelete

Subscribe to: Post Comments (Atom)