Cara Membuat Recent Post Keren Responsive di Blog

Banyak script yang bisa digunakan dan diterapkan pada platform blog gratis yaitu Blogger, salah satunya adalah membuat recent post keren responsive di blog 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 pencari.
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 menggangi tulisan http://tuantengku.blogspot.com  dengan url blog Anda.
  2. Dan jika ingin mengatur jumlah postnya, ganti numPost=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(‘http://1.bp.blogspot.com/-QaYiqOCLsao/Uypu_bcmtgI/AAAAAAAACy4/NuRzsl7cCc0/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 = “http://1.bp.blogspot.com/-6YRU7gKTkdM/VOajSy76S7I/AAAAAAAAAFY/E3XFIvSayiI/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 http://tuantengku.blospot.com dengan URL blog Anda

Script Recent Post Keren Responsive Lainnya

1. Elegan

<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:”http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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 cara membuat recent post keren responsive di blog semoga bermanfaat.

1 Komentar

  1. Pingback: Cara Memasang Artikel Terkait (Baca Juga) Di Tengah Postingan Blog - Inovatifku.com

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *