Solusi Belanja Cerdas

25 Juli 2017

erend

Widget Artikel Terbaru Keren

Widget Artikel Terbaru Keren - Papih Doel JZ27XD tanya, keuntungan apa dari ngeblog? Online ngeblog beda jauh dengan Online bermedia sosial, facebok-kan dan medsos lainnya. Ngeblog minimal untuk diri sendiri menjadi tambah pintar, karena ngeblog dituntut untuk "tahu" segala hal.

RCP

Dari pembangunan template saja kita dituntut untuk tahu apa itu Recent Post, kegunaan dan manfaatnya. Dan apa itu Random Post, Popular Posts dan widget-widget lain yang wajib kita pasang pada template kita. Semacam Widget Artikel Terbaru atau Recent Posts ini satu widget wajib ketika kita mau ngeblog serius, karena Recent Posts adalah widget wajib ada ketika blog kita mau didaftarkan ke Google Adenese.

Membuat Widget Recent Post yang Valid HTML5 ini penting ketika kita masih mengacu kepada kebersihan template dari pengkodingan HTML yang error. Manfaat Widget Recent Post adalah memberi tahu pada pengunjung mana saja Artikel Terbaru kita. Ada 5 Style Widget Recent Posts yang Er'end Net suguhkan kali ini. Silahkan sobat pilih yang sesuai dengan selera sobat.

Untuk menambahkan Widget Artikel Terbaru Keren ini sangatlah mudah. Berikut Cara Membuat Recent Post Keren di Blogspot. Hal pertama yang harus sobat lakukan adalah Login ke Akun Blogger sobat. Langkah selanjutnya klik Tata Letak, lalu Tambahkan Widget Baru. Setelah muncul, pilih HTML/Javascript dan masukkan kode berikut :

Widget Recent Post Keren Style 1

Style1

<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('<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>
<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: #B1DAEF; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #F5F5DC; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFEBCD; 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: #DEB887; 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 Keren Style 2

Style3

<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://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.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 Keren Style 3

Style3

<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://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('<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://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.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 Keren Style 4

Style4

<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:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.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 Keren Style 5

Style5

<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:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.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>

Setelah yakin sobat memilih Style Widget Recent Post Keren ini, jangan lupa untuk memberi judul widgetnya. Silahkan kasih judul Recent Posts atau Artikel Terbaru. Langkah selanjutnya Klik Save dan lihat hasilnya.

Happy Blogging !
erend

Widget Keren Popular Posts Valid HTML5

Widget Keren Popular Posts Valid HTML5 - Kenapa harus valid HTML5 ? Karena kita akan membuat Widget Keren Popular Posts Dengan Thumbnail atau dengan gambar. Gambar yang ada pada widget Postingan Populer adalah salah-satu penyumbang error pada W3C. Insya Alloh Pada postingan yang akan datang kita bahas khusus tentang Error ini.

Widget Keren Popular Posts

Untuk menambahkan Widget Keren Popular Posts Valid HTML5 ini tidaklah sulit. Hal pertama yang harus sobat lakukan adalah Login ke Akun Blogger sobat. Langkah selanjutnya klik Tata Letak, lalu Tambahkan Widget Baru. Setelah muncul, pilih Postingan Populer.

Konfigurasikan Postingan Populer

Pots

Widget Postingan Populer

Popular

- Langkah ke-2 adalah memasukan kode JavaScipt dibawah ini diatas kode </ Body>
Yang saya beri tanda cat merah kalau misalnya sudah ada kode JavaScipt-nya di template sobat silahkan dibuang saja.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>

$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>

- Lalu langkah ke-3 adalah menyimpan kode Css dibawah untuk Style Popular Post diatas kode

 ]]></b:skin>

Silahkan pilih Code Css-nya sesuai selera sobat :

Kode Css Popular Posts Style 1
Style1

<style type='text/css'>
    .sidebar .PopularPosts ul {
    margin: 0;
    padding: 0;
    }
    .sidebar .PopularPosts ul li {
    list-style: none !important;
    padding: 0 !important;
    margin-bottom: 10px;
    }
    .sidebar .PopularPosts .item-thumbnail {
    height: 190px;
    margin: 0;
    overflow: hidden;
    width: 100%;
    }
    .sidebar .PopularPosts .item-title {
    position: relative;
    }
    .sidebar .PopularPosts img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    }
    .sidebar .PopularPosts .item-title a {
    color: #FFFFFF;
    font: 15px &#39;Oswald&#39;, sans-serif;
    text-transform: uppercase;
    font-size: 20px;
    padding: 10px;
    position: absolute;
    right: 0;
    left: 0px;
    margin: 0px auto;
    text-align: center;
    text-decoration: none;
    top: 40px;
    width: 60%;
    height: 26px;
    overflow: hidden;
    z-index: 2;
    }
    .sidebar .PopularPosts .item-snippet {
    background: rgba(0, 0, 0, 0.35);
    border-top: 6px solid rgba(0, 0, 0, 0.1);
    border-bottom: 6px solid rgba(0, 0, 0, 0.1);
    color: #FFFFFF;
    left: 0px;
    right: 0px;
    margin: 0px auto;
    padding: 65px 10px 10px;
    position: absolute;
    font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
    text-align: center;
    top: 35px;
    width: 60%;
    z-index: 1;
    }
    .sidebar .PopularPosts .item-content {
    position: relative;
    }
    </style>

