Skip to main content

Pilihan Code script blogger recent post responsive (Paling Keren)

Pilihan Code script blogger recent post responsive (Paling Keren)



Banyak script yang bisa digunakan dan diterapkan pada platform blog gratis yaitu Blogger, salah satunya adalah membuat recent post keren responsive di blog biar bertambah kereeen dengan menggunakan script dan tanpa menggunakan CSS, Anda bisa langsung menerapkannya di widget sidebar ataupun tempat yang Anda inginkan, Recent post atau artikel terbaru bagi beberapa orang penting karena bisa menambah jumlah pengunjung dan menurunkan Bounce Rate, ada dua macam recent post, yaitu dengan thumbnail atau gambar dan tanpa thumbnail, serta desain yang berbeda beda bisa Anda modifikasi sendiri, berikut script recent post yang bisa Anda pasang di blog dan tentunya keren responsive.
Selain widget recent post, ada juga widget yang lainnya seperti popular post, featured post, related post atau artikel terkait, semua itu bisa menampilkan beberapa artikel sesuai label ataupun tidak dan jumlah tampilnya yang bisa Anda atur sendiri, memasang recent post pada blog tidak terlalu sulit, hanya ada beberapa langkah saja yang bisa Anda ikuti dan tentunya mudah.

Pemasangan recent post yang paling sering dan banyak dilakukan oleh blogger adalah di bagian Sidebar dan Footer karena tempat ini sangat strategis dan bisa membuat pengunjung kembai membaca artikel Anda yang lainnya dengan melihat daftar yang ada pada artikel terbaru yang sudah Anda pasang sebelumnya.

Mengenal manfaat pemasangan artikel lain pada sebuah halaman blog sangatlah banyak, yang pertama adalah dapat meningkatkan pengunjung menjadi lebih banyak lagi karena Anda menyajikan artikel lebih selain artikel utama, dengan banyaknya pengunjung maka jumlah Bounce Rate juga akan turun, dimana semakin kecil angka Bounce rate maka kualitas blog semakin baik di mata mesin pencarian.

Sudah banyak script untuk menampilakan artikel recent post di blog, namun tidak semua memiliki tampilan keren dan SEO friendly, jadi jika Anda ingin memasang recent post di blog harus mencari scirpt yang responsive dan paling work, selain mencari yang responsive, Anda juga jangan melupakan desain/tampilan agar menarik pengunjung untuk membaca artikel terbaru pada blog Anda.

Jika Anda kebingungan mencari recent post yang terbaik memiliki tampilan keren, responsive, tidak jadul dan valid HTML 5 maka Admin sudah menyediakan macam macam script bervariasi yang bisa Anda terapkan di blog tanpa harus edit HTML terlebih dahulu, karena hanya tinggal langsung memasangnya di widget tema blog Anda saja.

Cara Membuat Recent Post Keren Responsive di Blog Dengan Thumbnail dan Tanpa Thumbnail

1. Membuat Recent Post Dengan Thumbnail

Recent Post Dengan Thumbnail

  • Pertama, pastikan Anda sudah Login ke Blogger.com
  • Lalu klik tulisan ‘ Layout’ di dashboard bagian kiri blog.
  • Jika Anda ingin memasang recent post di Sidebar maka klik tulisan ‘ Add Gadget/Tambahkan Gadget’ di bagian widget sidebar.
  • Akan ada banyak opsi, Anda harus memilih ‘HTML/Javascript’ lalu copy dan tempelkan script dibawah ini pada kolom HTML tadi.

<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=7;
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)+”&#133;”;};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=”http://lh3.ggpht.com/–Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png”};}};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>

  • Terakhir jangan lupa klik Save dan lihat hasilnya.
Tambahan : 
Jika Anda ingin mengatur jumlah artikel yang muncul, caranya ganti angka 7 dengan Angka yang Anda mau.

2. Membuat Recent Post Sederhana Tanpa Gambar Thumbnail


  • Seperti diatas, pertama Login dulu ke blogger.com
  • Selanjutnya klik tulisan ‘Layout/Tata Letak’ pada dashboard di bagian kiri.
  • Pilih ‘Add Gadget/Tambahkan Gadget pada widget yang ingin Anda jadikan tempat artikel terbaru.
  • Dan masukkan kode dibawah ini pada kolom yang tersedia.

<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://tuantengku.blogspot.com”,
numPosts = 5;
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>
  • Dan terakhir klik Simpan untuk melihat perubahannya.
