Cara Pasang Widget Recent Post Berwarna Keren dan Unik

Berikut ini beberapa Widget Postingan terbaru unik dan keren yang dapat di pasang di situs blog anda, agar tampak lebih menarik dan para pengunjung tidak bosan untuk menjelajahi situs blog anda.

Cara Pasang Widget Recent Post Berwarna Keren dan Unik. 

1. Login ke akun blog anda.

2. Pilih menu Tata Letak

3. Tambahkan widget HTML/Javascript

4. Tempel kode berikut ini ke dalam Kotak widget HTML/Javascript

Widget Recent Post Berwarna Gaya #1

Kode Script :

<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/AVvXsEjWv_vhZK0hZQ7I70_UDD21ei1GyUhWw_50ryPLe9aGSnRgzyNZmWYmIj2k13pSL_koDJwdTQe53xK9vevG2-9YAtbe4_sxjQ7uTKEQXXogg9We5IQgXyXtPJ2e8c26cKsbMHqdBDcXu0YS/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 = 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>

<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="http://aridjaya.blogspot.com/2017/04/5-widget-recent-post-menarik.html" rel="nofollow">Recent Posts Widget</a>

<noscript>Your browser does not support JavaScript!</noscript>

<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>

Widget Recent Post Berwarna Gaya #2

Kode Script :

<div class="recentpoststyle">

<script type="text/javascript"> function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}

</script>

<script type="text/javascript">

var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>

<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">

</script><a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="http://aridjaya.blogspot.com/2017/04/5-widget-recent-post-menarik.html" rel="nofollow">Recent Posts Widget</a>

<noscript>Your browser does not support JavaScript!</noscript>

<style type="text/css">

.recentpoststyle {counter-reset: countposts;list-style-type: none;}

.recentpoststyle a {text-decoration: none;color: #49A8D1;}

.recentpoststyle a:hover {color: #000;}

.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}

.recent-post-title a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}

.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}

.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}

</style></div>

Widget Recent Post Berwarna Gaya #3

Kode Script :

<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/AVvXsEjWv_vhZK0hZQ7I70_UDD21ei1GyUhWw_50ryPLe9aGSnRgzyNZmWYmIj2k13pSL_koDJwdTQe53xK9vevG2-9YAtbe4_sxjQ7uTKEQXXogg9We5IQgXyXtPJ2e8c26cKsbMHqdBDcXu0YS/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>

<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="http://aridjaya.blogspot.com/2017/04/5-widget-recent-post-menarik.html" rel="nofollow">Recent Posts Widget</a>

<noscript>Your browser does not support JavaScript!</noscript>

<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: #fff;background: #69B7E2;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: #2aace3;}

.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}

.recent-posts-details a{color: #777;}

</style>

Widget Recent Post Berwarna Gaya #4

Kode Script :

<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(p){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/AVvXsEjWv_vhZK0hZQ7I70_UDD21ei1GyUhWw_50ryPLe9aGSnRgzyNZmWYmIj2k13pSL_koDJwdTQe53xK9vevG2-9YAtbe4_sxjQ7uTKEQXXogg9We5IQgXyXtPJ2e8c26cKsbMHqdBDcXu0YS/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),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>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}

</script>

<script type="text/javascript">

var posts_no = 5;

var showpoststhumbs = false;

var readmorelink = true;

var showcommentslink = true;

var posts_date = true;

</script>

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

<a style="font-size: 9px; color: #CECECE; float: right; margin-top: 5px;" href="http://aridjaya.blogspot.com/2017/04/5-widget-recent-post-menarik.html">Recent Posts Widget</a>

<noscript>Your browser does not support JavaScript!</noscript>

<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:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}

.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}

ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}

ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}

ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}

.recent-posts-container a { text-decoration:none; }

.recent-posts-container a:hover{color: #4DACE3;}

.post-date {color:#e0c0c6; font-size: 11px; }

.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}

.recent-post-title { margin: 5px 0px; }

.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}

.recent-posts-details a{ color: #888;}

a.readmorelink {color: #4DACE3;}

</style>

Widget Recent Post Berwarna Gaya #5

Kode Script :

<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(p){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/AVvXsEjWv_vhZK0hZQ7I70_UDD21ei1GyUhWw_50ryPLe9aGSnRgzyNZmWYmIj2k13pSL_koDJwdTQe53xK9vevG2-9YAtbe4_sxjQ7uTKEQXXogg9We5IQgXyXtPJ2e8c26cKsbMHqdBDcXu0YS/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),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>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),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;

</script>

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script>

<a style="font-size: 9px; color: #CECECE; float: right; margin-top: 5px;" href="http://aridjaya.blogspot.com/2017/04/5-widget-recent-post-menarik.html" rel="nofollow">Recent Posts Widget</a>

<noscript>Your browser does not support JavaScript!</noscript>

<link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />

<style type="text/css">

img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}

