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"
>
<table border="0" cellspacing="0" cellpadding="0"
width="380" height="5">
<tbody>
<tr>
<td height="5"></td></tr></tbody></table>
   <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">



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

<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... <a href='http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com '>[Read more of this review]</a></p> 

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div>

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

<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... <a href='http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com '>[Read more of this review]</a></p> 

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div>

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

<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... <a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com '>[Read more of this review]</a></p> 

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div>

<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></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"
>
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">



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

<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... <a href='http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com '>[Read more of this review]</a></p> 

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div>

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

<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... <a href='http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com '>[Read more of this review]</a></p> 

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div>

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

<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... <a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com '>[Read more of this review]</a></p> 

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div>

<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></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"
>
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">



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

<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... <a href='http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com '>[Read more of this review]</a></p> 

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div>

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

<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... <a href='http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com '>[Read more of this review]</a></p> 

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div>

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

<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... <a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com '>[Read more of this review]</a></p> 

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div>

<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></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"
>
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">



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

<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... <a href='http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com '>[Read more of this review]</a></p> 

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div>

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

<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... <a href='http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com '>[Read more of this review]</a></p> 

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div>

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

<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... <a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com '>[Read more of this review]</a></p> 

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div>

<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></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"
>
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">



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

<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... <a href='http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com '>[Read more of this review]</a></p> 

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div>

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

<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... <a href='http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com '>[Read more of this review]</a></p> 

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div>

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

<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... <a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com '>[Read more of this review]</a></p> 

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div>

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

Comments

15 comments to "Membuat Tab Widget"

Anonymous said... March 4, 2009 at 10:01 AM: mas .....

tyus itu posting kita g bkl muncul slain menu tab itu..????

tyus kl widget na d taruh halaman depan gt....

apa g nanti postingan malah d bwh widget gt???
ANDIE said... March 4, 2009 at 1:01 PM: @pare widitya ' Klik pada "Add A Gadget" trus pilih "HTML/Javascript" dan tempatnya terserah kamu. mau dibawah posting atau di bagian sidebar sperti ditempatmu dibawah kolom profile atau promo jg bisa..trus kalau masalah posting ttep muncul.(kalau di blog mu seh...) kalau di blog ku enggak. krn aq pake trik hidden elemen bagian posting. baca ini y kalau pengen tahu.http://andidwih.blogspot.com/2009/02/menampilkan-elemen-hanya-ada-pada_02.html
Anonymous said... March 4, 2009 at 1:59 PM: o....

jd posting na d hidden...

ckckckckckckck

otre....

itu iang aq bingungin mas....

ternyata d d tampilin...
ANDIE said... March 4, 2009 at 2:17 PM: @pare widitya "yup aq pake trik hidden elemen bagian posting, jadi postingannya g kliatan di halaman utama/Home.ni lagi persiapan mo crack template wordpress ke blogger lagi..ntr klo udh slese tinggal download aja templatenya disini.dont miss it..hhehehe...
Anonymous said... March 4, 2009 at 3:41 PM: mas postingin jg dunk gmn cr nambah sidebar tp letak na d atas didebar

aq uda cr2 tutor na ga ada

ada tp g berhasil....
Anonymous said... March 17, 2009 at 5:43 AM: ruwet na...hehehehe
Saungweb said... June 18, 2009 at 5:01 PM: Buset.. panjang bener mas.... tapi infonya sanyat ok...
Androiders said... June 25, 2009 at 1:39 PM: mas klo buat tab view kek demo di atas, alis tab view di postingan, aku dah tes nyoba2 paste kodena di postingan hasilnya gak kek demona
Loothay HM said... July 2, 2009 at 10:29 AM: makasih ya..... atas tipsnya
UBASAPE said... October 11, 2009 at 5:12 PM: assalamu alaikum

maksih tipsnya bos.., sy mau nanya neh mas, dulu di blog saya itu ketika ingin membuka artikel yg sy posting sebelumnya bs langsung dibuka/dibaca pd halaman berikutnya. tp setelah terlalu sering sy meng-edit di template (ntah apa yg kehapus/ditambah) akhirnya posting2 itu gk bs kebuka seperti sebelumnya (mohon arahannya)boss.., dan tolong kirim tipsnya ke email sy di, (uba.sape@gmail.com). untuk melihat contoh masalah yg sy maksudkan, mohon kunjungi blog sy di (http://aslidoumbozosape.blogspot.com/). atas wkt dan kesempatannya sy hanya bs bilang trims bangat

sukses slalu buat boss...,

wassalam
DIGIDOWNLOAD said... July 1, 2010 at 4:31 AM: Mantab banget dah. Tapi ane kan dah pake auto readmore, ada ngaruh ga gan kalo misal ane pake cara ini???
Kasi pencerahannya ya..
Makasi sebelumnya.

Regards
ADA Internet Gratis said... January 2, 2011 at 2:37 PM: pengen nyoba tapi kogg susah gtu yahh :D
Deevro said... January 23, 2011 at 12:10 AM: Tutorial keran gan ,,
thnkz [ www.deevro.co.cc ],,
Visit back please ,, ^_^
Kumpulan Software said... August 6, 2012 at 2:16 PM: ini widget tabnya di postingan ya gan apa di side bar...?
Unknown said... December 6, 2013 at 2:32 PM: waww..keren

ANDIE BLOG | spesial efek blog

Saturday, February 28, 2009