CSS Bubble Tooltips.

CSS Bubble Tooltips

Untuk melihat demo CSS Bubble Tooltips klik di sini.

Bagaimana untuk memasang CSS Bubble Tooltips? Sila ikuti langkah-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.

Malaysia Blogger Hack

5. Cari kod ini.

]]></b:skin>

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


/*---------- bubble tooltip -----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcrZtXeiI/AAAAAAAACes/f3SeQ8tdw5A/bubble_filler_thumb%5B1%5D.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat bottom;
}

7. Pilih SAVE TEMPLATE.

8. Untuk melihat / mencuba kesan CSS Buble Tooltips.

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

10. Copy kod di bawah dan Paste.

<a href="link_tujuan" class="tt">Teks link yang akan muncul<span class="tooltip"><span class="top"></span><span class="middle">Pesan yang akan muncul</span><span class="bottom"></span></span></a>

Perhatian!!! Anda perlu menambah sedikit kod HTML yang berwarna merah pada link untuk mendapatkan kesan CSS Bubble Tooltips, lihat contoh di atas.

10. SELAMAT MENCUBA.

Credit : Kolom Tutorial, trentrichardson.

READ MORE...

Memasang FaceBook Share Button.

FaceBook Share Button

Untuk Memasang FaceBook Share Button.

1. Mula-mula anda perlu memilih button klik di sini.

2. Setelah selesai memilih button.

3. Sign in akaun blogger anda.

4. Pilih LAYOUT --> EDIT HTML.

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

Malaysia Blogger Hack

6. Cari kod ini.

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

7. Copy kod button yang anda pilih tadi dan letakkan selepas kod di atas.

8. Sekiranya anda tidak menjumpai kod di atas letakkan kod button sebelum kod ini.

<data:post.body/>

9. Setelah selesai pilih PREVIEW.

10. Sekiranya anda berpuas hati pilih SAVE TEMPLATE.

11. Selamat Mencuba.

READ MORE...

Menambah Post Divider.

Blogspot Tricks

01. Sign In akaun blogger.

02. Pilih Dashboard >> Layout >> Edit html.

03. Cari kod ini.

.post

04. Gantikan kod di atas dengan kod ini.

.post{
margin: 0 0 40px 0;
width: 90%;
background: url(http://www.imagehost.com/separator.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}

Perhatian !!! Gantikan url image berwarna merah dengan url image anda (Url image di bawah juga boleh digunakan).

1.

http://1.bp.blogspot.com/_tgUOxznghPA/SxDE3AHigFI/AAAAAAAAAX0/jGNyRV3TsJA/s400/bar54.gif

2.

http://4.bp.blogspot.com/_tgUOxznghPA/SxDF0mWXBnI/AAAAAAAAAX8/9rYPdgcM9sM/s400/flowerbar.gif

3.

http://1.bp.blogspot.com/_tgUOxznghPA/SxDGd27LwaI/AAAAAAAAAYE/yLP07AP80vw/s400/astarl7s.gif

4.

http://1.bp.blogspot.com/_tgUOxznghPA/SxDHP8hfRNI/AAAAAAAAAYU/bJM9GaAsm08/s400/bloodrose.gif

5.

http://1.bp.blogspot.com/_tgUOxznghPA/SxDH01U7uXI/AAAAAAAAAYc/euIc755kOto/s400/chain.gif

6.

http://2.bp.blogspot.com/_tgUOxznghPA/SxDIQDCTVeI/AAAAAAAAAYk/WfkGnBSRDaE/s400/dividers_96.gif

7.

http://4.bp.blogspot.com/_tgUOxznghPA/SxDIs8fOK1I/AAAAAAAAAYs/0eYgxNgv2Zk/s400/irish-border4.gif

8.

http://2.bp.blogspot.com/_tgUOxznghPA/SxDJHBuLNpI/AAAAAAAAAY0/4mkrVKNG4xk/s400/resfiles_output.php.gif

9.

http://3.bp.blogspot.com/_tgUOxznghPA/SxDJ1wwF2VI/AAAAAAAAAY8/NxUObMlAY9c/s400/resfileszcp.png

05. Pilih Preview, Sekiranya anda berpuas hati pilih Save Template.

06. Selamat Mencuba.

07. Sumber AllBlogTools.
READ MORE...

Memasang Page Views Hit Counter.

Page Views

Memasang Page Views Hit Counter bertujuan untuk menunjukkan kekerapan pengunjung / pembaca sesebuah post / page.

Untuk memasang blogger page views ini, sila ikuti beberapa langkah mudah ini.

1. Sign In akaun Blogger.

2. Pilih LAYOUT --> EDIT HTML.

3. Cari kod ini.

<p><data:post.body/></p>

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='hit-counter'>
&lt;a href=&#39;http://csharpdotnetfreak.blogspot.com&#39; rel=&#39;follow&#39;&gt;
<script src='http://www.amitjain.co.in/pageview.php' type='text/javascript'/> &lt;/a&gt;
</div></b:if>

5. Cari kod ini.

</body>

6. Tambahkan kod dibawah, di atas kod tadi.

<a href="http://csharpdotnetfreak.blogspot.com/2009/02/blogger-post-page-views-hit-counter.html"><script src='http://www.amitjain.co.in/pageview.php' type='text/javascript'/></a>

7. Pilih SAVE TEMPLATE.

8. Selamat Mencuba.

Sumber csharpdotnetfreak

READ MORE...

Menambah Scroll Background Dengan jQuery.

Scroll Background jQuery

LIHAT DEMO

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.

Blog Tricks

5. Cari kod ini.

</head>

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'></script>

7. Tambahkan script ini, di bawah script jQuery tadi.

<script type='text/javascript'>
//<![CDATA[
$(function(){

// ***
// Scrolling background
// ***

// height of background image in pixels
var backgroundheight = 4000;

// get the current minute/hour of the day
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();

// work out how far through the day we are as a percentage - e.g. 6pm = 75%
var hourpercent = hour / 24 * 100;
var minutepercent = minute / 30 / 24 * 100;
var percentofday = Math.round(hourpercent + minutepercent);

// calculate which pixel row to start graphic from based on how far through the day we are
var offset = backgroundheight / 100 * percentofday;

// graphic starts at approx 6am, so adjust offset by 1/4
var offset = offset - (backgroundheight / 1);

function scrollbackground() {
// decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// apply the background position
$('body').css("background-position", "50% " + offset + "px");
// call self to continue animation
setTimeout(function() {
scrollbackground();
}, 70
);
}

// Start the animation
scrollbackground();
});
//]]>
</script>

7. Cari kod CSS body.

body {
background:#000;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

8. Gantikan background dengan kod ini.

background:url(http://lh6.ggpht.com/_dfnTVAxeWMI/SrFV2ZgHUvI/AAAAAAAACU8/yP_7acjnv5U/bgscroll.jpg);

10. Contoh.

body {
background:url(http://lh6.ggpht.com/_dfnTVAxeWMI/SrFV2ZgHUvI/AAAAAAAACU8/yP_7acjnv5U/bgscroll.jpg);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

11. Pilih PREVIEW untuk melihat hasilnya.

12. Jika berpuas hati pilih SAVE TEMPLATE.

Perhatian !!! Sekiranya anda sudah mempunyai script jQuery NO 6, anda hanya perlu tambahkan script NO 7 di bawahnya.

READ MORE...

Memasang Scroll To Top .

Scroll To Top

Memasang Back To Top Smooth Scroll akan memberikan effect lebih lancar untuk kembali ke atas.

1. Sign in akaun blogger.

2. Pilih LAYOUT --> EDIT HTML.

3. Cari kod ini.

</head>

4. Copy kod di bawah dan Paste di atas kod tadi.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'>
//<![CDATA[

$(function(){

$('a[href*=#top]').click(function() {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {

var $target = $(this.hash);

$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

if ($target.length) {

var targetOffset = $target.offset().top;

$('html,body').animate({scrollTop: targetOffset}, 1000);

return false;

}

}

});

});
//]]>
</script>
<!-- end scrolltop -->

5. Cari kod ini.

<body>

6. Gantikan kod di atas dengan kod ini.

<body id='top'>

7. Seterusnya, cari kod ini.

</body>

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

<div id='goingtop'>
<a href='#top' title='Top'><img src='http://lh3.ggpht.com/_XXrP_Jobycw/STTl0OdmZ6I/AAAAAAAAADY/61hPxUpuwXU/top.jpg' style='right:20px; bottom:20px; position: fixed;'/></a></div>

9. SAVE TEMPLATE.


Gantikan Url berwarna merah sekiranya anda mahu menukarkan Image button.

READ MORE...

Menambah Image Caption.

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.

Image Caption

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="http://2.bp.blogspot.com/_tgUOxznghPA/Sr6xy4HChtI/AAAAAAAAAW0/zR-cK0Yov54/S1600-R/syamzonebannerexchange.png"/>
<div class="caption">Tricks Untuk Blogspot</div>
</div>

10. Setelah selesai PUBLISH POST.

READ MORE...

Memasang Related Posts With Thumbnails.

Tricks Melayu

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.

<!-- 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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

10. Anda boleh menggantikan kod berwarna biru.

11. Pilih SAVE.

Sumber bloggerplugins

READ MORE...

Menambah Profile Shadow.

Blogspot Tips And Tricks

1. SIGN IN Akaun Blogger

2. LAYOUT --> EDIT HTML.

3. Cari kod ini.

.profile-img {
border:1px solid #CCCCCC;
float:left;
margin:0 5px 5px 0;
padding:4px;}

4. Tambahkan kod di bawah.


  profile-shadow: 5px 5px 5px #ccc;
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;

5. Contoh : Lihat kod berwarna merah.

.profile-img {
border:1px solid #CCCCCC;
float:left;
margin:0 5px 5px 0;
padding:4px; profile-shadow: 5px 5px 5px #ccc;
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
}

Pilih SAVE.

READ MORE...

Back To Top Button.


Memasang back top to top button
1. Sign in akaun blogger.
2. Pilih LAYOUT --> EDIT HTML.
3. Cari kod ini
</body>
4. Copy kod di bawah letakkan di atas kod tadi.
<a href='#' style='display:scroll;position: fixed; bottom:5px;right:5px;' title='Back to Top'><img src='http://lh3.ggpht.com/_XXrP_Jobycw/STTl0OdmZ6I/AAAAAAAAADY/61hPxUpuwXU/top.jpg'/></a>
5. Pilih PREVIEW untuk melihat hasilnya.
6. Jika berpuashati pilih SAVE.
READ MORE...

Label Cloud Mudah Untuk Blogspot.

1. Masuk akaun Blogger.

2. Pilih 'Layout'--> 'Add a Gadget'--> 'Labels'.

3. Configure Labels.

4. 'Display'--> 'Cloud'--> 'Save'.

Label Cloud Untuk Blogspot

READ MORE...

Mengubah Penampilan Halaman Komen.

Tutorial Blogspot

Untuk mengubah penampilan halaman komen,anda boleh megikuti beberapa langkah mudah di bawah.

Sekiranya anda sudah mahir dengan CSS dan mahukan kelainan, anda boleh mengubah penampilan mengikut kreativiti dan citarasa anda.

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:loop values='data:post.comments' var='comment'>

6. Keseluruhan kod di atas adalah seperti ini.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

07. Gantikan keseluruhan kod di atas dengan kod ini.

<ul class='commentlist'>
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'><li>
<div class='' expr:id='data:comment.id'>
<div class='pane_l'>
<div class='c_author'>
<dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
<a expr:name='&quot;comment-&quot; + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<br/>
Said
</dt>
</div>
<div class='c_avatar'/>
<div class='commentphoto' style='margin-top:.5em;'/>
<a expr:href='&quot;#comment-&quot; + data:comment.id' style='font-size:14px;' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='owner-Body'>
<p><data:comment.body/></p>
<div class='c_date'><data:comment.timestamp/></div>
<div class='c_approved'/><br/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<b:else/>
<div class='pane_r'>
<p><data:comment.body/></p>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<div class='c_date'><data:comment.timestamp/></div>
<div class='c_approved'/><br/>
<b:include data='comment' name='commentDeleteIcon'/>
</b:if>
</div>
</b:if></div>
<div class=' clear'/></li> </b:loop>
</ul>

9. Cari kod CSS komen contoh seperti di bawah.

/* Comments
----------------------------------------------- */
.commentlistdiv {
margin-top: 10px;padding:10px;
background: #FFF;border:
1px dotted #ddd;font-size: 0.75em;color: #666;}

.commentlistdiv h1 {font-size: 1.3em;
color: #366799;border-bottom: 1px solid #eee;
line-height: 1.5em;}
.commentlist li {background: #F9F9F9;
border-bottom: 3px solid #eee;padding: 20px;}
.commentlist li.alt {background: #F9F9F9;}

.pane_l {float: left;display: inline;
width: 160px;min-width: 160px;max-width: 160px;
border-right: 3px solid #eee;padding-right: 20px;margin-right: 20px;}
.pane_r {display: block;line-height: 1.5em;margin-left: 201px;}

.c_author {font-size: 0.9em;font-weight: bold;margin: 0px 0px 7px 0px;}
.c_avatar {display: block;margin: 0px 0px 7px 0px;}
.c_date {color: #aaa;font-size: 0.9em;margin: 0px 0px 7px 0px;}
.c_approved {color: #aaa;font-size: 0.9em;}
.comment-form { background:#F9F9F9; border:5px solid #EAEAEA;
margin:0 10px 20px 10px; padding:10px 0 0 15px; }
.owner-Body {display: block;line-height: 1.5em;margin-left: 201px;}
.owner-Body p {
font-size:100%;
margin:0 0 .2em 0;
color:#366799;
text-decoration:bold;
}
.deleted-comment {
font-style:italic;
color:gray;
}

10. Kemudian gantikan kod CSS di atas dengan kod ini.

#comments{background:#EBF3FB; border:solid #ccc 1px; margin-bottom:10px}
#comments h4{ margin:1em 0; padding:10px; font-weight:bold; line-height:1.4em; text-transform:uppercase; letter-spacing:.2em; color:$sidebarcolor}
#comment-list {margin-top: 10px;padding:10px;
background: transparent;border:
1px dotted #ddd;font-size: 1.75em;color: #666;}
.commentlistdiv {
margin-top: 10px;padding:10px;
background: #FFF;border:
1px dotted #ddd;font-size: 1.75em;color: #666;}
.commentlistdiv h1 {font-size: 1.3em;
color: #366799;border-bottom: 1px solid #eee;
line-height: 1.5em;}
.commentlist li {background: transparent;
border-bottom: 1px dotted #ddd;padding: 20px 10px 5px 10px;}
.commentlist li.alt {background: #fff;}
.pane_l {float: left;background:#fff;display: inline;
width: 110px;min-width: 110px;max-width: 110px;
border: 1px dotted #ddd;padding-right: 0px;margin-right: 0px;text-align:center;padding:15px 0}
* html .pane_l{margin-top:15px; }
.pane_r {display: block;line-height: 1.5em;margin-left: 125px;
padding:8px 15px 15px 15px;;background:#fff;
border-left:1px dotted #CCCCCC;
border-right:1px dotted #CCCCCC;
border-top:3px double #CCCCCC;border-bottom:3px double #CCCCCC;}
.c_author {font-size: 13px;font-weight: normal;height:30px;
overflow:hidden;margin: 0px 0px 7px 0px;}
.c_avatar {display: block;margin: 0px 0px 7px 0px;}
.c_date {color: #aaa;font-size: 0.9em;margin: 0px 0px 0px 0px;
padding-top:20px;}
.c_approved {color: #aaa;font-size: 0.9em;}
.comment-form { background:#EFEFEF; border:5px solid #cccccc;
margin:0 10px 20px 10px; padding:10px 0 0 15px;width:92%;}
* html .comment-form { width:87%; }
.owner-Body {display: block;line-height: 1.5em;margin-left: 125px;
background:#EFEBE0;padding:8px 15px 15px 15px;
border-left:1px dotted #fff;border-right:1px dotted #fff;
border-top:3px double #fff;border-bottom:3px double #fff;}
.owner-Body p {
font-size:100%;margin:0 0 0 0;color:#FF0000;
text-decoration:bold;
}
.deleted-comment {
font-style:italic; color:gray;
}

11. Copy kod ini.

ul {
margin:0px;
padding:0px;
list-style-type:none;
}
dan letakkan di atas atau di bawah kod ini.
body {
background:#000000;
color:#333333;
font-family:Georgia Serif;
font-size:small;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin:0;
text-align:center;
}

Sekiranya di letakkan di atas contoh seperti ini.

ul {
margin:0px;
padding:0px;
list-style-type:none;
} body {
background:#000000;
color:#333333;
font-family:Georgia Serif;
font-size:small;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin:0;
text-align:center;
}

12. Save template.

READ MORE...

Memasang "Save As PDF Button".

PDF Button Untuk Blogger

1. Sign in akaun blogger.

2. Pilih LAYOUT --> EDIT HTML.

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

Memasang PDF Button

4. Cari kod ini.

<data:post.body/>

5. Copy kod ini letakkan selepas kod di atas.

<script src=”http://web2pdf.freepdfconvert.com/pdfbutton.js” type=”text/javascript”>
</script>

6. SAVE TEMPLATE.

READ MORE...

Auto Read More #2.

Blogger Tricks

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.

7. Cari kod ini.

<data:post.body/>

8. Gantikan kod di atas dengan kod ini.

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120; 
</script>
<script src='http://kfile.110mb.com/summary-post.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

9. Setelah selesai langkah-langkah di atas pilih PREVIEW.

10. Sekiranya anda berpuas hati SAVE TEMPLATE.

READ MORE...

Code Box #2.

Blogspot Tricks

Selain di jadikan sebagai code box,anda juga boleh memasukkan imej atau artikel,mengikut kreativiti anda:

Untuk membuat code box ini anda hanya perlu mengikuti,beberapa langkah mudah di bawah.

01. Mula-mula masuk akaun blogger anda.

02. Pilih 'Layout'-->'Edit Html'-->'Expand Widget Template'.

03. Ok,sekarang anda cari kod di bawah ini:


]]></b:skin>

04. Kemudian copy kod di bawah, dan paste di atas kod tadi.

05. Save template.

.codeview {
font-family: Arial, Helvetica, sans-serif;
color: #CC0000;
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
border-top : 2px solid #cccccc;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 2px solid #cccccc;
background-color: #FFFFFF;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

06. Sekarang sampailah ke peringkat yang terakhir.

07. Pergi ke 'Setting'-->'Formatting'-->'Post Template'.

08. Copy kod di bawah ini dan Paste :

<div class="codeview">
Insert the Special code here
</div>

09. Save Setting.

Pastikan setiap kali anda hendak membuat post baru text ini akan muncul 'Insert the Special code here' dan gantikan dengan artikel2 atau kod yang hendak di masukkan di dalam 'Code box'.

Anda boleh mengubah 'background colour dan border colour outset' mengikut citarasa anda.

Sekiranya anda mahu memasukkan kod ke dalam code box. Encode kod anda terlebih dahulu di web ini GoogleToad.

READ MORE...

Memasang 'Syntax Highlighter'.

Syntax Highlighter

Syntax Highlighter memberikan penampilan Code box lebih professional

Untuk memasang Syntax Highlighter, sila ikuti beberapa langkah mudah di bawah.

1. SIGN IN akaun blogger.

2. Pilih LAYOUT --> EDIT HTML --> EXPAND WIDGET TEMPLATE.

3. Cari kod ini.


]]></b:skin>

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

.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}

.dp-highlighter .bar
{
padding-left: 45px;
}

.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}

.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}

.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}

.dp-highlighter .columns div
{
padding-bottom: 5px;
}

.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}

.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol
{
margin: 0px;
}

.dp-highlighter.collapsed ol li
{
display: none;
}

/* Additional modifications when in print-view */

.dp-highlighter.printing
{
border: none;
}

.dp-highlighter.printing .tools
{
display: none !important;
}

.dp-highlighter.printing li
{
display: list-item !important;
}

/* Styles for the tools */

.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools
{
border-left: 0;
}

.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}

.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}

.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}

/* About dialog styles */

.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }

5. Cari kod ini

</head>

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

<!-- Add-in CSS for syntax highlighting -->
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

7. Cari kod ini.

</body>

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

<!-- Add-in Script for syntax highlighting -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

9. Pilih SAVE TEMPLATE.

10. Pergi ke SETTING --> FORMATTING --> POST TEMPLATE.

11. Copy kod di bawah dan paste.

<pre name="code" class="cpp">
...Your html-escaped code goes here...
</pre>

Pastikan setiap kali anda hendak membuat post baru text ini akan muncul ...Your html-escaped code goes here... dan gantikan dengan kod anda.

Sekiranya anda mahu memasukkan kod ke dalam Syntax Highlighter. Encode kod anda terlebih dahulu di web ini Centricle.com

Selamat Mencuba....

READ MORE...

JQuery Social Bookmark.

Tips And Tricks

Lihat Demo

01. Mula-mula sign in akaun blogger anda.

02. Pilih Layout --> Edit HTML.

03. Backup Template anda dahulu untuk mengelakkan sebarang masalah.

04. Klik pada Expand Widget Template seperti screenshot di bawah ini.

05. Cari kod ini.

]]></b:skin>

06. Copy kod di bawah dan Paste di atas kod tadi:

/* SosialBookmark
*/

#sharebox{
height:48px;
width:400px;
margin:0;
padding:5px 0;
}

ul.sharebox { margin:0px; padding:0px; list-style:none; position:relative; display:block;}
ul.sharebox li { float:left; margin:0 0 0 0px; padding:0px; position:absolute;}
ul.sharebox li a { margin:0 0 0 -24px; display:block;}
ul.sharebox li a:hover { margin:0 0 0 -8px; }
ul.sharebox li img { border:none;}

07. Setelah selesai meletakkan kod di atas.Cari kod ini.

</head>

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>
(function($){
$.fn.sharebox = function(){
var element = this;

$(element).find(&quot;li&quot;).each(function(i){
$(this).css(&quot;z-index&quot;, 10- i);
if (i&gt;0)
$(this).css(&quot;left&quot;, i * 24 + 100);
});

}
})(jQuery);
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#sharebox&quot;).sharebox();
});
</script>

09. Seterusnya, cari kod ini.

<data:post.body/>

10. Perhatian !!! Jika anda mempunyai kod di atas lebih dari satu cari yang paling akhir.

11. Sekarang Copy kod di bawah dan letakkan di bawah kod tadi.

<ul class='sharebox' id='sharebox'>

<li><img alt='Share this' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmkuLMrwEhI/AAAAAAAABm8/SF6x9UfvEJA/s800/sharethis.png'/></li>

<li><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Digg' src='http://lh5.ggpht.com/_dfnTVAxeWMI/Smktud4qk8I/AAAAAAAABmk/z5vZVjTmD7k/s800/digg_48.png'/></a></li>

<li><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to StumbleUpon' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuLCBTubI/AAAAAAAABm4/KwVHDJnT-EQ/s800/sumbleupon_48.png'/></a></li>

<li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Delicious' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmktubnHpoI/AAAAAAAABmg/b31Po_kEbnc/s800/delicious_48.png'/></a></li>

<li><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Technorati' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuK1y0_cI/AAAAAAAABm0/C8EExNM-xjE/s800/technorati_48.png'/></a></li>

<li><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Reddit' src='http://lh3.ggpht.com/_dfnTVAxeWMI/Smkturrni-I/AAAAAAAABmw/AbGticB0wAs/s800/reddit_48.png'/></a></li>

</ul>

12. Save template.

Selamat Mencuba.

Sumber Janko

READ MORE...

Memasang 'Page Navigation #2'.

Panduan Blogspot

Untuk memasang 'Page Navigation #1' rujuk di sini.

Untuk memasang 'Page Navigation #2'.

