Tutorial #17: Shoutbox/Cbox icon Maher Zain.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUqVZMdmA2gfUAOtwbUDf7EAlTgbNQFZLcIlQWUSnbf4177L9hrMPwaQR3bXHjTCvQlV9IbWb-jPwqfzBU24-GvUP3fHP9JRpBngo8C6fq8hntpy21KlXVBIMe2WDkyHVNgmbJc3HZ1KpH/s1600/sbmaher2.png

Refer tutorial ni:
http://ichifighting.blogspot.com/2012/09/tutorial-16-sumbunyikan-shoutboxcbox.html

*Tukar tinggi tab kepada 200.
Tukar lebar tab kepada 224.
Tukar warna ungu kepada 200.

Tutorial #16: Sumbunyikan Shoutbox/Cbox.

Step 1
- Dari Dashboard -> Design -> Page Elements -> Add a Gadget -> HTML/JavaScript.

Step 2
- Copy code kat bawah pastu paste dalam HTML/JavaScript.

<style type="text/css">
#gb{
position: fixed;
top: 50px;
-index: +1000;
}

* html #gb{position:relative;}

.gbtab{
height: 100px;
width: 30px;
float: left;
padding-bottom: 15px;
cursor: pointer;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP1xmS2YaaT5lE-8zVW_HXAzQ83naE2x-wYUJRjS7tBGPeLsrWzrHxnvm7PHbPDEJe4PVbryWr6C0cY8Lf701GDvaeXJvSJSlRoSEtGkj6iJcTtSMjRJx-CJQGpIyxfXaizRBO-eQv95oA/s1600/jerit+sini.png') no-repeat;
 }

.gbcontent{
float: left;
border: 2px solid #666666;
background: #F5F5F5;
padding: 10px;
}

</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}

function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}

</script>

<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

LETAK KOD SHOUTBOX/CBOX KAT SINI

</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>

Step 3
- Warna merah untuk tinggi tab.
- Warna oren untuk lebar tab.
- Warna kuning untuk image tab.

Step 4
- Save.
- Siap.

Tutorial #15: Popular post widget.

Step 1
- Dari Dashboard -> Design -> Page Elements -> Add a Gadget -> HTML/JavaScript.

Step 2
- Copy code kat bawah pastu paste dalam HTML/JavaScript.

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 5;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="URL BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr">
<style type=text/css>
#rpdr {background: url() 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsb { }
.bbrecpost2 {
padding-top:2px;
padding-bottom:2px;
border-bottom: 0px #cccccc dotted; }
</style>

Step 3
- Warna merah untuk bilangan post.
- Warna oren tukar kepada link blog korang.

Step 4
- Save.
- Siap.

Tutorial #14: Recent post widget.

Step 1
- Dari Dashboard -> Design -> Page Elements -> Add a Gadget -> HTML/JavaScript.

Step 2
- Copy code kat bawah pastu paste dalam HTML/JavaScript.

<ul>
<script language='javascript'>
aBold = false;
numposts=1000;
maxshowresult=5;
home_page = "URL BLOG";
</script>
<script src='https://sites.google.com/site/jombinabelogtoppost/jombinabelog-popularpost2.js' type='text/javascript'></script>
</ul><br/>

Step 3
- Warna merah untuk bilangan post.
- Warna oren tukar kepada link blog korang.

Step 4
- Save.
- Siap.

Tutorial #13: Top commentators widget.

Step 1
- Dari Dashboard -> Design -> Page Elements -> Add a Gadget -> HTML/JavaScript.

Step 2
- Copy code kat bawah pastu paste dalam HTML/JavaScript.

.top-commenter-line     {margin: 3px 0;}
.top-commenter-avatar   {vertical-align:middle;}
</style>
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html
//
// CONFIG:
var maxTopCommenters = 5;   // how big a list of top commentators
var minComments = 1;        // how many comments must top commentator have at least
var numDays = 0;            // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true;       // true: exclude my own comments
var excludeUsers = ["NAMA BLOG", "someotherusertoexclude"];     // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';      // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 16;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNfxt5E6gfdXVeDfSLzSY5OhUo4OaXsgknbZJbtc971IHOAtlSx6D7O8T4FtNWhyad66uwHph6e1Ctf5tz6tkcBLVnEHmwzgh2JfQsmzrRZ9OySQ9Ti9jYmwbk39p5B3u2XZk4Ehzvuyc/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = '';  // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author;
  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t;
  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';
  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date();
  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  }
  for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
      //Calculate difference btw the two dates, and convert to days
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;
    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue;
    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }
  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  });
  // list top topcommenters:
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commenter-line">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
} 
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

