Membuat Tabview Widget


Saya akan menuliskan caranya untuk membuat seperti gambar di atas :
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; <span style="gt;Widget edited by <a href="http://www.seby-antoe.com/2009/07/membuat-tabview-widget.html" target="_blank">Seby-Antoe.com</a></span>


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

<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 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/AVvXsEgXDqLoLRJP0Ksy3WAV7hVlPujgKu-F-FCa7zZKPSEGNInjdB1zSu_exaZmrsU1aurDqKXzl_4mtF0qaigcTqjt_EBHOKGn-Mp7i9fdPSpwAiZe_W1-VDyVy8cqKPFILxOA39d2K2xk9h0/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/AVvXsEiwIL4rGr9RWwG2oH3zMuAPoTYS0U4NKaUb7c7BhnRvJHNUPcuAD3rQr7cL90PkUpR5BGo_8I88WdcM09rbwr3WJtOo4AtPz5W0dEPo8So4YQJkMWgEFy29ZYsnshH2GCpK3F_9r38STaw/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/AVvXsEj7ELa4JKNLeq44BoJ-bEDrinh1MycfzdGWq1wuGQTNuThlJW4GKP90ux4LXNUYNhtb8mcNGm1YAM7ATZc-g9twky2w8X05Yus-PpolpO66mZTuFDjlNLujS6PhCRSVFV5JQ38Bg9C2xS0/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 -->

<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 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/AVvXsEgXDqLoLRJP0Ksy3WAV7hVlPujgKu-F-FCa7zZKPSEGNInjdB1zSu_exaZmrsU1aurDqKXzl_4mtF0qaigcTqjt_EBHOKGn-Mp7i9fdPSpwAiZe_W1-VDyVy8cqKPFILxOA39d2K2xk9h0/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/AVvXsEiwIL4rGr9RWwG2oH3zMuAPoTYS0U4NKaUb7c7BhnRvJHNUPcuAD3rQr7cL90PkUpR5BGo_8I88WdcM09rbwr3WJtOo4AtPz5W0dEPo8So4YQJkMWgEFy29ZYsnshH2GCpK3F_9r38STaw/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/AVvXsEj7ELa4JKNLeq44BoJ-bEDrinh1MycfzdGWq1wuGQTNuThlJW4GKP90ux4LXNUYNhtb8mcNGm1YAM7ATZc-g9twky2w8X05Yus-PpolpO66mZTuFDjlNLujS6PhCRSVFV5JQ38Bg9C2xS0/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 -->

<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 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/AVvXsEgXDqLoLRJP0Ksy3WAV7hVlPujgKu-F-FCa7zZKPSEGNInjdB1zSu_exaZmrsU1aurDqKXzl_4mtF0qaigcTqjt_EBHOKGn-Mp7i9fdPSpwAiZe_W1-VDyVy8cqKPFILxOA39d2K2xk9h0/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/AVvXsEiwIL4rGr9RWwG2oH3zMuAPoTYS0U4NKaUb7c7BhnRvJHNUPcuAD3rQr7cL90PkUpR5BGo_8I88WdcM09rbwr3WJtOo4AtPz5W0dEPo8So4YQJkMWgEFy29ZYsnshH2GCpK3F_9r38STaw/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/AVvXsEj7ELa4JKNLeq44BoJ-bEDrinh1MycfzdGWq1wuGQTNuThlJW4GKP90ux4LXNUYNhtb8mcNGm1YAM7ATZc-g9twky2w8X05Yus-PpolpO66mZTuFDjlNLujS6PhCRSVFV5JQ38Bg9C2xS0/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 -->

<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 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/AVvXsEgXDqLoLRJP0Ksy3WAV7hVlPujgKu-F-FCa7zZKPSEGNInjdB1zSu_exaZmrsU1aurDqKXzl_4mtF0qaigcTqjt_EBHOKGn-Mp7i9fdPSpwAiZe_W1-VDyVy8cqKPFILxOA39d2K2xk9h0/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/AVvXsEiwIL4rGr9RWwG2oH3zMuAPoTYS0U4NKaUb7c7BhnRvJHNUPcuAD3rQr7cL90PkUpR5BGo_8I88WdcM09rbwr3WJtOo4AtPz5W0dEPo8So4YQJkMWgEFy29ZYsnshH2GCpK3F_9r38STaw/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/AVvXsEj7ELa4JKNLeq44BoJ-bEDrinh1MycfzdGWq1wuGQTNuThlJW4GKP90ux4LXNUYNhtb8mcNGm1YAM7ATZc-g9twky2w8X05Yus-PpolpO66mZTuFDjlNLujS6PhCRSVFV5JQ38Bg9C2xS0/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 -->

<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 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/AVvXsEgXDqLoLRJP0Ksy3WAV7hVlPujgKu-F-FCa7zZKPSEGNInjdB1zSu_exaZmrsU1aurDqKXzl_4mtF0qaigcTqjt_EBHOKGn-Mp7i9fdPSpwAiZe_W1-VDyVy8cqKPFILxOA39d2K2xk9h0/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 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 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/AVvXsEiwIL4rGr9RWwG2oH3zMuAPoTYS0U4NKaUb7c7BhnRvJHNUPcuAD3rQr7cL90PkUpR5BGo_8I88WdcM09rbwr3WJtOo4AtPz5W0dEPo8So4YQJkMWgEFy29ZYsnshH2GCpK3F_9r38STaw/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/AVvXsEj7ELa4JKNLeq44BoJ-bEDrinh1MycfzdGWq1wuGQTNuThlJW4GKP90ux4LXNUYNhtb8mcNGm1YAM7ATZc-g9twky2w8X05Yus-PpolpO66mZTuFDjlNLujS6PhCRSVFV5JQ38Bg9C2xS0/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.

3. Simpan dech....

Selamat mencoba ...