Sila ikuti beberapa langkah ini.

1. Sign in akaun blogger.

2. Pilih Layout --> Edit HTML.

3. Klik / tandakan Expand Template Widget seperti screenshot di bawah ini.

Malaysia Blogger Hack

4. Cari kod ini.

<b:include name='nextprev'/>

5.Gantikan kod di atas dengan kod di bawah.

<b:if cond='data:blog.pageType == "index"'>
<style type="text/css">
.blogpager {
font-size:16px;
color: #060;
font-weight:bold;
padding:0px 4px;
}
</style>

<div align="center" style="margin:5px;">
<form action="#" name="pager20">
<span id="vwg-pager-first"></span> <span id="vwg-pager-prev"></span> <input name="showingpage" onfocus="this.select()" value="init..." type="text" size="4" title="Enter page number that You want to go" />/<input size="4" type="text" name="pagestotal" disabled="disabled" value="init..." /> <input type="button" onclick="checkpager()" value="Go" /> <span id="vwg-pager-next"></span> <span id="vwg-pager-last"></span>
</form>
</div>

<script type="text/javascript">

var blogID = "6930401002504091490";
var home_page = "http://www.syamzone.blogspot.com/";
var pager_max_main = 10;

var pager_first_text = "First";
var pager_last_text = "Last";
var pager_prev_text = "Prev";
var pager_next_text = "Next";

