Iklan 300 x 250

Random Post

Recent Post

 

Cara Membuat Tab View Blog

Text Resizer: Click for Resizer
Salah satu cara untuk menghemat tempat ialah dengan kita memasang tab view. Ukuranya yang kecil sangat efisien untuk memuat banyak tempat. Selain itu tab view juga dapat diisi dengan konten blog yang berupa link, gambar, teks, dan lain-lain. dan juga bisa memberikan sesuatu yang rapi. Sebagai contohnya lihatlah pada gambar dibawah ini.



Jadi, dengan tabview ini kita bisa mengirit tempat yang ada di blog kita, seperti diblog ini saya menggunakan 3 widget sekaligus ditabview. Ngirit tempat bukan,untuk membuat tab view ini,ikuti saja langkah-langkah dibawah ini.

  • Login ke Blogger dengan ID kalian
  • Pada dasbor pilh rancangan kemudian pilih Edit HTML
  • Jangan lupa back up template anda supaya aman dengan cara klik download template langkap
  • Langkah selanjutnya copy kode di bawah ini, lalu paste persis di atas kode ]]></b:skin>

/* tab model 2 ateonsoft.com */
div.Tabateonsoft div.TFs
{height: 30px; overflow: hidden;}
div.Tabateonsoft div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tabateonsoft div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabateonsoft div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}

  • Lalu letakkan script dibawah ini tepat dibawah kode </head>

<script src='http://nobinoku.googlecode.com/files/tabview2atensoft.js' type='text/javascript'/>

  • Kemudian Simpan Template dan Sekarang menuju ke Elemen halaman
  • Pilih Klik Tombol Add gadget pilih HTML/Javascript
  • Letakkan kode berikut dalamnya
<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 anda
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

Perhatikan tulisan yg berwarna:
Kuning : Judul Tab
Merah : Isi untuk masing-masing tab

  • Klik Simpan Selesai dech Buatnya

Selamat mecoba dan semoga berhasil.....


Artikel Terkait:

Nobi Noku Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Cara Membuat Tab View Blog
Dalam Kategori :
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.

9 komentar:

NOOR'S mengatakan... Reply Comment

info yang menarik, rasa2nya patut dicoba...
Makasih infonya....

salam hangat & sukses selalu...

Ijin disimpan sob, buat referensi membuat menu-menu seperti ini

123horas mengatakan... Reply Comment

Kok aku ndak bisa nyoba yha?

123horas mengatakan... Reply Comment

bisaa.. tapi tab berikutnya ga bisa di Klik...
alias ndak Muncul??

Itu Kenapa?
Berarti Ada masalaaaaaaah kah?
apakah bisa Mbantuuu?

ijin copas sahabat, bermanfaat tuk menghemat space, salam

Faris mengatakan... Reply Comment

belajar...belajar

hahahhah
bagus banget nih tutorialnya

Unknown mengatakan... Reply Comment

masih bungung ni.. :s:
soalnya posting blog anen masih dikit.. :z:

di coba gan
ty tutorialnya :u:

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q: :r: :s: :t: :u: :v: :w: :x: :y: :z:

Posting Komentar

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda.Blog ini Blog Do Follow,Trims atas kerja samanya

 
 
 

Temukan Kami Dalam FB

Sahabat Blogger

http://nobinoku.blogspot.com/

Tukeran Link Yuk..!! Silahkan copy kode di atas..!!
Saya akan segera link balik..!! Link & Banner Teman
powered by PRBbutton Powered by  MyPagerank.Net backlink Site Meter http://www.wikio.com Free Automatic Backlink
Check Google Page Rank
Cerita Seks Panas Dewasa 17Tahun
free counters
 
Copyright 2010 - 2011 © This Is My Art | Didukung Oleh : Blogger
Template Name : Evolution Magazine Template | Modification by : Argabluesky