Lazy Loading Page.

Add Lazy Loading To Blogspot

Memasang jQuery Lazy Load adalah salah satu cara untuk mempercepatkan "loading page" pada sesebuah blog yang mempunyai size image yang besar.

Lihat DEMO.

Bagaimana untuk memasang "plug in" ini ? Sila ikuti beberapa langkah mudah dibawah.

1. Sign in akaun blogger anda.

2. Pilih DESIGN --> Add A Gadget --> HTML/Javascript.

3. Copy kod dibawah dan PASTE.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type='text/javascript' src='https://sites.google.com/site/jquery01/jquery.lazyload.mini.js?ver=1.5.0'></script>
<script type="text/javascript">
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery("img").lazyload({
effect:"fadeIn",
placeholder: "http://3.bp.blogspot.com/_LZtXSNcp76A/THkEtEOZfrI/AAAAAAAABRo/IARVMD_8TwA/s1600/grey.gif"
});
});
</script>

4. Akhir sekali pilih SAVE.

5. Selamat mencuba.

READ MORE...

Sitemap.

Mencantikkan Blog

1. SIGN IN akaun blogger

2. Pilih NEW POST.

3. Pilih EDIT HTML.

Membuat Sitemap

4. Copy kod di bawah dan paste.

<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://www.abufarhan.co.cc/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

5. Tukarkan text berwarna merah.

6. Sebelum PUBLISH POST,jangan lupa meletakkan tajuk SITEMAP atau apa sahaja mengikut pilihan anda.

7. Pilih POST OPTIONS dan tukarkan tarikh menjadi tarikh lama.

Sumber ABU FARHAN.

READ MORE...

Intro Page.

Bina Blog Cara Mudah

Apa itu "intro page" ? Bagaimana untuk membuatnya?

Untuk melihat DEMO.

Sekiranya anda sudah memahami apa itu "intro page" dan mahu membuatnya,sila ikuti beberapa langkah mudah di bawah.

1. Sign in akaun blogger anda.

2. Pilih DESIGN --> EDIT HTML.

3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.

4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.

Tips Membina Blog

5. Cari kod ini.

]]></b:skin>

6. Copy kod di bawah dan letakkan di atas kod tadi.

#intro{
background:#CAD8C9 url(http://lh6.ggpht.com/_pt7i0nbIOCY/TDVAtE_sRoI/AAAAAAAACtU/vYI1BUEhw0g/latar_thumb%5B2%5D.jpg) repeat-x top left fixed;
position:fixed;
width:100%;
height:100%;
margin:0;
padding:0;
z-index:100;
text-align:center;
visibility:hidden;
}
* html #intro{
position:absolute;
width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#intro .welcome{
color: rgb(255, 0, 0);
font-weight: bold;
font-style: italic;
font-size:30px;
margin-top:10%;
margin-bottom:1%;
text-shadow:1px 1px 1px #fff;
}
#intro a img{border:none}
.gohome, .gohome a,.gohome a:visited,.gohome a:active{
color: rgb(255, 0, 0);
font-weight: bold;
font-style: italic;
margin-top:4%;
font-size:25px;
text-shadow:1px 1px 1px #fff
}
.gohome a:hover{
color:#ffffff;
text-shadow:1px 1px 1px #f00;
text-decoration:none
}

7. Kemudian cari kod ini

</head>

8. Copy kod di bawah dan letakkan di atas kod tadi.

<script type='text/javascript'>
//<![CDATA[
/***********************************************
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
/*************************************************
* Blogger intro by http://www.blogspottutorial.com
**************************************************/
var persistclose=1
var startX = 0
var startY = 0
var verticalpos="fromtop"
function iecompattest(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}}return returnvalue;}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("intro").style.visibility="hidden";}
function staticbar(){
barheight=document.getElementById("intro").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY; }
return el; }
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y == (pY + startY - ftlObj.y)/0;}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y == (pY - startY - ftlObj.y)/0;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10); }
ftlObj = ml("intro");
stayTopLeft();}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>