</script>
<script src="http://www.freewebs.com/anhvo/blogger/blogger_pager_script_v20.js"
type="text/javascript"></script>
</b:if>

6. Gantikan kod berwarna biru dengan ID dan Url blog anda.

7. Save Template.

8. Selamat Mencuba.

Sumber Jaloe.

READ MORE...

Memasang 'Random Header Image'.

Tutorial Blogspot

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

Memasang 'Side Fixed Menu'.

Blogspot

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.

Malaysia Blogger Hack

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='http://4.bp.blogspot.com/_Zuzii37VUO4/RlpT2Zya1AI/AAAAAAAABoI/6EXVwJ-0xxc/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='http://3.bp.blogspot.com/_Zuzii37VUO4/RlpT2Jya08I/AAAAAAAABno/fEetH56Ftgw/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='http://4.bp.blogspot.com/_Zuzii37VUO4/RlpT2Zya0-I/AAAAAAAABn4/F5Ax7A_8rLA/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='http://4.bp.blogspot.com/_Zuzii37VUO4/RlpT2Zya0_I/AAAAAAAABoA/HgSHFryV6kc/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='http://4.bp.blogspot.com/_Zuzii37VUO4/RlpT2Zya09I/AAAAAAAABnw/38HqImjH21E/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.

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

Malaysia Blogger Hack

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

SyamZone™

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.

Malaysia Blogger Hack

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="http://1.bp.blogspot.com/_znjmv4LDwck/Sk0PpsnjLbI/AAAAAAAABBs/5bB7rGMbkbw/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="http://3.bp.blogspot.com/_tgUOxznghPA/SlDh99SlvwI/AAAAAAAAAR8/AbO54v59ZxE/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="http://3.bp.blogspot.com/_tgUOxznghPA/SlDh99SlvwI/AAAAAAAAAR8/AbO54v59ZxE/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'.

Panduan Untuk Blogspot

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

Memasang 'Give Feedback Button'.


Memasang 'Give Feedback Button' bertujuan memudahkan pembaca memberi maklum balas secara terus kepada penulis melalui email.

Bagaimana untuk memasang 'Give Feedback Button' ?

Sila ikuti beberapa langkah mudah di bawah.

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.


#givefeedback img {

border:0px;

float:right;

position:fixed;

right:-13px;

bottom:-13px;

}



#givefeedback img:hover { right:-5px; bottom:-5px;
}


07. Cari kod ini.

<div id='outer-wrapper'>

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

<div id='givefeedback'>

<a href='mailto:EMAIL ANDA@gmail.com' target='blank'>

<img src='http://4.bp.blogspot.com/_tgUOxznghPA/SkfsVz1D6pI/AAAAAAAAARc/4aQfZvT57OM/s400/Give-Feedback.png'/>

