Cara Membuat Menu Multitab Di Sidebar Blog | Tutorial Lengkap

Cara Membuat Menu Multitab Di Sidebar Blog

Zona Internetku September 30, 2018

Cara Membuat Menu Multitab Di Sidebar Blog

Cara Membuat Menu Multitab Di Sidebar Blog. Menu Multitab adalah sebuah hidangan yg terdiri menurut beberapa tab yang di dalamnya sanggup digunakan buat meletakkan widget dalam blog kita supaya lebih terlihat mudah dan untuk menghemat ruang atau tempat yg akan dipakai buat widget lainnya, umumnya hidangan multitab ini pada pasang pada bagian sidebar dan pula footer blog.

Menu multitab ini memang memiliki kelebihan tersendiri yaitu untuk menciptakan tampilan banyak widget sebagai lebih minimaslis, akan tetapi hidangan ini juga memiliki sedikit kekurangan yaitu membuat blog manjadi sedikit nisbi lemo karena kode ini disusun berdasarkan css & juga javascript. Apabila kalian masih ingin memasang menu multitab buat dipasang di blog kalian, maka kalian bisa memasangnya menggunakan mengikuti tutorial dalam bawah ini.

Baca jua :

Cara Memasang Kotak Iklan Responsive Di Blog

Cara Membuat Related Post Untuk Blogspot

Cara Mengubah Widget Popular Post Menjadi Keren

Cara Praktis Untuk Memasang Menu Multitab Dengan Title Otomatis Widget Di Sidebar Blog

1. Pertama, Masuk ke dalam blog kalian