.recent-posts-container {font-family: 'Gloria Hallelujah', cursive;  float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}

ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }

ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}

ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px;  border-top: 2px solid #FCD6CB;}

ul.recent-posts-container {border: 2px solid #FCD6CB; }

.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: #616662;}

.recent-post-title {padding: 6px 0px;}

.recent-posts-details a{ color: #888;}

.recent-posts-details {padding-bottom: 5px;}

a.readmorelink {color: #4DACE3;}

</style>

Solusi Pengaturan Jumlah Artikel pada Halaman Beranda Blogspot

Biasanya halaman beranda atau home jumlah atikel/postingan yang tampil tidak dapat diatur/jumlahnya tetap walaupun di bagian pengaturan postingan sudah di set. Misalnya dibagian pengaturan sudah diatur jumlah yang tampil di beranda (home) 10 tapi yang muncul hanya 6 atau 3.


Masalah seperti itu sering terjadi di blog yang menggunakan auto readmore. Karena kebanyakan template yang saya buat menggunakan auto readmore sehingga saya rasa artikel ini perlu untuk saya buat.

Kenapa template yang menggunakan auto readmore biasanya jumlah artikel yang muncul dihalaman beranda tidak bisa diatur. Dari artikel yang saya baca hal itu karena blogspot sudah mengatur ukuran maksimal setiap halamannya (dalam hal ini halaman index).

Walaupun kita menggunakan auto readmore baik itu yang Javascript maupun data-snippet, blogger/blogspot tetap menghitung ukuran yang sama dengan yang aslinya kecuali kita menambahkan jump break (pemotongan yang akan menampilkan readmore). Karena baik itu auto readmore/data-snippet, keduanya bukan metode yang digunakan blogspot dalam mengurangi ukuran halaman. Jadi bagi kalian yang menggunakan auto readmore baik itu yang JS/data-snippet sebaiknya tetap memberikan jump break agar jumlah artikel yang muncul sesuai di pengaturan blog. Hal ini berlaku juga jika artikel anda hanya terdiri dari gambar-gambar. Sebaiknya jump break diletakkan setelah gambar yang pertama.

Bagi kalian yang tidak mengetahui dimana letak dari jump-break nah berikut ini contoh tampilannya.

Nah dalam bentuk html jump break akan seperti ini <!--more-->.

Note : Ukuran halaman index yang dianjurkan blogger/blogspot kalau tidak salah 1MB. Itulah sebabnya jika artikel anda banyak mengandung gambar kesalahan tampilan jumlah artikel lebih sering terjadi.

Dan juga blogger/blogspot tidak mengajurkan jumlah artikel perhalaman yang terlalu banyak. Karena dapat berpengaruh pada kecepatan blog anda. Itulah mengapa jika kalian menggunakan pagination dan masuk pada halaman berdasarkan label, pagination akan berfungsi jika ada lebih dari 20 artikel sesuai dengan label. Jadi menurut saya batas maksimal artikel perhalaman yaitu 20.

Cara Membuat Kotak Script Keren Berwarna Dalam Postingan Blog

Kotak script, biasanya digunakan untuk memasukan kode2 script ke dalam posting. Agar terlihat rapi dan tidak memakan banyak tempat. Ada yang berbentuk kotak sederhana, ada juga yang berbentuk kotak dengan tambahan scroll, dan lain-lainnya. 

Kotak script juga bisa diberi warna dibagian backgroundnya, dan juga border yang berbentuk kotak, juga bisa diatur bentuknya. 

Cara membuatnya, Ikuti langkah-langkah dibawah ini :

1. Login ke Akun Blogger. Dan pilih entri baru.
2. Buatlah tulisan pada blog Anda pada mode Compose

Untuk memasukkan kotak Script silahkan pilih mode HTML dan masukkan kode berikut, untuk membuat kotak script.

Silahkan pilih tampilan kotak script yang Anda inginkan :

<div style="background-color: #eaeaea; border: 1px solid #444; padding: 10px; text-align: left;">
Pastekan Kode Script Anda disini 
</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #e0aeae; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px;">
Pastekan Kode Script Anda disini 
</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #b7ff68; border-radius: 10px; border: 4px solid #999; padding: 10px;">
Pastekan Kode Script Anda disini
</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">
Pastekan Kode Script Anda disini
</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">
Pastekan Kode Script Anda disini
</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffbf7d; border-radius: 10px; border: 4px outset #fff; padding: 10px;">
Pastekan Kode Script Anda disini
</div>

<div style="background-color: #36e4fd; border: 2px #610b38 dashed; padding: 10px;">
Pastekan Kode Script Anda disini
</div>

<div style="background-color: #c2c2c2; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">
Pastekan Kode Script Anda disini
</div>

<div style="background-color: #82cafa; border: 3px #5f200e double; padding: 10px; text-align: left;">
Pastekan Kode Script Anda disini
</div>

<div style="background-color: #d5839f; border: 2px #006400 inset; padding: 10px; text-align: left;">
Pastekan Kode Script Anda disini
</div>

<div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; background-color: #00b8ff; border-radius: 10px; border: 7px outset #fff; padding: 10px; t-align: left;">
Pastekan Kode Script Anda disini
</div>

Anda bisa modifikasi kotak script sesuai kreasi dan kemauan sendiri dengan cara :

• Mengganti ukuran sudut lengkungan contohnya : border-radius: 10px ada 3 ganti semua 
• Mengganti warna background contohnya : background-color: #00B8FF (Kode Warna) 
• Merubah ketebalan border / garis tepi kolom contohnya : border: 4px

Anda yang ingin menambahkan scroll pada kotak script bisa menggunakan kode dibawah ini :

<div style="background: #f1f1f1; border: 1px solid #999; height: 100px; overflow: auto; padding: 10px;">

Pastekan Kode Script Anda disini

</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #e6ff15; border-left: 5px solid #2288dd; border-radius: 10px; height: 100px; overflow: auto; padding: 10px; padding: 10px;">

Pastekan Kode Script Anda disini

</div>

<div style="background: #000000; height: 100px; overflow: auto; padding: 10px;">
<span style="color: white;">

Pastekan Kode script Anda disini

</span>
</div>

Cara Membuat Popular Post Berwarna-warni

 

Cara membuat popular post warna warni seperti gambar diatas atau yang ada diblog ini caranya sangat gampang. Tapi sebelumnya pastikan widget popular post diblog hanya menampilkan thumbnail dan judul saja. 

Cara Membuat Popular Post Berwarna-warni :

1. Login di Akun Blog → pilih Tema 

2. Setelah itu masuk ke Editor HTML Template, 

3. Copy kode CSS berikut ini dan tempel diatas kode  ]]></b:skin>  atau  </style> :

/* Custom CSS for Blogger Popular Post Widget */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img {margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none;}
.PopularPosts ul {margin:.5em 0;list-style:none;color:black;counter-reset:num;}
.PopularPosts ul li img {display:block;margin:0 .5em 0 0;width:50px;height:50px;float:left;}
.PopularPosts ul li {background-color:#eee;margin:0 10% .4em 0 !important;padding:.5em 1.5em .5em .5em !important;
counter-increment:num;position:relative;}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a, .PopularPosts ul li a {font-weight:bold;color:#000 !important;
text-decoration:none;}
.PopularPosts ul li:before {content:counter(num) !important;display:block;position:absolute;background-color:#333;
color:#fff !important;width:22px;height:22px;line-height:22px;text-align:center;top:0px;right:0px;padding-right:0px !important;}

/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;margin-right:0% !important}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:0% !important}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:0% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:0% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:0% !important}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:0% !important}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:0% !important}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:0% !important}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:0% !important}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:0% !important}
.PopularPosts .item-thumbnail {margin:0 0 0 0;}
.PopularPosts .item-snippet {font-size:11px;} 

