Blog ini untuk membantu blogger menguruskan blog mereka.

Info untuk blogger

Salam untuk semua blogger.

Blog ini dibuat untuk membantu semua blogger yang menguruskan blog masing-masing. Semua cara untuk mengurus blog saya sertakan disini, Termasuk cara nak iklan kat blog, cara buat duit dari blog, cara buat duit dari blog, cara urus templet blog, cara post artikel/entri blog dan segala macam hal berkenaan denga blog.

 Semoga bermanafaat untuk kalian.

Selamat Berblogger,
TQ

Read More

Tutorial 146: Recent Posts Widget for Blogger

Tutorial 146: Recent Posts Widget for Blogger

Assalammualaikum,
Ini adalah tutorial untuk tahun 2018.
Banyak request tutorial tapi aku buat mana yang mampu.
Maklumlah sibuk je memanjang.

Kali ni nak ajar tutorial yang mudah sahaja. Cuma copy dan paste sahaja. Tak perlu main coding sampai terbeliak biji mata. Jom kita mula. Tapi korang kena pilih salah satu recent post widget mengikut kesukaan korang.

1. Colorful Recent Posts

<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/AVvXsEimHDZHJkHQ_6Oo68IbuZ-K77kQ3bingNRu9t1wXOpUsntIlzIJ9ZvsgdtWbUMx_7zwTg77JSR1R78wy8_JkmEL86VENDEeJ9BVpoyLW_87cfW65lDaly-z2nnNavb0FjxLQEIXUk0VCE1F/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' />

2. Gallery Recent Posts

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

3. Simple Recent Posts

<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 = 9;
 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>

Petunjuk:
var posts_number
(boleh tukar kepada bilangan yang korang suka)


1. Pilih antara salah satu code recent post widgets seperti di atas. COPY code kesukaan korang.

2.Login ke Blogspot, clik Layout > Add a Gadget (Sidebar)  > HTML/JavaScript 

2. PASTE ke dalam Html/Java Script

3. SAVE dan LIHAT HASILNYA.

Selamat mencuba.

Read More

Tutorial 145: Membuat Button Facebook, Instagram, Twitter di Sidebar

Assalammualaikum,

Hari ni aku nak share 1 tutorial semudah ABC je, insyaallah boleh jadi punya?
Maaflah, sejak berkurun lama tak update tutorial. Busy je memanjang.
Kali ni tutorial button media sosial seperti facebook, instagram, twitter kat sidebar korang.
Dengan murah hati cik farah ni nak kongsi tutorial, siap nak bagi freebies button lagi.

Macam kat sidebar aku nih,

1.Login ke Blogspot, clik Layout > Add a Gadget (Sidebar)  > HTML/JavaScript 

2. Copy code di bawah dan paste ke dalam Html/Java Script

<center><table border="0"><tbody><tr><td>

<a href="https://www.facebook.com/nurfaraharryna" target="_blank"><img alt=" Add Me" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9C-RHKHqT7JVAxr4Jjufy3Zk_-uzE1xOHyY03u8_WwmJMDgLgKJjLTOCLjez7nojw-8BA3pMbD7h2leZ_rXQuS7QuRORAtfSBG0pTKFxUCx1fIgCeuFJ_LA4qPRWf91dDVg4kFhi9qRMy/s1600/Facebook.png" style="width:50px;height:50px" /></a></td><td>

<a href="https://twitter.com/fara_idola" target="_blank"><img alt=" Follow Me" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX2jeBZi0xM21_5Q-vAP4vBL7s-zFbDnXsi6JFsvNqbyw2AplVOVFzOizwe8pfyPb07eKkc-66SseVw6DOdZVC6xLp6dMaScuQPlcdV6ukZ2nz1hHu69_sh4e0NZu5_dG1VIzIgcjAJd5a/s1600/Twitter.png" style="width:50px;height:50px" /></a></td><td>

<a href="https://www.instagram.com/puteri_nurfarah/" target="_blank"><img alt=" Follow Me" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPqbkLoc4ntiDdCIRZ7dfiF5HX7TKhM28LaV0xAmgwMTVLVCZ2JAeGWapS8JTc3xF9fFr8XylZ0IsjsMdCK2ImW3AIgK0ND1-VV5wAKJ8MJ_MWiVZmfBHRMP4NOmIZiHb3bcMnKhzwe6Qz/s1600/Instagram.png" style="width:50px;height:50px" /></a></td><td>

<a href="https://www.pinterest.com/" target="_blank"><img alt=" Follow Me" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvv809ji8yQYhMuozX7qzQ7B6x-nfxxzIeYOX_rfkDmXQclOSiF4VzHp34YoGuh5HHHQIUtWpzrZX_vq_WosU80DJSxh2rHkPRoUMpCC1JSBowJy2L652dJhB6PWtqCdBcEn_gP9VryRZE/s1600/Pinterest.png" style="width:50px;height:50px" /></a></td>

</tr></tbody></table></center>

Tukar:
BIRU - Link Facebook
MERAH - Link Twitter
OREN - Link Instagram
UNGU - Link Pinterest

Kalau nak letak Facebook page boleh tambah code di bawah:

<a href="https://www.facebook.com/blogmissfarah/" target="_blank"><img alt=" Follow Me" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9F_3tSu5BWd3e4tBGRtf_4G8mzgDdGm68EAkrcta-zoCMxSBF9D2OnTmtwJmfQ0V1CTC1G5lHBXPHgTDpACodP1EMGHE3TQmWbsMz_EKhUNkJ6DGgHediWJ7jGpf5IIeAbj_REYU1jaWJ/s1600/Facebook.png" style="width:50px;height:50px" /></a></td>

Sebelum code HIJAU 

</tr></tbody></table></center>

3. SAVE dan lihat hasilnya.

Nak yang lain? Boleh cuba TUTORIAL INI juga.

Read More