Cara Membuat Recent Posts Keren di Sidebar Blogspot dengan Kode HTML

Blogspot merupakan layanan blog gratisan dari google dan merupakan platform blogging yang paling banyak digunakan di dunia. Ada banyak alasan kenapa blogspot menjadi favorit di mata para blogger, dan salah satunya adalah kita bisa mengatur tampilan blog semau kita 100 %. Karena, disamping memang ada beberapa pilihan template yang telah disediakan oleh blogspot, kita juga bisa menggunakan template yang lain yang bisa kita dapatkan secara gratis di banyak penyedia free template yang bisa kita temukan dengan googling. Selain itu, jika kita sedikit menguasai HTML dan CSS, kita juga bisa berkreasi sendiri untuk membangun sebuah blog dengan tampilan seperti yang kita inginkan.

Pada postingan kali ini, saya hendak membagikan sebuah trik untuk menampilkan Recent Posts di bagian sidebar blogspot. Berbeda dengan Popular Posts yang memang tersedia di menu Add Gadget, untuk Recent Posts pilihan tersebut tidak tersedia. Untuk itu kita harus punya cara sendiri untuk menambahkan Recent Posts di sidebar.

Sebenarnya ada beberapa cara untuk menambahkan Recent Posts di sidebar blogspot. Cara yang paling sederhana yaitu dengan menambahkan RSS feed atau Atom. Namun, menurut saya tampilannya kurang menarik dan terlalu sederhana. Jadi, kali ini saya akan membagikan tutorial bagaimana cara untuk menambahkan Recent Posts yang keren di sidebar blogspot.

Kode Script HTML:

<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/AVvXsEgb9ybrzRDFYTkDV2JVvjuAwJ1W6rODAFqq8CJSnqbKfpWDeOV6CNFjR1uHjIFIoiZ-24JPSmIWHWOWR2-ik84TuBSbVNMe_XQYK80aL5yIXBHar9mmG3tNwOo5VCqjCsI2uGT9LUL6r929/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>
<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: ;background: ;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: ;}
.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}
.recent-posts-details a{color: ;}
</style>

Berikut langkah-langkahnya:

• Login Ke Blogspot Anda.
• Jika Anda mempunyai beberapa blog, pilih blog yang akan di edit.
• Pada Menu Pilihan di sebelah kiri, pilih Tata Letak.

• Perhatikan pada Tata Letak blog Anda dimana Anda akan menambahkan Recent Posts.
• Jika sudah ketemu, klik Tambahkan Gadget.
• Pada jendela yang terbuka, klik tanda + yang ada di sebelah kanan pilihan HTML/Javascript.

• Masukkan judulnya, misalnya Recent Posts, kemudian paste-kan Kode HTML di atas pada kotak Konten.

• Klik Simpan.
• Selesai.

Maka tampilannya akan seperti ini:

Atau seperti ini, akan mengikuti warna background template Anda.

Demikian tutorial cara menampilkan Recent Posts pada sidebar dengan menggunakan HTML Code. Semoga bermanfaat. Terimakasih atas kunjungan Anda di Go Bisnis Online. Sampai jumpa di postingan berikutnya.