Cara Buat Recent Post dengan Thumbnail seperti blog berita

SAMOSIRKU

SAMOSIR - Lama Sudah Bang Ganteng tidak buat postingan, kali ini bang ganteng akan buat postingan tengan tutorial membuat recent post berdasarkan label dengan gambar mirip-mirip blog berita terkenal (katanya) okezone.

Ok langsung saja kita mulai.

Langkah pertama seperti biasa buka template blog saudara, kemudian klik edit html dan jangan lupa diback up terlebih dahulu templatenya, menjaga agar template dapat dikembalikan jika terjadi kesalahan atau error.

setelah dibuka, cari kode ]]></b:skin> kemudian pastekan kode berikut tepat di atasnya :



#label1-wrapper{width:250px;float:left;word-wrap:break-word;overflow:hidden}
#label2-wrapper{width:250px;float:left;word-wrap:break-word;overflow:hidden}
.labelbox {background:#fff;border:1px solid #bebebe;width:230px;padding:0px;margin:0px}
.labelbox h3{font:bold 14px Arial;text-transform:none;color:#333;line-height:1.2em;letter-spacing:.01em;background:url(http://3.bp.blogspot.com/-ogcZLzJaG4U/T4RM-CJ5o6I/AAAAAAAAAbg/srtfctWVOdo/s1600/sidebar-bg.png) repeat-x bottom;margin:0 auto;border-bottom:1px solid #bebebe;padding:7px 10px}
.labelbox h1 a,.catbox-even h1 a:visited{color:#333}
.labelbox h1 a:hover{color:#1da7e7}
.labelbox li{border-bottom:1px solid #ddd;font-size:12px;background:url(http://4.bp.blogspot.com/-CetnW4aSnp4/Tzzms5OvwvI/AAAAAAAAFTo/C_Q4Y90axkI/s1600/arrowList_2.gif) no-repeat 0 4px;margin:0 10px;padding:5px 0 5px 11px}
.labelbox ul li a:hover{color:#1da7e7}
.labelbox li.first{display:block;font-family:Arial,serif;font-size:12px;border-top:0;background:none;padding:0}
.labelbox .entry-thumb{float:left;margin-right:10px}
.labelbox .entry-title{font-size:13px}
.labelbox .entry-excerpt{display:block}
.labelbox h2 a:hover{color:#1da7e7;text-decoration:none}
.labelbox ul{list-style:none;padding:0}
.labelbox h2 a,.catbox-even h2 a:visited,.labelbox ul li a,.labelbox ul li a:visited{color:#000;text-transform:none}

Sesuaikan lebarnya dan kemudian carilah kode </head> dan letakkan script dibawah ini tepat diatasnya.




<script src='http://my-project-favicon.googlecode.com/files/sllb2.js' type='text/javascript'/>

setelah melakukan hal di atas cari kode di bawah ini :



</b:widget>
</b:section>
</div>
<div id='sidebar-wrapper'>

  1. Pusatkan Perhatian anda pada kode </b:section> saja karena tidak semua template memiliki kode yang sama akan tetapi pada dasarnya agan-agan harus tahu kode </b:section> ini berada dalam section/bagian apa, dan yang harus dicari disini adalah dibawah kode </b:section> dari section/bagian <b:section class='main' id='main' showaddelement='no'> yang didalamnya terdapat widget postingan, ini merupakan bagian yang paling panjang dalam template dan di akhiri dengan </b:section>. dan itulah kode </b:section> itu yang saya maksud.
  2. jika kurang ngerti silahkan ambil dulu secangkir kopi kemudian duduk santai dan berangan-angan untuk rileks. 
  3. Sudah siap minum kopinya??? Agan-agan silahkan download lengkap dulu templatenya dan buka pada notepad, maka disana akan kita tau section/bagiannya dengan cara ctrl F.
Lalu silahkan Pastekan kode dibawah ini tepat dibawahnya :



<div id='label1-wrapper'>
<b:section class='label1' id='label1' preferred='yes'>
<b:widget id='HTML26' locked='false' title='Label 3' type='HTML'>
<b:includable id='main'>
<div class='labelbox'>
<script>
document.write(&#39;&lt;h3 class=&quot;catbox-title&quot;&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=10&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h3&gt;&#39;);
</script>
<ul>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts4+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts5\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</ul>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML28' locked='false' title='Label 5' type='HTML'>
<b:includable id='main'>
<div class='labelbox'>
<script>
document.write(&#39;&lt;h3 class=&quot;catbox-title&quot;&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=10&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h3&gt;&#39;);
</script>
<ul>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts4+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts5\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</ul>
</div>
</b:includable>
</b:widget>

</b:section>
</div>
<div id='label2-wrapper'>
<b:section class='label2' id='label2' preferred='yes'>
<b:widget id='HTML27' locked='false' title='Label 4' type='HTML'>
<b:includable id='main'>
<div class='labelbox'>
<script>
document.write(&#39;&lt;h3 class=&quot;catbox-title&quot;&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=10&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h3&gt;&#39;);
</script>
<ul>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts4+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts5\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</ul>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML29' locked='false' title='Label 6' type='HTML'>
<b:includable id='main'>
<div class='labelbox'>
<script>
document.write(&#39;&lt;h3 class=&quot;catbox-title&quot;&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=10&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h3&gt;&#39;);
</script>
<ul>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts4+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts5\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</ul>
</div>
</b:includable>
</b:widget>

</b:section>
</div>

Langkah berikutnya silahkan masuk ke tata letak dan treng, akan muncul box widget yang hanya diisi dengan Label saudara. contoh seperti di bawah ini :





demkian sedikit tentang tutorial ini, semoga membantu agan-agan sekalian. terimakasih salam dari Bang Ganteng sejagad. hahahaha


No comments:

Write a Comment

Mohon Komentar yang diberikan tidak berbau SARA dan Penghinaan. terima kasih


Top