Cara Membuat Widget Artikel Postigan Terbaru Responsive di Blog - SeriesWans

Cara Membuat Widget Artikel Postigan Terbaru Responsive di Blog - Hallo sahabat blogger semua, apa kabar hari ini ? semoga kabarnya baik dan sehat selalu. pada kesempatan kali ini saya akan share tentang tutorial cara membuat widget artikel terbaru atau recent post responsive di blogger dengan mudah. 

Widget Artikel Terbaru atau Recent Post ini bila kita pasang pada blog. maka akan memudahkan para pengunjung atau visitor blog anda dalam mencari artikel baru saja anda publish. widget artikel baru ini juga sangat simple dan responsive. 

Widget Artikel Terbaru / Recent Post Responsive

Bagi anda pengguna Blog Non-AMP, silahkan anda ikuti langkah-langkah untuk memasang widget artikel terbaru pada sidebar blog. untuk Blog AMP kayaknya masih belum bisa. oke kita langsung saja ke tutorialnya.

Berikut adalah Cara Membuat Widget Artikel Tarbaru atau Recent Post Responsive di Blogger 

• Masuk terlebih dahulu ke akun Blogger anda dan masuk ke menu Dashboard
• Pilih Tata Letak > Widget Sidebar > Tambahkan Gadget > HTML/Javascript , kemudian copy script di bawah ini dan letakan pada bagian konten, lalu isi dengan judul Artikel Terbaru.

<div class='widget-content'>
<div class='artikel-terbaru'>
<script>
function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="<li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>";document.write(n)}document.write("</ul>")}
</script>
<script src="/feeds/posts/summary/?max-results=8&alt=json-in-script&callback=artikelterbaru"></script>
</div>
</div>

•  Terakhir Simpan.

Atau Menggunakan Cara Yang Kedua :

• Setelah anda masuk ke Dashboard blog
• Pilh Tema atau Template > Edit HTML
• Silahkan anda cari kode ]]></b:skin> , kemudian copy script CSS di bawah ini dan letakan tepat di atas kode tersebut.

/* Widget Artikel Terbaru */
.artikel-terbaru ul li {
border-bottom: 2px dotted #efefef;
padding-bottom: 8px;
margin-bottom: 8px;
font-weight: bold;
}
.list-label-widget-content ul li, .LinkList ul li, .PageList ul li {
border-bottom: 2px dotted #efefef;
padding-bottom: 6px 0px;
}
.artikel-terbaru ul li:before, .list-label-widget-content ul li:before, .LinkList ul li:before, .PageList ul li:before {
content: "f14b";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
margin-right: 6px;
}
.artikel-terbaru ul li:before {
content: "f14b";
}
.list-label-widget-content ul li:before {
content: "f07b";
}
.LinkList ul li:before {
content: "f14c";
}
.PageList ul li:before {
content: "f249";
}

• Setelah itu Simpan Tema atau Template
• Selanjutnya pergi ke Tata Letak > Widget Sidebar > Tambahkan Gadget > HTML/JavaScript
• Kemudian copy script di bawah ini dan letakan pada bagian konten, lalu isi dengan judul Artikel Terbaru.

<div class='widget-content'>
<div class='artikel-terbaru'>
<script>
function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="<li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>";document.write(n)}document.write("</ul>")}
</script>
<script src="/feeds/posts/summary/?max-results=8&alt=json-in-script&callback=artikelterbaru"></script>
</div>
</div>

• Terakhir Simpan dan cek apakah widget artikel terbarunya sudah muncul dengan baik atau masih ada masalah.

Jika anda ingin menampilkan judul artikelnya 10, silahkan ganti angka pada script max-results=8&alt , ubah angka 8 yang saya tandai warna merah menjadi angka 10.

Script CSS widget artikel terbarunya sudah ada di dalam template. jadi anda tinggal memasang script tambahan di Tata letak dan Widget Sidebar. serta menyeting berapa judul yang akan muncul pada widget tersebut.

tips — Update : Membuat Widget Artikel Terbaru Seperti Blog Serieswans .

Pada update artikel kali ini saya akan membuat widget artikel terbaru dengan desain mirip dengan blog serieswans.com. oke kita langsung saja ke tutorialnya.

Membuat Widget Artikel Terbaru Seperti Blog Serieswans

• Masuk ke akun Blogger anda => Pilih Tema => Edit HTML
• Silahkan copy kode CSS di bawah ini dan letakan di atas kode ]]></b:skin> 

