semoga memberikan inspirasi bagi Anda.
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 dan , kalau ada yang bingung silahkan saja diletakkan pas dibawah kode .
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 ]]> 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:
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 komentar:
Posting Komentar