Membuat Tab Widget

Demo :


Tutorial ini spesial diminta oleh pare widitya Lihat TAB WIDGET pada Demo diatas. Itulah yang akan kita buat. Ini caranya :
1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Add A Gadget" trus pilih "HTML/Javascript" dan copy paste kode dibawah ini :

<script language="JavaScript" type="text/javascript">
function st2(t){
for(i=1;i<=5;i++){
ts=document.getElementById('tt'+i);
tr = document.getElementById('dd'+i);
ta = document.getElementById('aa'+i);
if(t==i){
if(t==1) ts.className="Tab1";
if(t==2) ts.className="Tab2";
if(t==3) ts.className="Tab3";
if(t==4) ts.className="Tab4";
if(t==5) ts.className="Tab5";
ta.className="srchlinksel2";
ts.style.borderBottom="1px solid #FFFFFF";
tr.style["display"]="block";
tr.style["visibility"]="visible";
}
else{
ts.className="tb2";
ta.className="srchlink2";
ts.style.borderBottom="1px solid #B5D6EF";
tr.style["display"]="none";
tr.style["visibility"]="hidden";
}
}
}
</script>

<style type="text/css">.f10 {
FONT-SIZE: 10px; FONT-FAMILY: arial
}
.f11 {
FONT-SIZE: 11px; FONT-FAMILY: arial
}
.f12 {
FONT-SIZE: 12px; FONT-FAMILY: arial
}
.f12r {
FONT-SIZE: 12px; LINE-HEIGHT: 13px; FONT-FAMILY: arial
}
.f12n {
FONT-SIZE: 12px; LINE-HEIGHT: 1.3em; FONT-FAMILY: arial
}
.ft11a {
FONT-SIZE: 11px; LINE-HEIGHT: 13px; FONT-FAMILY: Tahoma
}
.fv9 {
FONT-SIZE: 9px; FONT-FAMILY: verdana
}
.fv10 {
FONT-SIZE: 10px; FONT-FAMILY: verdana
}
.ft11 {
FONT-SIZE: 11px; LINE-HEIGHT: 14px; FONT-FAMILY: Tahoma
}
.fmicro9 {
FONT-SIZE: 9px; FONT-FAMILY: Microsoft Sans Serif
}
A.srchlink:link {
COLOR: #2864b4; TEXT-DECORATION: none
}
A.srchlink:visited {
}
A.srchlinksel:link {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlinksel:visited {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlink2:link {
COLOR: #2864b4; TEXT-DECORATION: underline
}
A.srchlink2:visited {
COLOR: #2864b4; TEXT-DECORATION: underline
}
A.srchlinksel2:link {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlinksel2:visited {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
.tb2 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#D9E9F6');BACKGROUND-COLOR: #d9e9f6
}
.tbmain2 {
BACKGROUND-COLOR: #ffffff
}
.lfttbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#DEFFC6',EndColorStr:'#B7E4A2'); BACKGROUND-COLOR: #deffc6
}
.rttbl {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#DEEFF7'); BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #eef5fb
}
.rttblx {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #ffffff
}
.rt_tbl {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #b0dafd
}
.toptbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#4A84AD',EndColorStr:'#00426B'); BACKGROUND-COLOR: #00426b
}
.srchtbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FFFFFF',EndColorStr:'#A5DEDE'); BACKGROUND-COLOR: #a5dede
}
.Tab1 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FEDFB3',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #fedfb3
}
.Tab2 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#B39DFE',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #b39dfe
}
.Tab3 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#F6FE9D',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #f6fe9d
}
.Tab4 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FEAF9D',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #feaf9d
}
.Tab5 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#9DFEA5',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #9dfea5
}
A {
TEXT-DECORATION: none
}
A:hover {
TEXT-DECORATION: underline}
</style>

