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

Tutorial 145: Cara Posting Entry/ New Posting

Assalammualaikum w.b.t,

Hari ini adalah pelajaran khas untuk blogger yang bosan dengan blogging.

Jika ini adalah pakar , anda akan melakukannya ...

Tutorial kali ini, bagaimana untuk menyiarkan item tersebut. Sekiranya ia kali pertama saya mempunyai suara, ia adalah idea yang tidak baik. Dah la dengan rupa blogger baru yang tidak terkejut. 😡



1. Klik pada laman web ini ===> https://www.blogger.com

2. Click SIGN IN untuk masuk ke laman web blogger

3. Masukkan email…..tekan NEXT dan masukkan PASSWORD seterusnya click SIGN IN.

4. Click bahagian POST seperti gambar di atas dan click NEW POST.

Ckick untuk pertumbuhbesaran

5.  Rujuk gambar di atas.

- Tulis tajuk posting korang

- Entry-posting korang

- Labels (label sangat penting agar posting/entry korang lebih tersusun dan sistematik) contoh: blog tutorial, so bila orang click labels blog tutorial semua entry/posting yang berkaitan dengan blog tutorials akan keluar jadi reader senang nak baca entry/posting korang.

6. Lepas siap semua tu bolehlah PUBLISH yerrr…

Selamat mencuba! Happy blogging.

Read More

Tutorial 144: Membuat Menu Bar Berserta Sub-menu/ Drop Tab Menu

Assalamualaikum lama tak berkongsi tutorial.

Kali ini sangat murah hati untuk berkongsi menu pengekod bar menu baru, terutamanya bagi mereka yang bosan dengan tab menu lama ... sy tidak meminta apa-apa pampasan ... pengetahuan yang ada harus dikongsi untuk berkat-berkat yang dikongsi .

Kali ini dengan jenis bar menu bersama dengan menu drop-down menu menengah atau orang.

Bar menu kelihatan seperti ini:

Tapi ada special sikit dia ada sub menu di bawahnya seperti ni :

So lebih jimat ruang dan lebih tersusun blog korangkan...


1.Login ke Blogspot, clik Template > Edit HTML > Rujuk sini

2. Selepas itu...cari code ini ]]></b:skin> dengan cara tekan CTRL F
3. Copy code di bawah dan PASTE di ATAS/SEBELUM code yang korang cari tadi.

#menubar{
border-bottom:4px solid #ff0000;
width:1025px;
height:32px;
background:#000000;
float:center;
margin-bottom:3px;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
background: #ff0000;
color: #fff;
text-decoration:none;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #ff0000;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #000000;
color: #ffffff;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##ff0000;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}  

Petunjuk:
Code #ff0000 (border bawah menubar),  
1025px (lebar menubar), 
#000000(background menubar).

4. Try Preview, jika tak ada sebarang masalah. SAVE sahaja.

5. Selepas itu, Copy code di bawah:

<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://bicarafarah.blogspot.com/p/blog-tutorial_1005.html'>Tutorial Blog</a></li>
<li><a href='http://bicarafarah.blogspot.com/p/my-review-collection.html'>Produk Review</a></li>
<li><a href='http://bicarafarah.blogspot.com/2012/08/tempahan-design-dan-edit-blog.html'>Tempahan Blog</a>
<ul>
<li><a href='http://bicarafarah.blogspot.com/p/info-dan-tips.html'>Info/Tips</a></li>
<li><a href='http://bicarafarah.blogspot.my/p/blog-page_16.html'>Header Design</a></li>
<li><a href='http://bicarafarah.blogspot.my/p/portfolio-header-design.html'>Blog Design</a></li>
<li><a href='http://bicarafarah.blogspot.my/search/label/full%20template'>Contoh Template</a></li>
</ul>
</li>
</ul>
</div>

6. Pergi ke Layout Blog > Add Gadget > Html/JavaScript (bahagian crosscol) dan Paste code di atas dalam Html/JavaScript tapi ubah dulu :

Petunjuk:

http://bicarafarah.blogspot.my - link korang
Home - tab menu title
http://bicarafarah.blogspot.my- sub menu/drop tab menu

7. Save dan lihat hasil.

*kenapa pakai tab menu ni bagus? Sebab kemas dan tersusun..boleh letak banyak menu...boleh delete, add ubah bila-bila masa, jimat masa daripada nak design kat PS.

 Sekian itu sahaja. Selamat mencuba. Doakan Cik Farah Murah rezeki..❤❤❤❤❤

Read More

Tutorial 142 : Kat mana tick Expand Widget Templates?

Assalamualaikum.

Sibuk sangat sehingga dia tidak bercakap tentang blog. Banyak komen hebat bertanya tentang soalan ini Kat untuk memperluas Templat Widget ?? Awak tahu, awak tahu. Saya tahu saya belum tahu.

1.Login ke Blogspot, clik Template > Edit HTML >




2. Lepas korang buka edit HTML, akan jumpa coding macam ni. Pastikan kat tepi tu scroll atas sekali. dan jumpa tanda  ► dan akan keluarlah Expand Widget Templates.




3. Kalau nak find coding dalam tu, pastikan cursor korang click dalam kotak edit HTML dan tekab Ctrl + F untuk mengeluarkan button serach seperti gambar di bawah.



5. Sekarang boleh cari coding yang korang nak..Selamat Mencuba...

Read More