Floating / Slide Out Social Bookmark.

1. Sign in akaun blogger anda.

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

3. Copy kod dibawah dan PASTE.

<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#eeeeee;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvEX4qTadQYuxjI0pj-R6NnWmD9gu3nG4etn-gERUUjQCW0X8ukcvvkUoa8WJyN6n2yvm3Nac-B6thQfzcPlnJSHupDdlI047ETVlgRkSf2Jf9CMrfB3HHz286QuPkuFYPb5aP8ZtN72ZA/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ZpVBX_ImMvyKiXQZnqF9-oWF_DNIhp4ZzfSWsf1fLu_hCv3ObWHK-KHTTZOcSvJjC5KQsApkb98w-e-TpPBh9W9iLxUteMkoIpJ3KSiqclX2hpRb0r80WCSixyWkdY1vu2onuWi7uh6J/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixS0VOFrn_BLIcOoFwjhTGe0MqLLARrCVGJcKJmErD3niYFlXMZHeMBcAXYTJRhDWkI9QYBxJGuxAsPYG6VPsGsHVycP0jag2GvWJMULf0fYf2PEupT0aV1dqHQkaGBY8mls26Gm-Q1xLI/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC3tCAMwzbc9aiStw1e5lPGCKZ5XSvjK1DZJ8O7S-tgMToLEm3o58qdCJhN96sJEU4HQbqONrY8San2c_gcjrlHMiNZbwYMcFC8wuBZmQH973ZIn_LhAZBN9GMCleDooSrojE7mOo08c29/s400/google_64x64.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8tdlDTPeR_ukrKzZ0jnisnk1S9e-AfnLjGmX2GTxDU9tmqRFAhe26JXlp2bP2EGkSS9XpAU_H2duxZWnwwny2PwE6FFlV8OF-Mjzz3koAT_P-sPGmGMJtwEe9N8L4tJ36U4gRFdMiLg66/s400/yahoo_64x64.png);
}
</style>

<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

<ul id="navigation">
<li class="rss"><a href="http://nama-blog-anda.blogspot.com/atom.xml"><span>RSS Feed</span></a></li>
<li class="facebook"><a href="http://www.facebook.com/profile.php?id=masukkan-ID-Facebook-disini"><span>My Facebook</span></a></li>
<li class="twitter"><a href="http://twitter.com/masukkan-ID-Twitter-disini"><span>My Twitter</span></a></li>
<li class="googlebookmarks"><a href="http://www.google.com/bookmarks/mark"><span>Bookmarks</span></a></li>
<li class="e-mail"><a href="http://www.mybloglog.com/buzz/community/bloguntukaku"><span>My Bloglog</span></a></li>
</ul>

4. Perhatian !!! Gantikan text berwarna biru kepada id anda.

5. Akhir sekali pilih SAVE.

6. Selamat mencuba.

READ MORE...

Menampilkan Photo Profile Secara Random.

Untuk menampilkan photo profile secara random / rawak, sila ikuti beberapa langkah mudah di bawah.

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.

5. Cari kod ini.

<b:if cond='data:photo.url != ""'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>

6. Gantikan kod yang di cetak tebal dengan kod di bawah.

<script>
var pic, alt;
pic = new Array;
pic[0] = "URL-PHOTOANDA";
pic[1] = "URL-PHOTOANDA"; pic[2] = "URL-PHOTOANDA";
alt = new Array;
alt[0] = "My Photo";
alt[1] = "My Photo"; alt[2] = "My Photo";
var now = new Date();
var seed = now.getTime() % 0xffffffff;
function rand(n) {
seed = (0x015a4e35 * seed) % 0x7fffffff;
return ( seed >> 16 ) % n;
}
var num = rand(3);
document.write("<a href='http://www.blogger.com/profile/XXXIDBLOGANDAXXX'><img alt='" + alt[num] + "' border='0' class='profile-img' height='80' src='" + pic[num] + "' width='60'/></a>");
</script>

7. Gantikan kod berwarna biru URL PHOTO ANDA dan XXXIDBLOGANDAXXX

