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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqZR3uF8SsEGXRwlIk5OhwzIZZZFRmb-kDnLlUMJ9HiyaO66fy_ze3RwXqy082PUjeR1ycpqMzMkhCJSAgRRj8xVvKVHw_v19TLEtLh_B8FaJ5EexUYxHdlSt6DCq4ORePYjPS86uYBLoB/w300-c-h140/no-image.png&#39;
var no_thumb2 = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTpSW2069pntdDvHjysOpl6WB6Da6PcOJNCIIUfNk4Rnfg6fYX1dsAVnDRSAWF_TTaxVBJ6f3BGW6stffvDqROMFm9LGy8aZ8JJ-0PWUYFvUzfbAxTRtIjNPEFx0vm9WUBUJvG7qVHCLGH/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..

• 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

• 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 :)