Kode Css Popular Posts Style 2

Style2

<style type='text/css'>
    .sidebar .PopularPosts ul {
    counter-reset: popularcount;
    margin: 0;
    padding: 0;
    }
    .sidebar .PopularPosts ul li {
    width: 100%;
    list-style: none !important;
    padding: 0 !important;
    margin-bottom: 20px;
    position: relative;
    border: 0;
    }
    .sidebar .PopularPosts .item-thumbnail a {
    clip: auto;
    display: block;
    height: auto;
    height: 120px;
    }
    .sidebar .PopularPosts .item-thumbnail {
    width: 100%;
    position: relative;
    margin-bottom: 15px;
    }
    .sidebar .PopularPosts .item-thumbnail::before {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-bottom: 29px solid #fff;
    border-left: 29px solid transparent;
    border-right: 29px solid transparent;
    bottom: 0px;
    content: &quot;&quot;;
    height: 0;
    width: 0px;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    z-index: 3;
    }
    .sidebar .PopularPosts .item-thumbnail:after {
    color: #000;
    content: counter(popularcount, decimal);
    counter-increment: popularcount;
    font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
    list-style-type: none;
    position: absolute;
    bottom: 0;
    text-align: center;
    margin: 0px auto;
    left: 0px;
    right: 0px;
    z-index: 4;
    }
    .sidebar .PopularPosts .item-thumbnail img {
    position: relative;
    width: 100%;
    height: 120px;
    object-fit: cover;
    }
    .sidebar .PopularPosts .item-title {
    font: 15px &#39;Oswald&#39;, sans-serif;
    text-transform: uppercase;
    text-align: center;
    margin: 0px auto;
    padding-bottom: 10px;
    border-bottom: 1px solid #000;
    }
    .sidebar .PopularPosts .item-title a {
    color: #000;
    text-decoration: none;
    }
    .sidebar .PopularPosts .item-snippet {
    padding: 10px 15px;
    font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
    text-align: center;
    }
    </style>

Kode Css Popular Posts Style 3

Style3

<style type='text/css'>
    .sidebar .PopularPosts ul {
    padding: 0;
    margin: 0;
    }
    .sidebar .PopularPosts .item-thumbnail a {
    clip: auto;
    display: block;
    height: auto;
    overflow: hidden;
    }
    .sidebar .PopularPosts .item-thumbnail {
    width: 130px;
    height: 130px;
    border-right: 5px solid #fff;
    margin: 0px 10px 0px 0px !important;
    position: relative;
    }
    .sidebar .PopularPosts .item-thumbnail img {
    position: relative;
    height: 100%;
    width: 100%;
    object-fit: cover;
    }
    .sidebar .PopularPosts ul li {
    float: left;
    margin-bottom: 5px;
    max-height: 130px;
    min-width: 250px;
    overflow: hidden;
    }
    .sidebar .PopularPosts ul li:first-child {
    background: #D9EDF7;
    }
    .sidebar .PopularPosts ul li:first-child + li{
    background: #F2DEDE;
    }
    .sidebar .PopularPosts ul li:first-child + li + li {
    background: #DFF0D8;
    }
    .sidebar .PopularPosts ul li:first-child + li + li + li {
    background: #FFEEBC;
    }
    .sidebar .PopularPosts ul li:first-child + li + li + li + li{
    background: #E0E0E0;
    }
    .sidebar .PopularPosts .item-title {
    font: 13px &#39;Oswald&#39;, sans-serif;
    text-transform: uppercase;
    padding: 10px 5px 10px;
    }
    .sidebar .PopularPosts .item-title a {
    color: #000;
    text-decoration: none;
    }
    .sidebar .PopularPosts .item-snippet {
    font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
    padding-right: 5px;
    }
    .sidebar .PopularPosts .widget-content ul li {
    padding: 0px 5px 0px 0px!important;
    }
    </style>

Kode Css Popular Posts Style 4

Style4

