Sistem Informasi: Cara membuat tampilan widget bagus di blog

Cara membuat tampilan widget unik dan menarik di sebuah blogspot.

Mungkin sebagian besar para blogger pemula yang menggunakan blogspot masih belum tahu atau kesulitan untuk menampilkan artikelnya yang baru di buat, karena memang secara default blogger tidak ada fitur tersedia untuk menampilkan recent posts pada blog kita, yang ada hanyalah fitur archive saja, tapi itu masih tidak begitu keren dan sabgat monoton kalau menurut kami pribadi, padalnya terlalu mudah dan gak secara spesifik untuk menampilkan postingan baru dalam blog.

Cara membuat widget Postingan Terbaru Di Blog sebenarnya bukanlah suatu hal yang sulit untuk bisa dilakukan oleh para pemilik blog dari blogger atau blogspot, apalagi sudah banyak para master coding yang dengan suka rela berbagi ilmu untuk memberikan sebuah solusi tentang bagaimana Cara membuat tampilan widget di sebuat blog menjadi menarik dengan mudah, artinya kita hanya tinggal pakai saja tanpa harus membeli karena telah dibuatkan gratis oleh beberapa situs.

Banyak sekali model widget Artikel terbaru keren yang telah dibuatkan oleh para master coding, tinggal kita pilih mau menampilkan widget pake yang model apapun sudah tersedia, hanya saja perlu diketahui oleh para pemilik blog pemula, jika ingin akses blog tidak lemot, maka jangan sampai terlalu banyak menambahkan widget pada blog entah itu dengan alasan agar terlihat keren dan cantik, karena kebanyakan tampilan widget di blog kita justru akan membuat blog sangat berat diakses.

Percuma juga punya blog dengan berbagai tampilan kalau susah di buka oleh pembaca, karena pada intinya, sebaik-baik blog adalah yang mudah diakses karena ringan dan isinya bermanfaat bagi para pembaca. Sehingga pengunjung ketika melihat artikel kita cepat untuk di tampilkan.

Blog yang kita bikin di blogspot statusnya masih numpang di google, maka, jangan sampai kita kena teguran, sudah numpang malah nambah berat hosting google, karena blog terlalu dibuat aneh-aneh dengan hiasan yang sebenarnya gak terlalu ada manfaatnya.

Kembali ke pembahasan Cara membuat widget Postingan Terbaru Di Blog dari blogspot, untuk bisa menampilkan widget recent posts kita hanya memerlukan beberapa code script untuk memanggil fungsi tersebut agar artikel terbaru bisa tampil di bagian widget postingan terbaru yang telah kita buat khusus.

Contoh tampilan Widget Recent Post Simple tapi tetap keren, seperti pada blog bangtohir yang lain, bisa kamu lihat Demonya Di bawah ini

Adapun Cara membuat widget Postingan Terbaru Di Blog sebagai berikut:

Langkah Pertama: Login Ke Blogger seperti biasanya

Langkah kedua: Pilih “Tata Letak” / “Layout”

Langkah ketiga: Tambahkan “Widget baru” ( Add a Widget) – Pilih “HTML/JavaScript“.

Langkah Keempat: Copy Paste Kode Dibawah Ini kedalam Kolom baru tadi:

<script type=”text/javascript”>

function showrecentposts(json){for(var i=0;i<numposts;i++){var

entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if

(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if

(entry.link[k].rel==’alternate’){posturl=entry.link[k].href;break}}

posttitle=posttitle.link(posturl);if(standardstyling)document.write

(‘<li>’);document.write(posttitle)}if(standardstyling)document.write(‘</li>’)}

</script>

<script type=”text/javascript”>var numposts = 9;var showpostdate = false;var

showpostsummary = false;var numchars = 0;var standardstyling = true;</script> <script type=”text/javascript” src=”https://................co.id/feeds/posts/default?

orderby=published&alt=json-in-script&callback=showrecentposts”></script>

Keterangan yang harus di kita edit pada Kode diatas:

tulisan berwarna Merah (https://domainkamu.co.id/) ganti dengan url blog kamu. tanda (/) harus ada satu.
Angka sembilan berwarna biru bisa diganti sesuai kebutuhan mau menampilkan berapa judul di widget artikel terbaru pada blog kamu.

Tambahan :

Kode diatas mungkin bagi kamu kurang bagus hasil tampilannya di blog, jika kamu ingin membuatnya lebih rapi. maka tambahkan kode berikut kedalam HTML template kamu:

.sidebar li { margin: 8px 0; padding: 0 0 5px; border-bottom: 1px solid #4169E1; list-style: none; }

Note: yang berwarna merah untuk mengganti warna garis pemisah antar judul. Kalau gak diubah juga gak apa-apa, karena itu sudah bangtohir ubah menggunakan warna biru.

Cara Memasukan Kode tambahan diatas kedalam kode HTML Template blog:

Login ke blogger atau blogspot kamu
Pilih Template – Klik Edit HTML
Cari bagian kode “/* SIDEBAR WRAPPER */” kalau sudah ketemu cari lagi kode ” .sidebar li “

Untuk memdahkan kamu menemukan kode tersebut, cukup ketikan di keyboard : CTRL+F dan masukan ” .sidebar li ” ke kolom seacrh. seperti pada gambar berikut: