Widget tersebut berisi statistic blog, daftar directory dan banner friend. Nah cara membuatnya cukup simpel dan mudah bila anda mempelajarinya secara perlahan, karena menggunakan javascript dan css maka saya sarankan untuk mencobanya dulu pada blog percobaan, silahkan simak tutorial di bawah ini :
Login ke tata letak >> edit html >> chek expand widget template dan cari kode ]]></b:skin>
Pastekan kode CSS berikut di atasnya
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Times New Roman, Serif;
font-weight: 900;
color: #000080;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #BDBDBD;
}
div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF;
border: 1px solid #000000;
overflow: hidden;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
Lalu cari kode </head> dan pastekan javascript berikut di atasnya :
<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>
Simpan template anda dan selesai di sesi ini, kemudian kita masuk ke elemen halaman, kemudian tentukan di mana anda akan meletakan tabview anda sendiri (Mungkin di sidebar kanan/kiri/bawah/atas), klik add gadget atau tambah gadget, pilih javascript/Html lalu pastekan kode di bawah ini :
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Setelah selesai, klik aja simpan/save dan lihat hasilnya. Tab view milik anda sendiri telah selesai di buat.
Keterangan :
Warna merah pada CSS adalah padding, width dan height serta warna dasar dari ini tab view yang harus anda sesuaikan dengan blog anda, maka dari itu coba dulu di blog percobaan yah.....
Warna kuning adalah warna judul dari masing2 tab misal di blog saya (statistic | directori | friend)
Warna Hijau adalah isi dari masing2 tab....pko'e yang berupa script misal script iklan, recent post atau yang lainya, terserah yang ingin anda masukan di situ apa......
Semoga sukses membuat tab view, oh ya di sini hanya di berikan contoh membuat tab view dalam 3 bagian saja, sebenernya bisa di buat menjadi 4 atau 5 bahkan lebih....untuk itu silahkan utak2 bagian CSS nya sendiri...saya yakin pasti bisa asal berusaha, ya ndak hehe.......
55 komentar temen:
benar sob,,ini harus di coba di blog baru dulu
soal java script masih was was, gak apalah kucba dulu, tank ilmunya sob
keren nich... Saya simpan dulu kodenya...
Oiya, ini nanti bikin loading jadi berat ga mas?
Mampir sore untuk sedot ilmunya mas Aditya. Makasih juga telah pajang awardnya di postingan sebelumnya.
tips yang oke, mas pinter deh bikin tutorial kayak gini :D, kapan kapan ku coba di blog yang lain :D
@ rock n Nyach di jamin ndak berat kok asalkn isi dari tabviewnya ndak mengandung fitur berat juga
ajarin mas......hehehe....aq mo buat blog tp bingung bikinya susah.....
ni aq andri mas....yang tadi di warnet.......ajarin buat virus juga yah.......tadi seru bgt kompi nya ngeblenk ....
nyaaa... inet mia lemot. mana amsuk blog kamunya buerat load pagenya. sering gagal. makanya jadi jarang kesini. susah load page nya T^T
salam sobat
wah sip mas ADIT,,membuat menu tab viewnya,,
tapi harus di blog percobaan dulu ya,,
ok deh nanti saya akan coba mas.
trims ilmunya.
wah terima kasih mas adit,,
infonya sangat berguna..
munkgkin nanti saya akan coa..
tapi untuk sekarang saya simpan dulu tipsnya
Akun FBku : Reni Judhanto.
Tolong aku di add ya..? Thanks..
klo ilmu baru... wajib di coba nihh...
cocok ih sob u/ blog q yg cuma 2 kolom, tp masih bingung mau aq isi apa
cocok nih sob u. blog q yg masih menggumnakan dua kolom, tp aq masih bingung mau isi apa nantinya
bagusss, kapan2 info ini dong. apa untung co.cc dibanding blogspot
mantab deh...
thanks mas sharingnya..
siap mempraktekkan lagi..
@nirmala, kelebihan co.cc adalah gratis dan stabil,tp bila di bandingkn dgn blogspot,aq kira cm masalah tingkat domain yg lebih tinggi! dan bisa di approve bnyk situs ads,jauh lbh mdah d bnding blogspot
thx infonya, tapi masih belom niat nambah tab view, saya jadiin referensi aja yah...
keRen ni tutoR'y....
Wa ketinggalan komenni!!Gapapa Mantab banget sob!!Foto profilnya kok ganti
selamat malam wah ini agak rumit ya, kira-kira bisa ngga ya inyong
halo mas adit...
kayaknya perneah denger deh trik ni tp pake b. inggris masih
hihih lebih jelasan ini kayaknya
thx yah kak
di tungu kunjungan baliknya
salam kenal
saya juga mo nyoba kek buwel... hehehe
wuih thanks eh mas adith... ntar mo nyoba...
Malam sob, sebenernya udah lama saya mau buat tab menu view, bingung dengan proses pewarnaannya, karena saya pengen disesuaikan dengan warna blog, nah kebetulan di postingan sobat ini ada, trims. Btw sudah saya follow
info menarik kawan ,sangat bermanfaat,salam blogger
Selamat pagi mas...
thanks ilmunya nih sob.
saya coba-coba dulu siapa tau bisa. :D
waw... kereen, harus dicoba nih mas.., coba tolong buatin.. hueheuheuheu... (ampyuuun deh..) ;P'
males bikin ah mas.. bikinin dong eheheheee :p nih dikasih sedekah klik :p
keren tutornya :D
Tutorial mantap dit. Selamat pagi sobat.
sayang diriku gaptek bos bos... maaf ya
ngak berani coba coba soalnya gaptek bos
kunjungan rutin neh kang adit,,
fotonya di ganti ia,,
lucu banget
nice blog,
wadooooooooooowwww
panjang amat kodenya bro
hihihihi...
ada yang lebih simpel ga?
pengen masang
tapi males ma yg panjang2
selamat malam, kawan. maaf karena saya sudah lama tak berkunjung.
have a nice blogging time ya ^_^
waha ketinggalan berita nech sob, mff baru sempet mampir tab view menurut saya sebenrnya perlu itung2 untuk mneghemat tempat biar lebih simpel dan menarik
mantep sob
sukses slalu!
oh y foto profilnya ganti avatar tuch hehe..kren2
trims tutorialnya sob...
tapi apa gak bikin blog berat tuh?
duuuh... skripnya kepanjangen. Bikin pusing dit.
thx for info sob
iya nih, aku jg ikut pusing,
musti belajar dulu...
:)
kunjung malam kang adit seng ganteng dewe!!!hehehe...!!!yang tak tunggu datang juga yuah,izin kopas dulu yuah kang!!!matur sembah nuwun sadayanipun
Wah keren...
bisa lebih ringkas dan hemat tempat widget nih,, jadi gak perlu numpuk2 di side wrapper,,
Untuk sahabt ku ada award untukmu,lanjutkan seluruh langkahmu untuk memajukan blog indonesia
Tampilan menjadi lebih menarik, simpel, tidak memakan tempat, dan tentunya lebih ringan blognya. Trims tutorialnya tentang cara membuat menu tab view.
wah,,,
klo udah masalah teknik2 blog beginian
saya gak ngerti,,,,
heheh
wah thank's banget bro,infonya sangat bermanfaat bagi blogger pemula seperti saya, teruskan kreasi kamu bro, sekali lagi thank's...
ilmu baru.. bungkus.. teriamkasih mas aditya.. salam kenal..
ilmu baru nih sobat, trims udah berbagi, salam kenal sobat
ini untuk blogspot ya mas ?Kalau untuk wordpress bisa enggak ?
thanks mas aku coba tapi kurang sempurna, judulnya udah muncul tapi kok isi ga ada ya. mohon beritahu cara buat isinya???
thanks mas aku coba tapi kurang sempurna, judulnya udah muncul tapi kok isi ga ada ya. mohon beritahu cara buat isinya???
Kirim Komentar » Blogger Comment Form