Cara Membuat Tab View Link
Halo para sobat blogger semua selamat sore dan selamat ngeblog. Setelah tiga hari saya tidak posting karena kondisi internetnya bermasalah kali ini saya Alhamdulillah sebelum jalan-jalan ke tempat kawan semua nyempetin untuk posting dulu.
Sebelumnya saya pernah posting Cara Membuat Multitab Level Dropdwon Menu JQuery dan membuat Menu Tab Widgetkali ini saya akan mengetengahkan Cara Membuat Tab View Link. Tab View Link adalah salah satu Widget (tempat) menyimpan Link Kawan-Kawan kita, apalagi sobat yang suka tuker link, selain itu juga Widget ini sangat rapih enak dipandang dan juga membuat blog kita tambah cantik hehehe, itu menurut saya entah low menurut sobat, tapi mudah mudahan berkata gitu juga wkwkwk.
OK kalau sobat kurang puas dan pingin tahu seperti apa itu Tab View Link, di bawah ini contoh gambar Tab View Link :
Nah gimana?? Sobat tertarik?? OK kalau tertarik gita langsung ke tahap pembuatan.
Langkah Pertama
- Seperti biasa Login ke blogger dengan id Sobat
- Tuju menu Tata Letak
- Pada tab menu, klik Edit HTML
- Backup template anda, klik Download Template Lengkap untuk berjaga jaga
- Kemudian cari kode ini </head> seletah ketemu paste kode berikut diatas kode </head>
<script src='http://kangfatur.googlecode.com/files/tabview.js'Langkah Kedua
type='text/javascript'/>
Setelah langkah pertama sobat jalankan sekarang kita ke langkah kedua
- Cari kode </b:skin>
- Kalau sudah ketemu paste kode di bawah ini tepat di atas kode </b:skin>
/* Awal TAB VIEW 1*/
div.TabView div.Tabs
{
overflow: hidden;
}
div.TabView div.Tabs a
{
background: #0101DF ;
background-repeat: no-repeat;
float: left;
display: block;
width: 20px; /* Lebar Menu Utama Atas */
text-align: center;
height: 20px; /* Tinggi Menu Utama Atas */
padding-top: 0px;
vertical-align: middle;
border: 1px solid #eeeeee;
margin-top: 4px;
margin-left: 6px;
margin-right: 6px;
border-bottom: 2px solid #999999;
border-bottom-width: 2px;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama
Atas */
font-weight: 800;
color: #fff; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF; /* Warna background Menu Utama Atas */
background: #0101DF; /* Warna Background Mouse Hover */
background-repeat: no-repeat;
}
div.TabView div.Pages
{
clear: both;
margin-top: 6px;
padding: 5px;
border: 2px double #999999; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #091a9f; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 200%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 4px 2px;
}
/* Akhir TAB VIEW 1*/
- Kemudian klik Save Template
Setelah langkah-langkah diatas terpenuhi, kini kita lanjut ke babak penentuan hehe
- Pergi ke Tataletak (Rancangan)
- Tambah Gadget (HTML/Javascript)
- Setelah itu masukan kode di bawah ini:
<left> <table border="0"><tbody>4. Klik Tombol Simpan/Save. Selesai deeh
<tr><td><form action="tabview.html" method="get">
<div id="TabView"
class="TabView">
<div style="width: 340px;" class="Tabs">
<a
href=""><font color="#ffffff"><b>A</b></font></a> <a href=""><font
color="#ffffff"><b>B</b></font></a> <a href=""><font
color="#ffffff"><b>C</b></font></a> <a href=""><font
color="#ffffff"><b>D</b></font></a> <a href=""><font
color="#ffffff"><b>E</b></font></a> <a href=""><font
color="#ffffff"><b>F</b></font></a> <a href=""><font
color="#ffffff"><b>G</b></font></a> <a href=""><font
color="#ffffff"><b>H</b></font></a> <a href=""><font
color="#ffffff"><b>I</b></font></a> <a href=""><font
color="#ffffff"><b>J</b></font></a> <a href=""><font
color="#ffffff"><b>K</b></font></a> <a href=""><font
color="#ffffff"><b>L</b></font></a> <a href=""><font
color="#ffffff"><b>M</b></font></a> <a href=""><font
color="#ffffff"><b>N</b></font></a> <a href=""><font
color="#ffffff"><b>O</b></font></a> <a href=""><font
color="#ffffff"><b>P</b></font></a> <a href=""><font
color="#ffffff"><b>Q</b></font></a> <a href=""><font
color="#ffffff"><b>R</b></font></a> <a href=""><font
color="#ffffff"><b>S</b></font></a> <a href=""><font
color="#ffffff"><b>T</b></font></a> <a href=""><font
color="#ffffff"><b>U</b></font></a> <a href=""><font
color="#ffffff"><b>V</b></font></a> <a href=""><font
color="#ffffff"><b>W</b></font></a> <a href=""><font
color="#ffffff"><b>X</b></font></a> <a href=""><font
color="#ffffff"><b>Y</b></font></a> <a href=""><font
color="#ffffff"><b>Z</b></font></a> <a href=""><font
color="#ffffff"></font></a></div>
<div style="width: 330px; height: 200px;" class="Pages">
<div class="Page">
<div class="Pad">
<table>
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<div class="Page">
<div class="Pad">
<table border="0">
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>|
<a href="Letak Link Kawan Sobat Disini" target="_ blank">[Nama Kawan]
</a>
</table>
</div>
</div>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
</div>
</div>
</form>
</td></tr>
</tbody></table>
</left>
PENTING
Buat Para sobat yang suka utak atik CSS nya atau mau mengganti warna background atau warna bordernya untuk bantuan kode warna silahkan klik disini.
Kemudian cari tulisan Letak Link Kawan Sobat Disini ganti dengan Alamat Link Kawan Sobat misalnya (http://ineufadla.blogspot.com/), treus tulisan Nama Kawan ganti dengan Nama Kawan Sobat misalnya Kang Fatur.
Selamat mencoba semoga berhasil bermanfaat bagi sobat semua Amiiin.
