Cara Membuat Recent Posts Dark Edition seperti Kurazone

byKurazone Net -
KURAZONE ~ Halo sahabat Kurazer, gimana kabar kalian, masih sehat - sehat saja kan? Kali ini kita akan mempelajari Cara Membuat Recent Posts Dark Edition seperti Kurazone, penampakan dari hasil jadi pada artikel ini akan nampak seperti gambar dibawah ini :

Berikut adalah Cara Membuat Recent Posts Dark Edition seperti Kurazone

1. Buka akun Blogger >> Pilih Tata Letak
2. Tambahkan Gadget baru berjenis HTML/Javascript
3. Copy 2 (dua) kode dibawah ini, dan letakkan / paste kedalam isi gadget.


<style type="text/css">
img.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-container {list-style-type: none;padding: 9px;font:12px 'Roboto Slab','arial',sans-serif;margin: 5px 0px 5px 0px;}
ul.recent-posts-container li:nth-child(1n+0) {border-left: 0.2em solid #007bfd;background-color: #221e1f;width: 91%;color: #fff;font-weight: normal;margin-bottom: 5px;margin-left: 2px;}
ul.recent-posts-container li:nth-child(2n+0) {border-left: 0.2em solid #007bfd;background-color: #221e1f; width: 91%}
ul.recent-posts-container li:nth-child(3n+0) {border-left: 0.2em solid #007bfd;background-color: #221e1f; width: 91%}
ul.recent-posts-container li:nth-child(4n+0) {border-left: 0.2em solid #123456;background-color: #221e1f; width: 91%}
ul.recent-posts-container li:nth-child(5n+0) {border-left: 0.2em solid #123456;background-color: #221e1f; width: 91%}
ul.recent-posts-container li:nth-child(6n+0) {border-left: 0.2em solid #123456;background-color: #221e1f; width: 91%}
ul.recent-posts-container li:nth-child(7n+0) {border-left: 0.2em solid #123456;background-color: #221e1f; width: 91%}
ul.recent-posts-container li:nth-child(8n+0) {border-left: 0.2em solid #123456;background-color: #221e1f; width: 91%}
ul.recent-posts-container li:nth-child(9n+0) {border-left: 0.2em solid #123456;background-color: #221e1f; width: 91%}
ul.recent-posts-container li:nth-child(10n+0) {border-left: 0.2em solid #123456;background-color: #221e1f; width: 91%}
ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #fff;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #fff; font-weight: bold;}
.recent-post-title {}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

<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:"http://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(''),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'',$=1),1==showcommentslink&&(1==$&&(_+=" "),"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(""),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 10;
var showpoststhumbs = false;
var readmorelink = false;
var showcommentslink = false;
var posts_date = false;
var post_summary = false;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css' />
4. Simpan Gadget. KELAR :v

Widget Recent Posts ini saya rancang khusus :

  1. Bertema Dark Edition
  2. Tanpa Gambar
  3. Tanpa Snippet
  4. Tanpa Komentar
  5. Tanpa Tanggal
  6. Tanpa Read More
  7. Berjumlah 10 post
  8. dan lain sebagainya
Apabila kalian ingin mengoprek kode Recent Posts ini, kalian bisa mengeksplor bagian CSS nya, sedangkan untuk mensetting pemanggilan "artikel terkini" nya, kalian bisa mengeksplor bagian kode ini : (Sisanya bisa kalian kembangkan sendiri dengan mengubah nominal angka dan keterangan false / true nya.)
<script type="text/javascript">
var posts_no = 10;
var showpoststhumbs = false;
var readmorelink = false;
var showcommentslink = false;
var posts_date = false;
var post_summary = false;
var summary_chars = 70;
</script>

Itulah informasi mengenai "Cara Membuat Recent Posts Dark Edition seperti Kurazone", selamat mencoba dan semoga bermanfaat. Goodluck !!
Tags





أحدث أقدم