Investasi dengan Sharing Profit MINGGUAN, Modal Rp.350.000, dapatkan CASHBACK Rp.75.000. SEGERA JOIN DAN AKTIFKAN!!!
Adsense Indonesia Join 4Shared Now! Investasisukses.com Apenta.com Get Your Free Site at UcoZ Now!
Welcome to Blog Pit-Onta, The Ultimate Business Blog, PC Software, Blog Trick and Other. . . !!!
INGIN PUNYA ACCOUNT PAYPAL?? DAFTAR LEBIH GAMPANG DISINI
Sign up for PayPal and start accepting credit card payments instantly.
BINGUNG VERIFIKASI CREDIT CARD?? JOIN AJA DISINI

TAB VIEW WIDGET

Ada beberapa teman ingin membuat tab view widget, saya coba membuat tutorialnya sesuai dengan bahasa saya dan apa yang saya pahami.Sebelum melakukan pemasangan widget ini lebih baik sobat download dulu semua file template blog sobat, sehingga bila ada kesalahan sobat dapat mengembalikan dengan widget sebelumnya. Langkah untuk memasang widget ini adalah sebagai berikut :

1. Pastikan bahwa sobat telah login ke blogger sobat, kemudian pilih layout dan Edit HTML.
2. Jangan lupa tandai Expand Widget Templates.
3. Cari Kode berikut ]]></b:skin>


"Tips cepat mencari Kode yaitu dengan tekan tombol Ctrl+F kemudian paste Kode yang akan sobat cari"

4. Kemudian silahkan sobat masukan kode dibawah sebelum kode ]]></b:skin>
atau kedalam tag CSS


div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 71px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

untuk mengganti warna yang ada sobat dapat mengunjungi DISINI
5. Setelah kode tersebut dipasang kemudian ke langkah selanjutnya yaitu dengan copy kede dibawah :

<script src='http://www.geocities.com/fajar.info/tabview.js' type='text/javascript'/>
Letakan kode tersebut sebelum kode </head>
6. Setelah proses diatas selesai kemudian SAVE
7. Langkah selanjutnya yang sobat tuju adalah menu page elements
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Pasang Scripts berikut ini.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">

<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
<a>Tab 4</a>

</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Simpan apa yang akan sobat taruh di sini
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>


<div class="Page">
<div class="Pad">
Tab 4.1 <br />
Tab 4.2 <br />
Tab 4.3 <br />
</div>
</div>


</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Informasi :
+ untuk warna ungu silahkan sobat edit sesuai dengan lebar maupun tinggi widget yang akan sobat bikin.
+ Untuk warna biru muda silahkan sobat edit juga mau berapa banyak tab view yang sobat bikin (disini saya contohkan 4 widget)Tab. Ini juga merupakan Text apa yang akan tampil di widget tab view sobat (Menu utama Atas)
+ Text yang berkedip adalah Jika sobat akan menambahkan menu Tab View sobat.

Semoga sobat dapat memahami dan mencoba.

Sumber : Hoctor.blogspot.com dan trik-tips.blogspot.com



Related Posts by Categories



Comments :

1
Rusa Bawean said...
on 

wahh ribet juga yaaa
ntar2 deh aku coba
:)

Post a Comment

 

Followers