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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1TVBRBZ4fM1odOFhmd8q6RtjlU9xutS0eN-h5p-K7Y3wS1n_6lTEhMnzkLW-xUqqj6nxkECSdzdVeKCasRS8FiNJWot_19EBPzSeCGwiDJKD9CT9Id7_Lg9uyAbRiO2I4FNPeQ2C1kGrS/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBlgO8x-8OV_mrZnToXmPBohtXmGBoU6H33rf4RQdVy8LbdPU7z1vgmqk3WxCLKgDzTAM8QJRO0JlgPpuUgSRwjgpUQeDwwksd_hAYJL0AORyZC6G_umHmUDY5F7ITfg8SxxFTfgs4V3Ff/s72/image+djb.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.
Penulis : 
Tidak ada komentar:
Posting Komentar