logo blog

Cara Memasang Widget Recent Post By Label Di Blog

Cara Memasang Widget Recent Post By Label Di Blog

Cara Memasang Widget Recent Post By Label  Di Blog

Tutorial cara membuat recent post berdasarkan label

Cara Menambahkan Widget Recent Post By Label Di Bawah Postingan Blog. Kali ini saya akan berbagi tutorial membuat 2 (dua) widget baru dibawah postingan blog yang akan menampilkan recent post berdasarkan label tertentu.

Widget Recent Post by Label ini saya ambil dari Template Evo Magz buatan Mas Sugeng yang sangat fenomenal.

Widget Recent Post by Label With Thubnial ini akan menampilkan 4 artikel terbaru ditambah dengan menampilkan Komentar, Tanggal Di Publikasikannya dan juga readmore. Kalian juga bisa mengatur berapa artikel yang akan ditampilkan.

Nah, untuk memasang Widget Recent Post by Label di bawah postingan blog, bisa ikuti tutorial singkat dibawah ini...

Membuat Recent Post Berdasarkan Kategori

  • Langkah pertama, silahkan login ke akun Blogger
  • Setelah login, masuk ke menu, Template, Edit HTML, Cari Kode </head>
  • Kalo sudah ketemu, masukan script Widget Recent Post by Label With Thubnialdibawah ini tepat diatasnya
  • 
    <b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
    <style type='text/css'>
    .Recent_Post_Mas_Tamvan .recent-posts-title{margin:0 0 15px;padding:0;position:relative}.Recent_Post_Mas_Tamvan .recent-posts-title h2{background:#fff;border-bottom:2px solid #303030;border-right:0;line-height:32px;font-size:13px;text-transform:uppercase}.Recent_Post_Mas_Tamvan .recent-posts-title h2 span{position:relative;display:inline-block;padding:2px 12px 0;background-color:#303030;color:#fff}.Recent_Post_Mas_Tamvan .recent-posts-title h2 span a{color:#fff!important}.Recent_Post_Mas_Tamvan .recent-posts-title h2 span:before{content:"\f14d";font-family:Fontawesome;display:inline-block;text-align:center;margin-right:10px;font-weight:normal}.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan{float:left;width:49%;margin:0 0}.Recent_Post_Mas_Tamvan #recent-post-mas-tamvan-1{float:left}.Recent_Post_Mas_Tamvan #recent-post-mas-tamvan-2{float:right}#recent-post-mas-tamvan-2 .widget{padding:0}.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan .widget-content{background:#ffffff;border:1px solid #f0f0f0;padding:15px}.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan ul{list-style-type:none;margin:0 0 0 0;padding:0 0 0 0}.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan ul.mastamvan_thumbs{margin:0 0 0 0}.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan ul.mastamvan_thumbs li{font-size:12px;min-height:68px;margin:0 0 8px;padding:0 0 8px;border-bottom:1px dotted #f0f0f0}.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan ul.mastamvan_thumbs .mastamvan_thumb{position:relative;background:#fbfbfb;margin:3px 0 10px 0;width:100%;height:0;padding-bottom:46%;overflow:hidden}.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan ul.mastamvan_thumbs .mastamvan_thumb img{height:auto;width:100%;border-radius:5px}.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan ul.mastamvan_thumbs2{font-size:13px}.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan ul.mastamvan_thumbs2 li{padding:0 0;min-height:66px;font-size:11px;margin:0 0 8px;padding:0 0 8px;border-bottom:1px dotted #f0f0f0}.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan ul.mastamvan_thumbs2 .mastamvan_thumb2{background:#fbfbfb;float:left;margin:3px 8px 0 0;height:60px;width:60px}.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan ul.mastamvan_thumbs2 li:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan ul.mastamvan_thumbs2 .mastamvan_thumb2 img{height:60px;width:60px;border-radius:5px}.sidebar ul.mastamvan_thumbs li:before,.sidebar ul.mastamvan_thumbs2 li:before,#bottombar ul.mastamvan_thumbs li:before,#bottombar ul.mastamvan_thumbs2 li:before{display:none}.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title{font-size:18px;display:block;margin:0 0 5px;line-height:1.4em}.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a{color:#1C90F3;font-weight:bold}.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a:hover{color:#0072C6}.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title2{font-size:14px}.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_summary{display:block;margin:6px 0 0;color:#8D8D8D}.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_meta{background:transparent;display:block;font-size:11px;color:#8D8D8D;text-transform:uppercase}.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_meta a{color:#8D8D8D!important;display:inline-block}span.mastamvan_meta_date,span.mastamvan_meta_comment,span.mastamvan_meta_more{display:inline-block;margin-right:8px}span.mastamvan_meta_date:before{content:"\f073";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px}span.mastamvan_meta_comment:before{content:"\f086";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px}span.mastamvan_meta_more:before{content:"\f0a9";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px}ul.mastamvan_thumbs2 li a:hover,ul.mastamvan_thumbs li a:hover{color:#0072C6}@media screen and (max-width:400px){.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan{float:none;width:100%}.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan .widget{padding:0}}
    </style>
    <script src='https://rawgit.com/mastamvan/backup/master/relatedpostbylabel.js' type="text/javascript"></script>
    <script type='text/javascript'>
    var numposts = 1;
    var numposts2 = 4;
    var showpostthumbnails = true;
    var showpostthumbnails2 = true;
    var displaymore = true;
    var displaymore2 = false;
    var showcommentnum = true;
    var showcommentnum2 = true;
    var showpostdate = true;
    var showpostdate2 = true;
    var showpostsummary = true;
    var numchars = 100;
    var thumb_width = 300;
    var thumb_height = 140;
    var thumb_width2 = 60;
    var thumb_height2 = 60;
    var no_thumb = &#39;https://1.bp.blogspot.com/-7vDs5hMaDho/U268E2ecF4I/AAAAAAAADY8/RBHVTTuJrxc/w300-h140-c/no-image.png&#39;
    var no_thumb2 = &#39;http://3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/s60-c/no-image.png&#39;
    </script>
    </b:if>
    
  • Nah, kalo sudah dipasang, kita tinggal memasang kode HTMLnya
  • Mungkin di setiap template beda-beda ya gan, sesuaikan saja tempatnya, ntah itu mau di atas footer, Sidebar
  • Untuk tutorial kali ini, saya akan memasang widget recent postnya dibawah post blog atau diatas sidebar, mudah2an di template kalian juga strukturnya sama
  • Langkah pertama, Masih di Edit HTML. Pilih Menu Lompat Ke Widget Lalu Klik Blog1
  • Setelah Lompat ke Blog1 kalian klik kolom angka di sebelah kirinya, Terus Masukan HTML Widget Recent Postdibawah ini tepat dibawah kode </b:section>
  • 
    <b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
    <div class='Recent_Post_Mas_Tamvan'>
    <b:section class='recent-post-mas-tamvan' id='recent-post-mas-tamvan-1' maxwidgets='1' preferred='yes' showaddelement='no'>
      <b:widget id='HTML80' locked='false' mobile='yes' title='Blogger' type='HTML' version='1' visible='true'>
        <b:includable id='main'> 
     <div class='widget-content recent-posts'>
       <script>
       document.write(&#39;&lt;div class=&quot;recent-posts-title&quot;&gt;&lt;h2&gt;&lt;span&gt;&lt;a title=&quot;<data:title/>&quot; href=&quot;/search/label/<data:content/>?max-results=4&quot;&gt;<data:title/>&lt;/a&gt;&lt;/span&gt;&lt;/h2&gt;&lt;/div&gt;&#39;);
       document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
       </script>
    
     </div>
     </b:includable>
      </b:widget>
    </b:section>
      
    <b:section class='recent-post-mas-tamvan' id='recent-post-mas-tamvan-2' maxwidgets='1' preferred='yes' showaddelement='no'>
      <b:widget id='HTML90' locked='false' mobile='yes' title='Tools' type='HTML' version='1' visible='true'>
        <b:includable id='main'> 
     <div class='widget-content recent-posts'>
       <script>
       document.write(&#39;&lt;div class=&quot;recent-posts-title&quot;&gt;&lt;h2&gt;&lt;span&gt;&lt;a title=&quot;<data:title/>&quot; href=&quot;/search/label/<data:content/>?max-results=5&quot;&gt;<data:title/>&lt;/a&gt;&lt;/span&gt;&lt;/h2&gt;&lt;/div&gt;&#39;);
       document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
       </script>
    
     </div>
     </b:includable>
      </b:widget>
    </b:section>
    
    <div class='clear'/>
      </div>
            </b:if>
    
  • Untuk lebih jelasnya, bisa lihat GIF dibawah ini..
  • Cara Memasang Widget Recent Post By Label  Di Blog
  • Nah Kalo Sudah Selsesai tanpa masalah, tinggal Save Template
  • Selesai
  • Untuk Mengisi Widgetnya Kalian Masuk Ke Tataletak
  • Lalu cari Widget dengan judul recent-post-mas-tamvan-1 dan recent-post-mas-tamvan-2
  • Klik Edit Lalu Masukan Nama Label Kalian. Ingat Nama Label Harus Sesuai Besar / Kecilnya Huruf
  • widget-recent-post-with-thubnial
  • Kalo sudah di sesuaikan, tinggal simpan widgetnya
  • Selesai
  • Satu lagi, kalo widget recent post di tataletak tidak berdampingan kalian bisa coba masukan css dibawah ini diatas kode */]]></b:skin>
  • 
    body#layout .recent-post-mas-tamvan {
        width: 50%!important;
        margin: 0px auto !important;
        float: left;
    }
    
  • Nah semua tutornya kayanya cukup gan :3
  • Kalo ada yang bingung / tidak mengerti, bisa bertanya dikolom komentar. Nanti saya bantu.