9. Seterusnya cari kod ini.

<body>

10. Copy kod di bawah dan letakkan di bawah kod tadi.

<div id='intro'><div class='welcome'>Welcome to my blog</div>
<a href='' onclick='closebar(); return false'><img alt='go to my homepage' src='http://i234.photobucket.com/albums/ee208/decnote/cute-comment/Cute-hi5-60.gif' title='go to my homepage'/></a>
<div class='gohome'><a href='' onclick='closebar(); return false'>Go to homepage</a></div>
</div>

11. Pilih PREVIEW untuk melihat hasilnya.

12. Sekiranya anda berpuashati pilih SAVE.

13. Selamat Mencuba.

READ MORE...

Add Subscribe Box to Blogger/Website.

Buat Blog

1. Masuk akaun Blogger.

2. Pilih 'Design'--> 'Add a Gadget'--> 'Html / Javascript'.

3. Copy kod di bawah dan Paste.

<style type="text/css">
#subscribe-box {
overflow: hidden;
margin: 10px 0 0 0;
}

#subscribe-box a.subscribe-sec {
display: inline-block;
display: -moz-inline-stack;
width: 40px;
padding-top: 38px;
zoom: 1;
}

#subscribe-box a.subscribe-sec:hover {
color: #660000;
}
</style>

<form action="http://feedburner.google.com/fb/a/mailverify" style="border:1px solid #ccc;padding:3px;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><h4>Get Notified When We Update !!!</h4></p><p><input style="width:180px" name="email" type="text" value="Enter your email address:" onclick="this.value='';" /><input value="FEEDBURNER-ID" name="uri" type="hidden" /><input value="en_US" name="loc" type="hidden" /><input value="Subscribe" type="submit" /></p>

<p><div id="subscribe-box">
<a title="Delicious" href="http://delicious.com/DELICIOUS-USERNAME" class="subscribe-sec" style="background: url(http://1.bp.blogspot.com/_T46SliM0-PI/TB2Wrb1EuNI/AAAAAAAAAZQ/XCYsv5xhrFY/s1600/delicious.png) center top no-repeat"></a>
<a title="Twitter" href="http://twitter.com/TWITTER-USERNAME" class="subscribe-sec" style="background: url(http://3.bp.blogspot.com/_T46SliM0-PI/TB2WqtxRIMI/AAAAAAAAAZI/7INQ-HwZQo4/s1600/twitter.png) center top no-repeat"></a>
<a title="Digg" href="http://digg.com/users/DIGG-USERNAME" class="subscribe-sec" style="background: url(http://1.bp.blogspot.com/_T46SliM0-PI/TB2WrnJnupI/AAAAAAAAAZY/qgLCPjkY7xQ/s1600/digg.png) center top no-repeat"></a>
<a title="Facebook" href="http://www.facebook.com/FACEBOOK-USERNAME" class="subscribe-sec" style="background: url(http://2.bp.blogspot.com/_T46SliM0-PI/TB2WsA5-GWI/AAAAAAAAAZg/llckeiIzHBA/s1600/facebook.png) center top no-repeat"></a>
<a title="Stumbleupon" href="http://www.stumbleupon.com/stumbler/STUMBLEUPON-USERNAME" class="subscribe-sec" style="background: url(http://3.bp.blogspot.com/_T46SliM0-PI/TB2W0KunsvI/AAAAAAAAAZw/2UZpjpyBE5s/s1600/stumbleupon.png) center top no-repeat"></a>
<a title="RSS Feed" href="http://feeds.feedburner.com/FEEDBURNER-ID" class="subscribe-sec" style="background: url(http://4.bp.blogspot.com/_T46SliM0-PI/TB2WsfPjsZI/AAAAAAAAAZo/LOPvME3a_mA/s1600/rss.png) center top no-repeat"></a>
</div></p>

</form>

Perhatian !!! Gantikan text berwarna biru dengan USERNAME anda.

4. Pilih SAVE.

READ MORE...

