Cara Membuat 3 Tab menu

Cara Membuat 3 Tab Menu Dengan JQuery Dan CSS - Kali ini saya akan menjelaskan mengenai Tips Blog yaitu Cara Membuat 3 Tab Menu Dengan JQuery Dan CSS, 3 Tab Menu ini sama dengan Menu Tab View yang pernah saya bahas pada posting Cara Mudah Membuat Menu Tab View kali ini 3 Tab Menu ini lebih mudah cara membuat nya dengan menggunakan JQuery Dan CSS, bahkan lebih keren, fungsi 3 Tab Menu ini bisa kamu gunakan untuk menghemat ruang di sidebar blog kamu, jadi krsimpulan nya saat 3 Tab Menu ini di klik maka akan langsung muncul widget yang kamu pasang pada Tab Menu ini contoh nya Recent Post, Random Post, Popular Post kamu bisa menyatukan nya dalam Tab Menu.Bagi kamu yang tertarik membuat 3 Tab Menu ini silahkan perhatikan baik-baik contoh yang akan saya berikan.

Berikut Cara Membuat 3 Tab Menu Dengan JQuery Dan CSS :

Pilih Add Gadget > HTML JavaScript dan Copy kode di bawah ini.

<style>
#tabbed_box_1 {margin: 0px auto 0px auto;width:300px;}
.tabbed_box h4 {font-family:Arial, Helvetica, sans-serif;font-size:23px;color:#ffffff;letter-spacing:-1px;margin-bottom:10px;}
.tabbed_box h4 small {color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0px;}
.tabbed_area {border:1px solid #494e52;background-color:#636d76;padding:8px;}
ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}
ul.tabs li {list-style:none;display:inline;}
ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;text-transform:uppercase;border:1px solid #464c54;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVBDh24Zp69jrT16tL8u5Y4vV7M6Mm2WZeY06KHxe_8cHYXR_A2pb97uxiEGNCHAM3nHVW6lFue_F3KJ3nH0V1chRho4cZgr8Azp1FaFM4mvwluHgrGH5vy5cZ_Adn_wdlsQPwzueDNT0/s1600/tab_off.jpg); background-repeat:repeat-x;background-position:bottom;}
ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}
ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhgPHYUSKsS0EclD8bK8A0AoYXz54h_CR449YI8_wYTq7AJMweKNvgu8JeIheJWteKkyO5vqzRVNhw6ZPvbNqryJvQBaSy2qaE2Sgbu0XGOX3WX_MhPROpqA65_ax31KrOC02kxEQXBLw/s1600/tab_on.jpg);background-repeat:repeat-x;background-position:top; }
.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;font-family:Arial, Helvetica, sans-serif; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg00PUsrLaEKjPN2dJPzIW-TWLEEPPbj3EfDWEFrHt8T9_tfZ7Omieyhz6TWMwpcXuJgaEo8DZt_AhVQUZlFrAYJEcX2lzeeo0L9T7msaavfpzkgMSLuvbLkRn7G1ZtCTAviAOzQhPeauA/s1600/content_bottom.jpg);background-repeat:repeat-x;background-position:bottom;}
#content_2, #content_3 { display:none; }
.content ul {margin:0px;padding:0px 20px 0px 20px;}
.content ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px;font-size:13px;}
.content ul li:last-child { border-bottom:none;}
.content ul li a {text-decoration:none;color:#3e4346;}
.content ul li a small {color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0px;}
.content ul li a:hover {color:#a59c83;}
.content ul li a:hover small {color:#baae8e;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
// When the document loads do everything inside here ...
$(document).ready(function(){
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(".content").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<ul class="tabs">
<li><a href="javascript:void(0);" title="content_1" class="tab active">Judul Tab 1</a></li>
<li><a href="javascript:void(0);" title="content_2" class="tab">Judul Tab 2</a></li>
<li><a href="javascript:void(0);" title="content_3" class="tab">Judul Tab 3</a></li>
</ul>
<div id="content_1" class="content">
TAB 1 : ISI DENGAN KODE SCRIPT ATAU YANG LAINNYA.
</div>
<div id="content_2" class="content">
TAB 2 : ISI DENGAN KODE SCRIPT ATAU YANG LAINNYA.
</div>
<div id="content_3" class="content">
TAB 3 : ISI DENGAN KODE SCRIPT ATAU YANG LAINNYA.
</div>
</div>

Isi kode yang berwarna biru dengan kode Script atau Gadget bawaan dari Blogger, dan masih banyak lainnya,
Ganti kode yang berwarna merah dengan Judul.

Jika sobat kurang paham saya akan memberikan contoh nya.

<style>
#tabbed_box_1 {margin: 0px auto 0px auto;width:300px;}
.tabbed_box h4 {font-family:Arial, Helvetica, sans-serif;font-size:23px;color:#ffffff;letter-spacing:-1px;margin-bottom:10px;}
.tabbed_box h4 small {color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0px;}
.tabbed_area {border:1px solid #494e52;background-color:#636d76;padding:8px;}
ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}
ul.tabs li {list-style:none;display:inline;}
ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;text-transform:uppercase;border:1px solid #464c54;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVBDh24Zp69jrT16tL8u5Y4vV7M6Mm2WZeY06KHxe_8cHYXR_A2pb97uxiEGNCHAM3nHVW6lFue_F3KJ3nH0V1chRho4cZgr8Azp1FaFM4mvwluHgrGH5vy5cZ_Adn_wdlsQPwzueDNT0/s1600/tab_off.jpg); background-repeat:repeat-x;background-position:bottom;}
ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}
ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhgPHYUSKsS0EclD8bK8A0AoYXz54h_CR449YI8_wYTq7AJMweKNvgu8JeIheJWteKkyO5vqzRVNhw6ZPvbNqryJvQBaSy2qaE2Sgbu0XGOX3WX_MhPROpqA65_ax31KrOC02kxEQXBLw/s1600/tab_on.jpg);background-repeat:repeat-x;background-position:top; }
.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;font-family:Arial, Helvetica, sans-serif; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg00PUsrLaEKjPN2dJPzIW-TWLEEPPbj3EfDWEFrHt8T9_tfZ7Omieyhz6TWMwpcXuJgaEo8DZt_AhVQUZlFrAYJEcX2lzeeo0L9T7msaavfpzkgMSLuvbLkRn7G1ZtCTAviAOzQhPeauA/s1600/content_bottom.jpg);background-repeat:repeat-x;background-position:bottom;}
#content_2, #content_3 { display:none; }
.content ul {margin:0px;padding:0px 20px 0px 20px;}
.content ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px;font-size:13px;}
.content ul li:last-child { border-bottom:none;}
.content ul li a {text-decoration:none;color:#3e4346;}
.content ul li a small {color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0px;}
.content ul li a:hover {color:#a59c83;}
.content ul li a:hover small {color:#baae8e;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
// When the document loads do everything inside here ...
$(document).ready(function(){
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(".content").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<ul class="tabs">
<li><a href="javascript:void(0);" title="content_1" class="tab active">Tutorial Blog</a></li>
<li><a href="javascript:void(0);" title="content_2" class="tab">Lifestyle</a></li>
<li><a href="javascript:void(0);" title="content_3" class="tab">Anime</a></li>
</ul>
<div id="content_1" class="content">
<script style="text/javascript"> var numposts = 15; var standardstyling = true; </script> <script type="text/javascript" src="http://kodecode.googlecode.com/files/judullabel_tertentu.js"></script> <ul> <script src="http://sakra.blogspot.com/feeds/posts/default/-/Tutorial%20Blog?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script> </ul>
</div>
<div id="content_2" class="content">
<script style="text/javascript"> var numposts = 15; var standardstyling = true; </script> <script type="text/javascript" src="http://kodecode.googlecode.com/files/judullabel_tertentu.js"></script> <ul> <script src="http://sakra.blogspot.com/feeds/posts/default/-/lifestyle?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script> </ul>
</div>
<div id="content_3" class="content">
<script style="text/javascript"> var numposts = 15; var standardstyling = true; </script> <script type="text/javascript" src="http://kodecode.googlecode.com/files/judullabel_tertentu.js"></script> <ul> <script src="http://sakra.blogspot.com/feeds/posts/default/-/anime?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script> </ul>
</div>
</div>

Contoh diatas saya menggunakan Cara Menampilkan Posting Berdasarkan Label, jika sobat mau menggunakan cara diatas sobat tinggal ganti kode yang berwarna biru dengan URL blog kamu dan yang merah dengan Label kamu (Gunakan kode %20 untuk label yang mempunyai dua kata)

Cara diatas hanya sebagai cotoh sobat boleh letakan kode script lainnya seperti Facebook Fan Page, dan yang lainnya

Cara Membuat 3 Tab menu

Written By budi irawan on Rabu, 22 Agustus 2012 | 11.26

0 komentar:

Speak up your mind

Trending Topic

Popular Posts

Categories