cara membuat artikel terkait dengan gambar

Share This

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 , 


Script artikel terkait ini saya dapat dari blog http://www.mestiqui.com  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).



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



Itulah artikel Cara Membuat Artikel Terkait Dengan Gambar jika sobat masih ada pertanyaan-pertanyaan silahkan sampaikan lewat pesan komentar dibawah, terimakasih, semoga bermanfa'at dan wassalamualaikum