Keterangan :
  1. Agar recent post muncul di blog Anda, maka harus mengganti tulisan  dengan url blog Anda.
  2. Dan jika ingin mengatur jumlah postnya, ganti numPos=5, ganti angkanya dengan angka yang Anda inginkan.

3. Membuat Recent Post Warna Warni

Yang ketiga memiliki desain yang berbeda dari yang lainnya sekaligus dapat menarik perhatian pengunjung karena recent post nya berwarna warni seperti pelangi, berikut script dan tutorialnya.

  • Seperti biasanya langsung saja tambahkan script di bawah ini pada widget blog Anda, caranya sama seperti yang diatas.
  • Tempelkan script dibawah ini pada kolom HTML.
<style scoped=”scoped”>
#ptb-repost {
font:normal normal 11px/normal Arial;
color:Black;
margin:0 auto;
padding:0;
min-height:100px;
background:transparent url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipDHtF1By-3Ihpc97sOrR6uD_tSPzsN5SN4Ucip-zFMBf5CNGsoYyoAk4lobN4JAxc7fIXpQCLoFMuNeTjKHoQ77fgNFS-1is911ZKYmUOAwmC9TC7t6akunRzbctGJk0u8IvJDcrZ_T4/s1600/loading.gif’) no-repeat 50% 50%;
}
#ptb-repost li {
list-style:none;
margin:2;
padding:8px 5px ;
background-color:white;
border-bottom:0px solid #ddd;
}
#ptb-repost li a img:hover {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);opacity: 0.5;
}
#ptb-repost li a img {
float:left;
margin:0 0px 0 0;
padding:0;
border:none;
background:none;
outline:none;
}
#ptb-repost li a.title {
font:bold normal 12px/normal Arial;
display:block;
text-decoration:none;
color:#fdfdfd;
}
#ptb-repost li a.title:hover {
text-decoration:none;
color:#B2B2B2;
}
#ptb-repost li:nth-child(1) {background-color:#E11E28;margin-right:0%}
#ptb-repost li:nth-child(2) {background-color:#FD3C03;margin-right:0%}
#ptb-repost li:nth-child(3) {background-color:#FECB09;margin-right:0%}
#ptb-repost li:nth-child(4) {background-color:#6EBE27;margin-right:0%}
#ptb-repost li:nth-child(5) {background-color:#149A48;margin-right:0%}
#ptb-repost li:nth-child(6) {background-color:#5BBFF1;margin-right:0%}
#ptb-repost ul li:nth-child(7) {background-color:#61469C;margin-right:0%}
#ptb-repost ul li:nth-child(8) {background-color:#863E86;margin-right:0%}
#ptb-repost li:nth-child(9) {background-color:#863E62;margin-right:0%}
#ptb-repost li:nth-child(10) {background-color:#815540;margin-right:00%}
</style>
<ul id=”ptb-repost”></ul>
<script>
//<![CDATA[
var rp_homePage = “http://tuantengku.blogspot.com“,
    rp_numPosts = 5,
    rp_thumbWidth = 70,
    rp_numChars = 75,
    rp_sortByLabel = false,
    rp_noImage = “https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja2U2qpNpAkEGxr5fcthRoJwAbd8I91y4OmHFTYTk6y7egdL_aj6aMRLznWXQ2hoAeTarX0xcBUkfKxmQ8C99BAk4mAUnj36HsQsAA1haDjphpebskuz50YGml4bONHQsRwTsbmaCM__qi/s1600/sun.jpg“,
    rp_newTabLink = false,
    rp_loadTimer = “onload”;
//]]>
</script>
<script src=’https://mas-aldi.googlecode.com/svn/trunk/js/rp-warna-warni.js’ type=’text/JavaScript’></script>

  • Klik Save dan lihat hasilnya
Keterangan : 
  1. Ganti dengan URL blog Anda

Script Recent Post Keren Responsive Lainnya

1. Elegan

Script Recent Post 1

