Cara Membuat Postingan Terbaru Menggunakan Script HTML di Blog yang Menarik
Cara Membuat Postingan Terbaru Menggunakan Script HTML di Blog yang Menarik - Bagi anda blogger pemula atau orang yang baru saja membuat blog di blogspot yang masih bingung bagaimana cara pasang widget postingan terbaru di blog, semoga tulisan tentang tutorial blog ini dapat bermanfaat buat anda. Tulisan ini juga saya buat karena ada seorang teman yang baru membuat blog, bertanya-tanya cara membuat postingan terbaru.
Perlu diperhatikan juga ketika anda memilih membuat widget postingan terbaru, terpenting dari widget postingan terbaru yaitu harus ringan dan menarik sehingga tidak mengurangi kecepatan akses blog anda dan membuat pengunjung tertarik untuk mengklik postingan terbaru karena terlihat menarik perhatian mereka.
Mengapa kecepatan blog perlu diperhatikan ? karena hal itu dapat berpegaruh terhadap SEO blog dan jumlah pengunjung. Blog yang ringan akan mampu membuat pengunjung meningkat sedangkan blog yang lambat dapat mengakbitkan pengunjung pergi sebelum laman yang mereka akses terbuka dan beralih ke blog lain yang kecepatannya baik. Jadi perlu diperhatikan dengan baik widget postingan blog agar tidak menganggu kecepatan blog anda yang sudah baik.
Baca juga : Cara Menambahkan dan Menghapus Widget-Widget Blog di Blogspot
Cara yang dapat kita lakukan untuk menampilkan postingan terbaru di blog dengan platform blogspot yaitu dengan membuatnya menggunakan script HTML untuk dipasang di blog. Banyak script-script postingan terbaru yang telah dibuat oleh para blogger dan script yang saya bagikan ini merupakan script postingan terbaru yang saya gunakan di blog ini. Jadi dapat anda lihat langusng bagaimana tampilannya.
Mengapa harus membuat widget postingan terbaru ? karena pada bawaan blogspot belum tersedia widget untuk postingan terbaru di antara banyaknya widget-widget blogspot yang ada, mungkin kedepannya akan tersedia seiring perkembangan dari blogspot itu sendiri.
Agar dapat membuat postingan terbaru di blog anda tak perlu pusing lagi dengan script sebab telah saya sediakan script untuk digunakan sehingga nanti tampilan postingan terbaru di blog anda mirip dengan di blog saya seperti gambar di atas.
Langkah pertama yang harus anda lakukan yaitu masuk ke dashboard blog kemudian pilih tema lalu copy kode script di bawah ini :
/* Artikel Terbaru */
.artikel-terbaru ul li {
border-bottom: 2px dotted $(label.border.color);
padding-bottom: 8px;
margin-bottom: 8px;
font-weight: 500;
}
.list-label-widget-content ul li, .LinkList ul li, .PageList ul li {
border-bottom: 2px dotted $(label.border.color);
padding-bottom: 5px;
}
.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";
}
Lalu paste atau salin kode tersebut di dalam HTML blog pada bagian CSS. Cari kode " Blogger CSS " untuk mempermudah tekan CTRL + F lalu tulis Blogger CSS, setelah ketemu salin kode script postingan terbaru tadi di bawahnya lalu simpan tema.
Langkah kedua yang harus dilakukan yaitu masuk ke tata letak di bagian kanan menu dashboard lalu pilih tambahkan gadget lalu tambahkan HTML/java script
Langkah ketiga yang perlu dilakukan yaitu copy lagi script di bawah ini dapat salin ke dalam widget HTML/javaScript :
<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>
Pada bagian judul tulis postingan terbaru atau tulisan terbaru, salin code script di bagian bawah kemudian simpan. Jangan lupa simpan setelan
Silahkan lihat tampilan blog anda, sekarang widget postingan terbaru sudah terpasang di blog anda setiap pengunjung akan dengan mudah mengakses postingan-postingan terbaru di blog anda. Selain itu, pengunjung dapat menjelajahi blog anda dengan cukup baik karena postingan terbaru juga termasuk navigasi blog.
Perlu diperhatikan juga ketika anda memilih membuat widget postingan terbaru, terpenting dari widget postingan terbaru yaitu harus ringan dan menarik sehingga tidak mengurangi kecepatan akses blog anda dan membuat pengunjung tertarik untuk mengklik postingan terbaru karena terlihat menarik perhatian mereka.
Mengapa kecepatan blog perlu diperhatikan ? karena hal itu dapat berpegaruh terhadap SEO blog dan jumlah pengunjung. Blog yang ringan akan mampu membuat pengunjung meningkat sedangkan blog yang lambat dapat mengakbitkan pengunjung pergi sebelum laman yang mereka akses terbuka dan beralih ke blog lain yang kecepatannya baik. Jadi perlu diperhatikan dengan baik widget postingan blog agar tidak menganggu kecepatan blog anda yang sudah baik.
Baca juga : Cara Menambahkan dan Menghapus Widget-Widget Blog di Blogspot
Cara yang dapat kita lakukan untuk menampilkan postingan terbaru di blog dengan platform blogspot yaitu dengan membuatnya menggunakan script HTML untuk dipasang di blog. Banyak script-script postingan terbaru yang telah dibuat oleh para blogger dan script yang saya bagikan ini merupakan script postingan terbaru yang saya gunakan di blog ini. Jadi dapat anda lihat langusng bagaimana tampilannya.
Mengapa harus membuat widget postingan terbaru ? karena pada bawaan blogspot belum tersedia widget untuk postingan terbaru di antara banyaknya widget-widget blogspot yang ada, mungkin kedepannya akan tersedia seiring perkembangan dari blogspot itu sendiri.
Cara Membuat Widget Postingan Dengan Script
Agar dapat membuat postingan terbaru di blog anda tak perlu pusing lagi dengan script sebab telah saya sediakan script untuk digunakan sehingga nanti tampilan postingan terbaru di blog anda mirip dengan di blog saya seperti gambar di atas.
Langkah pertama yang harus anda lakukan yaitu masuk ke dashboard blog kemudian pilih tema lalu copy kode script di bawah ini :
/* Artikel Terbaru */
.artikel-terbaru ul li {
border-bottom: 2px dotted $(label.border.color);
padding-bottom: 8px;
margin-bottom: 8px;
font-weight: 500;
}
.list-label-widget-content ul li, .LinkList ul li, .PageList ul li {
border-bottom: 2px dotted $(label.border.color);
padding-bottom: 5px;
}
.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";
}
Lalu paste atau salin kode tersebut di dalam HTML blog pada bagian CSS. Cari kode " Blogger CSS " untuk mempermudah tekan CTRL + F lalu tulis Blogger CSS, setelah ketemu salin kode script postingan terbaru tadi di bawahnya lalu simpan tema.
Langkah kedua yang harus dilakukan yaitu masuk ke tata letak di bagian kanan menu dashboard lalu pilih tambahkan gadget lalu tambahkan HTML/java script
Langkah ketiga yang perlu dilakukan yaitu copy lagi script di bawah ini dapat salin ke dalam widget HTML/javaScript :
<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>
Pada bagian judul tulis postingan terbaru atau tulisan terbaru, salin code script di bagian bawah kemudian simpan. Jangan lupa simpan setelan
Silahkan lihat tampilan blog anda, sekarang widget postingan terbaru sudah terpasang di blog anda setiap pengunjung akan dengan mudah mengakses postingan-postingan terbaru di blog anda. Selain itu, pengunjung dapat menjelajahi blog anda dengan cukup baik karena postingan terbaru juga termasuk navigasi blog.