Cukup sekian dan terima kasih, semoga artikel tentang Tutorial Memasang Widget Recent Post By Label With Thubnial Dibawah postingan Blog ini bermanfaat ya :)
jangan Lupa Share :)

Share this:

Berlangganan via email

Agan Sedang Membaca Artikel : Cara Memasang Widget Recent Post By Label Di Blog. Silahkan masukan email anda dibawah ini! dan nanti akan otomatis mendapatkan kiriman artikel terbaru dari Blog Mas Tamvan. Terimakasih.

Kumpulan Tips Trik Blogger

Blog Mas Tamvan

Terima Kasih Sudah Membaca Artikel Tentang : Cara Memasang Widget Recent Post By Label Di Blog. Jika Ada Yang Mau Request Tutorial Silahkan Beri Tahu Saya Di Kolom Komentar :)

22 comments

Mas Rizwan

nah ini baru keren... thanj gan

alfia

widget yang judulnya recent post mas tamvam dimana ya gan?

alfia

recent tabelnya malah jadi gambar gan :'(

alfia

@@,
udah bisa gan, terus nambahin biar gak cuman 3 tapi lima gimana ya gan @@,

Mas Tamvan

ga 3 apanya gan?

Mas Tamvan

Iya gan, sori ane baru post :)

Mas Tamvan

