Kamis, 12 April 2012

Cara Membuat 3 Tab Menu Dengan JQuery Dan CSS


By on 20.09

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://lh5.googleusercontent.com/-4oB3c0hJXFo/TwgIZu7CB3I/AAAAAAAAUfM/0yDsmg_GI54/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://lh4.googleusercontent.com/-w4udt2FfX80/TwgIZHBXHcI/AAAAAAAAUfI/p4LDF-CsN7E/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://lh6.googleusercontent.com/-35jZQ4g9ijI/TwgIabuIPhI/AAAAAAAAUfU/4pH5w6Ptzwo/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://lh5.googleusercontent.com/-4oB3c0hJXFo/TwgIZu7CB3I/AAAAAAAAUfM/0yDsmg_GI54/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://lh4.googleusercontent.com/-w4udt2FfX80/TwgIZHBXHcI/AAAAAAAAUfI/p4LDF-CsN7E/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://lh6.googleusercontent.com/-35jZQ4g9ijI/TwgIabuIPhI/AAAAAAAAUfU/4pH5w6Ptzwo/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://blazerracing.blogspot.com/feeds/posts/default/-/Tutorial%20Blog?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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://blazerracing.blogspot.com/feeds/posts/default/-/lifestyle?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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://blazerracing.blogspot.com/feeds/posts/default/-/anime?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;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

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

18 komentar:

  1. kalau lebih dari 3 bisa ngga mas?
    http://www.dheqs.blogspot.com

    BalasHapus
  2. mas,
    bikin tutor mengenai cara membuat logo seperti blazerracing donk....pliss........
    klo udah jangan lupa kasi tau di fb saya,cimotivator....
    thank mas..

    BalasHapus
  3. Sebenarnya Logo Blazer Blog di buat nya dengan bantuan sebuah situs silahkan kunjungi http://www.logosnap.com

    BalasHapus
  4. kalo popular post dan komentar terbaru script nya apa .
    bales ke email saya yah
    is_smile182@yahoo.com

    BalasHapus
  5. untuk script popular post ane ga tahu dan untuk komentar terbaru silahkan cari aja di google

    BalasHapus
  6. sekedar jujur ,setelah aku coba beberapa kali namun tetap saja ndk bisa.......mungkin aku kurang teliti ya bro........?salam blogger

    BalasHapus
  7. NB : Buat sobat yang ada recent post berjalan di blog nya, 3 tab menu diatas tidak akan berfungsi atau teliti lagi dengan baik.

    BalasHapus
  8. aku sih bisa tapi sayang tab atasnya gak setara....ada satu ke bawah jadi kurang bagus....gimana solusinya gan? hancur mina....

    BalasHapus
  9. Supaya sesuai silahkan sobat utak atik utnuk mengatur lebar nya silahkan cari kode width, ubah sesuai dengan blog anda

    BalasHapus
  10. thanks infonya mas, sangat membantu

    BalasHapus
  11. saya mau tanya tapi tapi bukan mengenail judul artikel diatas, cara bikin Most RECENT, Most POPULAR, Most COMMENTED itu gimana seperti punya mas? maksud saya biar semuanya sama. mohon bantuan mas soalnya saya blog pemula belum terlalu paham soal kode2 html dan css. blog saya http://omgelenk.blogspot.com jika mas bersedia membantu tolong kirim ke email saya camarada_87@rocketmail.com. Trima ksih.

    BalasHapus
  12. Hmm baiklah.
    Most RECENT (Terbaru): saya bikin secara manual, jadi tidak otomatis.
    Most POPULAR : Itu pun secara manual, tidak otomatis.
    Most COMMENTED : Popular post berdasarkan jumlah komentar, jika mau membuatnya silahkan cari di google dengan kata kunci Popular Post Berdasarkan Jumlah Komentar pasti ada

    BalasHapus
  13. mas mau tanya bagaimana cara bikin itu navbar bisa gak ikut turun

    BalasHapus
  14. ini yg Q cari2.. makasih sob.
    http://indodetik.blogspot.com/

    BalasHapus