Cara Membuat Artikel Terkait Dengan Gambar

Assalamualaikum sob, alhamdulillah akhirnya saya bisa posting lagi untuk hari ini, dan kali ini kita akan membahas artikel yang cukup menarik yaitu cara membuat artikel terkait dengan gambar #keren, hehehe saya sengaja menambahkan "#" pada kata keren karena memang artikel terkait ini menurut saya sangat keren, hehe.

Artikel terkait (related post) ini juga saya gunakan di blog ini, jadi jika ingin melihat demonya, sobat bisa lihat artikel terkait diabawah postingan ini, jadinya bisa lihat langsung deh, haha.

Script artikel terkait ini saya dapat dari blog nya mas taufik nurrohman a.k.a dte.web.id dan saya rasa artikel ini cukup bagus untuk dibagikan, makannya saya repost di postingan kali ini.

Artikel terkait ini sangat spesial, mengapa ?? karena artikel terkait ini sudah dilengkapi dengan gambar, deskripsi, readmore, dan tentunya sobat bisa mengatus tinggi artikel terkait ini (dengan scroll bar atau tidak, itu semua terserah sobat blogger).

Saya beritahukan sekali lagi sob bahwa demo artikel terkait ini seperti artikel terkait blog ini ,jadi kalau sobat berkomentar, jangan tanya lagi "demonya mana ??" Budayakan membaca dahulu sebelum berkomentar (kata banyak blogger).

Demo :

Cara Membuat Artikel Terkait Dengan Gambar #Keren

1. Seperti biasanya, login ke blogger sobat.

2. Dashbord > template > edit html

3. Cari kode </head> dan letakan kode dibawah ini diatas kode 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 = "baca selengkapnya";
     </script>
     <script src='http://reader-download.googlecode.com/svn/trunk/atdeskripsi.js' type='text/javascript'></script>
</b:if>

4. Selanjutnya cari kode class='post-footer'  dan letakan kode diabawah ini diatas kode tersebut.

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

5. Simpan template sobat.

Setelah sobat simpan template, silakahkan cek terlebih dahulu di blog sobat, apakah artikel terkaitnya sudah berhasil atau belum ^_^, jika belum maka "sobat belum beruntung" (Just Kidding) hahahaha.

Salam D-Sh4re | Blogger Demak | Demak Kota Wali | Indonesia  Wkwkwkwkwk