Cara Membuat Recent Posts Dark Edition seperti Kurazone - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Recent Posts Dark Edition seperti Kurazone

Pilihan Editor :

Cara Membuat Recent Posts Dark Edition seperti Kurazone
Penulis Bagus Surochman
0
Modus malam



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 !!
nanio
Cara Membuat Recent Posts Dark Edition seperti Kurazone
Cara Membuat Recent Posts Dark Edition seperti Kurazone Cara Membuat Recent Posts Dark Edition seperti Kurazone Reviewed by Bagus Surochman on 8/19/2018

Tidak ada komentar:

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.