Membuat Artikel Terkait Ringan dan Keterangan Bergambar di Blog

Bagikan :

Tweet

Salam sehat buat para blogger indonesia kali ini saya menuliskan artikel yang berjudul membuat artikel terkait ringan dan keterangan bergambar di blog yang keren dan enak di lihat di blog anda.
membuat artikel terkait ringan dan keterangan bergambar di blog | Bungas Selalu berbagi   kali ini kita akan membahas bagaimana membuat artikel terkait dengan gambar dan keterangan yang bagus untuk di letakkan di Blog Anda.

Langkah Membuat Artikel Terkait Dengan Gambar dan Deskripsi untuk Blogger :

1. Buka akun Blogger.

2. Masuk ke menu template,edit HTML karna tampilan blogger sekarang terupdate jadinya gak ada expand widget langsung saja tekan Ctrl + F dan,

3. Cari kode dibawah ini :

      </head>
  
4. Diatas </head> pastekan kode dibawah ini :

<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 = "baca selengkapnya";
     </script>
     <script src='http://reader-download.googlecode.com/svn/trunk/atdeskripsi.js' type='text/javascript'></script>

</b:if>

  
5. Selanjutnya cari salah satu kode dibawah ini  :

    <data:post.body/>

Keterangan :

Biasanya kode diatas ada banyak kurang lebih 3-4 tergantung tamplate anda, maka cari pada kode ke 2 ataupun 4. Tergantung pada pembentukkan template Anda. Tapi saya menggunakan yang ke-2. Jika tidak bisa maka Anda harus mencobanya satu per-satu.

6. Jika sudah dilakukan maka pastekan kode dibawah ini, dibawah kode <data:post.body/>  :

<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'></script>
          </b:loop>
          <ul id='relpost_img_sum'>
               <script type='text/javascript'>artikelterkait();</script>
          </ul>
     </div>
</b:if>

Hasil nya akan seperti gambar dibawah ini :

 

7. Jika sudah selesai, klik Simpan Template.

8. Satu lagi yang berwarna biru ubah sesuai dengan keinginan anda.

9. Selesai. Selamat mencoba by +Bungas Zahid 

Tag : Dunia Blogger