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...

Menambah Image Caption.

Tujuan menambah Image Caption supaya image / gambar lebih mudah di fahami dan kelihatan lebih menarik.

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.

.imgcontainer {
position:relative;
float:left;
}
.caption {
font: normal 1em/1.3em arial;
background:#fff;
color:#000;
position:absolute;
bottom:0;
left:0;
margin-bottom:20px;
text-align:center;
width:100%;
opacity:.75;
filter:alpha(opacity=85);
}

7. SAVE TEMPLATE.

8. Pilih POSTING --> NEW POST --> EDIT HTML

9. UPLOAD IMAGE dan tambahkan dengan kod di bawah gantikan Url / text berwarna merah.

<div class="imgcontainer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJkM3xS9HMcGVJoZWm_FoDLrGa8ngcH7793fb_e5b89BdfwAXjR5-X09_zCVSQlIEf0P0n2mDYChAlH969lTAlWVSZin-1tGFu356JcBcRQgp1TaWIVqiaxP_hLsjrUyuZkJN7xsK4qB4/s1600-r/syamzonebannerexchange.png"/>
<div class="caption">Tricks Untuk Blogspot</div>
</div>

10. Setelah selesai PUBLISH POST.

READ MORE...

Memasang 'Random Header Image'.

1. Sign in akaun blogger.

2. Pilih Layout --> Edit HTML.

3. Cari kod ini.

]]></b:skin>

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

<script type='text/javascript'>
var gbr= new Array()
gbr[0]="http://IMEJ1.png"
gbr[1]="http://IMEJ2.png"
gbr[2]="http://IMEJ3.png"
gbr[3]="http://IMEJ4.png"
gbr[4]="http://IMEJ5.png"
var random=Math.floor(5*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + gbr[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>

5. Gantikan text / kod berwarna biru.

6. Save.

Sumber EasyBlogTricks.

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...

Menukarkan Text Read More Kepada Image.

Menukarkan text Read More... kepada Image.

Sekiranya anda belum memasang Read More... anda perlu memasang Read More... terlebih dahulu.

Bagaimana untuk memasangnya ? Sila rujuk tutorial cara-cara memasang Auto Read More.

Setelah siap memasang Read More... Sila ikuti langkah selanjutnya bagaimana untuk menukarkan text Read More... kepada image.

1. SIGN IN akaun blogger.

2. Pilih LAYOUT ---> EDIT HTML.

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

4. Cari kod Html ini.

<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>

5. Gantikan text READ MORE - dengan kod image di bawah.

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimNDG1YcIIiH-4EMnJPyYKs_9P5JklI2qNuVxJXeNV48NaQ7mL3BgHRNDNXYy1RHrmvDPfBegQcyAa1qbwDmmYzPeKQw9JXrbJ5AqJfnYllkT-HGy8MQ2pX7azZy7SDEHBbTh8dK9wObhF/s400/New-Read-More.png'/></a>

6. Gantikan Url Image berwarna biru kepada Url Image anda.

7. Pilih PREVIEW untuk melihat hasilnya.

8. Sekiranya anda berpuashati SAVE TEMPLATE.

9. Selamat Mencuba...

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...