Artikel Pilihan

Akhir Zaman Unik Kisah Islami

Produk Terbaru

Cara Membuat Recent Posts Keren di Sidebar Blogspot dengan Kode HTML

Publikasi Selasa, 05 Juni 2018
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://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>
<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.

Artikel

Baca Artikel Lainnya

Review Product

LATEST BLOGS

Jasa Pengiriman
Bank Transfer

Subscribe to our Newsletter!

Copyright © 2018 Dayoo.site - All Rights Reserved
%50
+100
$100000
$1250000
$200000
$500000
Akhir Zaman
Alam
Animal
artikel
Bisnis
Bisnis Online
Blogger
Blogspot
Book
Buku
Cerita
Crypto Currency
Digital
Domain dan Hosting
Edukasi
Entertainment
Gadget
Hacking
Industri
Internet
Islami
Kisah Islami
Komputer
Kuliner
Laptop
Most
Online Shopping
Otomotif
produk
Properti
Puisi
Smartphone
Software
Sponsors
Termux
Tips dan Triks
Toko Online
Travel
Tutorial
Unik
Video
Wazzub
Woocommerce