Hayo Pasti Penasaran! Widget Recent Post yang Unik Mirip Home Page


Sebenarnya saya sudah malas membahas pernak-pernik tempilan template. Karena blogger-blogger sekarang sudah sangat pintar. Lihat saja, kini tema blog para blogger sungguh luar biasa. Keren dan cantik-cantik. Dunia blogger kini perkembangannya sangat luar biasa. Tidak seperti diawal kemunculannya. Dulu tema blog, sangat sederhana dan bahkan belum responsive (tema bawaan blogspot lo), kalau blog WP, jangan ditanya lagi. Pokoknya perkembangan dunia blogging sangat mantul. Bahkan saya sampai kawalahan untuk mengikutinya.

Artikel ini hasil dari ngobrol-ngobrol dengan teman facebook. Yang menanyakan widget recent post atau widget artikel terkini yang unik. Eh tidak sengaja, saat blogwalking ada tema/template yang memasang widget recent post. Saya pun nenelusuri kode widget tersebut, dan saya perhatikan kode tersebut punya Arlina. Wah dijamin tambah penasaran. Dan akhirnya saya pun bisa mendapatkan kodenya. Lah kok bisa, bagi yang sudah sering otak-atik html, pastinya tidak kesulitan untuk mengetahui jeroan tema/tempate yang dikunjunginya.

