Cara Mempercantik Tampilan Blog dengan Menambahkan Widget atau Recent Post Unik

Membuat Recent Post atau Widget adalah hal yang cukup penting untuk tampilan blog anda agar lebih enak di liat dan juga memudahkan pengunjung untuk menemukan artikel terbaru. Widget atau Recent Post sangat banyak mulai dari yang menampilkan gambar sampai yang hanya menampilkan teks keduanya sama fungsinya yaitu menampilkan postingan terbaru dari blog anda,ada banyak sekali tutorial di google maupun Youtube tentang membuat Recent Post ini namun tak jarang kita masih bingung untuk membuatnya.

Untuk versi gambar sangat mudah anda tidak perlu masuk ke edit HTML cukup tambahkan saja di widget namun untuk versi tulisan anda perlu masuk ke edit HTML untuk mengisikan Script di tema dengan cara edit html dan mengisi Script di widget. Silahkan ikuti caranya dan perhatikan langkah-langkahnya

Widget Teks dan Gambar 

Langkah 1 : 

Silahkan masuk ke Dasboard blogger anda pilih Tata Letak  lalu pilih Tambahkan Gadget


Cara Mempercantik Tampilan Blog dengan Menambahkan Widget atau Recent Post Unik

Langkah 2 : 

pilih HTML/Java Script klik pada ikon +

Cara Mempercantik Tampilan Blog dengan Menambahkan Widget atau Recent Post Unik

Langkah 3 :

pada Judul silahkan anda isi Postigan Terbaru dan pada Konten silahkan isi dengan Script yang sudah ada lalu klik Simpan
Cara Mempercantik Tampilan Blog dengan Menambahkan Widget atau Recent Post Unik


<script type="text/javascript" src="//cloud.github.com/downloads/jhwilson/Create-a-Blogger-archive-page/Make-Blogger-Archive-Page.js"></script>
<style type="text/css">
img.recent-post-thumbnail{float:right;height:50px;width:50px;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-wrap {background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;}
ul.recent-posts-wrap li:nth-child(1n+0) {background: #FCD092; width: 94%}
ul.recent-posts-wrap li:nth-child(2n+0) {background: #FFE0B4; width: 94%}
ul.recent-posts-wrap li:nth-child(3n+0) {background: #FFF59E; width: 94%;}
ul.recent-posts-wrap li:nth-child(4n+0) {background: #E1EFA0; width: 94%;}
ul.recent-posts-wrap li:nth-child(5n+0) {background: #B1DAEF; width: 94%;}
ul.recent-posts-wrap li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.recent-posts-wrap a { text-decoration:none; }
.recent-posts-wrap a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;font-weight: bold;color: #444;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>
<script type="text/javascript">
function showrpwiththumbs(t){document.write('<ul class="recent-posts-wrap">');for(var e=0;e<posts_number;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==showpostswiththumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumbnail" 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==insidereadmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcomments&&(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_number = 6;
var showpostswiththumbs = true;
var insidereadmorelink = true;
var showcomments = false;
var posts_date = false;
var post_summary = true;
var summary_chars = 50;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrpwiththumbs"></script>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />


Silahkan ada copy semua Script di atas lalu paste terlebih dahulu di noteped sebelum anda masukan ke kolom Konten

Langkah 4 :

Ini adalah tampilan sebelum dan setelah membuat Widget, Sebelum widget jadi tampilan di blog masih kosong

Cara Mempercantik Tampilan Blog dengan Menambahkan Widget atau Recent Post Unik


Setealah membuat Widget tampialn blog menjadi lebih Cantik dan Enak di lihat serta memudahkan pengunjung menemukan Postingan Terbaru

Cara Mempercantik Tampilan Blog dengan Menambahkan Widget atau Recent Post Unik



Widget hanya menampilkan Teks

Langkah 1 :

Masuk ke Dasboard blog anda pilih Tema lalu klik Edit HTML

Cara Mempercantik Tampilan Blog dengan Menambahkan Widget atau Recent Post Unik

Langkah 2 :

Klik di mana saja di dalam kolom lalu tekan CTRL+F pada Keyboard hingga muncul kotak pencarian lalu ketikan kata Blogger CSS tekan Enter jika sudah muncul isikan Scrip padal koloh di bawah yang bertuliskan Blogger CSS copykan semua script dan paste pada notepad sebelum anda isikan pada kolom edit html ,lalu klik Simpan Tema

Cara Mempercantik Tampilan Blog dengan Menambahkan Widget atau Recent Post Unik

/* Artikel Terbaru */

 .artikel-terbaru ul li {
    border-bottom: 2px dotted $(label.border.color);
    padding-bottom: 8px;
    margin-bottom: 8px;
    font-weight: 500;
}
.list-label-widget-content ul li, .LinkList ul li, .PageList ul li {
    border-bottom: 2px dotted $(label.border.color);
    padding-bottom: 5px;
}
.artikel-terbaru ul li:before, .list-label-widget-content ul li:before, .LinkList ul li:before, .PageList ul li:before {
    content: "\f14b";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    margin-right: 6px;
}
.artikel-terbaru ul li:before {
    content: "\f14b";
}
.list-label-widget-content ul li:before {
    content: "\f07b";
}
.LinkList ul li:before {
    content: "\f14c";
}
.PageList ul li:before {
    content: "\f249";
}


Langkah 3 :

Kembali ke Dasboard blog anda lalu pilih Tata Letak kemudian klik Tambahkan Gedget

Cara Mempercantik Tampilan Blog dengan Menambahkan Widget atau Recent Post Unik


Langkah 4 : 

Pilih pada HTML/JavaScript klik pada ikon +

Cara Mempercantik Tampilan Blog dengan Menambahkan Widget atau Recent Post Unik

Langkah 5 :

Pada Judul ketikan Postingan Terbaru dan pada klom Konten isi kan Script yang tersedia copy scrip lalu paste pada notepad sebelum masukan di dalam kolom konten, lalu klik Simpan

Cara Mempercantik Tampilan Blog dengan Menambahkan Widget atau Recent Post Unik


<div class='artikel-terbaru'>
<script>
function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="<li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>";document.write(n)}document.write("</ul>")}
</script>
<script src="/feeds/posts/summary/?max-results=10&alt=json-in-script&callback=artikelterbaru"></script>
</div>


Langkah 6 :

Selanjutnya cek perubahan pada blog anda ini seblum membuat Widget tampilah blog masih kosong


Cara Mempercantik Tampilan Blog dengan Menambahkan Widget atau Recent Post Unik

Tampilan setalah membuat Widget
Cara Mempercantik Tampilan Blog dengan Menambahkan Widget atau Recent Post Unik

Cukup mudah buakan sobat cara membuat tampilan blog kita menjadi lebih Cantik dan Enak di pandang,jika sobat ada pertanyaan atau kesuliatan saat membuat Widget bias tanyakan pada kolom komentar.Terimakasih

Belum ada Komentar untuk "Cara Mempercantik Tampilan Blog dengan Menambahkan Widget atau Recent Post Unik"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel