Membuat Navigasi Tab CSS3 Keren untuk Blogger

Dalam tutorial ini saya akan menjelaskan bagaimana menambahkan Navigasi Tab CSS3 Keren untuk Blogger. Anda dapat menambahkannya ke blogger sebagai widget. Jika Anda ingin menambahkan seperti fan page, tombol sosial atau kode untuk tombol individu, Anda dapat menambahkannya dengan mengganti deskripsi. Dukungan ini dengan IE 7 dan IE 8, silakan simak tutorial ini.

1. Pergi ke Blogger.com >> Situs Anda.
2. Klik Template >> Edit HTML.
3. Sekarang Anda baru masuk dalam Blogger HTML Editor tekan CTRL+F untuk mencari code ]]> </ b: skin>
4. Pastekan Kode dibawah ini di atas kode ]]> </ b: skin>

/* The CSS Code for the tabs menu */
#btabcontainer{
 margin:0 auto;
 width:280px;
 margin-top:4%;
}
.btab-container {
 position: relative;
 width: 100%;
 z-index:0;
}
.btab-container > div {
 display: inline;
}
.btab-container > div > a {
 position: relative !important;
 text-decoration: none;
 color: #D7D7D7;
 display: inline-block;
 padding: 4px 14px;
 font-size:15px;
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 font-weight:bold;
 text-transform:uppercase;
 margin:2px;
 background: #4C4648; /* old browsers */
 background: -moz-linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%);
 background: linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%);
 -pie-background: linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4C4648), color-stop(52%,#474344), color-stop(100%,#2F2D2E));
 border:dashed 2px #CFA840;
 padding: 4px 14px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 0px;
 border-radius: 3px;
    text-shadow: 0 -1px 0 #000000;
 -moz-box-shadow: 0 4px 10px -5px #000000;
 box-shadow: 0 4px 10px -5px #000000;
 -webkit-box-shadow: 0 4px 10px -5px #000000;
}
.btab-container > div:not(:target) > a {
}
.btab-container > div:target > a {
    background: none repeat scroll 0 0 #948a81;
    text-shadow: 0 1px 0 #4C4648;
}
.btab-container > div > div {
 background: #4C4648;
 background: -moz-linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%);
 background: linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%);
 -pie-background: linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4C4648), color-stop(84%,#474344), color-stop(100%,#2F2D2E));
 -moz-box-shadow: 0 0 12px 1px #000000 inset;
 -webkit-box-shadow: 0 0 12px 1px #000000 inset;
 box-shadow: 0 0 12px 1px #000000 inset;
 z-index: -2;
 top: 50px;
 padding: 20px;
 border:solid 6px #4C4648;
 outline: 2px dashed #CFA840;
 outline-offset: -8px;
 min-height:250px;
 position:absolute;
}
.btab-container > div:not(:target) > div {
 position: absolute;
}
.btab-container > div:target > div {
 position: absolute;
 z-index: 3 !important;
}
div.tab-content{
 padding-bottom: 70px;
    padding-left: 20px;
    padding-right: 20px;
}
.btab-content img{
 margin:0 auto;
 display:block;
 padding-bottom: 20px;
    padding-top: 10px;
}

5. Masuk ke bagian Layout / Design
6. Klik Tambahkan Widget.
7. Pilih HTML/Javascript.
8. Copy Kode dibawah ini dan Pastekan di HTML/Javascript.

 <div id="btabcontainer">
<div class="tab-container">
 <div id="c1">
  <a href="#c1" title="First">First</a>
   <div class="tab-content">
            <h3>This is the first tab</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. porttitor est et rhoncus.Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus ipsum nunc.</p>
    </div>
 </div>
   
 <div id="c2">
  <a href="#c2" title="Second">Second</a>
   <div class="tab-content">
            <h3>Add as many tabs as you like</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.</p>
 
            </div>
 </div>
 <div id="c3">
  <a href="#c3" title="Third">Third</a>
   <div class="tab-content">
            <h3>5 Preset Styles &amp; Color Themes</h3>
            <p>Consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.</p>
            </div>
 </div>
</div>
</div>

Information :

•  Anda dapat mengubah deskripsi dan nama tombol dengan selera Anda.

9. Save HTML/Javascript

Sekian dulu Postingan Artikel kali ini yang membahas tentang Membuat Navigasi Tab CSS3 Keren untuk Blogger semoga artikel di atas dapat membantu anda, dan bermanfaat bagi anda.

Share this post