Cara Membuat Tabulasi Sederhana (tab widget)

Sudah lama hanya dipenuhi dengan topik belajar SEO yang saya tidak juga mengerti sepenuhnya, apalagi sejak kontes Stop Drreaming Start Action bergulir, kok tidak pernah lagi membahas masalah mempercantik blog. Kali ini membahas kembali cara memberi sentuhan agar blog semakin cantik dimata manusia, karena tidak ada binatang yang perduli sama yang namanya blog.

Tabulasi sederhana berfungsi meletakkan link, gambar atau apapaun juga terserah selera. Keuntungannya adalah menghemat space sidebar maupun postingan dengan membaginya memiliki kamar sendiri-sendiri yang akan tampil saat tombol tab di klik. Banyak sekali sebenarnya cara membuat tab dan salah satunya dibawah ini.

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&#8217; 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 */
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;}

Model 2 (seperti di blog ini yang sebelah kanan)

/* 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”>
<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.

  • Trackback are closed
  • Komentar (0)

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: