Pada Kesempatan kali ini sobat Tepinesia akan sedikit berbagi tentang cara bagaimana membuat Recent Post Berwarna di Blogger, Recent Post sendiri adalah daftar dimana isinya adalah Posting - posting terakhir atau terbaru di blog, Widget ini digunakan semata - mata tidak hanya untuk menghias blog anda, tetapi widget ini juga membantu visitor atau pengunjung anda mengetahui apa artikel terbaru diblog anda,
Untuk previewnya anda bisa lihat di screenshot diatas atau anda lihat langsung diblog saya yang acak-acakan ini, lantas bagaimana cara membuatnya ? sulit kah ? untuk membuatnya tidaklah sulit karena kami jug sudah sediakan scriptnya yang nanti bisa anda copy paste di blog anda, berikut langkah - langkah membuatnya.
1. Masuk ke Dashboard blog anda kemudian masuk lagi ke Tata Letak
2. Buat Widget baru di sidebar anda pilih html/Javascript
3. Beri Nama Recent Posts atau terserah anda
4. Masukkan Kode dibawah ini ke dalam "Konten" di Konfigurasi HTML/Javascript tadi.
<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/AVvXsEhoqLBMP_VPkDh5p-PBhuUnw5VMMxOjnumpiM64Wtzq9pnKFd9fxDlLJtbyw19gqry18ec7eXFaLsWsybJsMSAx98_-1W0idMadp-JG2He93N5BiM0hEenjMoTY6l0t7CfUtHgb8m24_rzy/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://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=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>
5. Perhatikan Kode yang berwarna merah, itu bisa kita atur sendiri sesuai keinginan kita, berikut penjelasannya
var posts_no = 5; //Digunakan untuk menentukan jumlah Recent Post yang ditampilkan
var showpoststhumbs = true; //Digunakan untuk menampilkan gambar dari artikel yang ada diblog kita
var readmorelink = true; //Digunakan untuk membuat link Readmore
var showcommentslink = false; //untuk menampilkan link komentar
var posts_date = true; //menampilkan tanggal kita memposting artikel
6. Simpan dan Selesai, siahkan cek diblog anda dan widget pun sudah selesai dipasang.
sumber : http://helplogger.blogspot.co.id/2014/11/5-cool-recent-post-widgets-for-blogger.html
0 Response to "Cara membuat Recent Post Berwarna Blogger"
Post a Comment