_ap_ufes{"success":true,"siteUrl":"lifeblogid.com","urls":{"Home":"https://lifeblogid.com","Category":"https://lifeblogid.com/category/pengetahuan/agama/","Archive":"https://lifeblogid.com/2017/05/","Post":"https://lifeblogid.com/2017/05/20/ketahui-penyebab-bayi-muntah-setelah-minum-asi/","Page":"https://lifeblogid.com/kuppee-japanese-quality-international-specifications/","Attachment":"https://lifeblogid.com/ibu-hamil/","Nav_menu_item":"https://lifeblogid.com/2016/04/25/199450/","Mts_ad":"https://lifeblogid.com/?mts_ad=199934","Feedback":"https://lifeblogid.com/?post_type=feedback&p=199979"}}_ap_ufee

Membuat Tab Pada Menu Blog

Untuk para blogger mungkin Membuat Tab Pada Menu Blog nya adalah suatu keharusan untuk membuat blog nya menjadi lebih rapi, indah, dan layak di pandang. biasanya cara membuat tab ini lumayan rumit untuk di lakukan karena berhubungan dengan HTML. tapi anda tidak perlu khawatir karena saya akan menjelaskan tentang Cara Membuat Tab Pada Menu Blog agar blog yang anda buat dapat rapi sesuai dengan keinginan anda mau meletakkan di mana postingan ini.  berikut ini adalah Cara Membuat Tab Pada menu Blog.

 

Membuat Tab Pada Menu Blog

Membuat Tab Pada Menu Blog

Langkah-langkah Membuat Tab Pada Menu Blog:

1. “Login” ke blogger anda untuk Cara Membuat Tab Pada Menu Blog

2. Pilih Tab “Designer atau Rancangan” untuk Cara Membuat Tab Pada Menu Blog

3. pilih “Edit HTML” untuk Cara Membuat Tab Pada Menu Blog

4. carilah kode ]]></b:skin>

5. Copy kode di bawah ini dan letakkan kode tersebut di atas kode ]]></b:skin>

KODE:

#tabs{
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
font-family: Arial, Helvetica;
font-size: small;
}

#tabs li{
float: left;
}

#tabs a{
position: relative;
background: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(to bottom, #fff, #ddd);
padding: .5em 3.5em;
float: left;
text-decoration: none;
width: auto;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
border-radius: 5px 0 0 0;
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.4);
box-shadow: 0 2px 2px rgba(0,0,0,.4);
}

#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after{
background: #fff;
}

#tabs a:focus{
outline: 0;
}

#tabs a::after{
content:”;
position:absolute;
z-index: 1;
top: 0;
right: -.5em;
bottom: 0;
width: .7em;
background: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(to bottom, #fff, #ddd);
-moz-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
box-shadow: 2px 2px 2px rgba(0,0,0,.4);
-webkit-transform: skew(10deg);
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-o-transform: skew(10deg);
transform: skew(10deg);
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
border-radius: 0 5px 0 0;
border:#ddd;
}

#tabs #current a,
#tabs #current a::after{
background: #fff;
z-index: 3;
}

#content
{
background: #fff;
padding: 2em;
height: 220px;
position: relative;
z-index: 2;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
border-radius: 0 5px 5px 5px;
-moz-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

#content p
{
margin: 0 0 15px 0;
}

 

6. setelah itu cari kode </body>

7. selanjutnya yaitu copy kode di bawah ini dan letakkan kode ini di atas kode </body> tadi

KODE:

 

$(document).ready(function() {
$(“#content div”).hide(); // Initially hide all content
$(“#tabs li:first”).attr(“id”,”current”); // Activate first tab
$(“#content div:first”).fadeIn(); // Show first tab content

$(‘#tabs a’).click(function(e) {
e.preventDefault();
$(“#content div”).hide(); //Hide all content
$(“#tabs li”).attr(“id”,””); //Reset id’s
$(this).parent().attr(“id”,”current”); // Activate this
$(‘#’ + $(this).attr(‘title’)).fadeIn(); // Show content for current tab
});
})();

 

8. simpan template

9. Pilih Tab Design > Add Gadget > HTML/JavaScript

10. . Copy pastekan Kode di bawah ini:

<ul class=’glossymenu’> <li class=’current’><a href=’URL-Blog‘>Home</a></li>

<li><a href=’URL-Link-Tujuan1‘>JUDUL Tab</a></li>
<li><a href=’URL-Link-Tujuan2‘>JUDUL Tab</a></li>
<li><a href=’URL-Link-Tujuan3‘>JUDUL Tab</a></li>
<li><a href=’URL-Link-Tujuan4‘>JUDUL Tab</a></li>
<li><a href=’URL-Link-Tujuan5‘>JUDUL Tab</a></li>
<li><a href=’URL-Link-Tujuan6‘>JUDUL Tab</a></li>
<li><a href=’URL-Link-Tujuan7‘>JUDUL Tab</a></li>
</ul>
tapi sebelum itu anda harus menambahkan label atau kategori pada blog anda, caranya yaitu dengan menambahkan “label” pada widget  dan postingan anda di beri label. dan pada saat di kategori misalkan “software” maka isi label itu “software” semua. nah link software itu lah yang anda masukkan ke  ’URL-Link-Tujuan1‘ dengan judul Tab yaitu “SOFTWARE“.

sekian Cara Membuat Tab Pada Menu Blog yang telah saya berikan tutorial nya. beginilah Cara Membuat Tab Pada Menu Blog



Tulis Komentar