- Back to Home »
- Blogging , HTML , Tutorials »
- Cara membuat Menu Tab View Keren dengan Efek jQuery
Posted by : Unknown
Juli 23, 2013
Selamat Sore Sahabat EXCLUSIVE.Itung-itung Sambil Menunggu Buka Puasa,Mending Saya Share Tutorial Saja*. Oke, Pada kesempatan kali ini saya posting sebuah Tutorial Blog yang sebelumnya ada orang yg meminta saya untuk Posting "Cara membuat Menu Tab View Keren dengan Efek jQuery" Pada Beberapa Hari yg Lalu.
Atau lihat gambar di atas.Kurang lebih nya seperti itulah tampilannya nanti.
Oke kita langsung saja ke Caranya:
• Masuk Blog anda Disini
• Buka Dashboard pada Blog anda.
• Lalu Pilih Menu --> TataLetak.
Contoh Gambar Menu --> TataLetak
• Pilih Widget HTML/JavaScript.
• Kemudian Copy Paste Kode dibawah ini kedalam Widget HTML/JavaScript tersebut:
<style type="text/css">
.tabber {
padding: 0px !important;
border: 0 solid #bbb;
}
.tabber h2 {
float: left;
margin: 0 4px 0 0;
font-size: 16px;
padding: 3px 3px;
border: 0px solid #fff;
margin-bottom: 0px;
overflow: hidden;
position: relative;
background: #378cff;
cursor:pointer;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
html .tabber h2.active {
background: #b9b9b9;
border-bottom: 0px solid #fff;
}
.tabber .widget-content {
border: 0px solid #bbb;
padding: 5px;
background: #fff;
clear:both;
margin:0;
}
.codewidget, #codeholder {
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://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3
});
});
</script><!-- Jangan hapus kode dibawah, agar widget bisa berfungsi --><div id='codeholder'><a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a></div>
• Lalu Save/Simpan,Dan Lihat Hasilnya :)
Catatan: Untuk menampilkan Menu seperti Iklan, Category, Followers dll. Silahkan anda letakkan Widget widget tersebut dibawah Widget Menu Tab View ini.
Contoh Gambar Widget Menu Tab View
Oke sekian Dulu Tutorial Dari Saya,Semoga Tutorial ini sangat Membantu anda dalam Hal-hal Ilmu Mempelajari Tentang Blogger.Terimakasih Telah Membaca dan Berkunjung :) Jangan Lupa Follow dan Coment nya Jika ini Sangat Membantu & Bermanfaat untuk Anda :)
1 komentar
Sebelum Berkomentar Mohon Patuhi Peraturan Berikut :
-Berkomentarlah yang sopan
-Jangan berkata yang dilarang/Kotor.
-Gunakanlah Google Acc / Name /URL , Usahakan Tidak memakai Anonym
-Dilarang Spam , Sara , Floods.
-Dilarang Chat Yang Berbaur Porno.
-Tidak menaruh live link, jika melarang akan saya hapus permanen.
Salam,Admin Lanz EXCLUSIVE
Terima Kasih.
boleh juga min buat bloger bloger baru sangat membantu sekali..
BalasHapusalat service laptop