Tab yang saya maksudkan seperti di blog ini (selama masih terpasang) dibagian bawah ada dua widget tabulasi dengan lain model. Langsung saja cara pemasangannya, O iya karena blog ini menggunakan blogspot sarana hostingnya, maka cara pemasangan juga di platform blogspot saja yang saya uraikan, karena jika anda sudah hosting sendiri dan memakai CMS seperti wordpress atau joomla, pasti tidak kesulitan menyesuaikan cara pemasangannya, saya anggap pemakai WP sudah pinter.
Pada edit HTML silahkan anda masukkan kode dibawah ini di bagian header, antara <head> dan </head>, kalau ada yang bingung silahkan saja diletakkan pas dibawah kode <head>.<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/>
Kalau sudah silahkan dipilih kode CSS dibawah ini untuk beberapa model yang telah saya buat, kalau anda sudah pinter CSS silahkan saja diobrak-abrik kodenya sesuai keinginan dan sesuai warna serta bentuk template anda. Pilih salah satu model kemudian letakkan di atas kode ]]></b:skin> dan save template anda.
Model 1 (seperti di blog ini yang sebelah kiri)/* tab model 1 ateonsoft.com */Model 2 (seperti di blog ini yang sebelah kanan)
div.Tabateonsoft div.TFs
{height: 30px; overflow: hidden;}
div.Tabateonsoft div.TFs a
{float: right; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 3px 3px 5px; 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-bottomleft: 10px; -moz-border-radius-topleft: 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 url('bg-tabateonsoft.jpg') no-repeat bottom right; -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;}
/* 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;}
Model 3 (Seperti di ayomaju.com di sidebar sebelah kiri bawah)
/* tab model 3 ateonsoft.com */
div.Tabateonsoft {margin:25px 0 0 0; font: normal 11px arial;}
div.Tabateonsoft div.TFs
{height:27px; overflow: hidden;}
div.Tabateonsoft div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; padding:3px 4px 3px 4px; margin:0 2px 0 0;letter-spacing:-0.01em;
background:#f0f0f0;
color: #333;
border:1px solid #CCCCCC;
}
div.Tabateonsoft div.TFs a:hover
{
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;}
div.Tabateonsoft div.TFs a.Active
{ background: #FFFFFF;
color:#f58220;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:200px; padding:0;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px; text-align:left;}
#sidebar div.Tabateonsoft div.Pages div.Page div.floor li { margin:0; padding:0;}
Model 4 (Seperti di situs Software Akuntansi sebelah kanan bawah)
/* tab model 4 ateonsoft.com */
div.Tabateonsoft {margin:15px 0 0 0; font: normal 11px arial;}
div.Tabateonsoft div.TFs
{height:28px; overflow: hidden; border:1px solid #ccc; border-bottom:0px;background:#f0f0f0;}
div.Tabateonsoft div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; padding:7px; margin:0; background:#f0f0f0; color: #333; border-right:1px solid #CCCCCC;}
div.Tabateonsoft div.TFs a:hover
{ background:#ccc;}
div.Tabateonsoft div.TFs a.Active
{ background: #333; color:#FFFFFF;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:150px; padding:0; border:1px solid #ccc; padding:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px; text-align:left;}
#sidebar div.Tabateonsoft div.Pages div.Page div.floor li {
margin:0; padding:0;}
Kalau sudah disimpan templatenya tinggal memasang tabnya di elemen halaman, dengan menambah widget baru dan pilih html/javascript lalu masukkan kode dibawah ini:
<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>
OK silahkan dicoba kalau berminat, silahkan diotak-atik dan dipelajar karena kalau diajari terlalu detil selain saya capek ngetiknya juga anda menjadi kurang kreatif, dicoba saja dulu dipasang dan lihat hasilnya kemudian edit sesuai keinginan. Anda juga bisa menambah tab. Silahkan amati pengulangan kode diatas dan coba, semoga berhasil. Bagi pengguna wordpress self hosting tabulasi inii bisa juga diintegrasikan di file function.php template anda dan menjadi makin otomatis. Sekian dulu kawan, pusing kenapa postingan rusli zainal sang visioner bisa ilang dari SERP, bisa gak jadi beramal kalau terus begitu kondisinya.
0 comments:
Post a Comment