.profile-img{display:inline;opaciry:10;margin:0 6px 3px 0;} 

4. Terakhir klik Simpan / Publish

5. Selesai.

Lihat widget populer pos yang sudah berwarna-warni seperti pelangi

Bagaimana? menarik bukan?

Sampai disini dulu yah cara membuat popular post warna warni ini.

Mengenal Lebih Dekat Sosok Kartini

Peringatan Hari Kartini yang jatuh setiap 21 April (sesuai dengan Kepres No. 108 oleh Ir. Soekarno tanggal 2 Mei 1964) menyimpan moment tersendiri khususnya bagi kaum hawa. Seperti yang dikatakan sastrawan Indonesia, Pramoedya Ananta Toer bahwa selama seseorang tidak menulis, ia akan hilang di dalam masyarakat dan dari sejarah; Raden Ajeng Kartini masih sangat melekat dalam sejarah karena ide-ide cemerlang yang ditulis dalam surat-suratnya.

Nah, berikut kami paparkan untuk mengenal lebih dekat dengan sosok Kartini yang mungkin sebelumnya jarang diketahui publik :

1. Keluarga Kartini

Lahir ditengah-tengah kalangan priyayi atau kelas Bangsawan Jawa pada 21 April 1879. Ayahnya seorang Bupati Jepara bernama R.M. Adipati Ario Sosroningrat dan ibunya bernama Ngasirah. Dia anak ke-5 dari 11 bersaudara kandung dan tiri. Dia juga merupakan anak perempuan tertua dikeluarganya. Kakek dari ibunya merupakan seorang guru agama yag memiliki latar belakang pesantren. Sedangkan kakek dari ayahnya dapat dilacak hingga Sultan Hamengku Buwana ke-VI. Walaupun hanya mengenyam pendidikan dasar di sekolah anak-anak Belanda dan bangsawan, Kartini sangat mahir berbahasa Belanda.

