.jpg)
Tabs with opacity Effects merupakan sebuah tab multi fungsi yang bisa digunakan untuk melakukan posting dengan muatan teks, gambar ataupun KODE HTML. Penampilannya yang exotic tentunya akan memberikan citra lebih bagi penampilan sebuah web atau blog. Kamu bisa melihat penampilannya dengan KLIK DEMO.D e m o :
Silahkan buka demonya melalui link berikut. Dalam demo tidak dipergunakan background image seperti dalam kode css di bawah atau seperti yang terlihat di screenshoot, namun hanya menggunakan background color.
Cara membuat Auto Hide Box :
Copy dan simpan KODE CSS dan Javscript berikut di bagian head di antara tag <head> dan tag </head>. Kode css bisa disimpan di atas KODE ]]></b:skin> dan javascript di bawah kode <head> kemudian gunakan KODE HTML di bagian body di antara tag <body> dan tag </body> atau pada saat posting. Jika bog anda sudah menggunakan jQuery 1.3.2 atau versi yang lebih baru silahkan gunakan javascriptnya saja.
Cara Menggunakan Kode :
Catatan/Keterangan :
Penting!
Seluruh background image harus anda download kemudian diupload di blogger agar bisa berfungsi dengan sempurna!
Update » Kamis KLIWON, Maret, 08, 2012
Silahkan buka demonya melalui link berikut. Dalam demo tidak dipergunakan background image seperti dalam kode css di bawah atau seperti yang terlihat di screenshoot, namun hanya menggunakan background color.
Cara membuat Auto Hide Box :
Copy dan simpan KODE CSS dan Javscript berikut di bagian head di antara tag <head> dan tag </head>. Kode css bisa disimpan di atas KODE ]]></b:skin> dan javascript di bawah kode <head> kemudian gunakan KODE HTML di bagian body di antara tag <body> dan tag </body> atau pada saat posting. Jika bog anda sudah menggunakan jQuery 1.3.2 atau versi yang lebih baru silahkan gunakan javascriptnya saja.
Kode CSS :
<style type="text/css">
h3.green, h3.grey{
padding:4px 10px;
font-family:Arial;
font-weight:bold;
font-size:14px;
}
h3.green{color:#81C791;}
h3.grey{color:#cccccc;}
p.yellow{font-family:12px Times New Roman 900;color:#ffff00;}
ul.GRtabnav{
list-style:none;
margin:0;
padding:0;
}
ul.GRtabnav li{
display:inline;
}
ul.GRtabnav li a{
font-family:verdana;
font-weight:600;
color:#fff;
font-size:14px;
padding:5px 5px;
background:#ccc url("http://gubhugreyot-background.googlecode.com/svn/small/bgGrad-bluelight-31x30.gif");
border:2px solid #333333;
text-decoration:none;
}
ul.GRtabnav li a.selected, ul.GRtabnav li a:hover{
background:#333 url("http://gubhugreyot-background.googlecode.com/svn/small/bgGrad-orangeblack-8x45.gif") repeat-x;
color:#ffcc33;
padding-top:6px;
}
ul.GRtabnav li a:focus{
outline:0;
}
div.GRtabs > div{
font-family:Georgia, "Times New Roman", Times, serif;
background:#244e8a url("http://gubhugreyot-background.googlecode.com/svn/small/bgGrad-blueblack-17x446.gif") top left repeat-x;
font-weight:550;
font-size:12px;
width:450px;
height:300px;
padding:8px;
margin-top:3px;
border:6px double #999;
border-top:12px double #999;
overflow:auto;
}
div.GRtabs{
opacity:0.6;
filter:alpha(opacity=60);
transition:0.7s;
-o-transition:0.7s;
-moz-transition:0.7s;
-webkit-transition:0.7s;
-ms-transition:0.7s;
}
div.GRtabs:hover{opacity:1.0;filter:alpha(opacity=100);}
div.GRtabs > div h3{
margin-top:0;
height:30px;
font-size:14px;
line-height:28px;
padding-bottom:2px;
background:url("http://gubhugreyot-background.googlecode.com/svn/small/bgGrad-coklatgrad-26x27.gif");
border:1px dotted #777;
border-radius:3px;
font-family:Arial;
letter-spacing:-1px;
text-transform:uppercase;
}
#first{color:#66ffcc;}
#second{color:#99e1fc;}
#third{color:#92e1fc;}
#four{color:#fdeba3;}
.waste{min-height:1000px;}
</style>Javascript :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function () {
var tabContainers = $('div.GRtabs > div');
tabContainers.hide().filter(':first').show();
$('div.GEtabs ul.GRtabnav a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.GRtabs ul.GRtabnav a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
//]]>
</script>xHTML :
<div class="GRtabs"> <ul class="GRtabnav"> <li><a href="#first">Tab-1</a></li> <li><a href="#second">Tab-2</a></li> <li><a href="#third">Tab-3</a></li> <li><a href="#four">Tab-4</a></li> </ul> <div id="first"> <h3 class="green">Title Tab Pertama (1)</h3><p class="yellow">Konten Tab Pertama (1)</p> <p>Konten dari Tab Pertama (1)</p> </div> <div id="second"> <h3 class="grey">Title Tab kedua (2)</h3><p class="yellow">Konten tab kedua (2)</p> <p>Konten dari Tab Kedua (2)</p> </div> <div id="third"> <h3 class="green">Title Yab ketiga (3)</h3> <p>Konten dari Tab Ketiga (3)</p> </div> <div id="four"> <h3 class="grey">Title Tab keempat (4)</h3> <p><img src="URL-image.jpg" width="100" height="75" style="float:left;margin:5px 12px 5px 0;"/>Konten dari Tab Keempat (4)</p> </div> <div class="waste"></div> </div>
Cara Menggunakan Kode :
- Login ke Blogger.
- Setelah halaman dasbor (Dasboard) terbuka, cari dan klik Design (Rancangan).
- Lanjutkan dengan klik Edit HTML
- Lakukan Backup Template.
- Cari kode <head> kemudian copy dan pastekan javascript tepat di bawahnya.
- Cari kode <]]></b:skin>. Copy dan pastekan kode css tepat di atasnya.
- Klik Simpan Template (Save Template).
- Lanjutkan dengan menggunakan xHTML.
- Gunakan xHTML di elemen sidebar atau yang lain. Simpan kode melalui Add a Gadget yang terdapat di Elemen Laman (Page Elemen).
- Anda bisa juga menggunakan tab ini di halaman posting. Jika digunakan di halaman posting seluruh xHTML harus dibuat dalam bentuk rapat (tak terputus).
Catatan/Keterangan :
- Anda dapat membuka Special Tutorials yang ada di kolom sebelah kiri halaman untuk mendapatkan panduan tentang cara backup template, cara cepat cari kode html di template serta cara menyimpan kode html, javascript dan kode css.
- Tinggi tabs dapat disesuaikan dengan kebutuhan dan ruang yang tersedia di halaman blog dengan merubah ukuran height pada KODE CSS (di syntax div.GRtabs > div {)
- Lebar tabs dapat disesuaikan dengan kebutuhan dan ruang yang tersedia di halaman blog dengan merubah ukuran width pada KODE CSS (di syntax div.GRtabs > div {). Kamu bisa menggantinya juga dengan width:auto; --> Lebar tab langsung menyesuaikan diri dengan lebar ruang yang tersedia.
- Penampilan tab dapat dirubah dengan mengganti beberapa background image yang digunakan.
Penting!
Seluruh background image harus anda download kemudian diupload di blogger agar bisa berfungsi dengan sempurna!
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
Update » Kamis KLIWON, Maret, 08, 2012 » Happy Blogging - gubhugreyot «
silahkan tulis sebuah komentar!
gubhug reyot