Display Number of Twitter Followers as Text.

arena trick

1. Masuk akaun Blogger.

2. Pilih 'Design'--> 'Add a Gadget'--> 'Html / Javascript'.

3. Copy kod di bawah dan Paste.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url: 'http://api.twitter.com/1/users/show.json',
data: {screen_name: 'TWITTER-USERNAME'},
dataType: 'jsonp',
success: function(data) {
$('#followers').html(data.followers_count);
}
});
});
</script>


I have <span id="followers">&nbsp;</span> Twitter followers.

Perhatian !!! Gantikan text berwarna merah dengan twitter username anda.Text berwarna biru boleh digantikan mengikut citarasa anda.

READ MORE...

Image Menu Slider.

Trik Blog

1. Sign in akaun blogger anda.

2. Pilih LAYOUT --> EDIT HTML.

3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.

4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.

Malaysia Blogger Hack

5. Cari kod ini.

]]></b:skin>

6. Copy kod di bawah dan letakkan di atas kod tadi.

#kwick {background: 000000px;
width:800px;
height:200px;
overflow:hidden;
position:relative;
padding:0;
margin:0pt auto;
}
#kwick ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
display:block;
width:800px;
height:200px;
padding:0;
margin:0px;
}
# .kwicks {
display: block;
height: 200px;
margin: 0px;
}
#kwick li {
float: left;
}
li:after {
content: "";
}
#kwick .kwick {
display: block;
cursor: pointer;
overflow: hidden;
height: 200px;
width: 155px;
/*padding: 10px;*/
background: #000;
/*border-right: 5px solid #000;*/
border-right: 2px solid #000;
}
#kwick .kwick span {
display: none;
}
#kwick .opt2 {
outline: 0; background: #000000 url(http://3.bp.blogspot.com/_izLr6S52mh8/S7vBz5yKu-I/AAAAAAAAADM/xNIMS5irHsk/s1600/roma1.jpg) ;
}
#kwick .opt4 {
outline: 0; background: #000000 url(http://3.bp.blogspot.com/_izLr6S52mh8/S7vB9SfIxRI/AAAAAAAAADU/7s_4aI7HiE4/s1600/roma2.jpg);
}
#kwick .opt5 {
outline: 0; background: #000000 url(http://4.bp.blogspot.com/_izLr6S52mh8/S7vCFdq9_VI/AAAAAAAAADc/14K3q7a1XkE/s1600/roma3.jpg);
}
#kwick .opt3 {
outline: 0; background: #000000 url(http://3.bp.blogspot.com/_izLr6S52mh8/S7vCM3gSscI/AAAAAAAAADk/ZaMgaQT57Ss/s1600/roma4.jpg);
}
#kwick .opt1{
outline: 0; background: #000000 url(http://2.bp.blogspot.com/_izLr6S52mh8/S7vCS_eR-eI/AAAAAAAAADs/vIvwQphNWUw/s1600/roma5.jpg);
border-right:1;
}

7. Cari kod ini sekali lagi.

]]></b:skin>

8. Copy kod di bawah dan letakkan di bawah kod tadi.

<script src='http://cdn.bitbucket.org/mr2r/r2r/downloads/mootools124.js' type='text/javascript'/>
<script src='http://cdn.bitbucket.org/mr2r/r2r/downloads/imageMenu.js' type='text/javascript'/>

9. Cari kod ini.

<div id='header-wrapper'>

10. Langkah terakhir copy kod di bawah dan letakkan di bawah kod tadi.