2. Selanjutnya kalian cari kode ]]</b:skin> atau </style> dan letakkan kode berikut ini di atasnya

			/* CSS Multi Tabs */ .vitabs, .vita-list {margin:0;} .vitabs .vita-list {padding:0;} .vitabs-menu {padding:0 0;margin:0;margin-bottom:0;border:1px solid #f1f1f1;border-bottom:0;} .vitabs-menu li{margin:0;font-size:13px;font-family:'Open Sans';font-weight:400;text-transform:uppercase;line-height:25px;width:auto;list-style:none;display:inline-table;padding:5px;background:#00a1d7;color:#fff;cursor:pointer;position:relative;transition:all .3s;} .vitabs-menu li:nth-child(3) {background:#00a1d7;color:#fff;} .vitabs-menu li:hover {background:#00a1d7;} .vitabs-menu li:nth-child(3):hover {background:#0b96c5;} .vitabs-menu .active-tab,.vitabs-menu .active-tab:nth-child(3){background:#fff;color:#858d8f;transition:all .3s} .vitabs-menu .active-tab:hover,.vitabs-menu .active-tab:nth-child(3):hover {background:#fff;color:#333;} .vitabs-menu li:before{font-family:Fontawesome;text-align:center;margin-right:5px} .vitabs-menu li:nth-child(1):before {content:&#39;\f006&#39;;} .vitabs-menu li:nth-child(2):before {content:&#39;\f09e&#39;;} .vitabs-menu li:nth-child(3):before {content:&#39;\f0e6&#39;;} .vitabs-content{padding:10px;background:#fff;margin-bottom:15px;border:1px solid #f1f1f1;border-top:0;} .vitabs-content .sidebar li {margin:0 0;padding:0 0 0 0;} .vitabs-content .widget li {background:#fff;color:#333;float:none;} .vitabs-content .widget li:last-child {border-bottom:none;} .vitabs-content .widget ul {background:#fff;color:#333;overflow:visible;}

3. Kemudian salin kode berikut ini dan letakkan kode berikut ini di atas kode tag </head>

			<script type='text/javascript'> //multitabs $(function(){$(&quot;.vitabs-1&quot;).mvitabs()}) </script>

4. Langkah selanjutnya, kalian letakkan kode berikut ini di bagian dalam sidebar wrapper kalian

Perhatian : Biasanya sidebar wrappper di beri nama "Sidebar Wrapper" pada atribut Id atau Class. Perlu di ingat juga bahwa setiap template memiliki atribut yang berbeda

Contoh : <div id='sidebar-wrapper'> atau <aside id='sidebar-wrapper'> bisa juga <div class='sidebar-wrapper'> atau <aside class='sidebar-wrapper'>

			<div class='vitabs vitabs-1'> <b:section class='vita-list vita-list-1 section' id='vita-list-1' showaddelement='yes'/> <b:section class='vita-list vita-list-2 section' id='vita-list-2' showaddelement='yes'/> <b:section class='vita-list vita-list-3 section' id='vita-list-3' showaddelement='yes'/>   </div>

5. Tahap berikutnya adalah letakkan kode berikut ini di atas kode </body>

			<script type='text/javascript'> //<![CDATA[// Simple Tab !function(a){"use strict";var b=function(b,c){var d=this;d.element=b,d.$element=a(b),d.vitabs=d.$element.children(),d.options=a.extend({},a.fn.mvitabs.defaults,c),d.current_tab=0,d.init()};b.prototype={init:function(){var a=this;a.vitabs.length&&(a.build(),a.buildTabMenu())},build:function(){var b=this,c=b.options,d=c.tab_text_el,e=c.container_class;b.tab_names=[],b.$wrapper=b.$element.wrapInner('<div class="'+e+'" />').find("."+e),b.vitabs.wrapAll('<div class="'+c.vitabs_container_class+'" />'),b.vitabs.each(function(c,e){var f,g=a(e),h=d;f=g.find(h).filter(":first").hide().text(),b.tab_names.push(f)}),a.isFunction(c.onReady)&&c.onReady.call(b.element)},buildTabMenu:function(){for(var b,c=this,d=c.options,e=d.vitabsmenu_el,f=c.tab_names,g="<"+e+' class="'+d.vitabsmenu_class+'">',h=0,i=f.length,j=function(){var a=arguments;return d.tmpl.vitabsmenu_tab.replace(/\{[0-9]\}/g,function(b){var c=Number(b.replace(/\D/g,""));return a[c]||""})};i>h;h++)g+=j(h+1,f[h]);g+="</"+e+">",c.$vitabs_menu=a(g).prependTo(c.$wrapper),b=c.$vitabs_menu.find(":first")[0].nodeName.toLowerCase(),c.$vitabs_menu.on("click",b,function(b){var d=a(this),e=d.index();c.show(e),b.preventDefault()}).find(":first").trigger("click")},show:function(b){var c=this,d=c.options,e=d.active_tab_class;c.vitabs.hide().filter(":eq("+b+")").show(),c.$vitabs_menu.children().removeClass(e).filter(":eq("+b+")").addClass(e),a.isFunction(d.onvitabselect)&&b!==c.current_tab&&d.onvitabselect.call(c.element,b),c.current_tab=b},destroy:function(){var a=this,b=a.options.tab_text_el;a.$vitabs_menu.remove(),a.vitabs.unwrap().unwrap(),a.vitabs.removeAttr("style"),a.vitabs.children(b+":first").removeAttr("style"),a.$element.removeData("mvitabs")}},a.fn.mvitabs=function(c,d){return this.each(function(){var e,f=a(this),g=f.data("mvitabs");e="object"==typeof c&&c,g||f.data("mvitabs",g=new b(this,e)),"string"==typeof c&&g[c](d)})},a.fn.mvitabs.defaults={container_class:"vitabs",vitabs_container_class:"vitabs-content",active_tab_class:"active-tab",tab_text_el:"h1, h2, h3, h4, h5, h6",vitabsmenu_class:"vitabs-menu",vitabsmenu_el:"ul",tmpl:{vitabsmenu_tab:'<li class="tab-{0}"><span>{1}</span></li>'},onvitabselect:null}}(window.jQuery,window,document); //]]> </script>

6. Setelah semua dirasa sudah selesai dan tidak ada masalah, silahkan kalian klik "Simpan Tema" kemudian refresh halaman browser kalian dan masuk ke dalam menu "Tata Letak"

Hasil Cara Membuat Menu Multitab Di Sidebar Blog

Jika menu bagian multitab pada sidebar sudah muncul, itu berarti anda sudah berhasil menerapkan tutorial ini

Itulah tutorial mengenai Cara Membuat Menu Multitab Di Sidebar Blog.

Baca jua :

Cara Menambahkan Widget Latest Post Di Blog

Cara Membuat Widget Author Box Keren Di Blog

6 Cara Memasang Social Media Share Button Pada Blog

Referensi :

30 September 2018 http://newjohnywuss.blogspot.com/2015/10/kode-membuat-multi-tab-di-sidebar-blog.html

Komentar

Posting Komentar

Postingan populer dari blog ini

4 Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP | Tutorial Lengkap

Gambar
4 Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP Dan Tablet . Smartphone atau yang lebih akrab disebut dengan gadget telah menjadi bagian kebutuhan pokok sehari hari, mulai dari untuk berkomunikasi, berbisnis, mencari informasi ataupun hanya untuk sekedar mencari hiburan seperti bermain game. Zona Internetku November 11, 2019 Tetapi tahukah kalian bahwa sinar biru (blue light) yang dipancarkan sang layar HP jua mengakibatkan radiasi dalam organ mata sebagai akibatnya mampu berdampak buruk bagi si pengguna gadget tersebut, terutama bagi orang yang melakukan semua aktifitasnya melalui HP, terlebih lagi jika mereka sanggup memakai HP lebih dari 8 jam setiap harinya yg padahal itu jelek bagi kesehatannya. Tapi kita juga masih sanggup buat mengurangi pengaruh atau resiko yg disebabkan sinar biru smartphone dengan memakai fitur fitur yg sudah disediakan sang pihak pengembang beberapa pelaksan...
Baca selengkapnya

Cara Mengubah Suasana Siang Menjadi Malam Di Photoshop | Tutorial Lengkap

Gambar
Cara Mengubah Suasana Siang Menjadi Malam Di Photoshop Cara Mengubah Suasana Siang Menjadi Malam Di Photoshop Zona Internetku September 11, 2016 Cara Mengubah Suasana Siang Menjadi Malam . Halo.. sob, selamat datang di zona internetku, pada tutorial kali ini saya akan memposting tutorial tentang cara mengubah suasana siang menjadi malam, efek kali ini memberikan kesan yang agak suram atau sepi karena biasanya susana di malam hari memang sangat menakutkan, tapi berbeda bagi para editor yang menggunakan efek ini untuk menciptakan suasana tertentu, yang tentu saja menggunakan aplikasi photoshop yang penuh dengan fitur fitur yang sangat keren, dan saya kali ini menggunakan aplikasi photoshop cs6 kalian juga bisa menggunakan aplikasi photoshop yang lain seperti photoshop cc yang selalu update dengan fitur fiturnya yang lebih keren dari generasi yang lainnya. tetapi itu semua tergantung dari bagaimana cara menggunakan aplikasi tersebut dengan keahlian kalian masing masing. Ok langsun...
Baca selengkapnya

5 Daftar Situs Yang Bisa Digunakan Untuk Belajar Memulai Bisnis | Tutorial Lengkap

Gambar
Lima Daftar Situs Yang Bisa Digunakan Untuk Belajar Memulai Bisnis Daftar Situs Yang Bisa Digunakan Untuk Belajar Memulai Bisnis. Untuk memulai sebuah bisnis atau berwirausaha yang sukses maka kita memerlukan pengetahuan dan pengalaman yang cukup untuk mengelola usaha tersebut, selain itu juga jika bisnis tersebut sudah berkembang besar maka diperlukan mentor yang profesional sehingga kita akan terbantu saat menangani masalah pada bisnis kita dan juga orang yang dapat dipercaya. Zona Internetku September 02, 2019 Berbicara soal usaha, aku akan membahasnya dari yang mendasar yaitu pengetahuan atau ilmu buat menemukan ide, memulai Untuk mempejalari semua itu kita bisa memperolehnya dengan belajar mengikuti sebuah kursus, pelatihan maupun seminar. Namun kita juga bisa mendapatkan semua ilmu tersebut melalui situs-situs di internet yang telah dibagikan secara gratis, untuk mengetahuinya silahkan simak daftarnya disini. Website Terbaik Untuk Belajar Dalam Memulai Bisnis 1. Trend...
Baca selengkapnya