Thursday, May 2, 2013

Cara Memasang Widget Artikel Terkait Elegan

Cara Memasang Widget Artikel Terkait Elegan | Setelah kemarin posting mengenai Cara Submit dan Verifikasi Blog di Webmaster Google, pada kesempatan kali ini Saya akan share satu lagi tutorial blog yang tidak kalah pentingnya untuk diterapkan pada sebuah blog, yaitu Cara Memasang Widget Artikel Terkait Elegan seperti yang terlihat pada judul postingan kali ini. Saya katakan elegan karena widget artikel terkait yang satu ini selain ada gambar dari postingan juga dilengkapi dengan deskripsi singkat dari postingan tersebut. Untuk lebih jelasnya bisa Sobat lihat pada SS di bawah ini.
Cara Memasang Widget Artikel Terkait Elegan

Nah, bagi Sobat Blogger yang tertarik untuk mencobanya, silahkan membaca postingan ini sampai selesai dan ikuti langkah-langkah Memasang Widget Artikel Terkait Elegan tersebut.
  1. Untuk hal pertama kali yang harus Sobat lakukan adalah Login ke akun Blogger Sobat masing-masing.
  2. Setelah itu masuk pada menu "Template".
  3. Kemudian cari kode </head> ini di template Sobat.
  4. Setelah ketemu, tambahkan kode di bawah ini tepat di atas kode </head> tadi.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
         <style type='text/css'>
              #related_posts h4              {background:#1e4a76;color:#FFF;font:bold 11px Arial,Tahoma,Verdana;margin:0;padding:5px 7px 4px 10px;text-shadow:1px 1px #000;text-transform:uppercase;}
              #relpost_img_sum               {height:308px;overflow:auto;margin:0;padding:5px;line-height:16px;}
              #relpost_img_sum:hover         {background:none;}
              #relpost_img_sum ul            {list-style-type:none;background:none;margin:0;padding:0;}
              #relpost_img_sum li            {border-top:1px solid #fff;outline:1px solid #DDD5CD;background:#EDE9E4;overflow:hidden;margin:0;padding:5px;height:64px;list-style:none;}
              #relpost_img_sum li:hover      {background-color:#F0ECE9;}
              #relpost_img_sum .news-title a {color:#2C6BA8;}
              #relpost_img_sum .news-title   {font-family:Arial,Serif;font-weight:bold !important;display:block;margin-bottom:4px;}
              #relpost_img_sum .news-text    {display:block;text-align:left;font-weight:normal;text-transform:none;color:#333;}
              #relpost_img_sum img           {float:left;margin-right:14px;padding:4px;background:#fafafa;border:1px solid #ddd;width:55px !important;height:55px !important;}
         </style>
         <script type='text/javascript'>
              var relnojudul = 0;
              var relmaxtampil = 10;
              var numchars = 200;
              var morelink = &quot;baca selengkapnya&quot;;
         </script>
         <script src='http://revan-blog.googlecode.com/files/artikelterkaitelegan.js' type='text/javascript'/>
    </b:if>
  5. Setelah menambahkan kode tersebut, cari kode <div class='post-footer'> pada template Sobat dan tambahkan kode di bawah ini tepat di atasnya. Untuk kode yang satu ini mungkin setiap template akan berbeda-beda. Pada tutorial ini Saya bermaksud menempatkan widget tersebut tepat dibawah postingan. Jadi silahkan Sobat sesuaikan sendiri untuk letaknya dari widget ini nantinya.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
         <div id='related_posts'>
              <h4>Artikel Terkait</h4>
              <b:loop values='data:post.labels' var='label'>
                   <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/>
              </b:loop>
              <ul id='relpost_img_sum'>
                   <script type='text/javascript'>artikelterkait();</script>
              </ul>
         </div>
    </b:if>
  6. Setelah itu silahkan klik "Pratinjau". Apabila tidak terjadi error, maka silahkan simpan hasil editan Sobat tadi dan segera buka blog Sobat untuk melihat hasilnya, karena untuk yang ini tidak bisa dilihat lewat pratinjau.
Demikianlah Cara Memasang Widget Artikel Terkait Elegan kali ini. Semoga bisa bermanfaat untuk kita bersama. Apabila ada yang ingin ditanyakan jangan segan-segan untuk menyampaikannya. Silahkan gunakan form komentar dengan sebaik-baiknya. :)

Artikel Terkait

9 komentar

Wuih, Lumayan nie untuk memperindah blog.
Btw, nie memperberat loading blog ga gan?

sejauh ini tidak memberatkan blog Sob, tapi itu juga tergantung template masing2 Sob.,

Boleh juga nih tutorialnya buat di praktekin di blog baruku.

Silahkan Sobat., semoga bisa membantu memperindah blog Sobat., :)

thanks kunjungannya Sob., :D

Bagus bentuk artikel terkaitnya. Kalau untuk yang di atas bagian share this itu termasuk juga gak ya?
terimakasih

hehe, kalau bagus di pakai aja mas., :)
untuk tombol share nya terpisah mas.,

keren juga om..., tapi koq ga ada thumbnail ya...

jika sebelumnya sudah ada artikel terkait tp setandar gimana menggantinya gan? salam dari GEMA SHOLAWAT SANTRI

- Dilarang SPAM

- Dilarang Pasang Link Aktif

- Harus Sopan.
EmoticonEmoticon