Memasang 'Side Fixed Menu'.

1. Sign in akaun blogger anda.

2. Pilih Layout --> Edit HTML.

3. Back Up 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.

#menulateral{
position:fixed; text-align:left;
/*Si la ubicación del menú no es la adecuada modifica los valores siguiente: */
margin-top:100px; margin-left:-28px; }
* html #menulateral{ /*para IE*/
position:absolute; }
#menulateral a img{
opacity:1; -moz-opacity:1;
filter:alpha(Opacity=100); }
#menulateral a:hover img{
opacity:0.8; -moz-opacity:0.8;
filter:alpha(Opacity=80);
position:relative;top:0px;left:2px; }
* html #menulateral a img{
filter:alpha(Opacity=100); }
#menulateral img{
margin-bottom: -5px; }
* html .menulateral{
margin-bottom: -3px; }

7. Cari kod ini.

<div id='content-wrapper'>

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

<div id='menulateral'>
<span>
<a href='http://syamzone.blogspot.com/' style='border:0;' title='Home'><img alt='Home' class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYH_JDDsAFNnUDT1TiUejEZp1OVBNs0T37f7B2u8oSgeqw5i4-qUlUs4pAjrkzsnYeLoCT_5_MxslV-xBaJiQnScaZoBzh3wdBwz4czfEATlwBPanN9o7LEpHGd513m0fScrGjmGio1RY/s1600/menu-lateral-inicio.png'/></a>
<br/><a href='http://syamzone.blogspot.com/search/label/?max-results=999' style='border:0;' title='Show All Posts'><img alt='Archivo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRztVWL8CO8POxdv4WgmJmnEa6SfzEzO34EaJ-KdO7ir4w6nOrSzKWCApAXwPo2NwSNiXGkZFB5PPiBruwQJVJzlw0Ib5TtMrMzbwR8PGXr3iXCv6c08PGd8hiD6JqQ0KjpQlMQHhvZ6k/s1600/menu-lateral-archivo.png'/></a>
<br/><a href='mailto:EMAILANDA@yahoo.com' style='border:0;' title='Subscribe By Email'><img alt='Subscribe By Email' class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7VJpp2OCazkXFxSTHt4wMS96_nxwI9Z3-gVBFioz9IQUcLhU_dvidO3djKMfmyWjWpM8npyut0b8l6IwFGGwDvG-35dxUCAydTrdXB9CeKbXdyd3h-jULtLjPZYHSVUaTrlmya4n9cTQ/s1600/menu-lateral-contacto.png'/></a>
<br/><a href='http://syamzone.blogspot.com/feeds/posts/default' rel='alternate' style='border:0;' title='Subscribe a post Feed' type='application/rss+xml'><img alt='Suscribe a post Feed' class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgukdW1x_OuqpdDQUPHBxbd_YidbcjSSzU4PjuWt3IPvIJKi_65_cEaU8DhFpDDXp1Vj0K0gjeyvkw3endZ30zXax3-2r06xxCWXRWl6Xyi3ss_a5X51BZUzj4_H32nB1U3LQ5Sikh1aow/s1600/menu-lateral-feed.png'/></a>
<br/><a href='http://syamzone.blogspot.com/feeds/comments/default' style='border:0;' title='Subscribe a comment Feed'><img alt='Suscribete a comment Feed' class='menulateral' src='http://i120.photobucket.com/albums/o190/jaloewig/jaloe/Menu%20Fixed/feed-icon-16x16b_BG_G.png'/></a> <br/><a href='#header' style='border:0;' title='Back to top'><img alt='Back to top&quot;' class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8eGpdD7nIeR5mmdfxtvo0FJEw3i-wyhTeqFpqDTHOknpPzTl3FoI0nquJTkRAUH7TRoGJLIbzITpbyGcmdvQe0cKYR28M3gr5aJFBbXL1IvIu5nNOBigv3y1AZpTqvfJ79EJVCqFJJW4/s1600/menu-lateral-arriba.png'/></a>
</span>
</div>

9. Gantikan text / kod berwarna biru.

10. Anda mungkin perlu mengubah kod berwarna merah margin-top:100px margin-left:-28px mengikut kesesuaian template.

11. Pilih Preview.

12.Sekiranya anda berpuas hati Save template.

Perhatian !!! Kod <div id='content-wrapper'> mungkin berbeza jadi cari kod yang seumpama dengannya.

Rujukan Jaloe

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 'Show All Post'.

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:include data='post' name='post'/>

6. Padam / delete kod di atas dan gantikan dengan kod di bawah.

<b:if cond='data:blog.homepageUrl !=

data:blog.url'>

<b:if cond='data:blog.pageType != "item"'>

<a expr:href='data:post.url'>

<div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;">

<data:post.title/></div></a>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

7. Pilih Save Template.

8. Langkah seterusnya, pilih 'Layout'--> 'Add a Gadget'--> 'Html / Javascript'.

9. Copy kod di bawah dan Paste.

<a href="http://NAMABLOGANDA.blogspot.com/search?max-results=200">Show all post &raquo;</a>

10. Save.

Perhatian !!! Gantikan text / kod yang berwarna biru, sekiranya anda mempunyai artikel lebih dari 200 tukarkan max-result=200

11. Selamat Mencuba.

Sumber Blogspot Tutorial.

READ MORE...