<div id='kwick'>
<ul class='kwicks'>
<li><a class='tipz kwick opt1' href='http://syamzone-bloguntukaku.blogspot.com/' title='Home::Done browsing? Return to the main page...'></a></li>
<li><a class='tipz kwick opt2' href='http://syamzone.blogspot.com/2009/03/membuat-link-exchange-box.html' title='Blogroll::On a reading mood? Visit my blog buddies...'></a></li>
<li><a class='tipz kwick opt3' href='http://twitter.com/bloguntukaku' title='Twitter::Are you also on Twitter?...'></a></li>
<li><a class='tipz kwick opt4' href='https://friendfeed.com/syamzone' title='FAQ::About me and answers to the most frequently asked questions'></a></li>
<li><a class='tipz kwick opt5' href='mailto:ymsgr:sendIM?syamzone@rocketmail.com' title='Contact::Thank you for visiting. Questions? Contact me...'></a></li></ul>
</div>
<script type='text/javascript'>
var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:450});
</script>

Perhatian !!! Gantikan text/kod yang berwarna merah.

Sumber/Demo Teblet Desk.

READ MORE...

Sexy Hidden Sidebar.

Arena Blogspot

1. Masuk akaun Blogger.

2. Pilih 'Layout'--> 'Add a Gadget'--> 'Html / Javascript'.

3. Copy kod di bawah dan Paste.


<style type="text/css">
#gb{position: fixed;
width: auto;
height: auto;
top: 200px;
right:-7px;
}
* html #gb{position:relative;}

.gbtab{
float:left;
height:137px;
width:28px;
background:url('http://1.bp.blogspot.com/_znjmv4LDwck/TAFD8xmG9DI/AAAAAAAABfA/aVlcqllHAOo/s400/Sidebar+Button.gif');background-position:top left; background-repeat:repeat-y;;
}
.gbcontent{overflow:hidden !important;
float:left;
border:0px solid #FFFFFF;
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">

MASUKKAN KOD SHOUTBOX ANDA DISINI

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

4. Perhatian !!! Gantikan text yang berwarna biru dengan kod shoutbox anda. Anda juga boleh memasukkan kod selain daripada kod shoutbox.

5. Save.

6. Selamat Mencuba.

READ MORE...

Menukarkan Post Date Dengan Calendar Icon.

Panduan Blog

1. Sign In akaun Blogger.

2. Pilih Settings --> Formatting dan ganti "date header format".

3. Pastikan format tarikh seperti ini (mm.dd.yyyy) contoh : 7.14.2010.

4. Kemudian Save Setting.

4. Langkah seterusnya, pilih Layout --> Edit HTML --> Expand Widget Templates.

5. Cari kod ini.

</head>

6. Copy kod di bawah dan letakkan diatas kod tadi.

<SCRIPT type='text/javascript'>
//<![CDATA[
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);
</script>

7. Cari kod ini.

]]></b:skin>

8. Copy kod dibawah dan letakkan diatas kod tadi.

