Cara membuat Recent post keren dan menarik pada blog atau blogger

Admin 3/24/2017 Blogger , Tutorial 1 comment

GUGEL88.com - Salam hangat sahabat semua, pada kesempatan kali ini GUGEL88.COM akan memberikan tutorial bagaimana cara untuk membuat sebuah recent post di blog sahabat, widget recent post adalah sebuah widget yang menampilkan beberapa artikel baru dari blog yang kita miliki, widget recent post yang GUGEL88.COM berikan kali ini cukup menarik dan keren-keren untuk dilihat.

Selain untuk menambah fitur blog agar menjadi cantik, ternyata widget dari recent post ini juga dapat meningkatkan jumlah pengunjung pada blog sahabat, karena dengan adanya sebuah gadget ini membuat pengunjung lebih mudah mengakses artikel lain milik sahabat, dalam kata singkat widget recent post ini SEO friendly untuk blog sahabat.

Untuk menambahkan fitur widget recent post pada blogger sebenarnya sangat mudah, sahabat tinggal mengikuti langkah-langkah berikut ini untuk dapat membuat menambah widget pada blog sahabat. Oke bagi sahabat yang ingin memberikan sebuah widget recent post pada blog sahabat bisa ikuti simak beberapa langkah mudah berikut ini:

Cara Mudah Menambah Widget Recent Post

1. Pertama buka Blog sahabat.
2. Lalu sahabat masuk ke menu "Tata Letak".
3. Klik "Tambah Gadget" dan pilih "HMTL/JavaScript".
4. Tuliskan Judul sesuai keinginan anda dan pilih salah satu kode atau script dibawah ini.

1. Style Recent Post pertama

Source code HTML/JavaScript:

<style scoped="" type="text/css">ul.borecentpost *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.borecentpost{font-size:11px}ul.borecentpost,ul.borecentpost li{margin:0;padding:0;list-style:none;position:relative }ul.borecentpost{width:100%;height:500px }ul.borecentpost li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.borecentpost li:nth-child(1),ul.borecentpost li:nth-child(2),ul.borecentpost li:nth-child(3),ul.borecentpost li:nth-child(4){display:block }ul.borecentpost img{border:0;width:100%;height:auto}ul.borecentpost li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 }ul.borecentpost li:nth-child(2){left:0;top:50% }ul.borecentpost li:nth-child(3){left:50.5%;top:50% }ul.borecentpost li:nth-child(4){width:100%;left:0;top:75% }ul.borecentpost .overlayx,ul.borecentpost li{transition:all .4s ease-in-out }ul.borecentpost .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAoxAihI0kX7Ov1ZpWv8ppzPgID63sI4F4hrl0Z7BiU9Jmlpu9f2R0v4fzi9BJecBcM0FWRWV83UQudsHlStHeyM8JKp4-27GoD0ie9UlCAiaoNqEuEcVqUGnDSabibobMezTGZtmqzxs/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.borecentpost .overlayx,ul.borecentpost img{margin:3px}ul.borecentpost li:nth-child(1).overlayx{background-position:50% 25% }ul.borecentpost .overlayx:hover{opacity:.1 }ul.borecentpost h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}ul.borecentpost li:hover h4{bottom:30px}ul.borecentpost li:nth-child(1)h4,ul.borecentpost li:nth-child(4)h4{font-size:150% }ul.borecentpost .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.borecentpost li:hover .label_text{bottom:20px;opacity:1}ul.borecentpost li:nth-child(2).autname,ul.borecentpost li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% }.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px }</style><div id="featuredpostslider"></div><script type='text/javascript'>function FeaturedPostSlider(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="borecentpost"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};//<![CDATA[FeaturedPostSlider({ blogURL: "http://www.gugel88.com/", MaxPost: 4, idcontaint: "#featuredpostslider", ImageSize: 300, interval: 5000, autoplay: true, tagName: false});//]]></script>

2. Style Recent Post kedua

Source code HTML/JavaScript:

<style scoped='' type='text/css'>/* Recent Post Widget */#recentpostnav{width:100%;border:1px solid #585858;margin:0 auto}#borpbox{margin:0}.recentposarea{display:block;background:#fff;height:79px;border:1px solid #ddd;margin:5px 0;padding:10px}.recentposarea img{float:left;background:#fff;border:1px solid #ddd;margin-right:8px;padding:4px;height:70px;width:70px}.recentposarea h6,.recentposarea h6 a{text-decoration:none;margin:0;color:#111;font-size:13px!important;font-weight:700!important;}.recentposarea:hover{background-color:#fefefe}.recentposarea p{text-align:left;font-size:12px;margin:5px 0;color:#555;line-height:normal}#loadrecentpost{font-family:Tahoma;color:#888;font-size:100px;letter-spacing:-10px;text-shadow:-5px 0 1px #444;text-align:center;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbJtEijhI2EFbweMV8RsgIu0uzETsOYtZEb6RgNnNHVtZRxE-ex5_59EwydpPeX0vIOrTr-dO-PS5qDI5Tke6HYnSF-pFt63mF4d2awqxIVu1vUZC92yVxgL7cijScMuvQxzJGR9ew-A_t/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}#rpnavigation{color:#bbb;border:1px solid #ddd;font-family:Verdana;text-align:center;font-size:12px;margin:0}#rpnavigation:hover{background-color:#fefefe}#rpnavigation a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}#rpnavigation span{padding:5px 10px}#rpnavigation .next{float:right}#rpnavigation .previous{float:left}#rpnavigation .home{text-align:center}#rpnavigation a:hover,#rpnavigation span.noactived{color:transparant!important}</style><script type='text/javascript'>//<![CDATA[ var numfeed = 4; var startfeed = 0; var urlblog = "http://www.gugel88.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/AVvXsEgKd5lsblRlWH-WEfnqN0BQ0UfHVB35uiZYQMHaPUv5_1vxKTwSRk7g0LQi8yMvq8Vbpmz8zjGKt4zqtY_rWbRtPlSz0EqwcoQPSoPJ2d33cvqg8Taj_CZ4UwQgvosGBaro3JMZ_5a8Gl90/s1600/no-image.png",s+="<div class='recentposarea'>",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("borpbox").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("rpnavigation").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("borpbox").innerHTML="<div id='loadrecentpost'></div>",document.getElementById("rpnavigation").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="borpbox"></div><div id="rpnavigation"></div>

3. Style Recent Post ketiga

Source code HTML/JavaScript:

<style>/* CSS Recent Post Gallery Widget */.recent-grid {padding:0;clear:both;}.recent-grid:after {content:"";clear:both;display:table;}.recent-grid .galleryview{position:relative;display:inline-block;margin:6px 0;overflow:hidden;}.recent-grid .galleryview a{text-decoration:none;float:left;position:relative;margin:0 6px}.recent-grid .galleryview .ptitle{display:block;background:rgba(0,0,0,.7);clear:left;position:absolute;font-size:10px;line-height:1.3em;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;overflow:hidden;padding:5px;word-wrap:break-word;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}.recent-grid .galleryview:hover .ptitle{visibility:visible;opacity:1}.recent-grid a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}.recent-grid a:hover img {border-color:#bbb;}</style><script type='text/javascript'>//<![CDATA[// Recent Post Galleryfunction gallerygrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-grid">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+recentpost_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+recentpost_thumbs+'" height="'+recentpost_thumbs+'"/>',p=recentpost_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="galleryview">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}//]]></script><script>var recentpost_thumbs = 72;var recentpost_title = true;</script><script src="/feeds/posts/summary?max-results=9&alt=json-in-script&callback=gallerygrid"></script>

4. Style Recent Post keempat

Source code HTML/JavaScript:

<style type="text/css">img.recent-post-thumbnail{float:right;height:50px;width:50px;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}ul.recent-posts-wrap {background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;}ul.recent-posts-wrap li:nth-child(1n+0) {background: #FCD092; width: 94%}ul.recent-posts-wrap li:nth-child(2n+0) {background: #FFE0B4; width: 94%}ul.recent-posts-wrap li:nth-child(3n+0) {background: #FFF59E; width: 94%;}ul.recent-posts-wrap li:nth-child(4n+0) {background: #E1EFA0; width: 94%;}ul.recent-posts-wrap li:nth-child(5n+0) {background: #B1DAEF; width: 94%;}ul.recent-posts-wrap li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}.recent-posts-wrap a { text-decoration:none; }.recent-posts-wrap a:hover { color: #222;}.post-date {color:#e0c0c6; font-size: 11px; }.recent-post-title a {font-size: 14px;font-weight: bold;color: #444;}.recent-post-title {padding: 6px 0px;}.recent-posts-details a{ color: #222;}.recent-posts-details {padding: 5px 0px 5px; }</style><script type="text/javascript">function showrpwiththumbs(t){document.write('<ul class="recent-posts-wrap">');for(var e=0;e<posts_number;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeZkUPmKMyx9WyuH0X5IHpOrpk5sH1xfGxo3eHGtM2getM5jjxQ0EmHX-hpU_lOv6pN3_nkmQVH31XBdHu1Wp2zB80wH1s5NYxAQUdDilE3W3prpycuwaxdk8LRo-c5XDD4pJKK5x6Cdj2/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpostswiththumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumbnail" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==insidereadmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcomments&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}</script><script type="text/javascript">var posts_number = 4;var showpostswiththumbs = true;var insidereadmorelink = true;var showcomments = false;var posts_date = true;var post_summary = true;var summary_chars = 70;</script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrpwiththumbs"></script><noscript>Your browser does not support JavaScript!</noscript><link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />

5. Style Recent Post kelima

Source code HTML/JavaScript:

<div class="recentpostarea"><style type="text/css">.recentpostarea {list-style-type: none;counter-reset: countposts;}.recentpostarea a {text-decoration: none; color: #49A8D1;}.recentpostarea a:hover {color: #000;}.recentpostarea li:before {background: #69B7E2;float: left;counter-increment: countposts;content: counter(countposts,decimal);z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff; padding: 0px 10px; margin: 15px 5px 0px -6px; border-radius: 100%;}li.r-p-title { padding: 5px 0px;}.r-p-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}.r-p-title a {text-decoration: none;color: #444;font-weight: bold;font-size: 13px; padding: 2px;}.recent-post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}.r-p-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}</style><script type = "text/JavaScript">function showrecentposts(json) {for (var i = 0; i < posts_number; 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);var readmorelink = "... read more";readmorelink = readmorelink.link(posturl); var postdate = entry.published.$t;var showyear = postdate.substring(0,4);var showmonth = postdate.substring(5,7);var showday = postdate.substring(8,10);var monthnames = new Array(); monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec"; if ("content" in entry) {var postcontent = entry.content.$t;}else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); document.write('<li class="r-p-title">');document.write(posttitle);document.write('</li><div class="r-p-summ">');if (post_summary == true) {if (postcontent.length < summary_chars) {document.write(postcontent);} else { postcontent = postcontent.substring(0, summary_chars);var quoteEnd = postcontent.lastIndexOf(" ");postcontent = postcontent.substring(0,quoteEnd);document.write(postcontent + ' ' + readmorelink);}} document.write('</div>'); if (posts_date == true) document.write('<div class="recent-post-date">' + monthnames[parseInt(showmonth,10)] + ' ' + showday + ' ' + showyear + '</div>'); }} </script> <script> var posts_number = 4; var posts_date = true; var post_summary = true; var summary_chars = 80; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script> <noscript>Your browser does not support JavaScript!</noscript></div>

6. Style Recent Post keenam

Source code HTML/JavaScript:

<style type="text/css">#rp_bsu_img{height:290px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}#rp_bsu_img ul{list-style-type:none;margin:0;padding:0}#rp_bsu_img li{border:0; margin:0; padding:0; list-style:none;}#rp_bsu_img li{height:70px;padding:1px;list-style:none;}#rp_bsu_img a{color:#55acee;}#rp_bsu_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:13px;}#rp_bsu_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#282828;text-align:justify;}#rp_bsu_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #f5f5f5;width:75px;height:65px;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript" src="http://yourjavascript.com/77161122610/bsurecentpost.js"></script><script type="text/javascript">var speed = 1000;var pause = 3500;$(document).ready(function(){rpnewsticker();interval = setInterval(rpnewsticker, pause);});</script><ul id="rp_bsu_img"><script style="text/javascript">var numposts = 10;var numchars = 60;</script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script></ul>

7. Style Recent Post ketujuh

Source code HTML/JavaScript:

<style scoped='' type="text/css">ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}li.recent-posts:last-child{border-bottom:0;}li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#444;text-decoration:underline}</style><ul id="recent-posts"></ul><script>//<![CDATA[var homePage = "http://www.gugel88.com",numPosts = 6;function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);//]]></script>

8. Style Recent Post kedelapan

Source code HTML/JavaScript:

<style scoped='' type='text/css'>#recent-posts{color:#999;font-size:12px}#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}#recent-posts ul{margin:0;padding:0}#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}#recent-posts ul li:last-child{border-bottom:0}#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}</style><div id='recent-posts'><script type='text/javaScript'>var rcp_numposts=5;var rcp_snippet_length=150;var rcp_info='yes';var rcp_comment='Comments';var rcp_disable='T?t Nh?n xét';function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN2_64WMT7pQlBPmVvWoeM94XpJEUN_IAejulcfuYIH_nEfCv83JU1M5L0KLpr09sarFPl9QefbhuCOWS2YN8oYBAfjjT5bRZNZ8ZgXz2gBo-DF1NuGdTSxDU3xpuvDfcKZd7Lse7DS5aJ/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');</script></div>

5. Kemudian masukan kode-kode script yang sahabat pilih diatas
6. Jangan lupa simpan dan lihat hasilnya.

*Note: Jika script tidak bisa berjalan silahkan cari tag URL: http://www.gugel88.com/ kemudian rubah dengan URL sahabat.

Nah itulah tutorial bagaimana cara membuat recent post keren dan menarik untuk blog atau blogger yang dapat kami bagikan. Kurang dan lebihnya mohon maaf. Jika ada pertayaan silahkan tinggalkan komentar dibawah.
Semoga bermanfaat

Cara membuat Recent post keren dan menarik pada blog atau blogger

1 komentar

Featured