Kalo ngatur jumlah post bisa atur ini gan
var numposts2 = 4;

Anonymous

Makasih byk mastah |o|

Mas Tamvan

Sama-Sama gan, moga bermanfaat :)

Lensa Boyolali

gan kalau mau nambah widget nya gimana, itu kan 2 kalau mau di buat jadi 4 ....

Mas Tamvan

Bisa gan, tinggal tambahkan kode pembungkus widgtnya aja d atas
<div class='clear'/>

Tinggal rubah idnya aja. Jangan sama.
<b:section class='recent-post-mas-tamvan' id='recent-post-mas-tamvan-2' maxwidgets='1' preferred='yes' showaddelement='no'>
<b:widget id='HTML90' locked='false' mobile='yes' title='Tools' type='HTML' version='1' visible='true'>
<b:includable id='main'>
<div class='widget-content recent-posts'>
<script>
document.write(&#39;&lt;div class=&quot;recent-posts-title&quot;&gt;&lt;h2&gt;&lt;span&gt;&lt;a title=&quot;<data:title/>&quot; href=&quot;/search/label/<data:content/>?max-results=5&quot;&gt;<data:title/>&lt;/a&gt;&lt;/span&gt;&lt;/h2&gt;&lt;/div&gt;&#39;);
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>

</div>
</b:includable>
</b:widget>
</b:section>

Reza Ananda

mas kode nya ko ngga ada ya di bagian blog1 nya terus di taruh di mna

Mas Tamvan

Ada gan, coba d cari
</b:section>

Reza Ananda

ko eror terus ya gan?

Mas Tamvan

Error gimana gan?
Coba SS pesan errornya.

Tamamun Niam

maksudnya tinggal diganti idnya gimana gan

Mas Tamvan

Kode seperti ini
id='HTML90'

Kalo sama nantinya bentrok (tidak bisa di save)

Uhendrayana Special Edition

gan kok klo widget nya lebih dari 2, contoh saya bikin 4, yang widget 3 sama widget 4 kok dempat ya atau rapat, beda sama widget 1 dan widget 2 ada jarak nya

admin

gan kalo mau bikin widget multitabs mirip sama blog ini gimana ??

Saya menunggu komentar anda..

Kalo ada yang error mohon kasih tau admin, supaya bisa secepatnya untuk diperbaiki..

Komentar dengan link promo akan masuk spam.

Tambahkan Spasi Setelah Memasukan Kode Emoticon..
Gunakan kode <i rel="image">URL GAMBAR DI SINI</i> untuk menyertakan gambar di komentar.Show Konversi Kode Hide Konversi Kode Show EmoticonShow Emoticon Hide Emoticon