Tutorial Menambahkan Widget Blog Recent Post By Label

Zona Internetku No Comment September 20, 2018

Tutorial Menambahkan Widget Blog Recent Post By Label yang keren. Widget merupakan bagian yang sangat penting dalam blog, macam macam widget blog juga sangat banyak sekali, namun saat ini kita hanya akan membahas tentang widget Recent Post By Label yang merupakan sebuah widget blog yang berguna sebagai alat navigasi blog yang berisi tentang postingan yang telah di tentukan oleh label yang kita pilih.

Tapi untuk memasang widget yang satu ini kita harus membuatnya sendirim karena widget Recent Post By Label tidak tersedia untuk pengguna platform blogger. Namun kalian tidak perlu khawatir karena saya sudah menyiapkan widget Recent Post By Label seperti tutorial berikut ini

Baca juga : Cara Menambahkan Widget Latest Post Di Blog

Cara Memasang Widget Recent Post By Label Yang Keren Di Blog Dengan Mudah

Tutorial Menambahkan Widget Blog Recent Post By Label

1. Pertama, kalian harus masuk dulu ke dalam blog kalian
2. Kedua, kalian masuk ke dalam menu "Tema" dan pilih "Edit HTML"
3. Lalu kalian cari kode </style> atau </b:skin>
4. Selanjutnya letakkan kode di bawah ini di atas kode </style> atau </b:skin>

