| 7 comments ]

daftar isiCara Buat Daftar Isi blog dengan Model Tabel. aneh gak yah Judulnya, habis nya binggung opa mau tulis judul apa, maunya sih ditulis, Cara buat Daftar isi blog seperti opa, tapi kayaknya malah tambah gak enak, kayaknya narsis gitu..
weiz yah..langsung ke pembahasan aja.

Tulisan kali ini merupakan jawaban dari permintaan sobat blognyaopa yang masuk ke email, komentar atau shoutmix. maaf yah baru bisa ditulis sekarang. opa bener-bener lagi mempersiapkan bahan untuk Tugas Akhir (TA) opa, jadi waktu ngeblognya jadi tambah sedikit.

Yups kita mulai, bagaimana sih bentuk Daftar isi dengan model tabel. liat aja di samping kanan blog opa, ada kan daftar isi dengan beberapa judul. nah kali ini opa akan berbagi caranya untuk membuat daftar isi seperti ini.

Langkah-langkahnya adalah :
  1. Login ke blogger.
  2. klik layout / tata letak, setelah itu pilih Page Elements / elemen Halaman.
  3. Selanjutnya add Gadget / Tambah Gadget
  4. pilih yang Html / Javascript
  5. Selanjutnya copy kode dibawah ini :

<!-- widget by blognyaopa.blogspot.com -->
<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>


<!-- CSS Begin //-->

<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>
<!-- CSS End //-->
<!-- Widget Code Ends Here -->



<!-- widget by blognyaopa.blogspot.com -->

<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>TAB1</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>TAB2</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>Tab3</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>Tab4</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>Tab5</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"
>
<!-- wmlheadline begin -->
<!-- TDate Begin -->
<!-- Date Begin -->
Browse Items</font>
<!-- Date End -->
<!-- TDate End -->
<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">Tab 1
Content</font></td>
</tr>
<tr>
<td colspan="2" align="right"><font class="f10"><b> Widget
by <a href="http://blognyaopa.blogspot.com/2009/03/cara-buat-daftar-isi-blog-dengan-model.html"
target="_blank">blognyaopa</a></b>
&nbsp; </font></td></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">Tab 2
Content</font></td></tr>
<tr>
<td colspan="2" align="right"><font class="f10"><b> Widget
by <a href="http://blognyaopa.blogspot.com/2009/03/cara-buat-daftar-isi-blog-dengan-model.html"
target="_blank">blognyaopa</a></b>
&nbsp; </font></td></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">Tab 3
Content</font></td></tr>
<tr>
<td colspan="2" align="right"><font class="f10"><b> Widget
by <a href="http://blognyaopa.blogspot.com/2009/03/cara-buat-daftar-isi-blog-dengan-model.html"
target="_blank">blognyaopa</a></b>
&nbsp; </font></td></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">Tab 4
Content</font></td>
</tr>
<tr>
<td colspan="2" align="right"><font class="f10"><b> Widget
by <a href="http://blognyaopa.blogspot.com/2009/03/cara-buat-daftar-isi-blog-dengan-model.html"
target="_blank">blognyaopa</a></b>
&nbsp; </font></td></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">Tab 5
Content</font></td></tr>
<tr>
<td colspan="2" align="right"><font class="f10"><b> Widget
by <a href="http://blognyaopa.blogspot.com/2009/03/cara-buat-daftar-isi-blog-dengan-model.html"
target="_blank">blognyaopa</a></b>
&nbsp; </font></td></tr>
<tr>
<td
height="4"></td></tr></tbody></table>

<!-- Widget Code Ends Here -->

Perhatikan pada tulisan diatas, liat tulisan yang berwarna merah. ganti dengan Judul dari daftar isi yang akan kalian buat.

Pada tulisan yang berwarna biru. ganti dengan isi dari daftar isi nya.

Opa akan memberikan Contoh, misalkan Pada tulisan merah Tab1, kita ganti dengan judul daftar isi : Blogger Tips. maka pada tulisan warna biru Tab1 Content, kita tuliskan isi dari bloggertips tsb. begitu seterusnya sampai selesai.
Selesai deh...
Selamat mencoba!

7 comments

aa.LiL - belajar dan berbagi mengatakan... @ 19 Maret 2009 05.00

panjaaang bener opa kode nya... weleh-weleh...

Opaa,, waahh aku minta link back duunnkk... hehehe.. blh gak? thanks...

ndyteen mengatakan... @ 19 Maret 2009 11.11

wah...maksudnya tabview widgte ya....wealah anak UNISRI

hawhowaohowa...

Link Back atau Awardnya dong hehehe...

Panduan Bisnis online mengatakan... @ 7 April 2009 12.38

informasi yang sangat berbobot, thanks ya atas infonya. Marilah kita berbisnis yang benar.
Bagi Anda yang menginginkan informasi tentang bagaimana cara mencari target market untuk bisnis anda, bagaimana cara membuat produk informasi, bagaimana supaya website anda berada di 10 besar google dan yahoo, dan juga panduan membuat website untuk pemula serta trik dalam menulis sales letter dan headline silakan kunjungi

http://www.bisnissakti.com

Dapatkan juga GRATIS DVD Internet Marketing dan Bonus spektakuler lainnya

Mas Aab mengatakan... @ 22 April 2009 04.54

di coba ah buat blog pribadiku.. mas opa kunjungi blog punyaku sendiri ya... makaciii

Rendy BlogHeboh "Blog Dofollow" mengatakan... @ 2 Mei 2009 23.40

wahh gilaa panjang banget nihh..
haha..
kayaknya salah sedikit langsung ancur semua..
tapi pengen ah cobain siapa tahu berhasil..
hhhee..

Silahkan berkunjung ke BLOG HEBOH dan jangan lupa berkomentar karena BLOG HEBOH masih tetap DOFOLLOW >>
Posting Terakhir :Tutorial atau Panduan Ciao | $5 dalam waktu 1 Jam

IMA mengatakan... @ 27 Mei 2009 12.28

KENAPA JADINYA DATAR NICH

Aksesoris mobil mengatakan... @ 6 November 2013 15.36

keren nih, jadi terlihat rapih dan tersusun

Poskan Komentar

Related Posts Plugin for WordPress, Blogger...