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