8. Setelah selesai, Save template.

Perhatian !!! Gantikan XXXIDBLOGANDAXXX cth : 559095719554575399

9. Selamat Mencuba.

Sumber Anang's Blog.

READ MORE...

Membuat ' Expando Image Effect'.

Sekiranya anda tidak mengetahui apa itu ' Expando Image Effect ' ?

Sila lihat demo di sini. Letakkan cursor pada imej untuk melihat kesannya.

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.

</head>

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

<style type='text/css'>

img.expando{ /*sample CSS for expando images. Not required but recommended*/

border: none;

vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/

}

</style>

<script src='http://h1.ripway.com/syamzone/Expand Image.txt ' type='text/javascript'>

/* Expando Image Script &#169;2008 John Davenport Scheuer

as first seen in http://www.dynamicdrive.com/forums/

username: jscheuer1 - This Notice Must Remain for Legal Use

*/

</script>

7. Save Template.

8. Untuk menggunakan 'Expando Image Effect' dalam artikel / post terbaru. Gunakan kod di bawah dan gantikan url imej berwarna biru kepada Url imej anda.

<center>

<img class="expando" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwdKwX-qCiQuwCJ2-Q4eTdpuQmUOMAcpuBuvP_a5FAAvAaHAM-Ze71CUbbDVDJPbXx73p5v-pmD7k2d2jnZq0KLrRUMsaxKD1K9gv3XBSzwiqngGqUW-LOb3Woo6X3vGByD0KIldRKtbZB/s400/angry_boy_cartoon.gif" border="0" width="200" height="200" />

</center>

9. Setiap kali anda mengupload imej gunakan url imej yang berwarna biru sahaja. Lihat contoh di bawah.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5KXEN4Dq5rWh6oijrvWUVaM-VRkEjt1a6hB_Uec75hLnqO0s6lcCKLLTTu5rUjS3QEoOnWcu3TmhXCH-xBSwYYury8UwkCqrfoKealb4iCcvlu9Cuj1nIedV1FbDwOK84UONfljQZtYI/s1600-h/Show+All+Posts+Screenshot.bmp"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 267px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5KXEN4Dq5rWh6oijrvWUVaM-VRkEjt1a6hB_Uec75hLnqO0s6lcCKLLTTu5rUjS3QEoOnWcu3TmhXCH-xBSwYYury8UwkCqrfoKealb4iCcvlu9Cuj1nIedV1FbDwOK84UONfljQZtYI/s320/Show+All+Posts+Screenshot.bmp" border="0" alt="" id="BLOGGER_PHOTO_ID_5355028411484323586" /></a>

Perhatian !!! Anda boleh mengubah saiz imej dengan menggantikan height dan width 200 yang berwarna biru mengikut kesesuaian imej anda.

Rujukan Dynamic Drive.

READ MORE...

Membuat 'Mouseover Image Effect'.

'Mouseover Image Effect' ialah gambar bertukar apabila 'mouse' diletakkan

Untuk melihat contoh sila letakkan mouse anda pada gambar di bawah :

Untuk membuat effect ini anda hanya perlu copy kod di bawah.Gantikan URL Image yang berwarna biru kepada URL Image anda untuk gambar pertama dan URL Image berwarna merah untuk gambar kedua dan gantikan juga URL yang berwarna hijau kepada URL blog anda.

<a onmouseover="if (document.images) document.FlashFloatimage.src= 'http://i637.photobucket.com/albums/uu99/syamzone/flowerpot_animatedgift.gif';" onmouseout="if (document.images) document.FlashFloatimage.src= 'http://i637.photobucket.com/albums/uu99/syamzone/flowergiftlompat.gif';" href="http://syamzone.blogspot.com"><img border="0" src="http://i637.photobucket.com/albums/uu99/syamzone/flowerpot_animatedgift.gif" name="FlashFloatimage"/></a>

Paste di mana-mana halaman html yang anda mahukan.

©syamzone.blogspot.com

READ MORE...

Langkah Mudah Membuat 'Float Image'.