<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td align="middle" onclick="st2('1')" height="22" id="tt1"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid" width="70"
class="Tab1"><a id="aa1"
class="srchlinksel2" href="javascript:undefined"><font
class="f12"><b>TAB 1</b></font></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td align="middle" onclick="st2('2')" height="22" id="tt2"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="47"
class="tb2"><a id="aa2"
class="srchlink2" href="javascript:undefined"><font
class="f12"><b>TAB 2</b></font></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td align="middle" onclick="st2('3')" height="22" id="tt3"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="62"
class="tb2"><a id="aa3"
class="srchlink2" href="javascript:undefined"><font
class="f12"><b>TAB 3</b></font></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td align="middle" onclick="st2('4')" height="22" id="tt4"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="48"
class="tb2"><a id="aa4"
class="srchlink2" href="javascript:undefined"><font
class="f12"><b>TAB 4</b></font></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td align="middle" onclick="st2('5')" height="22" id="tt5"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="52"
class="tb2"><a id="aa5"
class="srchlink2" href="javascript:undefined"><font
class="f12"><b>TAB 5</b></font></a></td></tr>
<tr>
<td colspan="9">
<div style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP:
0px; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px;
BORDER-BOTTOM: 0px"
><!-- Main Headlines Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="380" height="5">
<tbody>
<tr>
<td height="5"></td></tr></tbody></table>
&nbsp;&nbsp; <font color="#797979" class="f10"
>

Browse Items</font>

<div id="dd1" style="BORDER-RIGHT: #b5d6ef 0px solid;
BORDER-TOP: 0px; DISPLAY: block; VISIBILITY: visible;
BORDER-LEFT: #b5d6ef 0px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
>
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">

<!-- ISI TAB 1 -->

<a href=" http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnkqpKiwMFnJqO7W4zIbty2bX5dRmpNuU6JoW8G4a0C3je6IzkHAfuqgR68K7nHGcd8fcivJEMyxNgxuiI5duE9lnM9Ty2bCPLLMyne7jnpyrUy6q5JbLOFRGbylEiZia7b_2PPuR2cPY/s400/meredith_andrews-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com">Judul Link mu</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<a href=" http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkLYPsKKkXfZp0ZX8LEzK9eRvjHJSpadk6IbOA2Y4Pyw831j2R2HY5fAZ6Dkwp8jl_Q7Xx2L7r7Fp1RZV5dIGhJPtQcJUMp7aCiDAqxhFhxsV09udjMt1kN6Qx-9qAXVWqw-3mWv_VttI/s400/brooke_fraser-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com">Judul Link mu</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<a href=" http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUobld-m1MWV_OEigmlvtgGDr7si7gQjUHQJzo58MDBRP6J2i2ZzyfeJyhMoTH60IiyzP8AfUboDYxw6MzM3GgvW6Of40K22hsyZw6x3TbJDGPnpdYxltgSfB1ObKKPtXaMPqeBrnvD-o/s400/hillsong_united-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com">Judul Link mu</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<b><a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com'>Read More Posts From This Category</a></b>

</font></td>
</tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table></div><!-- Main
Headlines End //--></div>
<div id="dd2" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- News Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">

<!-- ISI TAB 2 -->

<a href=" http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnkqpKiwMFnJqO7W4zIbty2bX5dRmpNuU6JoW8G4a0C3je6IzkHAfuqgR68K7nHGcd8fcivJEMyxNgxuiI5duE9lnM9Ty2bCPLLMyne7jnpyrUy6q5JbLOFRGbylEiZia7b_2PPuR2cPY/s400/meredith_andrews-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com">Judul Link mu2</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<a href=" http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkLYPsKKkXfZp0ZX8LEzK9eRvjHJSpadk6IbOA2Y4Pyw831j2R2HY5fAZ6Dkwp8jl_Q7Xx2L7r7Fp1RZV5dIGhJPtQcJUMp7aCiDAqxhFhxsV09udjMt1kN6Qx-9qAXVWqw-3mWv_VttI/s400/brooke_fraser-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com">Judul Link mu2</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<a href=" http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUobld-m1MWV_OEigmlvtgGDr7si7gQjUHQJzo58MDBRP6J2i2ZzyfeJyhMoTH60IiyzP8AfUboDYxw6MzM3GgvW6Of40K22hsyZw6x3TbJDGPnpdYxltgSfB1ObKKPtXaMPqeBrnvD-o/s400/hillsong_united-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com">Judul Link mu2</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<b><a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com'>Read More Posts From This Category2</a></b>