/* Artikel Terbaru Design Versi Serieswans */
div#HTML1.widget.HTML {
     z-index: 9;
    border: 5px solid #fff;
    box-sizing: border-box;
    border-radius: 20px;
    background: #fff;
    box-shadow: 1px 0px 5px rgba(0,0,0,0.8);
}
h3.title {
 background: linear-gradient(to right, #00F260, #0575E6);
    font-family: 'Chewy',cursive;
    margin-bottom: 15px;
    padding: 10px 10px 10px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    display: block;
    border-radius: 20px;
    box-shadow: 1px 0px 5px rgba(0,0,0,0.8);
}
.artikel-terbaru ul li {
    border-bottom: 2px dotted #efefef;
    padding-bottom: 8px;
    margin-bottom: 8px;
    font-weight: 700
}

.LinkList ul li,
.PageList ul li {
    border-bottom: 2px dotted #efefef;
    padding: 6px 0
}

.artikel-terbaru ul li::before,
.list-label-widget-content ul li::before,
.LinkList ul li::before,
.PageList ul li::before {
    content: "\f14b";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 400;
    text-decoration: inherit;
    margin-right: 6px;
    color: #175a96
}

.artikel-terbaru ul li::before {
    content: "\f14b"
}

.list-label-widget-content ul li::before {
    content: "\f07b"
}

.LinkList ul li::before {
    content: "\f14c"
}

.PageList ul li::before {
    content: "\f249"
}

• Setelah itu Simpan Tema
• Selanjutnya pergi ke menu Tata Letak dan pada Bagian Sidebar tambahkan  Gadget HTML/Javascript
• Kemudian Letakan kode di bawah ini dan berinama "Artikel Terbaru"

<div class='widget-content'>
<div class='artikel-terbaru'>
<script>
var _0x6907=["x3Cx75x6Cx3E","x77x72x69x74x65","x6Cx65x6Ex67x74x68","x65x6Ex74x72x79","x66x65x65x64","x6Cx69x6Ex6B","x61x6Cx74x65x72x6Ex61x74x65","x72x65x6C","x3Cx6Cx69x3Ex3Cx61x20x68x72x65x66x3D","x27","x68x72x65x66","x22x3E","x24x74","x74x69x74x6Cx65","x3Cx2Fx61x3Ex20x3Cx2Fx6Cx69x3E","x3Cx2Fx75x6Cx3E"];function artikelterbaru(_0x6aebx2){document[_0x6907[1]](_0x6907[0]);for(var _0x6aebx3=0;_0x6aebx3< _0x6aebx2[_0x6907[4]][_0x6907[3]][_0x6907[2]];_0x6aebx3++){for(var _0x6aebx4=0;_0x6aebx4< _0x6aebx2[_0x6907[4]][_0x6907[3]][_0x6aebx3][_0x6907[5]][_0x6907[2]]&& _0x6907[6]!= _0x6aebx2[_0x6907[4]][_0x6907[3]][_0x6aebx3][_0x6907[5]][_0x6aebx4][_0x6907[7]];_0x6aebx4++){;};var _0x6aebx5=_0x6907[8]+ (_0x6907[9]+ _0x6aebx2[_0x6907[4]][_0x6907[3]][_0x6aebx3][_0x6907[5]][_0x6aebx4][_0x6907[10]]+ _0x6907[9])+ _0x6907[11]+ _0x6aebx2[_0x6907[4]][_0x6907[3]][_0x6aebx3][_0x6907[13]][_0x6907[12]]+ _0x6907[14];document[_0x6907[1]](_0x6aebx5)};document[_0x6907[1]](_0x6907[15])}
</script>
<script src="/feeds/posts/summary/?max-results=6&alt=json-in-script&callback=artikelterbaru"></script>
</div>
</div>

• Lalu Simpan dan cek hasilnya

Warning — Jika anda mengalami kendala pada iconnya berbentuk kotak alias tidak muncul. untuk cara mengatasinya silahkan copy kode berikut

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

dan simpan di atas kode </head>

Sumber : dari pembuat dan pemilik template viomagz sendiri yaitu mas sugeng.id

Nah, mungkin itu saja tutorial kali ini mengenai Cara Membuat Widget Artikel Terbaru atau Recent Post Responsive di Blogger. jika anda memiliki pertanyaan terkait tutorial ini, silahkan berkomentar di bawah. jangan lupa share juga ke teman-teman anda, biar ilmu dan pahala anda bertamabah. semoga bermanfaat.

Related Posts