Cara Menambahkan Widget Latest Post Di Blog

Zona Internetku No Comment September 20, 2018

Cara Menambahkan Widget Latest Post Di Blog Dengan Mudah. Widget Latest Post atau widget Update Post merupakan sebuah widget khusus yang digunakan untuk menampilkan sebuah konten postingan terbaru dalam blog tersebut. Meskipun di platform blogger tidak menyediakan widget Latest Post, tapi kita juga bisa membuatnya sendiri dengan menggunakan bahasa pemrograman web.
Fungsi Widget Latest Post juga berguna untuk memberikan menu navigasi pada blog supaya para pengunjung lebih mudah dalam mencari artikel terbaru pada blog kita.

Baca juga : Cara Membuat Related Post Untuk Blogspot

Tutorial Mudah Untuk Memasang Widget Latest Post Keren Di Blogspot

Cara Menambahkan Widget Latest Post Di Blog

1. Masuk ke dalam blog kalian masing masing
2. Selanjutnya kalian masuk ke dalam menu "Tema" lalu klik "Edit HTML"
3. Setelah itu kalian cari kode </b:skin> atau </style>
4. Jika sudah ketemu maka letakkan kode berikut ini di atas kode </b:skin> atau </style>

/* 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%}}

5. Lalu 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>

Jika semua sudah selesai maka jangan lupa untuk klik "Simpan Tema"
6. Kembali ke langkah selanjutnya, Masuk ke dalam menu "Tata Letak"
7. Selanjutnya kalian klik "Tambahkan Gadget" di layout sidebar blog kalian dan pilih "HTML/JavaScript"
8. Kemudian kalian copy kode berikut ini dan letakkan kode tersebut di 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>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentlabel"></script>

Jangan lupa untuk mengatur opsi yang ada seperti berikut ini

MaxEntry : Mengatur jumlah postingan widget Latest 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

9. Setelah kalian sudah mengatur opsi tersebut, silahkan simpan widget tersebut

Baca juga :
Cara Membuat Widget Author Box Keren Di Blog
Cara Mengubah Widget Popular Post Menjadi Keren
3 Cara Memasang Widget Tombol Media Sosial Pada Blog

Demikian tadi tutorial singkat mengenai Cara Menambahkan Widget Latest Post Di Blog yang dapat saya bagikan kepada kalian semua, semoga bermanfaat.

Promo Menarik