</font></td></tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- News End
//--></div>
<div id="dd3" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Business Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">

<!-- ISI TAB 3 -->

<a href=" http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnkqpKiwMFnJqO7W4zIbty2bX5dRmpNuU6JoW8G4a0C3je6IzkHAfuqgR68K7nHGcd8fcivJEMyxNgxuiI5duE9lnM9Ty2bCPLLMyne7jnpyrUy6q5JbLOFRGbylEiZia7b_2PPuR2cPY/s400/meredith_andrews-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com">Judul Link mu3</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<a href=" http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkLYPsKKkXfZp0ZX8LEzK9eRvjHJSpadk6IbOA2Y4Pyw831j2R2HY5fAZ6Dkwp8jl_Q7Xx2L7r7Fp1RZV5dIGhJPtQcJUMp7aCiDAqxhFhxsV09udjMt1kN6Qx-9qAXVWqw-3mWv_VttI/s400/brooke_fraser-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com">Judul Link mu3</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<a href=" http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUobld-m1MWV_OEigmlvtgGDr7si7gQjUHQJzo58MDBRP6J2i2ZzyfeJyhMoTH60IiyzP8AfUboDYxw6MzM3GgvW6Of40K22hsyZw6x3TbJDGPnpdYxltgSfB1ObKKPtXaMPqeBrnvD-o/s400/hillsong_united-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com">Judul Link mu3</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<b><a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com'>Read More Posts From This Category3</a></b>

</font></td></tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- Business End
//--></div>
<div id="dd4" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Movies Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">

<!-- ISI TAB 4 -->

<a href=" http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnkqpKiwMFnJqO7W4zIbty2bX5dRmpNuU6JoW8G4a0C3je6IzkHAfuqgR68K7nHGcd8fcivJEMyxNgxuiI5duE9lnM9Ty2bCPLLMyne7jnpyrUy6q5JbLOFRGbylEiZia7b_2PPuR2cPY/s400/meredith_andrews-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com">Judul Link mu4</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<a href=" http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkLYPsKKkXfZp0ZX8LEzK9eRvjHJSpadk6IbOA2Y4Pyw831j2R2HY5fAZ6Dkwp8jl_Q7Xx2L7r7Fp1RZV5dIGhJPtQcJUMp7aCiDAqxhFhxsV09udjMt1kN6Qx-9qAXVWqw-3mWv_VttI/s400/brooke_fraser-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com">Judul Link mu</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<a href=" http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUobld-m1MWV_OEigmlvtgGDr7si7gQjUHQJzo58MDBRP6J2i2ZzyfeJyhMoTH60IiyzP8AfUboDYxw6MzM3GgvW6Of40K22hsyZw6x3TbJDGPnpdYxltgSfB1ObKKPtXaMPqeBrnvD-o/s400/hillsong_united-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com">Judul Link mu4</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<b><a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com'>Read More Posts From This Category4</a></b>

</font></td>
</tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- Movies End
//--></div>
<div id="dd5" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Sports Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">

<!-- ISI TAB 5 -->

<a href=" http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnkqpKiwMFnJqO7W4zIbty2bX5dRmpNuU6JoW8G4a0C3je6IzkHAfuqgR68K7nHGcd8fcivJEMyxNgxuiI5duE9lnM9Ty2bCPLLMyne7jnpyrUy6q5JbLOFRGbylEiZia7b_2PPuR2cPY/s400/meredith_andrews-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com">Judul Link mu</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<a href=" http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkLYPsKKkXfZp0ZX8LEzK9eRvjHJSpadk6IbOA2Y4Pyw831j2R2HY5fAZ6Dkwp8jl_Q7Xx2L7r7Fp1RZV5dIGhJPtQcJUMp7aCiDAqxhFhxsV09udjMt1kN6Qx-9qAXVWqw-3mWv_VttI/s400/brooke_fraser-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com">Judul Link mu5</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<a href=" http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUobld-m1MWV_OEigmlvtgGDr7si7gQjUHQJzo58MDBRP6J2i2ZzyfeJyhMoTH60IiyzP8AfUboDYxw6MzM3GgvW6Of40K22hsyZw6x3TbJDGPnpdYxltgSfB1ObKKPtXaMPqeBrnvD-o/s400/hillsong_united-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com">Judul Link mu5</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<b><a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com'>Read More Posts From This Category5</a></b>

