Panduan Anyar nge-BLOG, Blogspot

Menambah Tab View di Sidebar Blogspot

Jumat, 14 Mei 2010
Yang dimaksud dengan menambah Tab View di Sidebar bisa anda lihat contohnya klik DISINI, Coba anda perhatikan pada sebelah kanan, Sidebar tengah ada Judul " Shohib Anyar !!! , disitu ada 2 tab yang masingmasing berjudul : Link Nama dan Link Banne, Cara Membuatnya Silakan ikuti langkah-langkah berikut :
  • Login ke blog anda Klik DISINI, silakan isi nama dan password anda
  • Pilih ‘TATA LETAK’
  • Klik "Pilih Edit HTML"
  • Silakan anda download terlebih dahulu Template anda klik "Download Template Lengkap" sebelah kanan atas ( menjaga jika template anda kacau dan mengembalikan ke template semula)
  • (gunakan Ctrl + F ) Anda cari kode ]]></b:skin>
  •  Kemudian Copy kode dibawah ini, dan paste diatas kode ]]></b:skin>
/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 136px; /* ukuran lebar menu */
text-align: center;
height: 24px; /* ukuran tinggi menu */
padding-top: 3px;
margin-right:1px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid rgb(153, 153, 153); /* warna border menu */
border-bottom-width: 0;
font-family: Arial, Tahoma, Verdana; /* jenis hurup menu */
font-size: 14px; /* besar hurup menu */

letter-spacing: -1px;
background-color: #CEE3F6; /* warna latar menu */
color: #39792e; /* warna hurup menu */
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
div.TabView div.Tabs a.Active {
background-color:#f1f1f1 ; /* warna background menu aktif */
color: #000000;
}
div.TabView div.Tabs a:hover {
background-color: #E0ECF8; /* warna background menu hover */
color: #ffffff;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid rgb(153, 153, 153); /* warna border kotak utama */

overflow: hidden;
background:#f7f7f7; /* background kotak utama */
border-top-width: 0;
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 3px 5px;
font-size: 12px; /* besar hurup kotak utama */
}
div.TabView div.Pages div.Page div.Pad ul {
padding: 0;
margin: 0;
}
div.TabView div.Pages div.Page div.Pad ul li {
line-height: 16px;
list-style-type: none;
border-bottom: 1px dotted #58ACFA;
/* border-bottom: 1px dashed #031c5d; */
}
Pada Keterangan ( /* ........... */) : bisa anda edit sesuai kemauan
  • Kemudian letakkan kode dibawah ini diatas kode </head>
<script>
//<![CDATA[
/******************************************
menu tab script
********************************************/
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>
  • Lalu Klik Simpan temlate
Langkah Selanjutnya :
  • Klik Tata Letak, Tambah Gadget, Tambah Html/Javascript.
  • Copy paste kode berikut ini :
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 320px;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>
<div style="width: 315px; height: 270px;" class="Pages">
<div class="Page">
<div class="Pad">
( isi judul 1)
</div>
</div>
<div class="Page">
<div class="Pad">
(isi judul 2)
</div>
</div>
<div class="Page">
<div class="Pad">
(isi judul 3)
</div>
</div>
</div></div></form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
  •  Selesai, Klik Simpan
Catatan : judul dan isi judul anda edit sesuaikan dengan keinginan anda dan Lihat Hasilnya, semoga sukses

 

Subscribe

Berlangganan via RSS Feed

Ingin Artikel seperti ini ?,... masukan alamat email anda untuk berlangganan.

Artikel Anyar Yang Berhubungan :

Komentar Anda :

9 komentar pd : “Menambah Tab View di Sidebar Blogspot”

cara nambah widget seperti
informasi terbaru I Lowongan I, gimana

Anonim mengatakan...
pada hari 

thx buat buat infonya, sangat membantu saya yang masih belajar cara membuat blog

Marcel Fre mengatakan...
pada hari 

Cream pemutih wajah

Obat gemuk

Obat pemutih kulit

Cream pemutih badan



Minyak lintah

Obat pembesar penis

Celana vacoou asli

Boneka sex

Obat perangsang wanita

Alat bantu sex pria

Alat bantu sex wanita

Kosmetik artis



Obat pelangsing badan

Obat herbal pelangsing

Pelangsing bsh

Body slim herbal



Pro extender

Jual pro extender

Proextender termurah

Alat pembesar penis



Neosize xl

Neo size xl asli

Jual neosize xl

Pembesar penis neosize xl



Procomil spray murah

Procomil spray

