Cara Menbuat Widget Recent Post keren (dark style) Di Blog

Kadek Putu Sedane
0 Komentar
0
Sapaan adalah ucapan yang wajib di lakukan saat bertemu orang yang kita kenal/tidak kenal...
Ciehhhhhh Ceramah ni yeeeeee wkwkwkwkw,
Hallo sehabat blogging semua kali ini saya mau coba mengupas secara tajam setajam silet, Cara Menbuat Widget Recent Post keren (dark style) Di Blog di blogger, nah sehabat blogging sekalian gi mana untuk persiapan penerapannya sudah siap???
Klok belum siap, silahkan siapkan dahulu,,
Ohhh yaaa kemungkinan saya Next akan berbagi artikel tentang Recent Post juga,,, emmmmm karna saat ini sudah marakmaraknya lagi pada nyari recent post yang paling bagus untuk tampilan blognya...
tidak ada salahnya saya mencoba...
==>Oky untuk persiapannya silahkan anda ikuti di bawah ini

Widget Recent Post keren (dark style)

Widget Recent Post keren (dark style)

Persiapan==>yang harus anda terlebih dahulu lakukan/Siapkan

  • Loging terlebih dahulu ke akun google anda
  • masuk ke blogger anda Buka tata letak pada menu blogger
  • klik tambah gadge

  • Lalu pilih Tambahkan HTML/Java Scripts 


  •  Jika sudah Ikuti langkah selanjutnya

Code Mou

  • Masukan code berikut ke Box area HTML 




<div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div>
<script type='text/javascript'>
//<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://www.bulshitman.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/AVvXsEjmRbsBdgOO4AFi843O60y-u6JwZJ6Erm2cWPmFoSm46slmGMS3kIQXdd-SUHrYtjpUWotc4SEvuz8cP2w0cliftSBx_unxIlF70A7kZNJx84chdNf5kB7cqBV7QEgLybWVry0T53U6Oo5i/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+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>
<style>
#recentpostnav{border:1px solid #000;width:100%;margin:0 auto;}
#recentpostsae{margin:0}
.recentpostel{background:#333;display:block;border:2px solid #111;margin:5px 0;padding:10px;height:79px}
.recentpostel img{background:#222;padding:5px;float:left;height:70px;margin-right:8px;width:70px;}
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px!important;font-weight:700!important;margin:0;color:#aaa;}
.recentpostel:hover{background-color:#111;}
.recentpostel p{font-size:12px;text-align:left;color:#aaa;line-height:normal;margin:5px 0}
#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/AVvXsEi6nNzuCsVaDY3v7mwXWPHnc5anwRkSz-OlOA0O8bc1T9yJuhIbLVYHyfKjQxKaq34f3QKSqLGSEnb46iJ4sq_eouNgH82Gj7tZ_etZMr850J-1GlDDBRQ6ZV-gTvI14F5kagYPlGA3Zmc1/s1600/loader.gif) 50% 50% no-repeat #2c3e50;height:470px;border:1px solid #111}
#recentpostnavfeed{border:2px solid #000;color:#bbb;background:#333;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#recentpostnavfeed:hover{background-color:#111;}
#recentpostnavfeed a{color:#bbb!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:5px 10px}
#recentpostnavfeed .next{float:right}
#recentpostnavfeed .previous{float:left}
#recentpostnavfeed .home{text-align:center}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}
</style>

Note

  • Ganti code di atas yang berwara hijau dengan url/untuk jumblah recent post yang anda inginkan
  • terakhir klik save pada template anda/untuk menghindari kerusakan pada template saran saya pertinjau hasil terlebih dahulu...
SEMOGA SUKSES
← NewerOlder →

Fitur Lagu