Cara Menambahkan Widget Recent Post Tanpa Gambar Valid HTML 5 di Blogspot Ala Bung Frangki

Cara Menambahkan Widget Recent Post Tanpa Gambar Valid HTML 5 di Blogspot Ala Bung Frangki - Template blog yang kita gunakan tidak hanya harus responsive tapi juga valid HTML 5. Menurut pakar, katanya jika template yang kita gunakan valid Html 5 maka artikel kita akan mudah dikenali oleh mesin pencari. Itu artinya jika artikel kita mudah dikenali maka besar kemungkinan artikel kita dapat di indeks google dengan cepat.

Saya tidak tahu pasti, apakah semua itu benar atau tidaknya, namun bagi saya yang terpenting adalah template tersebut tidak eror, loadingnya cepat, responsive dan tampilannya sederhana. Namun jika Anda telah menggunakan template yang valid Html 5, maka untuk mensinergikan widget - widgetnya agar tidak memberatkan loading, gunakanlah yang valid Html 5.

Seperti widget recent post yang akan saya bagikan ini, telah valid Html. Sehingga tidak memberatkan loading blog. Anda dapat Cek Loading blog sebelum dan sesudah menggunakan widget ini. Berikut langkah - langkah untuk memasang widget Recent Post Valid Html 5 ala Bung Frangki :

MENAMBAHKAN WIDGET RECENT POST TANPA GAMBAR VALID HTML 5 DI BLOGSPOT

Login ke Dash Board Blogger Anda
Klik Tata Letak ------> Tambah Gadget
Pilih HTML/ JavaScript, Masukan kode dibawah ini lalu simpan. Dengan begitu Anda telah menambahkan widget recent post pada template Anda, namun belum rapi.

<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><ul>

<script type="text/javascript">var numposts = 10;var standardstyling = true;</script><script type="text/javascript" src="http://1001carainfo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></ul>

Ganti tulisan yang diberi warna merah dengan alamat Url blog Anda dan nomor 10 merupakan jumlah recent post yang ingin Anda tampilkan, silahkan diganti sesuai keinginan Anda.

Selanjutnya, agar tampilan blog Anda rapi dan valid Html 5, masukan kode css dibawah ini pada template Anda. Berikut kodenya ;

/* Widget Recent Post */

#sidebar3 h4, #sidebar3 h3, #sidebar3 h2{background:#049b16;color:#fff;text-transform:capitalize;font-family:Roboto, Sans-Serif;font-size:100%;font-weight:700;position:relative;padding:12px 0 15px;text-align:center;margin:0}

#sidebar3 .widget-content{background:#fff;padding:0 0 0 10px}

#sidebar3 a:link, #sidebar3 a:visited{font-weight:normal}

#sidebar3 ul li {margin:0 5px 0 0 !important;padding:6px 0 !important;position:relative;border-bottom:1px dashed #d5d5d5 !important}

#sidebar3 ul li:last-child{border:none !important}

#sidebar3 ul li a {font-size:13px !important;font-weight:normal !important;color:#333 !important;text-decoration:none;transition: all 0.3s ease-out 0s !important;line-height:1.4em !important}

#sidebar3 ul li a:hover {color:#6aba82 !important;}

Dengan begitu, widget recent post telah ada pada homepage Anda, namun jika loading blog Anda terasa lebih berat. Pindahkan widget recent post hanya pada halaman postingan saja, dengan cara tambahkan kode berikut seperti gambar di bawah ini, yaitu