Cara 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>
<div id=”c1″>
<a href=”#c1″ title=”First”>First</a>
<div>
<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>
<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>
<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.

Read more: Membuat Navigasi Tab CSS3 Keren untuk Blogger | Tempat Blogging http://mas-basir.blogspot.com/2013/04/membuat-navigasi-tab-css3-keren-untuk.html#ixzz2Uhzg1m3g
Dilarang copy paste artikel tanpa menggunakan sumber link – DMCA Protected
Under Creative Commons License: Attribution
Follow us: @TempatBlogging on Twitter | TempatBlogging on Facebook

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s