Yang saya tau tab menu view digunakan untuk menghemat halaman blog, jadi hanya perlu satu widget untuk beberapa widget lain.
Ya, kaya 3 in 1 gtu deh, heee........
Contohnya seperti disamping ini,
Ada beberapa cara untuk membuat tab menu view,
Namun saya hanya share yang menggunakan html gadget
Copy kode ini
;<style type="text/css">
.blogtabs {padding: 0px !important;border:none;}
.blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #e0e0e0;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;color:#000}
html .blogtabs h2.active {background:#516B7B;color:#fff;}
.blogtabs .widget-content {border: 1px solid #ffffff;padding: 10px;-moz-box-shadow: 1px 1px 10px #ffffff;
-webkit-box-shadow:1px 1px 10px #000;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;;background: #e0e0e0;clear:both;margin:0;}
.btab, #showtabs {display:none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://infonetmu.googlecode.com/files/SimpleTabViewJQuery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({organictabs: 3});
});
</script>
<div id="showtabs"></div>
.blogtabs {padding: 0px !important;border:none;}
.blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #e0e0e0;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;color:#000}
html .blogtabs h2.active {background:#516B7B;color:#fff;}
.blogtabs .widget-content {border: 1px solid #ffffff;padding: 10px;-moz-box-shadow: 1px 1px 10px #ffffff;
-webkit-box-shadow:1px 1px 10px #000;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;;background: #e0e0e0;clear:both;margin:0;}
.btab, #showtabs {display:none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://infonetmu.googlecode.com/files/SimpleTabViewJQuery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({organictabs: 3});
});
</script>
<div id="showtabs"></div>
Berikut caranya :
1. Masuk ke akun blog sobat
2. Masuk ke Tata Letak
3. Ntar pilih Tambah Gadget
4. Lalu pilih HTML/Javascript
5. Paste kan kode diatas
6. Terakhir disimpan dan
7. Lihat hasilnya
Sekian, semoga bermanfaat
Wassalamu'alaikum
0 komentar:
Posting Komentar