<style type='text/css'>
    .sidebar .PopularPosts ul {
    padding: 0;
    }
    .sidebar .PopularPosts ul li:first-child{
    width: 100%;
    max-height: 100%;
    opacity: 0.9;
    }
    .sidebar .PopularPosts ul li:nth-child(even){
    margin-right: 2%;
    }
    .sidebar .PopularPosts ul li {
    box-sizing: border-box;
    position: relative;
    padding: 0px !important;
    width: 49%;
    max-height: 120px;
    opacity: 0.4;
    overflow:hidden;
    float: left;
    margin-bottom: 2%;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    }
    .sidebar .PopularPosts ul li:hover {
    opacity: 1;
    }
    .sidebar .PopularPosts .item-thumbnail {
    margin: 0;
    width: 100%;
    }
    .sidebar .PopularPosts ul li img {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding:0;
    }
    .sidebar .PopularPosts .item-content:hover .item-title a,
    .sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {
    visibility: visible;
    opacity: 1;
    }
    .sidebar .PopularPosts .item-title a {
    color: #fff;
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);
    text-decoration: none;
    position: absolute;
    text-align: center;
    font: 13px &#39;Oswald&#39;, sans-serif;
    left: 0;
    right: 0;
    bottom: 0%;
    padding: 100px 10px 10px;
    opacity: 0;
    visibility: hidden;
    }
    .sidebar .PopularPosts .item-snippet {
    display: none;
    }
    </style>

Kode Css Popular Posts Style 5

Style5

<style type='text/css'>
    .sidebar .PopularPosts ul {
    counter-reset: popularcount;
    margin: 0;
    padding: 0;
    }
    .sidebar .PopularPosts ul li {
    float: left;
    max-height: 130px;
    min-width: 250px;
    position: relative;
    }
    .sidebar .PopularPosts .item-thumbnail::after {
    color: rgba(255,255,255, 0.63);
    content: counter(popularcount, decimal);
    counter-increment: popularcount;
    font: 70px &#39;Oswald&#39;, sans-serif;
    list-style-type: none;
    position: absolute;
    left: 5px;
    top: -5px;
    z-index: 4;
    }
    .sidebar .PopularPosts .item-thumbnail::before {
    background: rgba(0, 0, 0, 0.3);
    bottom: 0px;
    content: &quot;&quot;;
    height: 100px;
    width: 100px;
    left: 0px;
    right: 0px;
    margin: 0px auto;
    position: absolute;
    z-index: 3;
    }
    .sidebar .PopularPosts .item-thumbnail a {
    clip: auto;
    display: block;
    height: auto;
    overflow: hidden;
    }
    .sidebar .PopularPosts .item-thumbnail {
    width: 100px;
    height: 100px;
    margin: 0px 10px 0px 0px !important;
    position: relative;
    }
    .sidebar .PopularPosts .item-thumbnail:hover:before {
    display: none;
    }
    .sidebar .PopularPosts .item-thumbnail img {
    position: relative;
    padding-right: 0px !important;
    height: 100%;
    width: 100%;
    object-fit: cover;
    }
    .sidebar .PopularPosts .item-title {
    font: 13px &#39;Oswald&#39;, sans-serif;
    text-transform: uppercase;
    padding: 0px 5px 10px;
    }
    .sidebar .PopularPosts .item-title a {
    color: #000;
    text-decoration: none;
    }
    .sidebar .PopularPosts .item-snippet {
    font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
    }
    .sidebar .PopularPosts .widget-content ul li {
    padding: 0px 5px 0px 0px !important;
    }
    .sidebar .PopularPosts .item-content {
    padding: 5px 0px;
    border-bottom: 1px dotted #dedede;
    overflow: hidden;
    height: 100px;
    position: relative;
    }
    </style>

Untuk saat ini saya memasang Widget Popular Post atau Widget Postingan Populer yang sangat sederhana, memakai judul Yang Banyak Dibaca. Dengan pertimbangan masih pilih-pilih posisi widget postingan populer.

Widget Popular Posts

Semoga Widget Keren Popular Posts Valid HTML5 ini bisa bermanfaat.
Happy Blogging !

24 Juli 2017

erend

Random Post Blogger Valid HTML5

Random Post Blogger Valid HTML5 - Kemarin dulu sudah sering kita berbagi rasa, kini saatnya Er'end Net berbagi cara. Cara Membuat Random Post Blogger Valid HTML5 ini kita share karena Er'end Net mencintai kebersihan blognya. Bersih dari pengkodingan yang error.

Random Post Blogger Valid HTML5
Random Post Blogger atau Postingan Acak perlu kita bikin karena merupakan widget wajib blogger. Wajib karena Random Post mampu memberikan/menampilkan Postingan Lama secara acak, yang bisa saja kita tak pernah mengingatnya karena artikel kita sudah berjubel. Hal ini memungkinkan Postingan Lama tsb dibaca oleh pengunjung. Random Post Er'end Net saya kasih judul Etalase.

