Cara Membuat Widget (Postingan Terbaru) yang Ringan dan Tanpa Gambar pada Blogspot

March 04, 2019
Cukup lama tak menciptakan postingan tentang tutorial blog maka hari ini yang mendapatkan ide untuk menulis tentang cara mudah buat widget postingan terbaru yang cepat loading khusus bagi para pengguna blogspot yang akan dipasang pada sidebar blog. Mengapa harus menciptakan sendiri widget postingan terbaru ? sebab pada blogspot belum tersedia widget khusus untuk postingan terbaru atau recent post.

Berdasarkan informasi dari google bahwa blog yang baik yaitu memperhatikan navigasi postingan di blog. Maksud dari navigasi merupakan widget-widget pada blog yang dapat menciptakan pengunjung dengan mudah untuk mengakses semua informasi yang tersedia di blog.

Lihat juga : 8 Khasiat Widget Blog di Blogspot yang Sering Digunakan

Contoh-contoh widget navigasi yang terdapat pada blog misalnya postingan terbaru (recent post), populer post, label atau kategori postingan dan arsip blog. Namun, perlu diketahui juga Jangan Berlebihan Pasang Widget Blog, Agar Blog Ringan (Buat Pemula) dengan begitu kecepatan blog untuk kenyamanan pengunjung tetap baik. Gunakan widget blog yang sangat dibutuhkan sekedar saja.

Membuat widget postingan terbaru sangatlah mudah sebab kita hanya menggunakan script yang nantinya dipasang pada HTML widget blog. Ada juga yang menciptakan widget postingan terbaru dengan menampilkan gambar namun admin sendiri lebih senang tanpa gambar (thumbnail) sesampai kemudian terlihat simple dan cepat loading.

Membuat dan memasang widget postingan terbaru di blog


Sebagaimana yang telah admin sebutkan di atas bahwa untuk menciptakan widget postingan terbaru hanya dengan menggunakan script yang telah tersedia di bawah dan akan dipasang melalui widget di tata letak dasboard blogspot.

1. Buka dasboard blog

2. Tata letak

3. Tambahkan gadget


Anda dapat memilih dimana akan memasang postingan terbaru, apakah di bagian sidebar atau footer. Namun admin sangat menyarankan untuk menempatkan di sidebar sesampai kemudian lebih mudah terlihat oleh pengunjung untuk mengetahui apa saja postingan yang baru diupdate pada blog anda.

4. Pilih HTML/JavaScript


5. Masukkan Script di bawah ini 

<style scoped='' type="text/css">
ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.recent-posts:last-child{border-bottom:0;}
li.recent-posts a{color:#0033CC;}li.recent-posts a:hover{color:#000;text-decoration:underline}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "https://www.hhandromaxdotcom",
numPosts = 10;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="Cara Membuat Widget (Postingan Terbaru) yang Ringan dan Tanpa Gambar pada Blogspot" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>

Keterangan :

Ganti alamat blog dengan blog anda dan angka 10 merupakan jumlah baris postingan terbaru, anda dapat menyesuaikan berapa jumlah postingan terbaru yang ingin ditampilkan (perhatingan warna merah).

6. Simpan pengaturan

Sekarang anda telah terdapat widget postingan terbaru (recent post) yang ringan dan terlihat sangat simple di blog. Dengan begitu dapat menciptakan pengunjung berlama-lama berselancar di blog milik anda. Semoga bermanfaat.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda

No comments