</a>

</div>

Gantikan text berwarna biru kepada email anda.

9. Save Template.

10. View blog untuk melihat hasilnya.

11. Selamat Mencuba.

READ MORE...

Memasang 'Tab View 3 In 1'.


Tab view 3 in 1 menampilkan entri popular yang mendapat komen tertinggi, nama pemberi komen terbanyak dan komen terbaru.

Tab view ini akan memberikan penampilan yang lebih kemas serta menjimatkan ruang blog anda

Sekiranya anda mahu memasang tab view ini sila ikuti beberapa langkah mudah di bawah.

1. Sign in akaun blogger anda.

2. Pilih LAYOUT --> EDIT HTML.

3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.

4. Cari kod ini.

]]></b:skin>

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


div.TabView div.Tabs

{

height: 24px;

overflow: hidden;

}

div.TabView div.Tabs a

{

float: left;

display: block;

width: 90px; /* Lebar Kotak Tajuk */ text-align: center;

height: 24px; /* Tinggi Kotak Tajuk */

padding-top: 3px;

vertical-align: middle;

border: 1px solid #000; /* Warna Border Kotak Tajuk */

border-bottom-width: 0;

text-decoration: none;

font-family: "Times New Roman", Serif; /* Tulisan Kotak Tajuk */

font-weight: 900;

color: #000; /* Warna Tulisan Kotak Tajuk */

}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

{

background-color: #FFFF66; /* Warna Background Kotak Tajuk */

}

div.TabView div.Pages

{

clear: both;

border: 1px solid #6E6E6E; /* Warna Border Kotak Isi */

overflow: hidden;

background-color: #FFFF66; /* Warna Background Kotak Isi */

}

div.TabView div.Pages div.Page

{

height: 100%;

padding: 0px;

overflow: hidden;

}

div.TabView div.Pages div.Page div.Pad

{

padding: 3px 5px;

}

Perhatian !!! Anda boleh mengubah kod berwarna biru mengikut kesesuaian saiz yang anda mahukan.

6. Seterusnya cari kod ini.

</head>

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

<script src='http://syamzone.fileave.com/Tab View Menu.txt' type='text/javascript'/>

8. Save Template anda.

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

10. Copy kod di bawah dan Paste.

<form action="tabview.html" method="get">

<div id="TabView" class="TabView">

<div style="width: 280px;" class="Tabs">

<a>Popular</a>

<a>Top</a>

<a>Terbaru</a>

</div>

<div style="width: 280px; height: 350px;" class="Pages">



<div class="Page">

<div class="Pad">

<script type="text/javascript">

function pipeCallback(obj) {

document.write('<ul style="text-transform: capitalize;">');

var i;

for (i = 0; i < obj.count ; i++)

{

var href = "'" + obj.value.items[i].link + "'";

var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";

document.write(item);

}

document.write('</ul>');

}

</script>

<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a7d3195528df5e96181a3d2712266226&url=http%3A%2F%2FNAMABLOGANDA.blogspot.com&num=10" type="text/javascript"></script> <p>

</div>

</div>



<div class="Page">

<div class="Pad"> <p>
<script type="text/javascript">



function pipeCallback(obj) {



document.write("<ol>");



var i;



for (i = 0; i < obj.count ; i++)



{



var href = "'" + obj.value.items[i].link + "'";



var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";



document.write(item);



}



document.write("</ol>");



}



</script>



<script src= "http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&



_id=c92ac21897d8b56e61cfa85930dd89a1&url=http%3A%2F%2FNAMABLOGANDA.blogspot.com&num=10" type="text/javascript"></script>
</div>

</div>



<div class="Page">

<div class="Pad">

<script type="text/javascript">

function pipeCallback(obj) {

document.write('<ul style="text-transform: capitalize;">');

var i;

for (i = 0; i < obj.count ; i++)

{

var href = "'" + obj.value.items[i].link + "'";

var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";

document.write(item);

}

document.write('</ul>');

}

</script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=0fa4b52819e930cfa76ab4323eb17f99&url=http%3A%2F%2FNAMABLOGANDA.blogspot.com&num=10" type="text/javascript"></script> <p>

</div>

</div>



</div>

</div>

</form>



<script type="text/javascript">

tabview_initialize('TabView');

</script>

Perhatian !!! Anda perlu menggantikan kod berwarna biru kepada nama blog anda dan untuk mengubah saiz atau tajuk tab view.

11. Setelah selesai Save dan view blog untuk melihat hasilnya.

12. Selamat Mencuba.

READ MORE...

Memasang 'Page Peel Social Bookmark'.

