Colom Tab View dalam Blogspot
Dipostkan Oleh. BlogTermsApa Apa yang di Maksud dengan Tab View... dan Apa Kegunaanya..?
mungkin beginilah pertanyaan sebagain orang yang baru belajar membuat blog..
baik lah.. langsung aja ya.. soalnya saya juga masih belajar kok.. jadi agak bingung juga neh mau bicara panjang lebar.. yang pastinya ilmu ini saya dapat karena saya sering baca-baca dan langsung mempraktekkan apa yang saya baca.. dan ternyata hasilnya sangat berhasil.. saya senang jadinya.. karena selain mempercantik blog.. tab view ini sangat banyak kegunaanya.. seperti meringankan pergerakan pada blog dan juga mengirit ruangan halaman pada blog. buktikan ya...
nah.. sekarang akan saya terangkan cara-caranya..
Berikut ini cara-caranya :
Pertama-tama Login ke Blog anda, lalu pilih design kemudian edit HTML.
sebelum kita mengedit HTML blog terlebih dahulu download template anda untuk mencegah terjadinya kesalahan.. dan jika anda tidak berhasil membuat Tab view.. anda bisa mengembalikan template anda seperti semula dengan cara mengupload template yang tadi anda download..
ok.. mungkin sudah jelas keterangan saya sebelum kita memulai mengotak atik HTML blognya..
Setelah anda masuk ke halaman Edit HTML.. jangan lupa beri tanda centang pada sebalah kanan atas kotak halaman HTML..
lalu,
Pada Kotak HTML anda cari Code: ]]></b:skin>
untuk mempermudah pencarian code tersebut anda gunakan Ctrl+f pada keyboard anda..
setelah berhasil menemukan code : ]]></b:skin>
Lalu Copy Code Berikut ini dan Pastekan diatas Code diatas.
/* 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;}
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;}
Kemudian, Cari Code berikut : <head> dan letakkan Code dibawah ini tepat dibawah <head>
<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/>
Kemudian Save.
Langkah Terakhir..
setelah anda Save.. anda masuk ke halaman Design >> Page Elements
Pilih Menu HTML/Javascript
Lalu Copy Code Berikut ini Kedalam Halaman HTML/Javascript :
<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>
<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>
NOTE :
Well Done Deh .. Enter your stay and your Link View results ..
Good Luck ya .. CaaaH YoOOo ...! :)
Artikel Labels: Blogger, Tips dan Trik blog, Widget
0 comments: