Cara membuat widget Recentpost seo di blogspot

widget Recent post adalah widget yang berisi postingan artikel terbaru dari sebuah blog, beberapa artikel yang baru saja dibuat akan ditapilkan dalam satu daftar di sidebar. widget recent post diwajibkan dipasang diblog atau website untuk mempermudah pembaca dalam mencari artikel dan sangat bermanfaat meingkatkan kunjungan halaman pada blog tersebut.

Widget Recent post versi 1.

• langkah langkah pembuatan widget

1. masuk ke situs www.blogger.com lalu login ke akun anda setelah itu masuk ke menu tata letak atau layout.
2. Tambahkan gadget di sidebar lalu pilih gadget Html/javascript.
3. isi judulnya Recentpost lalu copy pastekan script ini di 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 = 30;
   </script>
   <script src="http://www.blogerindo.tk/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
   </ul>

   
   
   keterangan
   tulisan berwarna biru ganti dengan url blog anda.
   tulisan berwarna merah adalah jumlah postingan yang akan ditampilkan sesuaikan sesuka anda.
4. simpan lalu buka blog anda. selesai.

Widget Recent Post v2.

1. login ke akun blog anda lalu masuk ke menu tata letak.
2. cari sidebar lalu pilih tambahkan gadget tambahkan gadget html/javascript.
3. copy pastekan script ini di Html/javascript.
   
   

   <script type="text/javascript">
       function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;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/AVvXsEi5uiG-37q2K0m8_Ags4U1Uwx9RsdK2Ei195d6KPPiUEchVnZWEgNLFoCdHscdi_1aAjuQNGn4_c9PbnUDAXwc5z-TBDj_CXv9SnoTAuOIDW7LtbRBjQqrbYMZfVFC20JZiaKukEudl-Z8d/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==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" 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==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(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_no = 5;
       var showpoststhumbs = true;
       var readmorelink = false;
       var showcommentslink = false;
       var posts_date = false;
       var post_summary = true;
       var summary_chars = 40;</script>
       <script src="http://www.blogerindo.tk/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
       <a style="font-size: 9px; color: #CECECE; margin-top: 10px;" rel="nofollow">Recent Posts Widget</a>
       <noscript>Your browser does not support JavaScript!</noscript>
       <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
       <style type="text/css">
       img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}
       .recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}
       ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}
       ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}
       ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
       .recent-posts-container a{text-decoration:none;}
       .recent-post-title {margin-bottom:5px;}
       .recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}
       .recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}
       .recent-posts-details a{color: #777;}
       </style>

   
   penjelasan
   tulisan warna merah = untuk menampilkan jumlah postingan.
   
   tulisan warna biru = untuk tampilan thumbnail ditampilkan atau tidak 'true = menampilkan' 'false = tidak menampilkan'.
   tulisan berwarna kuning = untuk menampilkan link komentar dan jumlah komentar
   
   tulisan berwarna pink = untuk menampilkan tanggal waktu postingan.
   
   tulisan berwarna ungu = untuk menampilkan summary.
   
   tulisan berwarna hijau = untuk mengatur jumlah karakter postingan yang muncul didalam summary, sesuaikan sesuka anda.
   
   
4. simpan gadget lalu lihat blog anda.