<div class=”recentpoststyle”>
  <script type=”text/javascript”>
  function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if(“alternate”==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i=”… read more”;i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]=”Jan”,m[2]=”Feb”,m[3]=”Mar”,m[4]=”Apr”,m[5]=”May”,m[6]=”Jun”,m[7]=”Jul”,m[8]=”Aug”,m[9]=”Sep”,m[10]=”Oct”,m[11]=”Nov”,m[12]=”Dec”,”content”in s)var d=s.content.$t;else if(“summary”in s)var d=s.summary.$t;else var d=””;var v=/<S[^>]*>/g;if(d=d.replace(v,””),document.write(‘<li class=”recent-post-title”>’),document.write(n),document.write(‘</li><div class=”recent-post-summ”>’),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(” “);d=d.substring(0,f),document.write(d+” “+i)}document.write(“</div>”),1==posts_date&&document.write(‘<div class=”post-date”>’+m[parseInt(u,10)]+” “+c+” “+o+”</div>”)}}
  </script>
  <script type=”text/javascript”>
  var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
  <script src=”/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts”>
  </script><a style=”font-size: 9px; color: #CECECE;margin-top:10px;” href=”http://archivecomputer.blogspot.co.id/” rel=”nofollow”>Elegan Recent Post</a>
  <noscript>Browser Anda tidak mendukung Javascript</noscript>
  <style type=”text/css”>
  .recentpoststyle {counter-reset: countposts;list-style-type: none;}
  .recentpoststyle a {text-decoration: none;color: #49A8D1;}
  .recentpoststyle a:hover {color: #000;}
  .recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}
  .recent-post-title a {color: #444;text-decoration: none;font: bold 13px “Avant Garde”,Avantgarde,”Century Gothic”,CenturyGothic,AppleGothic,sans-serif;}
  .post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}
  .recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,”Baskerville Old Face”,”Hoefler Text”,”Times New Roman”,serif;}
  </style></div>

2. Minimalis Responsive

Script Recent Post 2

