Membuat Menu Tab View dengan JQuery
Cara Membuat Tab View dengan JQuery Efek Animasi Roll, ditambah sentuhan JQuery didalamnya. Misalnya Anda dapat melihat pada gambar di bawah:
Bagaimana Masbro, keren kan tab tampilan widget? selain tabview juga bisa membuat blog Anda tampak rapi. Yowes, mari kita mulai untuk membuatnya.
1. Login ke blogger sobat
2. Masuk ke design / desain
3. Pilih Tata Letak
4. Edit HTML
5. Kemudian melihat kode berkut: ]]></b:skin> (gunakan Ctrl + F pada sob keyboard), setelah tinggal bertemu menempatkan kode CSS berikut tepat di atas kode ]]></b:skin>
6. Setelah itu, cari kode </ head> setelah bertemu dan menempatkan kode javascript tepat di atas jQuery berikut:
8. Simpan tempalate, dan bro masih jauh neh ... pergi ke Layout / Desain, klik tombol Add New Widget / Tambah Widget, dan pilih HTML / Javascript. Kemudian pasang kode di bawah ini:
<ul class="slick">
<li title="tabsatu" class="slick active">Tab Satu Gan</li>
<li title="tabdua" class="slick active">Tab Dua Gan</li>
<li title="tabtiga" class="slick">Tab Tiga Gan</li>
</ul>
<div id="tabsatu" class="content-slick">
Taruhlah kode HTML/Javascript anda di Tab Satu
</div>
<div id="tabdua" class="content-slick">
Taruhlah kode HTML/Javascript anda di Tab Dua
</div>
<div id="tabtiga" class="content-slick">
Taruhlah kode HTML/Javascript anda di Tab Tiga
</div>
9. Sampai di sini Anda dapat membuat kulit jquery acara tab tampilan widget gulir. dan jangan lupa untuk menyimpan.
Keterangan:
Kode berani mengganti / isi dengan widget sobat inginkan.
dan untuk kode CSS, harap edit dan sesuaikan dengan template Anda. dan jika zoom ingin kasus blog saya, jangan lupa untuk memberikan komentar, saya akan membantu sebisa mungkin.
Dan lagi, jika Anda sudah ditemplate jquery-1.3.2.min.js? sarana untuk file.js 'tidak perlu ditambahkan lagi.
Itu mungkin Cara Membuat Tab View dengan JQuery Efek Animasi Roll, keberuntungan, mungkin berguna.
Bagaimana Masbro, keren kan tab tampilan widget? selain tabview juga bisa membuat blog Anda tampak rapi. Yowes, mari kita mulai untuk membuatnya.
1. Login ke blogger sobat
2. Masuk ke design / desain
3. Pilih Tata Letak
4. Edit HTML
5. Kemudian melihat kode berkut: ]]></b:skin> (gunakan Ctrl + F pada sob keyboard), setelah tinggal bertemu menempatkan kode CSS berikut tepat di atas kode ]]></b:skin>
#slick_area{background-color:#fff;padding:8px;margin:10px 0;line-height:18px}
#slick_area a{color:#000;text-decoration:none}
.slick_area a:hover{color:#fff}
ul.slick{margin:2px 5px 5px 5px;padding:0px}
ul.slick li{list-style:none;display:inline;background-color:transparent;padding:7px 18px;text-decoration:none;font-size:10px;text-color:#dedede;font-weight:bold;text-transform:uppercase;cursor:pointer;border:1px solid #585858}
ul.slick li:hover{border:1px dotted #f00}
ul.slick li.active{background-color:transparent;border:1px solid #585858;color:#dedede}
.content-slick{background-color:transparent;border:1px solid #585858;color:#dedede;min-height:0;padding:5px 5px 5px;text-align:left}
.content-slick ul{margin:10px;padding:0}
.content-slick ul li{list-style:none;border-bottom:0px solid #585858;padding:5px}
.content-slick ul li:last-child{border-bottom:none}
.content-slick ul li:hover,.content-slick ul li a:hover{display:block;background-color:transparent}
.content-slick ul li a{text-decoration:none;color:black;display:block}
#slick_area a{color:#000;text-decoration:none}
.slick_area a:hover{color:#fff}
ul.slick{margin:2px 5px 5px 5px;padding:0px}
ul.slick li{list-style:none;display:inline;background-color:transparent;padding:7px 18px;text-decoration:none;font-size:10px;text-color:#dedede;font-weight:bold;text-transform:uppercase;cursor:pointer;border:1px solid #585858}
ul.slick li:hover{border:1px dotted #f00}
ul.slick li.active{background-color:transparent;border:1px solid #585858;color:#dedede}
.content-slick{background-color:transparent;border:1px solid #585858;color:#dedede;min-height:0;padding:5px 5px 5px;text-align:left}
.content-slick ul{margin:10px;padding:0}
.content-slick ul li{list-style:none;border-bottom:0px solid #585858;padding:5px}
.content-slick ul li:last-child{border-bottom:none}
.content-slick ul li:hover,.content-slick ul li a:hover{display:block;background-color:transparent}
.content-slick ul li a{text-decoration:none;color:black;display:block}
6. Setelah itu, cari kode </ head> setelah bertemu dan menempatkan kode javascript tepat di atas jQuery berikut:
<script language='javascript' src='http://mbahyar-tabblog.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$('#tabdua, #tabtiga').hide();
$("ul.slick li").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content-slick").slideUp();
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$('#tabdua, #tabtiga').hide();
$("ul.slick li").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content-slick").slideUp();
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
8. Simpan tempalate, dan bro masih jauh neh ... pergi ke Layout / Desain, klik tombol Add New Widget / Tambah Widget, dan pilih HTML / Javascript. Kemudian pasang kode di bawah ini:
<ul class="slick">
<li title="tabsatu" class="slick active">Tab Satu Gan</li>
<li title="tabdua" class="slick active">Tab Dua Gan</li>
<li title="tabtiga" class="slick">Tab Tiga Gan</li>
</ul>
<div id="tabsatu" class="content-slick">
Taruhlah kode HTML/Javascript anda di Tab Satu
</div>
<div id="tabdua" class="content-slick">
Taruhlah kode HTML/Javascript anda di Tab Dua
</div>
<div id="tabtiga" class="content-slick">
Taruhlah kode HTML/Javascript anda di Tab Tiga
</div>
9. Sampai di sini Anda dapat membuat kulit jquery acara tab tampilan widget gulir. dan jangan lupa untuk menyimpan.
Keterangan:
Kode berani mengganti / isi dengan widget sobat inginkan.
dan untuk kode CSS, harap edit dan sesuaikan dengan template Anda. dan jika zoom ingin kasus blog saya, jangan lupa untuk memberikan komentar, saya akan membantu sebisa mungkin.
Dan lagi, jika Anda sudah ditemplate jquery-1.3.2.min.js? sarana untuk file.js 'tidak perlu ditambahkan lagi.
Itu mungkin Cara Membuat Tab View dengan JQuery Efek Animasi Roll, keberuntungan, mungkin berguna.
Tapi Kalau Udah Pake script JQery Di template Kita,Apa Bisa?soalnya Saya Coba Gagal
BalasHapuswah makasih gan ... berhasil ini .. elegant dan sangar
BalasHapus