Obat kuat oles

Obat Kuat Tahan Lama

irawan loris mengatakan...
pada hari 

Toko bose

Procomil spray

Neosize xl

Pro extender

Obat pelangsing badan

Obat pemutih kulit

Cream pemutih badan

Cream pemutih wajah

Celana hernia

Obat sakit hernia

Obat peninggi badan

Obat Gemuk alami

Cream pemutih selangkangan

Obat perapat vagina

Cream pembesar payudara

Obat pembesar payudara

Alat pembeasar payudara

Vimax

Kosmetik artis

Alat Bantu Sex

Obat Ambien

Obat Pemutih Kulit

Obat Penghilang Tato

Obat Penggemuk Badan

Alat Pembesar Payudara

Selaput Dara Buatan

Obat Ambeien

Minyak lintah papua

Maya kecantikan

Boneka sex jepang

Toko ujung

Toko surabaya




Alat pembesar mengatakan...
pada hari 

INFO LENGKAP KESEHATAN KECANTIKAN KEPERKASAAN KEJANTANAN DAN KEWANITAAN :

boneka full body
obat pembesar penis
alat pembesar penis
obat perangsang wanita
proextender
obat gemuk
minyak lintah
obat pelangsing badan
alat pembesar payudara
obat pembesar payudara
cream pembesar payudara
cream pemutih badan
cream pemutih wajah
obat pemutih badan
pemutih ketiak
obat penghilang jerawat
pemerah bibir
cream pelangsing badan
obat perapat vagina
peninggi badan
perontok bulu
penghilang stretch mark
penumbuh rambut
penghilang bekas luka
pembesar pantat
vimax oil
black mamba
celana vakoou
celana hernia
viagra
neosize
vimax asli
cobra oil
klg
obat penghilang tatto
cara memperbesar payudara

vmenplus mengatakan...
pada hari 

Kami x-shops69.com menjual aneka produk untuk pembesar penis termurah dan terlengkap.

> Obat Pembesar Penis
> Vimax
> Jual Vimax
> Cara Membesarkan Penis
> Obat Pembesar Alat Vital Pria
> Agen Vimax
> Distributor Vimax
> Vimax Asli Canada
> Vimax Asli
> Jual Vimax Asli
> Obat Pembesar Penis Vimax
> Obat Pembesar Penis Alami
> Obat Pembesar Penis Herbal
> Obat Pembesar Penis Permanen
> Obat Pembesar Penis Paling Ampuh
 
<> Obat Pembesar Penis KLG
<> Jual Obat Pembesar Alat Vital Pria.
<> Jual Obat Pembesar Penis KLG
<> KLG HERBAL
<> Jual KLG asli
 
* Obat Pemanjang Penis
* Vmenplus
* Jual Vmenplus
* Obat Pembesar Kontol
* Jual Vmenplus Asli
> Obat Pembesar Alat Kelamin Pria

http://www.x-shops69.com/ mengatakan...
pada hari 

Kami x-shops69.com menjual aneka produk untuk pembesar penis termurah dan terlengkap.

> Obat Pembesar Penis
> Vimax
> Jual Vimax
> Cara Membesarkan Penis
> Obat Pembesar Alat Vital Pria
> Agen Vimax
> Distributor Vimax
> Vimax Asli Canada
> Vimax Asli
> Jual Vimax Asli
> Obat Pembesar Penis Vimax
> Obat Pembesar Penis Alami
> Obat Pembesar Penis Herbal
> Obat Pembesar Penis Permanen
> Obat Pembesar Penis Paling Ampuh
 
<> Obat Pembesar Penis KLG
<> Jual Obat Pembesar Alat Vital Pria.
<> Jual Obat Pembesar Penis KLG
<> KLG HERBAL
<> Jual KLG asli
 
* Obat Pemanjang Penis
* Vmenplus
* Jual Vmenplus
* Obat Pembesar Kontol
* Jual Vmenplus Asli
> Obat Pembesar Alat Kelamin Pria

http://www.x-shops69.com/ mengatakan...
pada hari 

artikelnya sangat membantu thanks for sharing
kunjungi web kami gan => www.vimaxkapsuloriginal.com

Vimax Original Pembesar Mr.P Herbal mengatakan...
pada hari 

selamat pagi

liyoskin mengatakan...
pada hari 

Posting Komentar

Berlangganan via RSS Feed

Ingin berlangganan gratis artikel yang langsung ke e-mail anda ?,... Tulis alamat email anda untuk berlangganan.

Silakan Dipakai !!!