Step 3
- Warna merah tu untuk bilangan blogger yang komen.
- Warna oren tu korang tukar kepada nama korang supaya nama korang tak tersenarai dalam top commentators.

Step 4
- Save.
- Siap.

Tutorial #12: Pasang search box.

Step 1
- Dari Dashboard -> Design -> Page Elements -> Add a Gadget -> HTML/JavaScript.

Step 2
- Klik butang tambah untuk Search Box macam dalam gambar.


Step 3
- Tick mana-mana yang korang suka.


Step 4
- Save.
- Siap.

Tutorial #11: Header hover 360 degree.

Step 1
- Dari Dashboard -> Design -> Edit HTML.

Step 2
- Klik Expand Widget Templates.
- Search code kat bawah.
*guna ctrl+F supaya senang cari.

/* Header
----------------------------------------------- */

Step 3
- Copy code kat bawah.
- Paste kat bawah code yang dicari tadi.

#header:hover{
-webkit-transition-duration: 2s;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}

Step 4
- Save.
- Siap.

Tutorial #10: Buang atau hilangkan navbar.

Tahu tak navbar tu ape? Kalu tak tahu, tengok gambar kat bawah ni.

Tutorial #9: Buat tulisan copyright bawah footer.

Step 1
- Dari Dashboard -> Design -> Edit HTML.

Step 2
- Klik Expand Widget Templates.
- Search code kat bawah.
*guna ctrl+F supaya senang cari.

<footer>

Step 3
- Copy code kat bawah.
- Paste kat bawah code yang dicari tadi.

<center>Copyright 2012 © <a href='URL BLOG'>NAMA BLOG</a></center>

Step 4
- tukar perkataan warna merah kepada link blog sendiri.
- tukar perkataan warna oren kepada nama sendiri.

Step 5
- Save.
- Siap.
*cuba preview dulu sebelum save untuk keselamatan.

Tutorial #8: Image opacity effect versi 2.

Sebelum gambar disentuh:


Selepas gambar disentuh:


Step 1
- Dari Dashboard -> Design -> Page Elements -> Add a Gadget -> HTML/JavaScript.

Step 2
- Copy code kat bawah pastu paste dalam HTML/JavaScript.

<style>

.post a img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}

.post a:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
</style>

Step 3
- Save.
- Siap.

Tutorial #7: Image opacity effect versi 1.

Sebelum gambar disentuh:


Selepas gambar disentuh:


Step 1
- Dari Dashboard -> Design -> Page Elements -> Add a Gadget -> HTML/JavaScript.

Step 2
- Copy code kat bawah pastu paste dalam HTML/JavaScript.

<style>

.post a img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}

.post a:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}

</style>

Step 3
- Save.
- Siap.

Tutorial #6: Letak butang like facebook di setiap entry.

Step 1
- Dari Dashboard -> Design -> Edit HTML.

Step 2
- Klik Expand Widget Templates.
- Search code kat bawah.
*guna ctrl+F supaya senang cari.

<data:post.body/>

Step 3
- Copy code kat bawah.
- Paste kat bawah code yang dicari tadi.

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>

Step 4
- Save.
- Siap.
*cuba preview dulu sebelum save untuk keselamatan.

Tutorial #5: Tukar favicon.

Korang tahu apa tu favicon? Kalau tak tahu, tengok gambar kat bawah ni.


Senang je kalau nak tukar favicon. Ikut langkah-langkah kat bawah.

