Tutorial cara membuat recent post menurut label
Cara Menambahkan Widget Recent Post By Label Di Bawah Postingan Blog. Kali ini saya akan berbagi tutorial menciptakan 2 (dua) widget gres 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 sempurna diatasnya
<b:if cond='data:blog.pageType != "item" and data:blog.pageType != "static_page"'> <style type='text/css'> .Recent_Post_Mas_Tamvan .recent-posts-titlemargin:0 0 15px;padding:0;position:relative.Recent_Post_Mas_Tamvan .recent-posts-title h2background:#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 spanposition:relative;display:inline-block;padding:2px 12px 0;background-color:#303030;color:#fff.Recent_Post_Mas_Tamvan .recent-posts-title h2 span acolor:#fff!important.Recent_Post_Mas_Tamvan .recent-posts-title h2 span:beforecontent:"\f14d";font-family:Fontawesome;display:inline-block;text-align:center;margin-right:10px;font-weight:normal.Recent_Post_Mas_Tamvan .recent-post-mas-tamvanfloat:left;width:49%;margin:0 0.Recent_Post_Mas_Tamvan #recent-post-mas-tamvan-1float:left.Recent_Post_Mas_Tamvan #recent-post-mas-tamvan-2float:right#recent-post-mas-tamvan-2 .widgetpadding:0.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan .widget-contentbackground:#ffffff;border:1px solid #f0f0f0;padding:15px.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan ullist-style-type:none;margin:0 0 0 0;padding:0 0 0 0.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan ul.mastamvan_thumbsmargin:0 0 0 0.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan ul.mastamvan_thumbs lifont-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_thumbposition: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 imgheight:auto;width:100%;border-radius:5px.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan ul.mastamvan_thumbs2font-size:13px.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan ul.mastamvan_thumbs2 lipadding: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_thumb2background:#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-childborder-bottom:none;padding-bottom:0;margin-bottom:0.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan ul.mastamvan_thumbs2 .mastamvan_thumb2 imgheight: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:beforedisplay:none.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_titlefont-size:18px;display:block;margin:0 0 5px;line-height:1.4em.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title acolor:#1C90F3;font-weight:bold.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a:hovercolor:#0072C6.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title2font-size:14px.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_summarydisplay:block;margin:6px 0 0;color:#8D8D8D.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_metabackground:transparent;display:block;font-size:11px;color:#8D8D8D;text-transform:uppercase.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_meta acolor:#8D8D8D!important;display:inline-blockspan.mastamvan_meta_date,span.mastamvan_meta_comment,span.mastamvan_meta_moredisplay:inline-block;margin-right:8pxspan.mastamvan_meta_date:beforecontent:"\f073";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4pxspan.mastamvan_meta_comment:beforecontent:"\f086";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4pxspan.mastamvan_meta_more:beforecontent:"\f0a9";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4pxul.mastamvan_thumbs2 li a:hover,ul.mastamvan_thumbs li a:hovercolor:#0072C6@media screen and (max-width:400px).Recent_Post_Mas_Tamvan .recent-post-mas-tamvanfloat:none;width:100%.Recent_Post_Mas_Tamvan .recent-post-mas-tamvan .widgetpadding: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 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgISuzOhYsuEyWIgWh08Ow7hA3iS77Eo2Y3XNju7NZYVdRQ1HkKA9xnZnsNjlRkPqVDraNqt2IbChR9uT6YSb_isbpEwsU_N00yEqvhnXEvRq5A6E6_EWVW5lNOk2j-FOApeTANfuKfQTJP/w300-c-h140/no-image.png' var no_thumb2 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-qobJQRT2wGadmGLcBDjZEEL8Frd6wdsDf59xfAt8xyWxaLekTZ7NAAggwTWlTNaYM5w5bYgpDeisFli4CxiOMvHPMpMYn8QygJ-AQa0ShP8pGKSdvQPj5iA0VIvi08frO68M8Cn35fOH/s60-c/no-image.png' </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 != "item" and data:blog.pageType != "static_page"'> <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('<div class="recent-posts-title"><h2><span><a title="<data:title/>" href="/search/label/<data:content/>?max-results=4"><data:title/></a></span></h2></div>'); document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=updated&alt=json-in-script&callback=labelthumbs\"><\/script>"); </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('<div class="recent-posts-title"><h2><span><a title="<data:title/>" href="/search/label/<data:content/>?max-results=5"><data:title/></a></span></h2></div>'); document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=updated&alt=json-in-script&callback=labelthumbs\"><\/script>"); </script> </div> </b:includable> </b:widget> </b:section> <div class='clear'/> </div> </b:if> - Untuk lebih jelasnya, sanggup lihat GIF dibawah ini..
- Nah Kalo Sudah Selsesai tanpa persoalan, 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 resah / 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 :)
Comments
Post a Comment