Home »
Blogger
»
Buat Widget Tabview
Untuk mempercantik tampilan blog, sobat blogger bisa menambahkan menu ini ke dalam blog. Sebenarnya artikel ini sudah lama saya simpen, namun berhubung kesibukan saya didunia nyata, saya angkringin dulu artikel ini di draft blog saya.
Untuk memasangnya mari kita ikuti tutorialnya.
Berikut langkah-langkahnya:
1. Login ke blogger dengan akun sobat
2. Lalu Klik tab Design
3. Kemudian pilih Edit HTML
4. Cari kode ini ]]></b:skin>
5. Lalu Copy Kode berikut dan Pastekan diatas 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;}
6. Cari lagi kode <head>
7. Letakkan kode di bawah ini tepat di bawah kode <head>
<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/>
8. Simpan template sobat.
9. Kemudian pilih tab Page Elemens >> Add Widget >> HTML/Javascript
10. Copy kode di bawah ini dan pastekan ke Gadget sobat.
<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 -->
<div class="floor">
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>
<center><b>Get this Widget from <a target="_blank" href="http://www.clickgue.co.cc">here!!!</a></b></center>
Terakhir Save deh.
Label: Blogger
Buat Widget Tabview
Untuk memasangnya mari kita ikuti tutorialnya.
Berikut langkah-langkahnya:
1. Login ke blogger dengan akun sobat
2. Lalu Klik tab Design
3. Kemudian pilih Edit HTML
4. Cari kode ini ]]></b:skin>
5. Lalu Copy Kode berikut dan Pastekan diatas 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;}
6. Cari lagi kode <head>
7. Letakkan kode di bawah ini tepat di bawah kode <head>
<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/>
8. Simpan template sobat.
9. Kemudian pilih tab Page Elemens >> Add Widget >> HTML/Javascript
10. Copy kode di bawah ini dan pastekan ke Gadget sobat.
<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 -->
<div class="floor">
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>
<center><b>Get this Widget from <a target="_blank" href="http://www.clickgue.co.cc">here!!!</a></b></center>
Terakhir Save deh.
Label: Blogger
Artikel Sebelumya
Langganan:
Posting Komentar (Atom)
kalau lewat hp bs berhasil nggak ya masangnya?
sebenerx sih bisa saja.
tp kmgkinan gagal lbh besar.
Posting Komentar