/* Edited By Zona Internetku */
.rlzi{position:relative;margin:2px 5px 7px;clear:both}
.rlzi .rlimage{height:180px;width:100%}
.rlzi .rlimage a img{width:100%;object-fit:cover;height:100%}
.rlzi .rltitle a{font-family:arial;font-size:18px;text-decoration:none;color:#3498db}
.rlzi .rltitle a:hover{color:#1F3A93}
.rlzi .info-dcr{font-size:13px;padding:4px}
.rlzi .info-dcr span{margin:1px;font-size:14px;font-weight:400;background:#3498db;padding:3px;color:#fff;display:inline-block}
.rlzi .info-dcr span.rldate:before{content:"\f017";font-family:FontAwesome;font-size:14px}
.rlzi .info-dcr span.rlcomments:before{content:"\f086";font-family:FontAwesome;font-size:14px}
.rlzi .info-dcr span.rlreadmore:before{content:"\f18e";font-family:FontAwesome;font-size:14px}
.rlzi .rlsummary{font-size:14px;color:#464646;font-family:arial}
.rlzi .info-dcr span a{color:#fff;text-decoration:none}
.rlzi .info-dcr span.rlreadmore:hover{background:#1F3A93}
.subrlzi{position:relative;margin:2px 5px 7px;clear:both}
.subrlzi .rlimage{float:left;margin:0 7px 5px 0;width:80px;height:80px}
.subrlzi .rlimage a img{width:100%;object-fit:cover;height:100%}
.subrlzi .rltitle a{font-family:arial;font-size:13px;font-weight:600;text-decoration:none;color:#3498db}
.subrlzi .rltitle a:hover{color:#1F3A93}
.subrlzi .info-dcr{padding:4px}
.subrlzi .info-dcr span{margin:1px;font-size:13px;font-weight:400;background:#3498db;padding:2px;color:#fff;display:inline-block}
.subrlzi .info-dcr span.rldate:before{content:"\f017";font-family:FontAwesome;font-size:13px}
.subrlzi .info-dcr span.rlcomments:before{content:"\f086";font-family:FontAwesome;font-size:13px}
.subrlzi .info-dcr span.rlreadmore:before{content:"\f18e";font-family:FontAwesome;font-size:13px}
.subrlzi .rlsummary{font-size:14px;color:#464646;font-family:arial}
.subrlzi .info-dcr span a{color:#fff;text-decoration:none}
.subrlzi .info-dcr span.rlreadmore:hover{background:#1F3A93}
@media screen and (max-width :768px){
{max-width:100%;}
}
.title-lrp{overflow:hidden;display:block;padding:8px 4px}
.title-lrp a{text-decoration:none;}
.title-lrp a .titlelabelrp{font-family:arial;font-size:18px;color:#3498db;padding:4px 7px;display:inline;border:1px solid #076BB8;border-radius:3px;}
.title-lrp a .titlelabelrp:hover{background:rgba(52, 152, 219, 0.35)}
.title-lrp a .titlelabelrp:after{content:" \f08e";font-family:FontAwesome;font-size:18px}

5. Setelah itu kalian cari kode </head> dan letakkan kode berikut ini di atasnya

<script type="text/javascript">
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('119 118(47){58(13 30=0;30<61;30++){13 14=47.56.14[30];13 35=14.41.$31;16(30==47.56.14.60)64;58(13 23=0;23<14.27.60;23++){16(14.27[23].62==\'86\'&&14.27[23].75==\'83/84\')13 59=14.27[23].41;16(14.27[23].62==\'85\'){64}}13 38=14.27[23].36;13 37=14.79.$31;13 57=37.29(0,4);13 54=37.29(5,7);13 55=37.29(8,10);13 15=82 78();15[1]="76";15[2]="80";15[3]="81";15[4]="70";15[5]="71";15[6]="72";15[7]="74";15[8]="69";15[9]="66";15[10]="67";15[11]="68";15[12]="77";13 28;91{28=14.107$106.103;13 40=28.34("42-19","24"+44+"-19")}105(104){24=14.45.$31;22=24.46("<53");32=24.46("63=\\"",22);19=24.46("\\"",32+5);43=24.108(32+5,19-32-5);16((22!=-1)&&(32!=-1)&&(19!=-1)&&(43!="")){28=43}39 28=48;13 87=48.34("42-19","24"+44+"-19");13 40=28.34("42-19","24"+44+"-19")}16("45"50 14){13 17=14.45.$31}39 16("51"50 14){13 17=14.51.$31}39 13 17="";13 52=/<\\101[^>]*>/92;17=17.34(52,"");17=17.29(0,117);13 49=17.93(" ");17=17.29(0,49)+\'...\';21.20(\'<18 25="116">\');{16(123==33)21.20(\'<18 25="102"><22 36="\'+38+\'"><53 63=" \'+40+\' " 41="\'+35+\'" 90="\'+35+\'"/></22></18>\')};21.20(\'<18 25="88"><22 36="\'+38+\'">\'+35+\'</22></18><18 25="89-94">\');{16(125==33)21.20(\'<26 25="95">\'+\' \'+55+\' \'+15[65(54,10)]+\' \'+57+\'</26>\')}{16(115==33)21.20(\'<26 25="100">\'+\' \'+59+\'</26>\')}{16(109==33)21.20(\'<26 25="99"><22 36="\'+38+\'">\'+\' \'+\'98 96\'+\'</22></26>\')}21.20(\'</18>\');{16(114==33)21.20(\'<18 25="97">\'+17+\'</18>\')}21.20(\'</18>\')}13 73=(65(61)+(113));58(13 30=61;30<73;30++){13 14=47.56.14[30];13 35=14.41.$31;16(30==47.56.14.60)64;58(13 23=61;23<14.27.60;23++){16(14.27[23].62==\'86\'&&14.27[23].75==\'83/84\')13 59=14.27[23].41;16(14.27[23].62==\'85\'){64}}13 38=14.27[23].36;13 37=14.79.$31;13 57=37.29(0,4);13 54=37.29(5,7);13 55=37.29(8,10);13 15=82 78();15[1]="76";15[2]="80";15[3]="81";15[4]="70";15[5]="71";15[6]="72";15[7]="74";15[8]="69";15[9]="66";15[10]="67";15[11]="68";15[12]="77";13 28;91{28=14.107$106.103;13 40=28.34("42-19","24"+44+"-19")}105(104){24=14.45.$31;22=24.46("<53");32=24.46("63=\\"",22);19=24.46("\\"",32+5);43=24.108(32+5,19-32-5);16((22!=-1)&&(32!=-1)&&(19!=-1)&&(43!="")){28=43}39 28=48;13 87=48.34("42-19","24"+44+"-19");13 40=28.34("42-19","24"+44+"-19")}16("45"50 14){13 17=14.45.$31}39 16("51"50 14){13 17=14.51.$31}39 13 17="";13 52=/<\\101[^>]*>/92;17=17.34(52,"");17=17.29(0,121);13 49=17.93(" ");17=17.29(0,49)+\'...\';21.20(\'<18 25="124">\');{16(122==33)21.20(\'<18 25="102"><22 36="\'+38+\'"><53 63=" \'+40+\' " 41="\'+35+\'" 90="\'+35+\'"/></22></18>\')};21.20(\'<18 25="88"><22 36="\'+38+\'">\'+35+\'</22></18><18 25="89-94">\');{16(110==33)21.20(\'<26 25="95">\'+\' \'+55+\' \'+15[65(54,10)]+\' \'+57+\'</26>\')}{16(111==33)21.20(\'<26 25="100">\'+\' \'+59+\'</26>\')}{16(112==33)21.20(\'<26 25="99"><22 36="\'+38+\'">\'+\' \'+\'98 96\'+\'</22></26>\')}21.20(\'</18>\');{16(120==33)21.20(\'<18 25="97">\'+17+\'</18>\')}21.20(\'</18>\')}}',10,126,'|||||||||||||var|entry|monthnames|if|postcontent|div|c|write|document|a|j|s|class|span|link|thumb|substring|i|t|b|true|replace|entryPost|href|timePost|entryUrl|else|thumbpost|title|s72|d|thumbnailResolution|content|indexOf|json|rlNothumbs|quoteEnd|in|summary|re|img|cdmonth|cdday|feed|cdyear|for|commentPost|length|MaxEntry|rel|src|break|parseInt|Sep|Oct|Nov|Aug|Apr|May|Jun|MaxEntry3|Jul|type|Jan|Dec|Array|published|Feb|Mar|new|text|html|alternate|replies|no_thumb|rltitle|info|alt|try|g|lastIndexOf|dcr|rldate|More|rlsummary|Read|rlreadmore|rlcomments|S|rlimage|url|error|catch|thumbnail|media|substr|showReadMore|showDatePost2|showCommentsNum2|showReadMore2|MaxEntry2|showSummaryPost|showCommentsNum|rlzi|NumChars|recentlabel|function|showSummaryPost2|NumChars2|showThumbPost2|showThumbPost|subrlzi|showDatePost'.split('|'),0,{}))
//Script By Zona Internetku
//]]>
</script>

6. Kemudian kalian klik "Simpan Tema"
7. Setelah itu kalian masuk ke dalam menu "Tata Letak" dan klik "Tambahkan Gadget" di layout Sidebar blog kalian, dan pilih widget "HTML/JavaScript"
8. Lalu salin kode berikut ini dan letakkan kode tadi ke dalam widget tersebut

<script>
var MaxEntry=1;
var MaxEntry2=3;
var showThumbPost=true;
var showThumbPost2=true;
var showSummaryPost=true;
var showSummaryPost2=false;
var NumChars=120;
var NumChars2=80;
var showDatePost=true;
var showDatePost2=false;
var showCommentsNum=true;
var showCommentsNum2=false;
var showReadMore=true;
var showReadMore2=false;
var thumbnailResolution=200;
var thumbnailResolution2=80;
var rlNothumbs="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo2PuCRo1O7M4V_yAZeD5ntaxGYKRH30DU26pHmnZZsR-BacAMOXhoqZMKIhr3slz2qSqQyqAjduqwRvyOv2kQdAqKQaL1eFXd773cCzGTS0rv8TR-fO7ThvVydwbGetxfzJVRKAIq0IU/s1600/noimg-zonainternetku.png";
</script>
<div class="title-lrp"><a href="#"><span class="titlelabelrp">Label Blog Anda</span></a></div>
<script type="text/javascript" src="/feeds/posts/default/-/Blog?published&alt=json-in-script&callback=recentlabel"></script>

Untuk optimasi widget Recent Post By Label pada blog, perhatikan opsi berikut ini

MaxEntry : Mengatur jumlah postingan widget Recent Post
showThumbPost : True untuk menampilkan thumbnail, dan False untuk menyembunyikan thumbnail
showSummaryPost : True untuk menampilkan ringkasan postingan, dan False untuk menyembunyikan ringkasan postingan
showDatePost : True untuk menampilkan tanggal postingan artikel, dan False untuk menyembunyikan tanggal postingan artikel
showCommentsNum : True untuk menampilkan jumlah komentar postingan, dan False untuk menyembunyikan jumlah komentar postingan
showReadMore : True untuk menampilkan tombol Readmore, dan False untuk menyembunyikan tombol Readmore
thumbnailResolution : Mengatur kualitas resolusi gambar thumbnail postingan

Jangan lupa untuk mengganti judul dan url label widget Recent Post By Label Tersebut seperti berikut ini

Ganti tanda # menjadi url label blog kalian
Ganti tulisan Label Blog Anda dengan nama label yang ingin anda tampilkan di widget tersebut
Ganti tulisan Blog menjadi nama label blog yang ingin kalian tampilkan

9. Setelah semuanya beres dan lancar maka kalian bisa menyimpan widget tersebut dan lihat hasilnya

Baca juga :
Cara Membuat Widget Author Box Keren Di Blog
3 Cara Memasang Widget Tombol Media Sosial Pada Blog
2 Cara Membuat Widget Subscribe Box Keren Di Blog

Demikian tadi ulasan singkat mengenai tutorial blogging tentang Tutorial Menambahkan Widget Blog Recent Post By Label Yang Keren yang dapat saya tunjukkan. Terima kasih telah berkunjung

Promo Menarik