</font></td></tr>
<tr>
</tr>
<tr>
<td
height="4"></td></tr></tbody></table>

+Ganti kode warna yang berada di area yang berwarna ungu dengan warna pilihanmu.
Contoh :
StartColorStr:'#FEDFB3',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #fedfb3

+Ganti kode warna merah dengan Link Artikel / Label Blogmu.
+Ganti kode warna hijau dengan warna Link Gambar Blogmu. Saya rekomendasikan ukuran gambarnya 110px X 110px.
+ Ganti kode warna border #B5D6EF dengan warna pilihanmu.

Tips : pake Ms. Word editnya biar cepat. Gunakan fasilitas Find and Replace dari menu Edit di Ms. Word. Copy kode warna B5D6EF, kemudian paste diFind What dan tulis kode warna yang kamu inginkan di Replace With. Terus klik Replace All. Contoh lihat gambar dibawah :

Mengganti Tulisan Posted by

Lihat Tulisan POSTED BY dibawah postingan pada gambar diatas. Itulah yang akan kita ganti. Ini caranya :

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Edit HTML" trus kasih centang tanda "Expand Widget Templates"

3. Cari Kode ini

<span class='post-author vcard'>

4. Dibawah kode diatas ada kode seperti ini :

<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

5. Ganti Tulisan yang warna Merah diatas sesuai dengan keinginanmu. Contoh :

<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'>Di tulis oleh orang keren,</span>
</b:if>
</span>

Hasilnya :

6. Save Template dan Selesai

Membuat Page Navigation (Breadcrumb)

Lihat Tulisan diatas judul Posting, yang ini :
(Home>Cara Membuat Readmore (Versi 1)>Cara Membuat Readmore) pada gambar diatas. Itulah yang akan kita ganti. Ini caranya :

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Edit HTML" trus kasih centang tanda "Expand Widget Templates"

3. Copy Kode ini dan paste diatas kode ]]></b:skin>

.breadcrumb {
float: left;
width: 590px;
font-size: 11px;
margin: 0px 0px 20px 0px;
padding: 0px 0px 3px 0px;
border-bottom: double #EAEAEA;
}

+ Silahkan modifikasi sendiri kode CSS diatas sesuai dengan Template mu.

4. Copy Kode ini dan paste dibawah kode <div class='post hentry uncustomized-post-template'>

<b:if cond="data:blog.pageType == &quot;item&quot;">
<div class="breadcrumb">

<a href="data:blog.homepageUrl">Home</a>
<b:if cond="data:post.labels">
&gt;
<b:loop values="data:post.labels" var="label">
<a href="data:label.url" rel="tag"><data:label.name></data:label.name></a><b:if cond="data:label.isLast != &quot;true&quot;">,</b:if>
</b:loop>
</b:if>
&gt; <data:post.title>
</data:post.title></div>
</b:if>
<b:if cond="data:navMessage">
<div class="breadcrumb">
<a href="data:blog.homepageUrl">Home</a> &gt; <data:navmessage>
</data:navmessage></div>
</b:if>

6. Save Template dan Selesai

+ Lihat gambar dibawah ketika kamu klik Label / Kategori Blog mu yang sudah dipasangi Page Navigation (Breadcrumb). Akan muncul kotak Showing posts with label Cara Membuat Readmore (Versi 1). Show all posts

Tidak rapi kan?. Nah untuk cara supaya rapi silahkan lihat Tutorialnya disini Menghilangkan "Showing post with label...show all ...

