Wednesday, February 16, 2011

Tutorial 45 : 3 Automatic Recent Post dan Previous Posting

Assalamualaikum dan selamat malam.
Hari ini mood nak tulis tutorial datang dengan tidak disangka. Antara sebab-sebab kenapa dia datang adalah kerana adanya permintaan. Dengan adanya permintaan maka wujudnya pengeluaran. Dengan adanya pengeluaran maka produktiviti pun semakin meningkat. Dan seterusnya jumlah tutorial pun makin meningkat muahahaha..

2017 update!

Tutorial sebelum ini terpaksa dipadam kerana asyik error dan kemungkinan besar tak menjadi. Sebelum menjadi lebih parah dan membuatkan korang menderita. Jom try tutorial baru ni. Ada banyak jenis Previous Posting yang korang boleh pilih. So jangan risau. Pilih ikut kesukaan.

Langkah-langkah.

Sebelum bermula, korang boleh pilih CODE yang sesuai mengikut citarasa korang. Ayuhh jom!.

1. Gallery Style Widget:

Gallery Style Widget

- Terdapat 3 baris dan 3 column
- Hanya memaparkan gambar

CODE 1

<style>
/* CSS Recent Post Gallery Widget */
.recent-grid {padding:0;clear:both;}
.recent-grid:after {content:"";clear:both;display:table;}
.recent-grid .galleryview{position:relative;display:inline-block;margin:6px 0;overflow:hidden;}
.recent-grid .galleryview a{text-decoration:none;float:left;position:relative;margin:0 6px}
.recent-grid .galleryview .ptitle{display:block;background:rgba(0,0,0,.7);clear:left;position:absolute;font-size:10px;line-height:1.3em;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;overflow:hidden;padding:5px;word-wrap:break-word;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-grid .galleryview:hover .ptitle{visibility:visible;opacity:1}
.recent-grid a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-grid a:hover img {border-color:#bbb;}
</style>
<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function gallerygrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-grid">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+recentpost_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+recentpost_thumbs+'" height="'+recentpost_thumbs+'"/>',p=recentpost_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="galleryview">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>
<script>
var recentpost_thumbs = 72;
var recentpost_title = true;
</script>
<script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=gallerygrid"></script>

Configuration:
Tiada configuration. Tidak perlu ubah apa-apa, just COPY dan PASTE sahaja code tersebut ke dalam blog korang.

2. Multi Colored Widget:

Multi Colored Widget
- Terdapat 5 recent post.
- Berwarna-warni
- Comel!

CODE 2

<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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhkykJzgUaCbAHulpwN7-AZU_-cDLIWwrmiga0aTL7gqVgF1Dyc6TW-j75Kb2S7DoD1YUUrd2_2ziJcbmwsAYXkRJrZDEJs0GzDHCYjRxF7cj_yAG73lOROlm7kGiXQz0t4k-WGlrGNsAH/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 = 5;
var showpostswiththumbs = true;
var insidereadmorelink = true;
var showcomments = 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=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' />

Configuration:
Tiada configuration. Tidak perlu ubah apa-apa, just COPY dan PASTE sahaja code tersebut ke dalam blog korang.

3. Simple Recent Posts Widget:

Simple Recent Posts Widget
 - Terdapat 6 recent post (boleh tambah bilangan)
- Ada nombor
- Compact dan simple

CODE 3

<div class="recentpostarea">
<style type="text/css">
.recentpostarea {list-style-type: none;counter-reset: countposts;}
.recentpostarea a {text-decoration: none; color: #49A8D1;}
.recentpostarea a:hover {color: #000;}
.recentpostarea li:before {background: #69B7E2;float: left;counter-increment: countposts;content: counter(countposts,decimal);z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff; padding: 0px 10px; margin: 15px 5px 0px -6px; border-radius: 100%;}
li.r-p-title { padding: 5px 0px;}
.r-p-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.r-p-title a {text-decoration: none;color: #444;font-weight: bold;font-size: 13px; padding: 2px;}
.recent-post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.r-p-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
</style>
<script type = "text/JavaScript">
function showrecentposts(json) {for (var i = 0; i < posts_number; i++) { var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}} posttitle = posttitle.link(posturl);var readmorelink = "... read more";readmorelink = readmorelink.link(posturl); var postdate = entry.published.$t;var showyear = postdate.substring(0,4);var showmonth = postdate.substring(5,7);var showday = postdate.substring(8,10);var monthnames = new Array(); monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec"; if ("content" in entry) {var postcontent = entry.content.$t;}else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); document.write('<li class="r-p-title">');document.write(posttitle);document.write('</li><div class="r-p-summ">');if (post_summary == true) {if (postcontent.length < summary_chars) {document.write(postcontent);} else { postcontent = postcontent.substring(0, summary_chars);var quoteEnd = postcontent.lastIndexOf(" ");postcontent = postcontent.substring(0,quoteEnd);document.write(postcontent + ' ' + readmorelink);}} document.write('</div>'); if (posts_date == true) document.write('<div class="recent-post-date">' + monthnames[parseInt(showmonth,10)] + ' ' + showday + ' ' + showyear + '</div>'); }}
 </script>
 <script>
 var posts_number = 6;
 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=showrecentposts"></script>
 <noscript>Your browser does not support JavaScript!</noscript>
</div>

Configuration:
Tiada configuration. Tidak perlu ubah apa-apa, just COPY dan PASTE sahaja code tersebut ke dalam blog korang.
Kalau nak tukar post number cuma ubah pada var posts_number = 6;

Jom ikuti cara mudah nak buatnya ni:

1. Sign in blogger > Layout > Add Gadget > Html/JavaScript
2. Copy code yang korang suka sama ada CODE 1, CODE 2 atau CODE 3 (pilih salah satu sahaja) dan paste ke dalam Html/Java Script
 3. Lepas itu save SAVE dan tengok hasil yang terjadi.
Jumpa lagi! Bye

SHARE:

27 comments

  1. blog tutorial yg bgs!.....thanx for the sharing

    ReplyDelete
  2. erm... miss farah, x bergerak pown ARP tu..

    ReplyDelete
  3. @dyana

    selalunya ARP itu posting ikut bulan..kalau dlm sbln ada 4 entry dia stay 4 je..kalu byk dia akan gerak2

    ReplyDelete
  4. thanks farah ! ;D

    tp yg previous posting ta jadi lor..
    kuar coding smule..

    ReplyDelete
  5. Cik Farah! Saye suke blog awk, baanyak tutorial bergune. SUKEEEE!! Dan sye banyak rekemen kat org tau blog awk. :)

    ReplyDelete
  6. @Haura Malina

    Haura test semula? saya dah betulkan coding dia..cuba ye..

    ReplyDelete
  7. boley dah.. hoho~
    thanks Farah . (:

    ReplyDelete
  8. sis..knp eh sy x blh buat previous posting tu??blog sy jd tunggang tbalik la.huhu.:(
    dah ikut cara yg sist ajar..tkr url pn dah

    ReplyDelete
  9. @Cutie Teddy Hakmilik Mr.Myz

    kenapa tak boleh ni? selalunya kalau xboleh mst ada coding yg tertinggal

    ReplyDelete
  10. yeke?sy dah cuba byk kali sis...:(
    sis dah tgk blog sy x? betul ke tu?nk mcm peti ais u yg comei tu.:D

    ReplyDelete
  11. akk ! knp animated post saya tak bergerak ? wlpon bnyk new post saia update ^_#

    ReplyDelete
  12. Knp animated post saya tak bergerak wlopon bnyk post ?

    ReplyDelete
  13. Workstation Ford membawa kantor Anda untuk kendaraan Anda , sehingga lebih mudah untuk melakukan bisnis di Houston daripada sebelumnya . Tanyakan Anda Houston dealer Ford mengenai pilihan yang tersedia .rn   rnDengan komputer di -dash dalam pickup Ford atau van , Anda berkendara di sekitar Texas tanpa harus kembali jalur untuk kantor Anda di Houston untuk mengisi formulir atau mengirimkan perintah kerja . Cukup logon ke komputer Anda dari Ford dan memeriksa e - mail , mengisi spreadsheet dan informasi log . Anda Ford agen Houston dapat mendiskusikan lebih jauh dengan Anda manfaat workstation Ford .

    [url=http://motoreviewnow.info/sandberg-volvo/]Sandberg Volvo[/url]

    ReplyDelete
  14. @nur hanani

    sebenarnya, dia ikut bulan..kalau dalam bulan tu kurang dr 4 posting dia akan statik kalau banyak dia akan bergerak..bukan ikut tahun yer..ikut bulan

    ReplyDelete
  15. tutor nie memang bgs lah.
    tq for sharing..

    ReplyDelete
  16. Alhamdululah menjadi. Tq so muchss

    ReplyDelete
  17. MENJADIIII ! AM SO EKSAITEDD THANK YOUUUUU CIK FARAHH <3

    ReplyDelete

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Blogger Copyright © 2019. All Rights Reserved by BLOG CIK NURFARAH