Cara Membuat Recent Post Di atas Posting Blog

Assalamualaikum wr.wb. Kali ini saya akan memberikan tutorial Cara Membuat Recent Post Di atas Posting Blog, cara ini sebenarnya sudah sering dipakai berbagai template yang sudah ada namun saya kesulitan untuk menemukan tutorialnya nah karena dari itu saya mencoba menggabungkan 3 tutorial sekaligus yaitu

• widget recent post sesuai label
• cara membuat widget sejajar
• dan juga, cara membuat widget diatas posting blog

Dan hasilnya seperti dibawah ini

 Live Demo

Ya,walaupun membuat widget ini cukup mudah bagi para mastah tapi bagi nubi seperti saya ini sudah cukup menyenangkan. Jadi jika anda ingin menambahkan widget ini ke blog anda saya sudah menyiapkan 2 cara buat anda

 CARA PERTAMA : via tata letak

jika di blog anda sudah ada tempat untuk menaruh widget diatas posting blog,anda hanya harus menaruh script ini ke dalam widget tersebut

<table><tr>
<td>
<div style="overflow:auto; width:200; height:150px; padding:5px;border:5px solid #000000; font-family:arial; font-size:15px; font-color:#0000FF;">
    <script style="text/javascript">
    var numposts = 10;
    var standardstyling = true;
    </script>
    <script type='text/javascript' src='http://lirik-dulu.googlecode.com/files/Recentpost-label.js.htm'></script>
    <script src="http://infomenarikdanbermanfaat.blogspot.com/feeds/posts/default/-/tutorial blog?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
    </div>
</td>
<td>
<div style="overflow:auto; width:200; height:150px; padding:5px;border:5px solid #000000; font-family:arial; font-size:15px; font-color:#0000FF;">
    <script style="text/javascript">
    var numposts = 10;
    var standardstyling = true;
    </script>
    <script type='text/javascript' src='http://lirik-dulu.googlecode.com/files/Recentpost-label.js.htm'></script>
    <script src="http://infomenarikdanbermanfaat.blogspot.com/feeds/posts/default/-/tutorial blog?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
    </div>
</td>
<td><div style="overflow:auto; width:200; height:150px; padding:5px;border:5px solid #000000; font-family:arial; font-size:15px; font-color:#0000FF;">
    <script style="text/javascript">
    var numposts = 10;
    var standardstyling = true;
    </script>
    <script type='text/javascript' src='http://lirik-dulu.googlecode.com/files/Recentpost-label.js.htm'></script>
    <script src="http://infomenarikdanbermanfaat.blogspot.com/feeds/posts/default/-/tutorial blog?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
    </div></td>
</tr></table>
<div style="float: right;" >
<a href="http://infomenarikdanbermanfaat.blogspot.com/" target="_blank">get this widget</a></div>

lalu klik simpan

 CARA KEDUA : via template

namun jika di blog anda belum ada tempat untuk menaruhnya silahkan untuk menggunakan cara berikut

• 1.buka blogger > blog anda
• 2.template        > edit html
• 3.cari kode ]]></b:skin> dan pastekan kode dibawah ini keatasnya
  

#iklan_atas{width:90%;margin:0 auto;padding:10px;text-align:center}
#iklan_atas img{max-width:98%}

• 4.cari kode  </header> lalu pastekan kode ini dibawahnya
  

<b:section class='sidebar' id='iklan_atas' preferred='yes'>
  <b:widget id='HTML102' locked='false' mobile='yes' title='best label' type='HTML'>
    <b:includable id='main'>
       <b:if cond='data:title != &quot;&quot;'>
        <h3 class='title'><data:title/></h3>
       </b:if>
       <div class='widget-content'>
       &lt;table&gt;&lt;tr&gt;
&lt;td&gt;
&lt;div style=&quot;overflow:auto; width:200; height:150px; padding:5px;border:5px solid #000000; font-family:arial; font-size:15px; font-color:#0000FF;&quot;&gt;
    &lt;script style=&quot;text/javascript&quot;&gt;
    var numposts = 10;
    var standardstyling = true;
    &lt;/script&gt;
    &lt;script type=&#39;text/javascript&#39; src=&#39;http://lirik-dulu.googlecode.com/files/Recentpost-label.js.htm&#39;&gt;&lt;/script&gt;
    &lt;script src=&quot;http://infomenarikdanbermanfaat.blogspot.com/feeds/posts/default/-/tutorial blog?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999&quot;&gt;&lt;/script&gt;
    &lt;/div&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;div style=&quot;overflow:auto; width:200; height:150px; padding:5px;border:5px solid #000000; font-family:arial; font-size:15px; font-color:#0000FF;&quot;&gt;
    &lt;script style=&quot;text/javascript&quot;&gt;
    var numposts = 10;
    var standardstyling = true;
    &lt;/script&gt;
    &lt;script type=&#39;text/javascript&#39; src=&#39;http://lirik-dulu.googlecode.com/files/Recentpost-label.js.htm&#39;&gt;&lt;/script&gt;
    &lt;script src=&quot;http://infomenarikdanbermanfaat.blogspot.com/feeds/posts/default/-/tutorial blog?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999&quot;&gt;&lt;/script&gt;
    &lt;/div&gt;
&lt;/td&gt;
&lt;td&gt;&lt;div style=&quot;overflow:auto; width:200; height:150px; padding:5px;border:5px solid #000000; font-family:arial; font-size:15px; font-color:#0000FF;&quot;&gt;
    &lt;script style=&quot;text/javascript&quot;&gt;
    var numposts = 10;
    var standardstyling = true;
    &lt;/script&gt;
    &lt;script type=&#39;text/javascript&#39; src=&#39;http://lirik-dulu.googlecode.com/files/Recentpost-label.js.htm&#39;&gt;&lt;/script&gt;
    &lt;script src=&quot;http://infomenarikdanbermanfaat.blogspot.com/feeds/posts/default/-/tutorial blog?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999&quot;&gt;&lt;/script&gt;
    &lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;
       </div>
      </b:includable>
  </b:widget>
</b:section>

5. ubah http://infomenarikdanbermanfaat.blogspot.com dengan url blog anda

6.ubah juga tutorial blog dengan nama label yang ingin ditampilkan,jika ingin menampilkan dari semua label tinggal menghapus kode /-/tutorial blog

7.pratinjau,jika sudah pas simpan

jika ada yang ingin agan tanyakan  silahkan berkomentar/mengcontact saya di fb yang bisa anda lihat urlnya di bagian contact us.assalamualaikum wr.wb.