Step 1
- Dari Dashboard -> Design -> Page Elements.

Step 2


- Nampak tak kotak favicon tu?
- Klik Edit.


- Klik browse.
- Pilih mana-mana gambar yang korang suka.
*pastikan gambar tu segi empat sama. Kalau tak, tak jadi nanti.

Step 3
- Save.
- Siap.

Tutorial #4: Disable copy text dengan amaran.

Step 1
- Dari Dashboard -> Design -> Page Elements -> Add a Gadget -> HTML/JavaScript.

Step 2
- Copy code kat bawah pastu paste dalam HTML/JavaScript.
*korang boleh tukar tulisan bold tu dengan ayat sendiri.

<script language='JavaScript'>
<!--

//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message="Apa copy-copy ni!";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>

Step 3
- Save.
- Siap.

Tutorial #3: Disable copy text tanpa amaran.

Step 1
- Dari Dashboard -> Design -> Page Elements -> Add a Gadget -> HTML/JavaScript.

Step 2
- Copy code kat bawah pastu paste dalam HTML/JavaScript.

<script type="text/javascript">

//form tags to omit in NS6+:
//http://eking.in
var omitformtags=["input", "textarea", "select"]

omitformtags=omitformtags.join("|")

function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}

function reEnable(){
return true
}

if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}

</script>

Step 3
- Save.
- Siap.

Tutorial #2: Blog archive versi kalendar.

Step 1
- Dari Dashboard -> Design -> Page Elements -> Add a Gadget -> HTML/JavaScript.

Step 2
- Copy code kat bawah pastu paste dalam HTML/JavaScript.
*tukar tulisan yang bold tu kepada link blog sendiri.

<center><div id="blogCalendar"></div>
<script type="text/javascript" src="http://lvchen-recentcomments.googlecode.com/svn/trunk/Calendar/1.0/calendar_pack.js"></script>
<script type="text/javascript">
Calendar.base="URL BLOG";
Calendar.timeZone="+08:00";
Calendar.timeZoneCheck = true;
Calendar.drawTable();
</script>
<style>

#blogCalendar {
display:block;
text-algin:center;
border:1px solid #000000;
width:100%;
background: transparent;
}

#CalendarCaption a {
text-decoration:none;
}

#CalendarCaption {
border-bottom: 2px solid #000000;
width:85%;
margin:auto;
}

#CalendarTable a {
font-weight:bold;
color: #000000;
}

.Today {
background: ;
font-weight:bold;
text-decoration:none;
}

#CalendarFooter {
font-weight:bold;
margin-top:5px;
margin-bottom:5px;
background: ;
}

.yearInput {
color: #000000;
background: ;
}

.monthTable {
color: #000000;
background: ;
}

</style></center>

Step 3
- Save.
- Siap.

Tutorial #1: Letak online users kat atas.

Step 1
- Bukak website ni http://www.freeonlineusers.com dan sign up.
- Dapatkan Link Codes.
*kat dalam free users online tu tak payah letak Link Text. Sebab nak biar nombor je yang keluar.

Step 2
- Copy code kat bawah ni:

<script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    <div style='display:scroll; position: fixed ; z-index:300; top:32px; left:35px; background:;'title=''>
 
<!-- Start FreeOnlineUsers.com -->
MASUKKAN LINK CODES FREE USERS ONLINE KAT SINI
<!-- End FreeOnlineUsers.com -->
    </div>

top: kedudukan dari atas.
left: kedudukan dari kiri.

Step 3
- Dari Dashboard -> Design -> Page Elements -> Add a Gadget -> HTML/JavaScript.

- Masukkan code yang dicopy tadi.
- Save.

Step 4
- Copy code bawah ni:

<a style="display:scroll;position:fixed;top:10px;left:10px;" title=""><img width="" style="border:0" alt="" src="LINK GAMBAR" /></a>

- Kat bawah ni sample gambar yang boleh korang guna.



- Dari Dashboard -> Design -> Page Elements -> Add a Gadget -> HTML/JavaScript.
- Masukkan code yang dicopy tadi.
- Save.
- Siap.