Bagi yang penasaran seperti apa widget recent post tersebut, silakan untuk mencobanya. Caranya sangatlah mudah. Pilih Tata Letak, pilih Tambahkan Gadget, pilih HTML/Javasript dan copy-pastekan kode dibawah ini:
<style scoped='' type='text/css'>
/* Recent Post Navigasi */
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
.recentpostel{display:block;margin:8px 0;height:auto;min-height:79px;border-bottom:1px dashed #eee;}
.recentpostel:last-child{border-bottom:0;}
.recentpostel img{background:#fff;float:left;height:67px;margin-right:10px;width:67px}
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#333}
.recentpostel h6 a:hover{color:#fc4f3f}
.recentpostel:hover{background-color:#fefefe}
.recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
.recentpostel p {display:none}
#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(//2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;}
#recentpostnavfeed{color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#recentpostnavfeed:hover{background-color:#fefefe}
#recentpostnavfeed a{color:#333!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:5px}
#recentpostnavfeed .next{float:right}
#recentpostnavfeed .previous{float:left}
#recentpostnavfeed .home{text-align:center}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}
</style>
<script type='text/javascript'>
//<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "https://djangkarubumi.blogspot.com";
    var charac = 40;
    var urlprevious, urlnext;
function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://1.bp.blogspot.com/-0-lLzXe5Jgc/X2HFeh_VI0I/AAAAAAAAbPQ/_YMa1Q_h23o9wLpvohRpwfF1gNSQLiPgACLcBGAsYHQ/s72/image%2Bdjb.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank' ><img src='"+a+"' title='"+n+"'/></a>",s+="<h6><a href='"+r+"' title='"+n+"'>"+n+" </a></h6>",s+="<p>"+arlinafeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>
<div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div>
Silakan beri judul sesuai dengan keinginan, semisal Recent Post, Artikel Terkini atau sebagainya. Jika sudah mantap klik Simpan dan lihat hasilnya.

Bagaimana mudah sekali bukan? Kode tersebut sudah saya edit dan saya buat se-SEO mungkin. Pada kode bagian .recentpostel p {display:none} boleh dihapus, atau katan none diganti dengan yes. Dan URL blog silakan ganti dengan url blog yang anda inginkan. Bagi yang punya blog sub domian, bisa kok diterapkan disini. Sehingga blog subdomain bisa dipromosikan diblog utama.

Bagi yang pengen tampilan beda, bisa kok diedit kembali kode-kode tersebut. Semisal hover, kode warna karakter huruf atau ingin menyembunyikan kode yang dirasa tak perlu. Atau mungkin jumlah artikel yang ingin dimunculkan, semisal 5 mau dibuat 6 atau bahkan 4. Anda bisa merubahnya dibagian var numfeed = 5;.

Uniknya dimana widget Recent Pots ini? Uniknya adalah tempilannya mirip home page. Dibawahnya ada tombol artikel lama, home dan artikel baru. Seperti yang saya singgung diatas, widget ini sangat cocok untuk mempromosikan blog lainnya, jika anda punya blog lebih dari satu. Bagaimana, masih ada pertanyaan? Silakan tinggalkan komenter dibawah ini.

Related Posts

16 komentar:

  1. Rajin ya kemaskini kod html blog.
    Saya sudah lama tidak ubah.

    BalasHapus
  2. Hahaa.. ini yang kita obrolin di FB ya. Iya sy penasaran. Kan banyak tu theme blogger yang style Magazine yang di home pagenya banyak widget artikel per labrl. Hanya itu rata2 widgetnya itu hanya utk nampilin artikel/label dr blog itu saja.. Kalau mau nampilin dr subdomain misalnya, mesti pake widget feed.. tapi tidk bisa dipasang di widget home page yg label2 itu...

    Tapi mungkin stule widget2 itu yang kita ubah ke style feed ya?

    BalasHapus
  3. Tuh kan udah bikin aku sumringah dibikin tutorialnya langsung, terbaik si abang nih.
    Aku masih sering utak-atik kode bang,belum puas nih sama tampilan yg sekarang dan widget akan saya pasang. Butuh widget kayak gini karna ngikuti konten blog yg semakin amburadul kemana-mana hehe

    BalasHapus
  4. Kudu nyoba brarti kalo gitu. Lama banget g utak atik

    BalasHapus
  5. aku gak selalu berani otakatik html, salah pasang kacau! tapi idenya bolehlah suatu saat dipraktekin

    BalasHapus
  6. wah jadi menarik ya mas sekalian bisa ngarahkan ke banyak blog bagi oara peternak blog widget ini

    ngomongin template aku masih pake yang bawaan blogspot mas cuma takganti warna latar belakangnya aja n tambahin header gambar ndiri

    BalasHapus
  7. kalo gw malah lebih suka template jaman dulu yg classic mas, kalo template bawaan blogger yg sekarang respinsig agak kurang sreg hehe.. boleh juga tuh kode buat recent post nya, bikin blog tambah cantik ya haha :D

    BalasHapus
  8. recent post ku akhire tak ilangin bang
    loadingnya jadi lama haha
    soalnya di bagian bawah blog post udah otomatis ada
    tapi ini juga bermanfaat bagi yg templatenya beluma da bawaan recent post

    sekarang banyakin adsense aja hihi

    BalasHapus
  9. Menarik nih bahasannya. Itu dipasang di widgetnya?
    Jangan berhenti bahas pernak-pernik blogger saya masih belum pintar lho!

    BalasHapus
  10. Aku dulu pake
    Skrg udah dibuang

    Soalnya karna coding jadinya nambah berat blog ku yang udah berat huhuhu

    BalasHapus
  11. Jujur, soal template, widget, desain, coding dan html blog, pokoknya ilmu tentang SEO, saya masih sangat awam, jadinya pakai bawaan blogspot saja hehe.. Kalau tau ilmunya sih memang bagus juga agar tampilan blog makin keren, profesional dan ringan saat loading. Tapi, jika gegabah, malah sebaliknya, bahkan bisa bikin alexa rank membesar, tidak terdeteksi google search console, dan trafik blog menurun. Thx ilmunya

    BalasHapus
  12. aku ngga pernah cek - cek nih mas hehehe..musti belajar banyak lagi dari dirimu nih sebelum bisa kotak - katik

    BalasHapus
  13. panjang betul code nya😊😊 thanks 4 sharing👍

    BalasHapus
  14. Wah aku malah tidak terlalu paham masalah template kang Djangkaru, soalnya template yang aku pakai biasanya template bawaan atau import tapi ngga pernah utak atik htmlnya. Salut dengan para pembuat tema yang makin hari makin bagus ya

    BalasHapus
  15. Dulu senang banget gonta-ganti widget, edit ini itu, tapi sekarang udah bosen dan suka yang simple-simple aj. Apakah kita sama kang? hehe

    BalasHapus

 
Back To Top