Add Subscribe Box to Blogger/Website.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU50__0vc64U9nN1LRIs7zOGBNnBAaFeAhUib3A2-6kHnUOiyajkd5nOBYUuJfUjYLNTk3X9PAOTGI-qVPo6zxZQXy9lqf-D25AOpIZmcVHqnDaAHdGOtNLAGIis3CzEkJJ6csrwhI9XxC/s1600/delicious.png) center top no-repeat"></a>
<a title="Twitter" href="http://twitter.com/TWITTER-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQYz_tFYDuPZkpCWGWAPtiG13kpDg9-1KxudFl2gGaLvL4prjMQRy1WLgidOEfrve4kjdKjzgGI460QtjlZiyD11xXOotcnCumpKp5KZ3GGGSHP0csQmeO3H04J866aSiFivBuMzWTMwak/s1600/twitter.png) center top no-repeat"></a>
<a title="Digg" href="http://digg.com/users/DIGG-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu0axxEio6O2rh2FbR7z2nz1F8DVFRrEfuyTxNQAl5Sc1JhWYTRNWkGTsAkGQo8vZWQxc4GumKiEsmgfYqSQnJIhUrxYTUJbZjRq7UzmFqw2p5uaScMXFeMfH7jtiLk1jN5xn8HPpAFf-V/s1600/digg.png) center top no-repeat"></a>
<a title="Facebook" href="http://www.facebook.com/FACEBOOK-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiibQRkzwY6UVVDFzYyf6pn_K85nGKcoFMy5MxRfGdYRduB6fupYFAAPsr-TUgiOiM-Df2InsO-49-ON9St0b7RzXVzL6i_b71yCB_ixM7E2VUw0rkHwUmJzQvuOpz2N6EpHZQ7lakaYcGv/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8M9kFs5fR_9P3G1iPYsQ_bZuY0VOgCWlp8-xc3uxmCPh3m6nU5TMZDTq5G1ighYVsWVpuVHaiote0mhdfP2-p-5685nOrvVQEOXsC3j71XK1Kylwuk_-OSNI28wdro4Ft2fm38lUoO7A0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjL7C0ZEfwRzeY68Pe9Yy_xLHZnIp1XSJvXjZ2cQ2oX1hN9Esbja81LxSOlJxTk3It3S7qMxtfV-Lmq6X-MlRPdtsFJgMz6E9SE7tduhlrXsGqakFE13T5N0eOq8659nDj1_a8_RC_RwUd/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.

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.

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.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzSgaV3WPZeyfAVwM30h9dhWzN8TaGzYZeY1G0O7v3RKamNC7qIZ0eKXpGlwPuiEj6KkNvmYx7-B0JZbe8K3bg5rn-XmWKiYPNG4_SjmVMzfLXMfPxu9-bZsWtfZY9Lw5NzOyl1Xt2jhQ/s1600/roma1.jpg) ;
}
#kwick .opt4 {
outline: 0; background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9qrgjf-a1H_yoVA8ZoQC9zmi6fNJg3jojrEAW18b38rumB-8XX47myNeUbwv4iXZVLvci_Ww27fYs5QAamAca5FqbjQraOzmtk-j4RMC8t4owvgHdcTOHL_05bETSpXIV9XMAPvfcU9E/s1600/roma2.jpg);
}
#kwick .opt5 {
outline: 0; background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-aOvLvDcn6uBsicqwd3DShGOciL_vYE5DfdbsJ-z3nhN04wvUoBGO3ZEFqvdVstUidcEi43-84w0MTPgF47qDTosZMpWSlE3OCVUw8C8_A9wVEaGLIo4zG3X4c7nLecHIZejdpWdjaFY/s1600/roma3.jpg);
}
#kwick .opt3 {
outline: 0; background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVL06m3brfgr1czLZIs8tGFukEgTlDErFi7zQTC_oOwGC8j7OJRgVGeTo-borfe1GvYKuW4hGb6S7V0139ZCJdZ2r9NADQlX3eCO_TgJn3ufXlHUsGFxXJgZFoOpX8KN20KKRg9D6EV8U/s1600/roma4.jpg);
}
#kwick .opt1{
outline: 0; background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP9Gm8fiUgSPF5dO16TKytYgNBD48-8ezt_nWJpFSQNlUW-IqurJcfxhkz2Wk5UgBQoBi2YzhhvJ8BngGTzsHWJJG6t4sFXoEa_dHLvhL4RqLGmFhNzYCd4_0vZLcOZF3QepijYw8G-qU/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.

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1k55sln-Og9lLG7jwh9UEmQDtiofqvYNz0J4jV8diV59zWGmCfzVN2z9juxYtHjm0uQUry1nr-mMy3A49tUu8tsNTEpTTUBr7Wn60gcZWbSguBrX92XDH2u9Bbp0JfUa1nkfpWj8uxdtm/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...