<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(p){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/AVvXsEhljxtiTRMrmH91FF1kZk6DB-LAp85oV7LQ29cy7rcGOXfJypmGoG71D5SQ0FMsa0uoki5POw1NISuzub0-RVweEqFg0qK-klOepgjrdzuBK1oajqDq-Kf0RSUFUlFu87MCMPnsp8QHxNi3/s1600/no-thumb.png”}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]=”Jan”,A[2]=”Feb”,A[3]=”Mar”,A[4]=”Apr”,A[5]=”May”,A[6]=”Jun”,A[7]=”Jul”,A[8]=”Aug”,A[9]=”Sep”,A[10]=”Oct”,A[11]=”Nov”,A[12]=”Dec”,document.write(‘<li class=”recent-posts-list”>’),1==posts_date&&document.write(‘<div class=”post-date”>’+A[parseInt(w,10)]+” “+v+” “+f+”</div>”),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>”);var g=””,k=0;document.write(‘<div class=”recent-posts-details”>’),1==showcommentslink&&(1==k&&(g+=” <br> “),”1 Comments”==l&&(l=”1 Comment”),”0 Comments”==l&&(l=”No Comments”),l='<a href=”‘+m+'” target =”_top”>’+l+”</a>”,g+=l,k=1),1==readmorelink&&(1==k&&(g+=” | “),g=g+'<a class=”readmorelink” href=”‘+r+'” class=”url” target =”_top”>Read more</a>’,k=1),document.write(g),document.write(“</div>”),document.write(“</li>”)}document.write(“</ul>”)}
  </script>
  <script type=”text/javascript”>
  var posts_no = 5;
  var showpoststhumbs = true;
  var readmorelink = true;
  var showcommentslink = true;
  var posts_date = true;
  </script>
  <script src=”/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs” rel=”nofollow”></script>
  <a style=”font-size: 9px; color: #CECECE; float: right; margin-top: 5px;” href=”http://archivecomputer.blogspot.co.id/a” rel=”nofollow”>Recent Posts Widget</a>
  <noscript>Your browser does not support JavaScript!</noscript>
  <link href=’http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah’ rel=’stylesheet’ type=’text/css’ />
  <style type=”text/css”>
  img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
  .recent-posts-container {font-family: ‘Gloria Hallelujah’, cursive;  float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
  ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
  ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}
  ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px;  border-top: 2px solid #FCD6CB;}
  ul.recent-posts-container {border: 2px solid #FCD6CB; }
  .recent-posts-container a { text-decoration:none; }
  .recent-posts-container a:hover { color: #222;}
  .post-date {color:#e0c0c6; font-size: 11px; }
  .recent-post-title a {font-size: 14px;color: #616662;}
  .recent-post-title {padding: 6px 0px;}
  .recent-posts-details a{ color: #888;}
  .recent-posts-details {padding-bottom: 5px;}
  a.readmorelink {color: #4DACE3;}
  </style>

3. Style Terakhir

Script Recent Post 3

<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/AVvXsEhljxtiTRMrmH91FF1kZk6DB-LAp85oV7LQ29cy7rcGOXfJypmGoG71D5SQ0FMsa0uoki5POw1NISuzub0-RVweEqFg0qK-klOepgjrdzuBK1oajqDq-Kf0RSUFUlFu87MCMPnsp8QHxNi3/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 = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 40;</script>
<script src=”/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs”></script>
<a style=”font-size: 9px; color: #CECECE; margin-top: 10px;” href=”http://tuantengku.blogspot.com/” >Recent Post Tengku Tutorials</a>
<noscript>Browser Anda tidak mendukung 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>


Untuk script postingan terbaru diatas tinggal Anda tempelkan pada kotak HTML yang tersedia di widget blog Anda, caranya sangat mirip seperti yang diatas, jadi tidak perlu diulang lagi cara pemasangannya, sudah ada beberapa pilihan style recent post keren yang bisa diterapkan di blog Anda, mengenal banyak manfaat dan kelebihannya, jadi Anda harus segera memasangnya apalagi jika Sidebar atau Footer masih kosong belum diisi widget apapun, namun jangan terlalu banyak memasang widget juga, karena dapat mempengaruhi loading blog menjadi lambat dan kecepatan loading blog juga termasuk kedalam SEO, sekian Kode script blog recent post paling keren dan responsive


Lanjut ya biar lebih ringan..


Cara membuat widget Recent post keren dan ringan di Blog


Widget ada banyak macam didalam blog, salah satunya yang akan admin bahas triknya kali ini ialah Widget Recent Post. Untuk mempercantik halaman blog dibutuhkan widget widget khusus, Seperti yang kita ketahui widget bawaan mungkin terlihat kurang menarik. inilah faktor para blogger memburu widget widget keren. Nah kali ini admin akan share tentang Tutorial bagaimana ”Cara membuat widget Recent post keren dan ringan di Blog" Seperti yang sudah dijelaskan, Apa itu widget Recent Post?? widget Recent Post adalah Widget blogger yang berfungsi sebagai penunjuk kepada Artikel terakhir dipublish atau baru saja dipublish, Nah didalam widget Recent post semua artikel terakhir yang anda publish akan menjadi satu. Bagaimana tertarik kah anda untuk mencoba widget recent post?? tenang saja yang admin share widget yang sangat responsiv dan ringan jadi jangan takut ya

Oke Langsung saja admin share Tutorialnya berikut langkah langkahnya

Cara membuat widget Recent post keren dan ringan di Blog

1. Langsung saja Login kehalaman dashboard blogger anda pilih TATA LETAK=>Add Gadget=>Html Javascript=>
2. Setelah muncul halaman baru isikan judul dan copykan kode
dibawah ini

<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/AVvXsEhljxtiTRMrmH91FF1kZk6DB-LAp85oV7LQ29cy7rcGOXfJypmGoG71D5SQ0FMsa0uoki5POw1NISuzub0-RVweEqFg0qK-klOepgjrdzuBK1oajqDq-Kf0RSUFUlFu87MCMPnsp8QHxNi3/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 = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 40;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="https://menthorkita.blogspot.com/" 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;}
.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>


NOTE : CATATAN
1. var numposts = 5 adalah jumlah post yang akan tampil dalam widget

2. var showpoststhumbs = untuk mengatur apakah akan menampilkan thumbnail atau tidak, jika tidak ingin tampilkan thumbnail, ganti tulisan “true” menjadi “false”

3. var showcommentslink =  untuk menampilkan link komentar + Jumlah komentar dari postingan yang tampil.

4. var posts_date =  > untuk pengaturan menunjukkan tanggal posting 

5. var post_summary =  > untuk pengaturan apakah ingin menampilkan summary atau tidak

6. var summary_chars = > mengatur jumlah karakter awal posting yang muncul dalam summary. Bisa dikurangi atau ditambah.

7. Intinya “true” berarti perintah tampilkan dan “false” perintah sembunyikan. Paste semua code di bagian isian konten. Kemudian klik Simpan.
Oke jika sudah silahkan di save javascriptnya dan kemudian liat hasilnya 
Anda bisa berkreasi sendiri tentunya&nibsp; beberapa widget lainnya Mudah bukan ?? nah demikianlah tutorial admin tentang bagaimana “Cara membuat widget Recent post keren dan ringan di Blog” sekian dan terima kasih telah berkunjung..


Semoga bermanfaat salam sukses semua 

Labels:

Comments

Post a Comment