Cara Membuat Recent Post By Label Seperti Berminat Template
Table of Contents
Setelah kemarin saya membuat artikel mengenai cara membuat recent post seperti evo magz template kali ini saya akan memberikan tutorial widget blogger bagaimana cara bikin recent post ala berminat template blogger karya mas bungfrangki. Nah bagaimana cara membuatnya yuk simak caranya pada berikut ini.
Pastinya kalian sudah mengetahui kan fungsi dari widget recent post by label? Widget recent post ini berfungsi untuk menampilkan sejumlah postingan terbaru. Postingan terbaru ini akan di dapat dari label/kategori yang kita pasangkan nantinya. Pada widget postingan terbaru ini akan di design seperti desain recent post berminat template blogger yang dimana bentuknya akan persis gambar di bawah ini.
Widget Recent Post ini sangat bagus digunakan untuk blog yang bertema magazine atau berita, apalagi jika desainnya mendukung menggunakan widget ini. Selain itu dengan memasangkan recent post berdasarkan label di blog maka akan membuat blog kita semakin kaya akan informasi karena memiliki label yang berbeda-beda.
Pada dasarnya membuat widget postingan terbaru atau artikel terbaru seperti berminat template blog sangat mudah, karena kita hanya perlu memasukan beberapa kode css, kode script dan tag conditional pada template. Lalu bagaimana langkah membuat recent post by label, mari kita simak tutorial cara membuat widget postingan terbaru di blog pada berikut ini.
Cara Memasang Recent Post By Label Ala Berminat Template
Langkah pertama, login dan masuk ke dashboard blog anda, kemudian pilihlah menu Template > Edit HTML.
Langkah kedua, silahkan anda tambahkan kode css ini tepat diatas kode </style> atau ]]></b:skin>.
/* Under Post */#under-wrapper{margin:0 20px 0;padding:0 0 40px;word-wrap: break-word;}#underpost,#underpost2{position:relative;padding :15px 0 0;overflow : hidden;margin :0 0 25px;width:47%}#underpost{float:left}#underpost2{float:right}/* Custom by tag */#under-wrapper h2{position:relative;margin:0;padding:0 0 10px }#under-wrapper h2 .titles{font-size:18px !important;display:inline-block;font-weight:bold;padding:0;margin:0;color:#444;text-transform:uppercase}#under-wrapper h2 .titles:before{content:"f006";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;font-size:17px;padding-right:8px;color:#3271f3}#under-wrapper .viewmore{font-size:10px;float:right;font-weight:400;}#under-wrapper .viewmore a{display:flex;text-transform:uppercase;color:#2b427d;padding:0;font-weight:400}#under-wrapper .viewmore a:after{content:"f054";font-family:FontAwesome;padding-left:5px;font-weight:normal;text-decoration:inherit}/* Recent By Label */#underpost .recent-by-tag li,#underpost2 .recent-by-tag li{width:100%;margin-bottom:35px;display:block}#underpost .recent-by-tag img,#underpost2 .recent-by-tag img{background:#ddd;width:100%;height:auto;max-height:170px;overflow:hidden;margin:0 0 10px}#underpost .recent-by-tag li a,#underpost2 .recent-by-tag li a{color:#2b427d !important;font-weight:500;font-size:18px;line-height:1.2em}#underpost .recent-by-tag li a:hover,#underpost2 .recent-by-tag li a:hover{color:#349acb}#underpost .recent-by-tag li .showdates, #underpost2 .recent-by-tag li .showdates{font-size:11px;font-weight:bold;color:#a7b0b7;display:none}/* Under hot */#underhot h2 .titles:before{content:"f0f6";}#underhot ul.recent-by-tag {clear:both;width:100%;margin:0 auto;padding:0;list-style:none;display:block;position:relative;word-wrap: break-word;overflow : hidden;line-height:1.3em !important;}#underhot .recent-by-tag li{width:31.2% !important;margin-right:3%;margin-bottom:20px;display:inline-block;overflow:hidden;height:195px}#underhot .recent-by-tag li:nth-child(3),#underhot .recent-by-tag li:nth-child(6){margin-right:0}#underhot .recent-by-tag img{background:#ddd;width:100%;height:120px;margin:0 0 10px}#underhot .recent-by-tag li a{clear:both;color:#2b427d !important;font-size:15px;font-weight:500;margin:0;padding:0}#underhot .recent-by-tag li .showdates{display:block;font-size:11px;font-weight:500;background:rgba(49,43,66,.8);color:#ffc351;position:absolute;top:0;left:0;padding:2px 5px;z-index:10;cursor:pointer}Langkah berikutnya, tambahkan kode script dibawah ini tepat diatas kode </head>.
<script type='text/javascript'>var numposts = 6;var showpostthumbnails = true;var showpostdate = true;//<![CDATA[function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.content.$t;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOCx8xj0aK0RyNvM1o4HcQIO4ADSpRo5j0SpGygvxXAvpy_XXI6ArvzNeESRbRlcTeIbpEldd96Wtnw7Y0WqPmRlcf6KSoVSQuU14F4XOQvkuw3cr3E8uMI1MyRCvLoMRgHdbQ1jVqrQGM/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}//]]></script>Nah setelah anda berhasil memasang kedua kode diatas maka silahkan tambahkan kode dibawah ini sebelum markup widget blog1.
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.searchLabel'><b:else/><div id='under-wrapper'><div id='underpost'><b:section class='undertag3 section' id='undertag3' maxwidgets='1' preferred='yes' showaddelement='no'> <b:widget id='HTML83' locked='false' mobile='yes' title='Culture' type='HTML' version='1'> <b:includable id='main'> <h2><span class='viewmore'><a href='/search/label/Beauty?&max-results=7' rel='tag nofollow'>View More</a></span><span class='titles'>Beauty</span></h2> <div class='widget-title widget-content recent-posts'> <script> document.write("<script src="/feeds/posts/default/-/<data:content/>?orderby=updated&alt=json-in-script&callback=rcentbytag"></script>"); </script> </div> </b:includable> </b:widget></b:section> </div><div id='underpost2'><b:section class='undertag2 section' id='undertag2' maxwidgets='1' preferred='yes' showaddelement='no'> <b:widget id='HTML81' locked='false' mobile='yes' title='Beauty' type='HTML' version='1'> <b:includable id='main'> <h2><span class='viewmore'><a href='/search/label/Beauty?&max-results=7' rel='tag nofollow'>View More</a></span><span class='titles'>Beauty</span></h2> <div class='widget-title widget-content recent-posts'> <script> document.write("<script src="/feeds/posts/default/-/<data:content/>?orderby=updated&alt=json-in-script&callback=rcentbytag"></script>"); </script> </div> </b:includable> </b:widget></b:section> </div> </div> </b:if> </b:if>
Setelah langkah diatas silahkan tambahkan script di bawah ini agar gambar yang dihasilkan oleh recent post ala bungfrangki ini lebih berkualitas dalam artian tidak pecah ataupun buram. Tambahkan kode ini tepat diatas kode </body>
<script type='text/javascript'>//<![CDATA[function resizeThumb(e,t,s){for(var r=document.getElementById(e),m=r.getElementsByTagName("img"),c=0;c<m.length;c++)m[c].src=m[c].src.replace(//s72-c/,"/s"+t),m[c].width=t,m[c].height=s}resizeThumb("under-wrapper",300,170);//]]></script>Kemudian Simpan template anda. Lalu buka menu Tata Letak > Add Widget HTML/Javascript Tambahkan nama label di bagian judul dan isi kolom html tersebut dan lihat hasilnya.
Note:
Setelah anda mengisi label pada widget baru tersebut, maka gantilah nama label pada kode diatas yang sudah saya warnai dengan warna kuning. Silahkan anda sesuaikan dengan nama label widget masing-masing.
Demikianlah bagaimana cara membuat recent post berdasarkan label ala berminat template. Semoga bermanfaat.