- Blog Personal Informations

19 June 2013

Artikel Terkait di bawah Postingan Dengan Tumbnail

Membuat artikel terkait dengan gambar di bawah postingan
Artikel Terkait Di bawah postingan

Artikel Terkait - Saya pernah membuat posting yang sama seperti ini, yaitu Membuat artikel terkait dengan mini icon. di antara dua artikel terkait ini memang sama memiliki Fungi Scroll secara otomatis. bagi sobat yang lebih memilih ini silahkan di COPAZ saja.. lah wong saya juga copaz kok.. hehee namun saya rubah dengan narasi dan gaya bahasa sendiri..


  • Seprti biasa login ke Blogger.
  • Klik Menu Template dan pilih Edit HTMLCari kode </head> dan taruh langsung kode di bawah ini tepati di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related_posts h4{background:#BDBDBD; 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:#FAFAFA; overflow:hidden; margin:0; padding:5px; height:64px; list-style:none}
#relpost_img_sum li:hover{background-color:#F2F2F2}
#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://reader-download.googlecode.com/svn/trunk/atdeskripsi.js' type='text/javascript'/>
</b:if>
Kode: di atas dapat sobat rubah style dan warnanya, bisa kesini untuk pemilihan warna Kode Warna Blog

  • Selanjutnya Cari lagi kode div class='post-footer-line post-footer-line-1 taru kode di bawah ini di bawah kode div class='post-footer-line post-footer-line-1 tadi..
  • Jika penerapankode tersebut tidak befungsi, sobat dapat cari kode <data:post.body/> sama seperti penerapan artikel terkait sebelumnya..


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

  • Langkah terakhir SAVE. 

Demikian tadi adalah cara membuat Artikel terkait Di bawah postingan dengan Tumbnail.  semoga bermanfaat dan salam sukses... langsung mau tidur nih saya begadang malam habis main SOBBET. ya Kalah Ya ngantuk, Ya laper Ya gitu dehhhh...

Previous
Next Post »