 |
| bagi widget jadi 4kolom |
Pada tutorial kali ini saya akan memaparkan bagaimana cara mendapatkan 1 widget, tetapi dapat di bagi menjadi 4 kolom..
untuk lebih jelasnya, perhatikan bagian kiri pada blog saya,,,,. disitu nampak ada 4 kolom dalam 1 widged, dimana nampak kolom berita, link, profil, dan sms gratis..
Bagaimana cara membuatnya?
Sebenarnya gampang, kita dapat menyatukan beberapa widged menjadi satu widged aja, ini berfungsi selain menjadikan penampilan blog kita menjadi rapi, juga membuat blog kita lama loadingnya...
Berikut cara kerjanya...
4. Silahkan cari kode ]]></b:skin> Tekan CTRL+F untuk mengeluarkan kotak pencarian
5. Setelah ketemu kode diatas silahkan letakkan kode dibawah ini 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: 0px;
}
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: #333;
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; color: #ffffff;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:333px; border:1px solid #EFF0F1; padding:0;background: #222222; -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:12px;padding: 3px 5px; text-align:left;}
6. Selanjutnya cari kode </head> jika udah ketemu, proses selanjutnya adalah, letakan kode di bawah ini diatas kode </head>
<script src='http://zuazz.googlecode.com/files/ateonsoft_tab.js' type='text/javascript'/>
7. Save template
8. Masuk ke tab Elemen laman
9. Tambahkan widget HTML/JavaScript
10. Silakan letakkan kode di bawah ini di dalam widget 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>
KETERANGAN
- Untuk kode yang di masukan pada html, jika anda mau merubahnya sesuai keinginan sendiri, maka anda dapat merubah kode yang berwarna bitu, dimana tab 1 dapat anda rubah dengan judul widged yang akan anda pasang, begitu pula tab2 dan seterusnya
- Untuk kode berwarna biru yang berjudul " disini letakan kode untuk tab 1,2,3,dan 4 dapat di letakan kode html dari widged yang ingin anda letakan...
SAVE DAN LIHAT HASILNYA..
