Gratis berlangganan artikel Zykry via mail, join sekarang!

Monday, March 15, 2010

Cara membuat tab view


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="http://2.bp.blogspot.com/_Bt-NXM8VfZs/SaPZDyGBFMI/AAAAAAAAA1s/I6k6Sk5kIqs/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="http://1.bp.blogspot.com/_Bt-NXM8VfZs/SaPZEB4jLwI/AAAAAAAAA10/vNixyvkq6jw/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="http://2.bp.blogspot.com/_Bt-NXM8VfZs/SaPZEEGovpI/AAAAAAAAA18/mKS3a4nVxM8/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="http://2.bp.blogspot.com/_Bt-NXM8VfZs/SaPZDyGBFMI/AAAAAAAAA1s/I6k6Sk5kIqs/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="http://1.bp.blogspot.com/_Bt-NXM8VfZs/SaPZEB4jLwI/AAAAAAAAA10/vNixyvkq6jw/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="http://2.bp.blogspot.com/_Bt-NXM8VfZs/SaPZEEGovpI/AAAAAAAAA18/mKS3a4nVxM8/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="http://2.bp.blogspot.com/_Bt-NXM8VfZs/SaPZDyGBFMI/AAAAAAAAA1s/I6k6Sk5kIqs/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="http://1.bp.blogspot.com/_Bt-NXM8VfZs/SaPZEB4jLwI/AAAAAAAAA10/vNixyvkq6jw/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="http://2.bp.blogspot.com/_Bt-NXM8VfZs/SaPZEEGovpI/AAAAAAAAA18/mKS3a4nVxM8/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="http://2.bp.blogspot.com/_Bt-NXM8VfZs/SaPZDyGBFMI/AAAAAAAAA1s/I6k6Sk5kIqs/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="http://1.bp.blogspot.com/_Bt-NXM8VfZs/SaPZEB4jLwI/AAAAAAAAA10/vNixyvkq6jw/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="http://2.bp.blogspot.com/_Bt-NXM8VfZs/SaPZEEGovpI/AAAAAAAAA18/mKS3a4nVxM8/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="http://2.bp.blogspot.com/_Bt-NXM8VfZs/SaPZDyGBFMI/AAAAAAAAA1s/I6k6Sk5kIqs/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="http://1.bp.blogspot.com/_Bt-NXM8VfZs/SaPZEB4jLwI/AAAAAAAAA10/vNixyvkq6jw/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="http://2.bp.blogspot.com/_Bt-NXM8VfZs/SaPZEEGovpI/AAAAAAAAA18/mKS3a4nVxM8/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 ...




Related Post:

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di zykry-trick.blogspot.com
Thx to :
Jangan lupa add facebook Zykry Dark
print this page Print this page
Cara membuat tab viewSocialTwist Tell-a-Friend

Comments :

3 comments to “Cara membuat tab view”

Nikmaya John said...
on 

Keren nih tipsnya,,,

ridone said...
on 

Nice widget gan...tx's

AGEN BOLA TERBESAR said...
on 

Terimakasih Atas Infonya Gan.. Sangat Membantu Dan Di Tunggu Artikel Berikutnya Yah ^_^
AGEN PIALA DUNIA
BANDAR BOLA
JUDI ONLINE
BACCARAT ONLINE
PARLAY 2 TIM


Apa pendapat anda?

No spam and no porn yaw!!

Widget By Devils Workshop

Guest Book

Iklan

Pasang iklan anda di Zykry-trick hanya Rp.15.000 /bulan Hubungi : 087 823 177 355 - 085 759 277 896 Facebook : Zykry@programmer.net
 
twitter

Tukeran Link

Tips Dan Trick Blogging

U follow I follow

Statistik


free counters
broadband speed test
Current Events & News Blogs - Blog Rankings Blog Directory
Internet Blogs Web Design & CSS (Graphics) - TOP.ORG
Blogging Blogs - Blog Catalog Blog Directory Online Marketing - OnToplist.com
Web design blogs
The Republic of Indonesian Blogger | Garuda di Dadaku
Top 10 Award