Hasilnya setelah menerapkan Tutorial Menghilangkan "Showing post with label...show all ... seperti ini :

Mengganti kata "Said" di bagian komentar

Lihat Tulisan Said... dikomentar pada gambar diatas. Itulah yang akan kita ganti. Ini caranya :

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Edit HTML" trus kasih centang tanda "Expand Widget Templates"

3. Cari Kode ini

<dl id='comments-block'>

4. Dibawah kode diatas ada kode seperti ini :

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

5. Ganti Tulisan yang warna Merah diatas sesuai dengan keinginanmu. Contoh :

<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>
mengatakan 1 komentar...
</dt>

Hasilnya :

6. Save Template dan Selesai

Mengganti tulisan Label di Postingan

Lihat Tulisan LABELS dibawah postingan pada gambar diatas. Itulah yang akan kita ganti. Ini caranya :

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Edit HTML" trus kasih centang tanda "Expand Widget Templates"

3. Cari Kode ini

<span class='post-labels'>

4. Dibawah kode diatas ada kode seperti ini :

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

5. Ganti Tulisan yang warna Merah sesuai dengan keinginanmu. Contoh :

<b:if cond='data:post.labels'>
Kategori :
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

Hasilnya :

6. Save Template dan Selesai

Mengganti Tulisan Jumlah Comments

Lihat Tulisan O Comments pada gambar diatas. Itulah yang akan kita ganti. Ini caranya :

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Edit HTML" trus kasih centang tanda "Expand Widget Templates"

3. Cari Kode ini

<div class='comments' id='comments'>

4. Dibawah kode diatas ada kode seperti ini :

<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

5. Ganti Tulisan yang warna Merah sesuai dengan keinginanmu. Contoh :

<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
Asyikkk 1 komentar telah masuk:
<b:else/>
Weitsss kok masih <data:post.numComments/> komentar:
</b:if>
</h4>

Ingat angka 1 yang berkedip-kedip jangan dihapus

Hasilnya :

Atau seperti ini juga bisa :

<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 Komentar telah masuk:
<b:else/>
<data:post.numComments/> Komentar telah masuk:
</b:if>
</h4>

Hasilnya :

6. Save Template dan Selesai

Mengganti Tulisan Post A Comment

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Edit HTML" trus kasih centang tanda "Expand Widget Templates"

3. Cari Kode ini

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

Ganti Tulisan yang warna Merah sesuai dengan keinginanmu. Contoh :

<h4 id='comment-post-message'>Komentar dunk please deh...</h4>

Hasilnya :

4. Save Template dan Selesai.

Membuat Efek Tulisan berkedip (Blink)

Pastekan kode ini dimanapun kamu suka :

<blink>ISI POSTINGANMU atau ISI LINK MU</blink>

1. Bisa waktu Posting (dalam mode Edit Html)

<blink>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</blink>

HASILNYA SEPERTI INI setelah ditambahi Kode

<blink>ISI POSTINGANMU </blink>

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

2. Ketika membuat link dengan cara. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).

<blink><a href='http://LINKMU.blogspot.com/'target='new'>DESKRIPSI LINK MU</a></blink>

HASILNYA SEPERTI INI setelah ditambahi Kode

<blink>DESKRIPSI LINK MU </blink>

DESKRIPSI LINK MU

Menghilangkan dan Autohide Navbar di Blog

Sebelumnya fungsi Navigasi Bar di blog adalah :

• Untuk mempermudah mencari Blog lainnya.[Search]
• Menandai (seperti Bookmark)Blog jika isinya menarik.[Flag Bog]
• Untuk melihat blog selanjutnya yang diupdate secara acak. [Next Blog]
• Langkah cepat untuk menuju ke Halaman Dashboard Blog mu.[Customize]
• Log in di Blogger dengan menekan tombol B [B]

Ada 3 cara untuk menghilangkan Navigation Bar di Blog :


1. Mengganti warna Navigasi Blog


+ Login to Blogger kemudian pilih "Layout"
+ Klik "Edit" pada Navigasi Bar yang terletak diatas Header, kemudian ada pilihan 4 warna seperti gambar diatas. Pilih Salah satu, sesuaikan dengan tema lay out mu.
+ Save Template


2. Menghilangkan Navigasi Blog

+ Login to Blogger kemudian pilih "Layout"
+ Klik pada "Edit HTML"

-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

+ Copy kode yang berwarna merah diatas lalu paste sama persis dengan posisi diatas.
+ Kode yang berwarna biru merupakan nama template mu,setiap template berbeda namanya.
+ Save Template

Atau letakkan seperti ini

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

]]></b:skin>
</head>

3. Autohide Navigasi Blog

-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

+ Copy kode yang berwarna merah diatas lalu paste sama persis dengan posisi diatas.
+ Kode yang berwarna biru merupakan nama template mu,setiap template berbeda namanya.
+ Save Template

Atau letakkan seperti ini

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

]]></b:skin>
</head>

Menghilangkan "Showing post with label...show all posts"

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Edit HTML" , kasih tanda centang "Expand Widget Templates"
3. Cari kode dibawah ini :

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

ganti kode diatas dengan kode ini :

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

4. Save Template dan Selesai

Membuat efek slide show Smooth Gallery

Sebelumnya ini request special dari Mas Gede Permana dan Meindra dan banyak teman-teman yang lain yang tidak bisa saya sebutkan satu persatu.

1. Copy Paste Script Berikut:

<!-- begin Smooth Gallery scripts -->
<link rel="stylesheet" type="text/css" href="http://www.geocities.com/adeha_182/jd2.gallery.css" />

<script src='http://www.geocities.com/adeha_182/mootools2.v1.11.js' type='text/javascript'/>

<script src='http://www.geocities.com/adeha_182/jd2.gallery.js' type='text/javascript'/>
<!-- end Smooth Gallery scripts -->

+ Login ke Blogger kemudian pilih "Layout"
+ Klik pada "Edit HTML" dan paste kode diatas dibawah <head>

2. Masih di "Edit HTML", Copy kode dibawah ini:

<div id='isismoothgallery'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<style>
#myGallery, #myGallerySet, #flickrGallery {
width: 500px;
height: 400px;
z-index:5;
border: 1px solid #000;
margin: 0px 0px 0px 30px;
}

