<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/AVvXsEil0JyRi5GVFy3rbn0qokpWjJ-hOmPkm46VlWI-kH5LD4ySbLOzpHaKIl2J_ZBqdvqpYz-Qtz8oXVcBcAflVshR6VQkbtYnSUvPq59cCa5gnT8L0RO34o0oTTZ_hVjsmR2DPSygiX1x4g-C/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 = 3;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script
src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed'
rel='stylesheet' type='text/css' />
<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; background:
#fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px
0px;}
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A;
width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092;
width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E;
width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0;
width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF;
width: 80%;}
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: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight:
bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>
Navigasi judul pada blog sangatlah penting, dengan adanya navigasi pembaca dapat dengan mudah melihat semua isi dari blog tersebut. selain itu juga pembaca menjadi lebih nyaman karena tidak perlu bingung jika ingin mencari artikel lainnya. Salah satu widget yang dapat membantu navigasi pada blog adalah widget artikel terbaru.
Maksud membuat Artikel Terbaru dengan Thumbnail adalah agar pengunjung dapat melihat dan mengetahui setiap postingan terbaru/terupdate dari sebuah blog, karena Widget Artikel Terbaru selalu uptodate SEO dan hanya menampilkan beberapa artikel yang terakhir dipostingkan. Jumlah postingan terbaru yang akan ditampilkan di sidebar blog dapat diatur sesuai keinginan kita, sehingga tidak akan memakan banyak ruang di sidebar.
Untuk tampilannya sendiri banyak pilihan yang kita gunakan seperti artikel terbaru dengan gambar atau juga snippet. untuk tutorial kali ini saya akan memberikan script widget artikel terbaru yang simple dan ringan. agar kecepatan loading pun tidak terlalu berpengaruh.
oke langsung aja berikut caranya :
1. Buka blogger => tata letak => tambahkan gadget
2. Selanjutnya pilih HTML/Javascript dan masukkan kode berikut ⛛
3. Tampilan seperti gambar diatas, angka 3 contoh susunan bisa disesuai selera anda
Bagaimana Reaksi Anda Tentang Artikel Ini?
Komentar
Posting Komentar
SILAKAN KOMENTAR SESUAI TOPIK.....