Tips Dan Tricks Blogspot

Sekiranya anda ingin memasang 'Sexy Social Bookmark' Klik di sini atau 'Classic Social Bookmark Klik di sini.

Untuk memasang 'Page Peel Social Bookmark' seperti screenshot di atas, sila ikuti beberapa langkah mudah di bawah.

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.

<style type='text/css'>

<!--

.expand-down {

font-family:Arial, Helvetica, sans-serif;

line-height:normal;

margin-top:20px;

height:54px;

width:500px;

background: url('http://img34.imageshack.us/img34/4388/socialbookmarkandshare.gif') no-repeat;

margin-bottom:30px;

}

/* reset margins and paddings */

.expand-down * {

margin: 0;

padding: 0;

}

.expand-down ul {

padding-top:25px;

margin-left:10px;

}

.expand-down ul li {

float:left;

list-style-type:none;

}

.expand-down ul li a {

text-decoration:none;

}

.expand-down ul li a img {

width:50px; /* initial width of images, 50% of width */

height:50px; /* initial height of images, 50% of height */

border:none;

}

/* initially, don't show the label inside <span> tag */

.expand-down ul li a span {

display:none;

}

.expand-down ul li:hover a span {

/* show label on mouse hover */

display:block;

font-size:14px;

text-align:center;

color:#000;

}

/* expand the image to 100% on mouse hover.

** an image becomes active when mouse hovers it

** ideally, the image should have same width and height as below

*/

.expand-down ul li:hover a img {

width:100px;

height:100px;

}

/* expand the image next to the right of the active image to 60% using + selector */

.expand-down ul li:hover + li a img {

width:60px;

height:60px;

}

/* expand the image second to the right of the active image to 55% using + selectors */

.expand-down ul li:hover + li + li a img {

width:55px;

height:55px;

}

-->

</style>

7. Sekarang cari kod ini.

<div class='post-footer-line post-footer-line-3'/>

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


<div class='expand-down'>

<ul>

<li>

<a href='http://www.facebook.com/share.php'>

<!-- the image -->

<img src='http://4.bp.blogspot.com/_znjmv4LDwck/Sj_bXRRRXzI/AAAAAAAAA98/HIXOZAkEyqY/s400/facebook_64x64.png'/>

<!-- the label -->

<span>Facebook</span>

</a>

</li>

<!-- make copies of <li>...</li> block to create more items ... --><li><a href='http://twitter.com/home'>

<!-- the image -->

<img src='http://1.bp.blogspot.com/_znjmv4LDwck/Sj_cLDgz2cI/AAAAAAAAA-E/Nc04OTHnR48/s400/twitter_64x64.png'/>

<!-- the label -->

<span>Twitter</span>

</a>

</li><li><a href='http://technorati.com/faves'>

<!-- the image -->

<img src='http://4.bp.blogspot.com/_znjmv4LDwck/Sj_afPEG_8I/AAAAAAAAA9E/Ljs7O64hckc/s400/technorati_64x64.png'/>

<!-- the label -->

<span>Technorati</span>

</a></li><li><a href='http://feeds2.feedburner.com/syamzone'>

<!-- the image -->

<img src='http://2.bp.blogspot.com/_znjmv4LDwck/Sj_axehjkOI/AAAAAAAAA9c/nk9FGYOz-X4/s400/rss_64x64.png'/>

<!-- the label -->

<span>Rss</span>

</a></li><li><a href='http://www.mybloglog.com/buzz/community/bloguntukaku'>

<!-- the image -->

<img src='http://2.bp.blogspot.com/_znjmv4LDwck/Sj_asJdgxzI/AAAAAAAAA9U/Qjz2LuzIaPE/s400/yahoo_64x64.png'/>

<!-- the label -->

<span>MyBlogLog</span>

</a></li> <li>

<a href='http://www.google.com/bookmarks/mark'>

<!-- the image -->

<img src='http://1.bp.blogspot.com/_znjmv4LDwck/Sj_ak6NscZI/AAAAAAAAA9M/rqTYrs6mybg/s400/google_64x64.png'/>

<!-- the label -->

<span>Google</span>

</a>

</li><li>

<a href='http://negaraku.net/faves'>

<!-- the image -->

<img src='http://3.bp.blogspot.com/_znjmv4LDwck/SkBFqKRsuQI/AAAAAAAAA-c/jg0o_f0jLp4/s400/SyamZone-Flag-Icon.png'/>

<!-- the label -->

<span>Negaraku.Net</span>

</a>

</li>

</ul>

</div>

Perhatian !!! Gantikan text / kod berwarna merah.

9. Pilih PREVIEW untuk melihat hasilnya.

10. Sekiranya anda berpuas hati SAVE TEMPLATE.

Sumber asal SyamZone™

READ MORE...