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.

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. :)