.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 85px;
background: #000;
color: #fff;
text-indent: 0;
overflow: hidden;
}
</style>
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($(&#39;myGallery&#39;), {
timed: true
});
}
window.addEvent(&#39;domready&#39;,startGallery);
</script>

<div id='myGallery'>
<div class='imageElement'>
<h2>Featured Article #1</h2>
<p>This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.blogger.com/demo/church/featured/featured-article-1.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
</div>

<div class='imageElement'>
<h2>Featured Article #2</h2>
<p>This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.blogger.com/demo/church/featured/featured-article-2.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
</div>

<div class='imageElement'>
<h2>Featured Article #3</h2>
<p>This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.blogger.com/demo/church/featured/featured-article-3.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/03.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/03.png'/>
</div>

</div>
</b:if>
</div>

Paste kode diatas, persis diatas kode ini :

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

+ Ganti tulisan Featured Article #1, Featured Article #2, Featured Article #3 yang bercetak tebal dengan Judul artikelmu.

+ Ganti tulisan yang berwarna Merah sesuai ukuran lay out mu.

• width: 500px; (lebar Smooth Gallery)

• height: 400px; (tinggi Smooth Gallery)

• margin: 0px 0px 0px 30px; (jarak atas,kanan,bawah,kiri Smooth Gallery)

+ Ganti tulisan yang berwarna Biru dengan Ringkasan artikelmu.

+ Ganti tulisan yang berwarna Hijau dengan Link artikelmu.

+ Ganti tulisan yang berwarna Ungu dengan Link Gambarmu.

+ Untuk menambah elemen slideshow, copy kode yang berkedip - kedip dan paste dibawahnya kode tersebut.

3. Simpan dan Lihat Hasilnya. 'Trust Me It's Work'

4. Posisi kode-kode semuanya :

<html>
<head>

<!-- begin Smooth Gallery scripts -->
<link rel="stylesheet" type="text/css" href="http://www.geocities.com/adeha_182/jd2.gallery.css" />

<script src='http://www.geocities.com/adeha_182/mootools2.v1.11.js' type='text/javascript'/>

<script src='http://www.geocities.com/adeha_182/jd2.gallery.js' type='text/javascript'/>
<!-- end Smooth Gallery scripts -->


<b:skin><![CDATA[/*

DISINI TEMPAT KODE2 CSS


]]></b:skin>
</head>

<body>
<div id='main-wrapper'>
<div id='isismoothgallery'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<style>
#myGallery, #myGallerySet, #flickrGallery {
width: 400px;
height: 300px;
z-index:5;
border: 1px solid #000;
margin: 0 0 30px;
}

.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 85px;
background: #000;
color: #fff;
text-indent: 0;
overflow: hidden;
}
</style>
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($(&#39;myGallery&#39;), {
timed: true
});
}
window.addEvent(&#39;domready&#39;,startGallery);
</script>
<div id='myGallery'>
<div class='imageElement'>
<h2>Featured Article #1</h2>
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.revolutiontwo.com/demo/church/featured/featured-article-1.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
</div>

<div class='imageElement'>
<h2>Featured Article #2</h2>
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.revolutiontwo.com/demo/church/featured/featured-article-2.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
</div>

<div class='imageElement'>
<h2>Featured Article #3</h2>
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.revolutiontwo.com/demo/church/featured/featured-article-3.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/03.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/03.png'/>
</div>

</div>
</b:if>
</div>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

</body>
</html>

5. Contoh silahkan klik disini samplesmoothgallery.blogspot.com/

Pasang Flash di Blog

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).
3.Copy Paste Script Berikut:

<embed src="http://YOURFLASHNAME.swf" quality="high" bgcolor="white" width="500" height="100" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash"></embed>

4. Ganti http://YOURFLASHNAME.swf dengan alamat file flash kamu yang telah ditaruh di hosting.

5. Ganti width="500" height="100" dengan ukuran dari file flashmu.

6. Terus Simpan.

+.Untuk membuat file flash bisa ke link ini http://www.bannermakerproforflash.com atau ke sini http://flashvortex.com/

+.Contoh :

Widget Komentar Terbaru (Recent Comment)

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).
3.Copy Paste Script Berikut:

<script style="text/javascript" src=" http://www.geocities.com/adeha_182/comments.js"></script><script style="text/javascript">var a_rc=10;var m_rc=false;var n_rc=true;var o_rc=40;</script><script src="http:// YOURBLOGNAME.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"> </script>

4. Ganti YOURBLOGNAME dengan nama blog kamu.
5. Angka "10" menunjukkan jumlah "Recent Comment" yang ditampilkan, kamu bisa menggantinya
6. Terus Simpan.

Atau dengan cara seperti ini

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget" --> "HTML/Javascript" (Tempatnya terserah kamu).
3. Pilih "Feed"

4. Isi Feed Url dengan ini http://YOURBLOGNAME.blogspot.com/feeds/comments/default

5. Ganti YOURBLOGNAME dengan nama blog kamu.

6. Terus Simpan.

Widget Komentar Paling Banyak (Top Comment)

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).
3.Copy Paste Script Berikut:

<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=33e2eb4dc25c7c21b9c586e11d2bc904&filter=Nama Anda&url=http%3A%2F%2FYOURBLOGNAME.blogspot.com&num=10" type="text/javascript"></script>

4. Ganti YOURBLOGNAME dengan nama blog kamu.
5. Angka "10" menunjukkan jumlah "Top Comment" yang ditampilkan, kamu bisa menggantinya
6. Nama Anda ,nama yang Anda gunakan saat komentar (akan dihapus dari daftar top komentator)
7. Terus Simpan.