2. Benci dengan Tata Cara Hidup Feodal Jawa

Dari keturunan ayahnya yang seorang bangsawan, Kartini diberi gelar Raden Adjeng. Ibunya berasal dari rakyat jelata dan hanya seorang selir bernama Ngasirah. Menurut aturan feodal Jawa, Kartini harus memanggil ibu kandungnya dengan sapaan “Yu” (Mbakyu), ia hanya diperbolehkan memanggil “Ibu” kepada ibu tirinya Raden Ayu Moeryam yang keturunan raja Madura. Ibu kandungnya memanggil Kartini dengan sebutan “Ndoro” (panggilan untuk bangsawan Jawa). Jika Ngasirah sedang berjalan di depan Kartini, ia harus berjalan sambil membungkukkan badannya. Jika Kartini duduk di kursi, ibunya harus duduk di lantai.

Kartini benci dengan tata cara hidup feodal Jawa yang menurutnya salah kaprah. Dia lebih senang dipanggil Kartini tanpa embel-embel “Raden Adjeng”. Menurutnya lagi tidak ada yang lebih gila daripada melihat orang-orang disekitarnya yang begitu membanggakan asal dan keturunan. Kartini pun melarang kedua adiknya, Roekmini dan Kardinah untuk berjalan jongkok, berbicara pelan, dan menunduk. Ia membebaskan dirinya dari kekolotan tradisi yang mengikatnya.

3. Dipingit Sejak Kecil

Kartini kehilangan masa kecilnya. Dia hanya mengenal pendidikan hingga sekolah dasar saja. Di sekolah, Kartini kecil sering mendapat cemooh dan diskriminasi karena ia perempuan yang berasal dari bangsa kulit cokelat. Setiap selesai sekolah, ia tidak diperbolehkan keluar rumah tanpa didampingi muhrim atau anggota keluarganya.

Pada jaman itu, seorang anak perempuan tidak diperbolehkan melakukan kegiatan di luar rumah atau menduduki jabatan di dalam masyarakat.

4. Jl. R.A. Kartini

Tak hanya di Indonesia, namanya juga diabadikan sebagai jalan protokol di Belanda ; Utrecht, Venlo, Amsterdam, dan Haarlem.

5. Surat-surat kepada pemerintahan

Di usianya yang masih 20 tahun, dia pernah mengirimkan surat kepada pemerintahan Hindia Belanda. Surat pertamanya adalah pengajuan beasiswa di Belanda dan di Batavia dan disetujui. Dia juga pernah menulis surat untuk mengusulkan agar Bahasa Melayu dan Bahasa Belanda, yang saat itu (sebelum Sumpah Pemuda) menjadi bahasa media cetak, untuk dimasukkan kedalam kurikulum pendidikan.

6. Dari Gelap Menuju Terang

Buku R.A. Kartini yang sangat terkenal “Habis Gelap Terbitlah Terang” itu awalnya berjudul “Dari Gelap Menuju Terang”. Buku yang berisi kumpulan surat-surat R.A. Kartini yang ditulis untuk sahabat-sahabatnya di Eropa kemudian disusun kembali oleh J.H. Abendanon, Menteri Kebudayaan, Agama, dan Kerajinan Hindia Belanda yang juga merupakan salah satu sahabat penanya.

7. Door Duisternis tot Licht

Awalnya, buku “Habis Gelap Terbitlah Terang” diterbitkan di Belanda tahun 1911 di bawah judul Door Duisternis tot Licht, atau Dari Kegelapan Menuju Cahaya. Baru kemudian pada tahun 1922, buku kumpulan surat R.A.Kartini tersebut diterbitkan dalam Bahasa Melayu. Tahun 1938, buku ini juga diterjemahkan dalam Bahasa Sunda dan Jawa.