Apa itu 'Float Image' ??? Untuk memudahkan anda memahami apa itu float image ? Sila lihat anak panah didalam screenshot di bawah ini :

Anda mungkin sudah mengetahui dan memahami apa itu 'Float Image'.

Jika ingin mengetahui cara-cara untuk meletakkan 'Float Image' di template.Sila ikuti langkah-langkah mudah dibawah ini :

Masuk akaun blogger anda.Pilih 'Layout' --> 'Edit Html'.

Cari kod di bawah ini :

]]></b:skin>

Copy kod dibawah dan Paste diatas kod tadi :

#syamzone {

position:fixed;_position:absolute;bottom:0px; left:0px;

clip:inherit;

_top:expression(document.documentElement.scrollTop+

document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Sekarang cari kod ini pula :

</body>

Jika anda sudah jumpa kod di atas letakkan kod di bawah sebelum kod </body> tadi :

<div id="syamzone">
<a href="http://syamzone.blogspot.com/">
<img src="http://LetakkanImageAndaDisini/" border="0" /></a>
</div>

Anda boleh mengubah posisi atau kedudukan 'Float Image' anda dengan menukarkan text kod yang berwarna biru

Tukarkan text kod berwarna merah kepada 'URL blog dan URL Image anda'.Seterusnya 'Preview' hasil kerja anda,jika berpuas hati 'Save Template'.

Sekiranya anda sudah mengikuti semua langkah-langkah di atas, tetapi tidak berhasil sila gunakan cara yang kedua di bawah ini :

Masuk akaun blogger anda.Pilih 'Layout' --> 'Edit Html'.

Cari kod di bawah ini :

]]></b:skin>

Copy kod di bawah anda boleh mengubah posisi 'Float Image' dengan mengantikan text kod berwarna biru dan Paste di atas kod tadi :

#syamzone {

position:fixed;_position:absolute;bottom:0px; left:0px;

clip:inherit;

_top:expression(document.documentElement.scrollTop+

document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Perhatian 'Save Template' anda.

Sekarang pilih 'Layout'--> 'Page element'--> 'Add a Gadget'--> 'Html / Javascript'.

'Copy' kod di bawah dan 'Paste'.

<div id="syamzone">
<a href="http://syamzone.blogspot.com/">
<img src="http://LetakkanImageAndaDisini/" border="0" /></a>
</div>

Jangan lupa untuk gantikan text kod berwarna merah.

Sekiranya sudah selesai 'Save'--> 'View Blog'.

READ MORE...

Membuat Text / Imej Bergerak.

Membuat dan menghiasi blog anda dengan 'text dan imej/gambar bergerak' seperti di bawah ini:

syamzone.blogspot.com

Copy kod dibawah ini dan Paste di mana-mana halaman html di blog anda.

<MARQUEE bgcolor: rgb(255, 0, 0);">#CCCCCC" loop="-1" scrollamount="2" width="100%">syamzone.blogspot.com</MARQUEE>

Anda boleh menukar kod berwarna merah mengikut citarasa anda.

<MARQUEE behavior="scroll" direction="left" width="100%"><img src="yourimagehere.gif">

<MARQUEE behavior="scroll" direction="right" width="100%"><img src="yourimagehere.gif">

1. ...Text Anda Di sini...

<FONT SIZE="4" FACE="courier" COLOR=black><MARQUEE WIDTH=100% BEHAVIOR=SLIDE BGColor=grey>...Text Anda Di sini...</MARQUEE></FONT>

2. ...Text Anda Di sini...

<FONT SIZE="4" FACE="courier" COLOR=black><MARQUEE WIDTH=100% BEHAVIOR=ALTERNATE BGColor=grey>...Text Anda Di sini...</MARQUEE></FONT>

3. ...Text Anda Di sini...

<FONT SIZE="4" FACE="courier" COLOR=black><MARQUEE WIDTH=100% BEHAVIOR=SCROLL BGColor=grey>...Text Anda Di sini...</MARQUEE></FONT>

Perhatian !!! Anda boleh mengubah kod yang berwarna merah mengikut citarasa anda .

READ MORE...