Random Post
Cara Random Post Blogger Valid HTML5 ini sangatlah mudah, hal pertama yang harus lakukan adalah Login ke Akun Blogger sobat. Langkah selanjutnya klik Tata Letak, lalu Tambahkan Widget Baru. Copy paste kode dibawah ini dan Simpan.

<div style="overflow:auto; width:310px; height:150px;">
<ul id="random-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://www.erend.net/",
numPosts = 10;
function randomPosts(a){if(document.getElementById("random-posts")){var e=shuffleArray(a.feed.entry),title,link,img,content="",ct=document.getElementById("random-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<strong><li class="random-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li></strong>'}ct.innerHTML=content}}function shuffleArray(arr){var i=arr.length,j,temp;if(i===0)return false;while(--i){j=Math.floor(Math.random()*(i+1));temp=arr[i];arr[i]=arr[j];arr[j]=temp}return arr}var random_post=document.createElement('script');random_post.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=999&callback=randomPosts';document.getElementsByTagName('head')[0].appendChild(random_post);
//]]>
</script>
<br/>
</div>

Catatan :
Kode yang saya kasih warna biru adalah kode untuk Scroll karena Widget Random Post Er'end Net saya simpan di Widget Footer sehingga scroll tsb sebagai penyesuai panjang dan lebarnya widget, bisa dihilangkan sesuaikan saja dengan kebutuhan sobat.
Link  http://www.erend.net/ silahkan ganti dengan URL blog sobat.

Happy Blogging !

erend

Cara Membuat Tepung Roti atau Breadcrumb

Cara Membuat Tepung Roti atau Breadcrumb - Ibu-ibu yang kesasar kesini, saya mohon maaf karena ini bukan tepung roti untuk membuat pisang goreng. Breadcrumb kalau kita alih bahasakan kedalam bahasa Indonesia artinya Tepung Roti. Istilah Breadcrumb bagi kalangan blogger tidaklah asing. Karena keberadaannya sangat diperlukan untuk optimalisasi SEO.

Cara Membuat Breadcrumb

Breadcrumb adalah menu navigasi blog yang berada diatas postingan. Guna Breadcrumb adalah memudahkan pengunjung atau pembaca untuk balik ke Home atau membuka artikel lain dari category Label yang sama. Struktur Breadcrumb biasanya seperti ini: Home >> Label >> Judul Postingan.

Cara Membuat Tepung Roti atau Breadcrumb

Bagaimana Cara Membuat Breadcrumb pada Blog yang SEO juga Valid HTML5. Kita akan meniru yang ada pada template Er'end Net ini. Ada banyak Fungsi Breadcrumb ini diantaranya adalah mempengaruhi mesin pencari agar lebih cepat dalam mengenali struktur blog kita. Breadcrumb yang kita buat akan otomatis tampil pada setiap postingan yang kita bikin menurut category Label, ini artinya kita telah membuat Link Antar Halaman sehingga halaman yang satu dengan halaman yang lain dapat saling terhubung. Tentu saja dengan begitu akan memberikan efek yang sangat baik terhadap pagerank blog.

Breadcrumb

Cara Membuat Tepung Roti atau Breadcrumb ini sangatlah mudah, hal pertama yang harus lakukan adalah Login ke Akun Blogger sobat. Berdoa dan jangan lupa backup template dulu.
Langkah selanjutnya klik menu Template, lalu klik Edit HTML. Cari kode ]]></b:skin kemudian letakkan kode di bawah ini tepat di atas kode ]]></b:skin> tsb.

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

Langkah selanjutnya cari lagi kode ini: <b:includable id='main' var='top'>

Lalu ganti kode <b:includable id='main' var='top'> dengan kode yang ada di bawah ini :

<b:includable id='breadcrumb' var='posts'>
      <b:if cond='data:blog.homepageUrl != data:blog.url'>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>
     </div>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.labels'>
        <div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span><data:post.title/></span>
        </div>
        <b:else/>
        <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Uncategories</span> &#187; <span><data:post.title/></span></div>
     </b:if>
        </b:loop>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Archive for <data:blog.pageName/></span>
     </div>
      <b:else/>
        <b:if cond='data:blog.searchQuery'>
        <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>
     </div>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <div class='breadcrumbs'>
     <b:if cond='data:blog.pageName == &quot;&quot;'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>All post</span>
        <b:else/>
        <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>
        </b:if>
        </div>
      </b:if>
      </b:if>
      </b:if>
      </b:if>
      </b:if>
      </b:if>
</b:includable>
      <b:includable id='main' var='top'>
   <b:include data='posts' name='breadcrumb'/>

Kemudian klik Simpan Perubahan.
Jika langkah sobat benar maka kita sudah punya Tepung Roti atau Breadcrumb :P

Happy Blogging !
Back to top