.dateblock {
background:url(http://4.bp.blogspot.com/_1_qkt6bisvU/S-58k0iEQwI/AAAAAAAAAKc/i8SYesJ2ciM/s1600/dateblock.gif); background-repeat:no-repeat; width:66px; height:75px; text-align:center; float:left; color:#fff; font-size:10px; font-weight:bold; margin:0px; margin-top:3px; margin-right:10px; padding-top:7px}
.day{font-size:35px; font-weight:bold; color:#000; padding-top:5px; letter-spacing:-1px}
.month{font-size:12px; font-weight:bold; color:#fff; padding:0px; letter-spacing:1px
}

9. Cari kod ini.

<data:post.dateHeader/>

10. Untuk memudahkan carian anda gunakan Ctl + F.

11. Sekiranya anda sudah jumpa kod diatas, gantikan dengan kod ini.

<DIV class='dateblock'>
<SCRIPT>date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

12. Setelah selesai pilih Preview.

13. Sekiranya anda berpuashati dengan hasilnya pilih SAVE.

14. Selamat Mencuba.

READ MORE...

Thumbnail Related Posts With Marquee.

Belajar Buat Blog

Memasang 'Related Posts' dapat membantu dan meningkatkan Page Views sesebuah blog.

1. Sign in akaun blogger anda.

2. Pilih LAYOUT --> EDIT HTML.

3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.

4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.

Malaysia Blogger Hack

5. Cari kod ini.


</head>

6. Kemudian gantikan kod tadi dengan kod ini.


<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

7. Cari kod ini.

<div class='post-footer-line post-footer-line-1'>

8. atau

<p class='post-footer-line post-footer-line-1'>

9. Sekarang copy kod di bawah dan letakkan di bawah kod tadi.

<!-- Marquee Serbablog Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://serba-seru.blogspot.com/2010/02/thumbnail-related-posting-with-marquee.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

10. Anda boleh menggantikan kod berwarna biru.

11. Pilih SAVE.

Sumber Serba Blog

READ MORE...

Slide Recent Posting.

Tutorial Blogspot

1. Masuk akaun Blogger.

2. Pilih 'Layout'--> 'Add a Gadget'--> 'Html / Javascript'.

Copy kod di bawah dan Paste.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style media="screen" type="text/css">
<!--

#spylist {
overflow:show;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:280px;
overflow:show;
list-style-type: none;
padding: 5px 5px;
margin:0px 0px;
}
#spylist li {
width:280px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url() repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:10px;
height:8px;
overflow:show;
margin:3px 3px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:show;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:8px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:show;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:3px 3px;
margin:8px 8px;
}

-->
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 20;
home_page = "http://nama-blog-anda.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://popular-post-blogger.googlecode.com/files/recentpostthumbspy-min.js" type="text/javascript"></script>
</div>

3. Perhatian !!! Gantikan text berwarna merah.Sebarang perubahan boleh di lakukan dengan menggantikan kod berwarna biru.

4. Save.

5. Selamat Mencuba.

Kredit Mari Bina Blog.

READ MORE...

Memasang Hidden Shoutbox.

Trick Shoutbox

1. Masuk akaun Blogger.

2. Pilih 'Layout'--> 'Add a Gadget'--> 'Html / Javascript'.

3. Copy kod di bawah dan Paste.


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

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/_tgUOxznghPA/S6oTtXCIvbI/AAAAAAAAAbU/ZAaskiVstr8/s400/Shoutbox+tabs.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">

MASUKKAN KOD SHOUTBOX ANDA DISINI

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

4. Perhatian !!! Gantikan text yang berwarna biru dengan kod shoutbox anda.

5. Save.

6. Selamat Mencuba.

READ MORE...

Memasang Google Buzz Button.

Share button

1. Sign in akaun blogger anda.

2. Pilih LAYOUT --> EDIT HTML.

3. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah.

Malaysia Blogger Hack

4. Cari kod ini.

<div class='post-header-line-1'/>

5. Copy kod di bawah dan letakkan selepas kod di atas.

<div style="float:right;padding:4px;">
<script type='text/javascript'>
njuice_buzz_url = '<data:post.title/>';
njuice_buzz_title = '<data:post.url/>';
njuice_buzz_share = 'reader';
</script>
<script type='text/javascript' src='http://button.njuice.com/buzz.js'/>
</div>

6. Sekiranya anda tidak menjumpai kod no.4. Cari kod ini dan letakkan di sebelumnya.

<data:post.body/>

7. Setelah selesai pilih PREVIEW.

8. Sekiranya anda berpuas hati pilih SAVE TEMPLATE.

9. Selamat Mencuba.

Sumber NJuice.com

READ MORE...

Memasang Top Comments Bergerak.

Top Commentator

1. Masuk akaun Blogger.

2. Pilih LAYOUT --> Add a Gadget --> Html / Javascript.

3. Copy kod di bawah dan Paste.

<center><!--Top Comments-->
<div style="text-shadow:4px 4px 4px #adadad; font-size: 14px; COLOR: black;"><b>Top Comment :</b></div>
<div style="border: 3px dotted black; background: #fff000; padding:2px; width:470px; font-size: 12px; color:black;">
<script type="text/javascript">
function pipeCallback(obj) {
document.write("<marquee>");
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> | ";
document.write(item);
}
document.write("</marquee>");
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&
_id=a55cb97ebb368bb1b89b7f6bdeb35336&filter=S Y A M Z O N E&url=http%3A%2F%2Fnama-blog-anda.blogspot.com&num=10" type="text/javascript"></script>
<!-- End Top Comments--></div></center>

4. Gantikan text kod berwarna biru dengan nama blog anda dan gantikan text kod berwarna merah kepada nama yang selalu anda gunakan untuk komen, contoh nama yang selalu saya gunakan untuk komen ialah S Y A M Z O N E .

5. Anda boleh menggantikan kod warna background yang berwarna kuning mengikut kesesuaian template anda.

6.Setelah selesai pilih SAVE.

7. Selamat Mencuba

READ MORE...

Memasang 'Heart Comment Count'.

Heart Comment Count

1. Sign in akaun blogger.

2. Pilih LAYOUT --> EDIT HTML.

3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.

4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.

Panduan Blogger

5. Cari kod ini.

]]></b:skin>

