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

Sexy Hidden Sidebar.

1. Masuk akaun Blogger.

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

3. Copy kod di bawah dan Paste.

<style type="text/css">
#gb{position: fixed;
width: auto;
height: auto;
top: 200px;
right:-7px;
}
* html #gb{position:relative;}

.gbtab{
float:left;
height:137px;
width:28px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1k55sln-Og9lLG7jwh9UEmQDtiofqvYNz0J4jV8diV59zWGmCfzVN2z9juxYtHjm0uQUry1nr-mMy3A49tUu8tsNTEpTTUBr7Wn60gcZWbSguBrX92XDH2u9Bbp0JfUa1nkfpWj8uxdtm/s400/Sidebar+Button.gif');background-position:top left; background-repeat:repeat-y;;
}
.gbcontent{overflow:hidden !important;
float:left;
border:0px solid #FFFFFF;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

MASUKKAN KOD SHOUTBOX ANDA DISINI

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

4. Perhatian !!! Gantikan text yang berwarna biru dengan kod shoutbox anda. Anda juga boleh memasukkan kod selain daripada kod shoutbox.

5. Save.

6. Selamat Mencuba.

READ MORE...

Menukarkan Post Date Dengan Calendar Icon.

1. Sign In akaun Blogger.

2. Pilih Settings --> Formatting dan ganti "date header format".

3. Pastikan format tarikh seperti ini (mm.dd.yyyy) contoh : 7.14.2010.

4. Kemudian Save Setting.

4. Langkah seterusnya, pilih Layout --> Edit HTML --> Expand Widget Templates.

5. Cari kod ini.

</head>

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

<SCRIPT type='text/javascript'>
//<![CDATA[
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);
</script>

7. Cari kod ini.

]]></b:skin>

8. Copy kod dibawah dan letakkan diatas kod tadi.

.dateblock {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLgMHiM9ad_S1Jozg8-gFh8Mi77tW6g7mnhPdpHeBFrR1LYX_mDmqThOBTXg_Dryr02jvsmWzUBoRJjBgUEveqo96E9Py4OloCeKlKlsGQRahS8JZRSdcEPugy7gvOvHdQb01bIuREurA/s1600/dateblock.gif); background-repeat:no-repeat; width:66px; height:75px; text-align:center; float:left; color:#fff; font-size:10px; font-weight:bold; margin:0px; margin-top:3px; margin-right:10px; padding-top:7px}
.day{font-size:35px; font-weight:bold; color:#000; padding-top:5px; letter-spacing:-1px}
.month{font-size:12px; font-weight:bold; color:#fff; padding:0px; letter-spacing:1px
}

9. Cari kod ini.

<data:post.dateHeader/>

10. Untuk memudahkan carian anda gunakan Ctl + F.

11. Sekiranya anda sudah jumpa kod diatas, gantikan dengan kod ini.

<DIV class='dateblock'>
<SCRIPT>date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

12. Setelah selesai pilih Preview.

13. Sekiranya anda berpuashati dengan hasilnya pilih SAVE.

14. Selamat Mencuba.

READ MORE...

Thumbnail Related Posts With Marquee.

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.

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.

<!-- Marquee Serbablog 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=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://serba-seru.blogspot.com/2010/02/thumbnail-related-posting-with-marquee.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

10. Anda boleh menggantikan kod berwarna biru.

11. Pilih SAVE.

Sumber Serba Blog

READ MORE...

Slide Recent Posting.

1. Masuk akaun Blogger.

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

Copy kod di bawah dan Paste.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style media="screen" type="text/css">
<!--

#spylist {
overflow:show;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:280px;
overflow:show;
list-style-type: none;
padding: 5px 5px;
margin:0px 0px;
}
#spylist li {
width:280px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url() repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:10px;
height:8px;
overflow:show;
margin:3px 3px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:show;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:8px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:show;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:3px 3px;
margin:8px 8px;
}

-->
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 20;
home_page = "http://nama-blog-anda.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://popular-post-blogger.googlecode.com/files/recentpostthumbspy-min.js" type="text/javascript"></script>
</div>

3. Perhatian !!! Gantikan text berwarna merah.Sebarang perubahan boleh di lakukan dengan menggantikan kod berwarna biru.

4. Save.

5. Selamat Mencuba.

Kredit Mari Bina Blog.

READ MORE...