8. Kartini Menikah

Dia menikah pada 12 November 1903 dengan sahabat ayahnya, yakni seorang bupati Rembang bernama K.R.M. Adipati Ario Singgih Djojo Adhiningrat. Kartini merupakan istri ke-IV Adipati Ario. Dari hasil pernikahannya, Kartini dikaruniai seorang anak bernama Soesalit Djojoadhiningrat yang lahir pada 13 September 1904.

9. Wafat Setelah Melahirkan

R.A. Kartini wafat di usia yang cukup muda yaitu 25 tahun pada 17 September 1904 dan dimakamkan di Desa Bulu, Kecamatan Bulu, Rembang. Dia wafat 4 hari pasca melahirkan putra semata wayangnya Raden Mas Soesalit Djojoadhiningrat. Nama Soesalit merupakan akronim kalimat dalam Bahasa Jawa “susah naliko alit” (susah di waktu kecil) dikarenakan tidak pernah mengenal ibunya.

10. Museum R.A. Kartini

Sudah pernahkah Anda mengunjungi museum R.A.Kartini? Museum yang didirikan pada 30 Maret 1975 ini berada di Desa Panggang, Kecamatan Jepara, Jawa Tengah.

Namun museum ini tidak hanya diisi dengan benda-benda peninggalan Kartini, tetapi juga sejumlah warisan budaya di daerah Jepara.

11. Bengkel Ukir Kayu

Selain memperjuangkan emansipasi wanita dengan membentuk sekolah untuk perempuan, R.A. Kartini ternyata pernah mendirikan sebuah Bengkel Ukir Kayu untuk para pemuda di Rembang.

Itulah 11 fakta yang berhasil kami rangkum dari berbagai sumber. Kartini tak sempat berbuat banyak di tengah masyarakat, karena ia wafat di usia muda. Namun, dari apa yang pernah ia perjuangkan dulu telah berhasil membawa pembaharuan khususnya kaum wanita hingga saat ini melalui surat-suratnya yang terkenal. Dia mendambakan kaum perempuan terbebas dari kekolotan tradisi adat, kebodohan, keterbelakangan, dan perbedaan gender.

Terimakasih Kartini, karena perjuanganmu kaum perempuan tidak lagi merasa dikekang, dilarang, terbuang dan terbelakang.

Cara Membuat Sticky Widget di Sidebar Situs Blog

Membuat sticky widget di situs blog ternyata sangat mudah sekali, anda hanya perlu menambahkan beberapa kode CSS dan kode JavaScript, maka sticky widgetpun jadi.

Kali ini saya mau berbagi tutorial cara membuat sticky widget di sidebar blog. Fungsinya yaitu untuk membuat widget tertentu menjadi sticky atau melayang mengikuti halaman saat di scroll ke bawah atau ke atas.

Jadi keuntungannya, para pengunjung akan selalu melihat widget itu, walaupun sudah sampai pada batas akhir artikel. Untuk lebih jelasnya, mari kita membuat sticky widget dengan mudah untuk di tampilkan di situs blog anda

Cara Membuat Sticky Widget di Sidebar Blog

1. Login ke Akun Blog → pilih Tema

2. Klik Edit HTML

3. Copy paste kode di bawah ini dan letakan di atas kode </body>

<script type='text/javascript'>

//<![CDATA[

$(function() {

  if ($('#sticky-sidebar').length) { // Ganti "#sticky-sidebar" dengan ID tertentu

    var el = $('#sticky-sidebar');

    var stickyTop = $('#sticky-sidebar').offset().top;

    var stickyHeight = $('#sticky-sidebar').height();

    $(window).scroll(function() {

      var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"

      var windowTop = $(window).scrollTop();

      if (stickyTop < windowTop) {

        el.css({

          position: 'fixed',

          top: 20 // Jarak atau margin sticky dari atas

        });

      } else {

        el.css('position', 'static');

      }

      if (limit < windowTop) {

        var diff = limit - windowTop;

        el.css({

          top: diff

        });

      }

    });

  }

});

//]]>

</script>

Perhatikan kode yang ditandai, ganti kode tersebut dengan ID yang akan dibuat sticky sesuai template yang digunakan.


Catatan :

#sticky-sidebar : ID dari konten atau widget yang akan dibuat sticky

#footer-wrapper : Tentukan ID untuk membatasi fungsi sticky

3. Tambahkan kode CSS di bawah ini dan letakan di atas kode ]]></b:skin>

#sticky-sidebar{width:100%;max-width:300px}

Silahkan ganti 300px sesuai dengan lebar sidebar pada template yang sobat gunakan.

4. Simpan template