6. Copy kod di bawah dan letakkan di atas kod tadi.

.heart-comment-count{
background:transparent url(http://3.bp.blogspot.com/_znjmv4LDwck/S1d8wf1s_6I/AAAAAAAABQk/eIn0PY1BRbU/s400/heart-gold-icon.png) no-repeat;
float:right;top:0;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
height:31px;
width:34px;
text-align:center;
margin-left:10px;
padding:6px 0 0 0;
}

Anda boleh memilih salah satu icon di bawah untuk digunakan.

Gantikan url icon yang berwarna merah.

01. Heart Pink.

http://3.bp.blogspot.com/_znjmv4LDwck/S1d9l14yI5I/AAAAAAAABQs/0lbrNPx0LYI/s400/heart-pink-icon.png

02. Heart Gold.

http://3.bp.blogspot.com/_znjmv4LDwck/S1d8wf1s_6I/AAAAAAAABQk/eIn0PY1BRbU/s400/heart-gold-icon.png

7. Setelah selesai memilih icon.

8. Cari kod ini.

<b:if cond='data:post.link'>

9. Copy kod dibawah dan letakkan diatas kod tadi.

<span class='heart-comment-count'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
</span>

10. Pilih PREVIEW untuk melihat hasilnya.

11. Sekiranya berpuas hati SAVE TEMPLATE.

Perhatian !!! Anda boleh mengubah kepada Comment Bubble dengan menggantikan url icon berwarna merah dan kod dibawah.

padding:3px 0 0 0;

http://3.bp.blogspot.com/_znjmv4LDwck/S1d5f0c6C5I/AAAAAAAABQc/7wMRKFby0Fs/s400/comment-icon+2.png

12. Selamat Mencuba.

READ MORE...

Memasang 'Heart Social Bookmark'.

Trik Blogspot

1. Sign in akaun blogger.

2. Pilih LAYOUT --> EDIT HTML.

3. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah.

Blogger Hack

4. Cari kod ini.

<data:post.body/>

5. Copy kod di bawah dan letakkan selepas kod di atas.

<div style='clear:both; '>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='http://2.bp.blogspot.com/_4HKUHirY_2U/SyCxndGKQoI/AAAAAAAAAfM/zQE4e5oGJLI/stumble.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='http://3.bp.blogspot.com/_4HKUHirY_2U/SyCxR6IdwFI/AAAAAAAAAe0/P-WUkgBTawI/delicious.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='http://3.bp.blogspot.com/_4HKUHirY_2U/SyCxqwEFIuI/AAAAAAAAAfU/QRi439zo_Xc/technorati.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://2.bp.blogspot.com/_4HKUHirY_2U/SyCxulbFRoI/AAAAAAAAAfc/CKJPLxIwP5M/twitter.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='http://2.bp.blogspot.com/_4HKUHirY_2U/SyCyGNznjII/AAAAAAAAAf0/ESzv0oL2AEQ/facebook.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.url + &quot;&amp;=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Yahoo' src='http://1.bp.blogspot.com/_4HKUHirY_2U/SyCxeo18s_I/AAAAAAAAAe8/0gAb9Ya6B78/yahoo.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='http://2.bp.blogspot.com/_4HKUHirY_2U/SyCx081oRKI/AAAAAAAAAfk/pTxLusQo0Gc/reddit.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='external nofollow' target='_blank'><img alt='Feed' src='http://3.bp.blogspot.com/_4HKUHirY_2U/SyCxioR-4tI/AAAAAAAAAfE/LkLtTqd6wIA/rss.png' style='padding:0;margin:0;border:none;'/></a>
</div>
</div>

6. Setelah selesai pilih PREVIEW.

7. Sekiranya anda berpuas hati pilih SAVE TEMPLATE.

8. Selamat Mencuba.

READ MORE...

Memasang Retweet Counter Buttons.

Retweet Counter Buttons

1. Sign in akaun blogger anda.

2. Pilih LAYOUT --> EDIT HTML.

3. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah.

Malaysia Blogger Hack

4. Cari kod ini.

<div class='post-header-line-1'/>

5. Copy kod di bawah dan letakkan selepas kod di atas.

( Large Button. )

Retweet Tricks

<div style='padding: 4px; float: right;'>
<script src='http://button.topsy.com/widget/retweet-big?nick=TWITTER-USERNAME&amp;url=' type='text/javascript'/>
</div>

atau

( Small Button. )

Retweet Tips

<div style='padding: 4px; float: right;'>
<script src='http://button.topsy.com/widget/retweet-small?nick=TWITTER-USERNAME&amp;url=' type='text/javascript'/>
</div>

Perhatian !!! Gantikan TWITTER-USERNAME dengan username anda.

6. Sekiranya anda tidak menjumpai kod no.4. Cari kod ini dan letakkan di sebelumnya.

<data:post.body/>

7. Setelah selesai pilih PREVIEW.

8. Sekiranya anda berpuas hati pilih SAVE TEMPLATE.

9. Selamat Mencuba.

READ MORE...

Memasang 'Leaves Fall Social Bookmark'.

Leaves Fall Social Bookmark

1. Sign in akaun blogger.

2. Pilih LAYOUT --> EDIT HTML.

3. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah.

Malaysia Blogger Hack

4. Cari kod ini.

<data:post.body/>

5. Copy kod di bawah dan letakkan selepas kod di atas.

<div style='clear:both; '>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='http://4.bp.blogspot.com/_4HKUHirY_2U/SyEC0tRe5AI/AAAAAAAAAhc/ciTNFYbdI6c/StumbleUpon.com.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='http://4.bp.blogspot.com/_4HKUHirY_2U/SyECZRarefI/AAAAAAAAAgU/e9uAMhzzntI/del.icio.us.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='http://3.bp.blogspot.com/_4HKUHirY_2U/SyEC3Z8WPTI/AAAAAAAAAhk/jPoVuoRZkfY/Technorati.com.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://2.bp.blogspot.com/_4HKUHirY_2U/SyEC5xCTZzI/AAAAAAAAAhs/mGoEuPNumYY/Twitter.com.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Digg' src='http://4.bp.blogspot.com/_4HKUHirY_2U/SyECgX6zBRI/AAAAAAAAAgk/h74cmytw61U/Digg.com.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='http://4.bp.blogspot.com/_4HKUHirY_2U/SyECjY9DWwI/AAAAAAAAAgs/jfJ840a7a4U/Facebook.com.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='http://1.bp.blogspot.com/_4HKUHirY_2U/SyECostHsxI/AAAAAAAAAg8/2fuBDMI8_YI/Reddit.com.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='external nofollow' target='_blank'><img alt='Feed' src='http://2.bp.blogspot.com/_4HKUHirY_2U/SyECu07nS9I/AAAAAAAAAhM/Lnd4RvAbcCc/RSS.png' style='padding:0;margin:0;border:none;'/></a>
</div>
</div>

6. Setelah selesai pilih PREVIEW.

7. Sekiranya anda berpuas hati pilih SAVE TEMPLATE.

8. Selamat Mencuba.

READ MORE...