Membuat Menu Bar Sederhana Menggunakan CSS3 untuk Blogger

Membuat Menu Bar Sederhana dengan CSS3 untuk Blogger - Ini adalah Murni CSS3 Navigasi Menu bar. Saya akan menjelaskan bagaimana untuk menambahkannya ke blogger. Menu ini baik-baik saja bekerja dengan setiap browser internet modern. Anda dapat menghubungkan dengan Link halaman utama Anda. saya Menggunakan CSS3 dan HTML.

All Menu

Langkah Langkah :

1. Masuk ke www.blogger.com

2. Pilih Blog Anda


3. Sekarang Anda klik Button EDIT HTML

4. Cari tag ]]> </ b: skin> dengan menggunakan Ctrl + F 

5. Paste kode di bawah Sebelum tag ]]> </ b: skin> 

/* The CSS Code for the menu starts here mas basir */
ul.tblog_cssTabs   {

 background: #848383;
 border:solid 1px #606060;
 padding: 0 75px;
 width: 705px;
 margin:20px 0;
 font-size:12px;
 font-weight:bold;
 background:-moz-linear-gradient(0% 100% 90deg,#737373, #9a9a9a);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#9a9a9a), to(#737373));
  box-shadow: inset 0 1px 0 0 #dfdfdf;
 -moz-box-shadow: inset 0 1px 0 0 #dfdfdf;
 -webkit-box-shadow: inset 0 1px 0 0 #dfdfdf;
 border-radius: 8px 8px;
 -moz-border-radius: 8px 8px;
 -webkit-border-radius: 8px 8px;

}
ul.tblog_cssTabs > li {
 background:#989898;
 color:#3a3a3a;
 border:solid 1px #606060;
 border-bottom:0;
 display: inline-block;
 margin: 10px 1px -1px;
 padding: 8px 20px;
 background:-moz-linear-gradient(0% 100% 90deg,#9a9a9a, #888888);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#888888), to(#9a9a9a));
 box-shadow: inset 0 1px 0 0 #dfdfdf;
 -moz-box-shadow: inset 0 1px 0 0 #dfdfdf;
 -webkit-box-shadow: inset 0 1px 0 0 #dfdfdf;
 text-shadow: 1px 1px 0 #d3d3d3;
}
ul.tblog_cssTabs > li.active,ul.tblog_cssTabs > li:hover {
 background:#ededed;
 background:-moz-linear-gradient(0% 100% 90deg,#f0f0f0, #d1d1d1) !important;
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d1d1), to(#f0f0f0)) !important;
 box-shadow: inset 0 1px 0 0 #fff;
 -moz-box-shadow: inset 0 1px 0 0 #fff;
 -webkit-box-shadow: inset 0 1px 0 0 #fff;
 text-shadow: none;
 cursor:pointer;
}
ul.tblog_cssTabs.blue{

 background: #237e9f;
 border-color:#20617f;
 background:-moz-linear-gradient(0% 100% 90deg,#217092, #2d97b8);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#2d97b8), to(#217092));
 box-shadow: inset 0 1px 0 0 #a8e3f0;
 -moz-box-shadow: inset 0 1px 0 0 #a8e3f0;
 -webkit-box-shadow: inset 0 1px 0 0 #a8e3f0;
}
ul.tblog_cssTabs.blue > li,ul.tblog_cssTabs.blue > li:hover {
 background:#2ca0c1;
 color:#1a4760;
 border-color:#20617f;
 background:-moz-linear-gradient(0% 100% 90deg,#2ca1c3, #2687aa);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#2687aa), to(#2ca1c3));
box-shadow: inset 0 1px 0 0 #a8e3f0;
 -moz-box-shadow: inset 0 1px 0 0 #a8e3f0;
 -webkit-box-shadow: inset 0 1px 0 0 #a8e3f0;
text-shadow: 1px 1px 0 #8cd9e8;

}
ul.tblog_cssTabs.blue > li.active {
  box-shadow: inset 0 1px 0 0 #fff;
 -moz-box-shadow: inset 0 1px 0 0 #fff;
 -webkit-box-shadow: inset 0 1px 0 0 #fff;
 text-shadow: none;
}
ul.tblog_cssTabs.orange{

 background: #d75125;
 border-color:#9c2c09;
background:-moz-linear-gradient(0% 100% 90deg,#d44b22, #ea753d);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ea753d), to(#d44b22));
 box-shadow: inset 0 1px 0 0 #f5b497;
 -moz-box-shadow: inset 0 1px 0 0 #f5b497;
 -webkit-box-shadow: inset 0 1px 0 0 #f5b497;
}
ul.tblog_cssTabs.orange > li, ul.tblog_cssTabs.orange > li:hover {
 background:#e1693e;
 color:#5a2818;
 border-color:#9c2c09;
 background:-moz-linear-gradient(0% 100% 90deg,#e47a48, #dd5733);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#dd5733), to(#e47a48));
box-shadow: inset 0 1px 0 0 #f5b497;
 -moz-box-shadow: inset 0 1px 0 0 #f5b497;
 -webkit-box-shadow: inset 0 1px 0 0 #f5b497;
text-shadow: 1px 1px 0 #f3c6b3;

}
ul.tblog_cssTabs.orange > li.active {
 box-shadow: inset 0 1px 0 0 #fff;
 -moz-box-shadow: inset 0 1px 0 0 #fff;
 -webkit-box-shadow: inset 0 1px 0 0 #fff;
 text-shadow: none;
}
/* End CSS Code for the menu starts here mas basir */
/* The CSS Code for the menu starts here mas basir */
ul.tblog_cssTabs   {

 background: #848383;
 border:solid 1px #606060;
 padding: 0 75px;
 width: 705px;
 margin:20px 0;
 font-size:12px;
 font-weight:bold;
 background:-moz-linear-gradient(0% 100% 90deg,#737373, #9a9a9a);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#9a9a9a), to(#737373));
  box-shadow: inset 0 1px 0 0 #dfdfdf;
 -moz-box-shadow: inset 0 1px 0 0 #dfdfdf;
 -webkit-box-shadow: inset 0 1px 0 0 #dfdfdf;
 border-radius: 8px 8px;
 -moz-border-radius: 8px 8px;
 -webkit-border-radius: 8px 8px;

}
ul.tblog_cssTabs > li {
 background:#989898;
 color:#3a3a3a;
 border:solid 1px #606060;
 border-bottom:0;
 display: inline-block;
 margin: 10px 1px -1px;
 padding: 8px 20px;
 background:-moz-linear-gradient(0% 100% 90deg,#9a9a9a, #888888);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#888888), to(#9a9a9a));
 box-shadow: inset 0 1px 0 0 #dfdfdf;
 -moz-box-shadow: inset 0 1px 0 0 #dfdfdf;
 -webkit-box-shadow: inset 0 1px 0 0 #dfdfdf;
 text-shadow: 1px 1px 0 #d3d3d3;
}
ul.tblog_cssTabs > li.active,ul.tblog_cssTabs > li:hover {
 background:#ededed;
 background:-moz-linear-gradient(0% 100% 90deg,#f0f0f0, #d1d1d1) !important;
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d1d1), to(#f0f0f0)) !important;
 box-shadow: inset 0 1px 0 0 #fff;
 -moz-box-shadow: inset 0 1px 0 0 #fff;
 -webkit-box-shadow: inset 0 1px 0 0 #fff;
 text-shadow: none;
 cursor:pointer;
}
ul.tblog_cssTabs.blue{

 background: #237e9f;
 border-color:#20617f;
 background:-moz-linear-gradient(0% 100% 90deg,#217092, #2d97b8);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#2d97b8), to(#217092));
 box-shadow: inset 0 1px 0 0 #a8e3f0;
 -moz-box-shadow: inset 0 1px 0 0 #a8e3f0;
 -webkit-box-shadow: inset 0 1px 0 0 #a8e3f0;
}
ul.tblog_cssTabs.blue > li,ul.tblog_cssTabs.blue > li:hover {
 background:#2ca0c1;
 color:#1a4760;
 border-color:#20617f;
 background:-moz-linear-gradient(0% 100% 90deg,#2ca1c3, #2687aa);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#2687aa), to(#2ca1c3));
box-shadow: inset 0 1px 0 0 #a8e3f0;
 -moz-box-shadow: inset 0 1px 0 0 #a8e3f0;
 -webkit-box-shadow: inset 0 1px 0 0 #a8e3f0;
text-shadow: 1px 1px 0 #8cd9e8;

}
ul.tblog_cssTabs.blue > li.active {
  box-shadow: inset 0 1px 0 0 #fff;
 -moz-box-shadow: inset 0 1px 0 0 #fff;
 -webkit-box-shadow: inset 0 1px 0 0 #fff;
 text-shadow: none;
}
ul.tblog_cssTabs.orange{

 background: #d75125;
 border-color:#9c2c09;
background:-moz-linear-gradient(0% 100% 90deg,#d44b22, #ea753d);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ea753d), to(#d44b22));
 box-shadow: inset 0 1px 0 0 #f5b497;
 -moz-box-shadow: inset 0 1px 0 0 #f5b497;
 -webkit-box-shadow: inset 0 1px 0 0 #f5b497;
}
ul.tblog_cssTabs.orange > li, ul.tblog_cssTabs.orange > li:hover {
 background:#e1693e;
 color:#5a2818;
 border-color:#9c2c09;
 background:-moz-linear-gradient(0% 100% 90deg,#e47a48, #dd5733);
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#dd5733), to(#e47a48));
box-shadow: inset 0 1px 0 0 #f5b497;
 -moz-box-shadow: inset 0 1px 0 0 #f5b497;
 -webkit-box-shadow: inset 0 1px 0 0 #f5b497;
text-shadow: 1px 1px 0 #f3c6b3;

}
ul.tblog_cssTabs.orange > li.active {
 box-shadow: inset 0 1px 0 0 #fff;
 -moz-box-shadow: inset 0 1px 0 0 #fff;
 -webkit-box-shadow: inset 0 1px 0 0 #fff;
 text-shadow: none;
}
/* End CSS Code for the menu starts here mas basir */

6. Pergi ke blogger dan klik Layout

7. Klik Tambah Gadget dan pilih 'HTML / Javascript

8. Paste kode di bawah ini.

<ul class="tblog_cssTabs">
 <li class="active" ><a href='#'>Home</a></li>
 <li><a href='#'>Points</a></li>
 <li><a href='#'>Percent</a></li>
 <li><a href='#'>Contact Us</a></li>        
</ul>
<ul class="tblog_cssTabs blue">
 <li><a href='#'>Home</a></li>
 <li class="active"><a href='#'>Points</a></li>
 <li><a href='#'>Percent</a></li>
 <li><a href='#'>iContact Us</a></li>
</ul>
<ul class="tblog_cssTabs orange">
 <li><a href='#'>Home</a></li>
 <li><a href='#'>Points</a></li>
 <li class="active "><a href='#'>Percent</a></li>
 <li><a href='#'>Contact Us</a></li>
</ul>

Information :
Ganti # dengan link Anda.

9. Sekarang menyimpan HTML / Javascript '. 

Sekian dulu Artikel tentang Membuat Menu Bar Sederhana dengan CSS3 untuk Blogger  semoga artikel di atas dapat membantu anda, dan bermanfaat bagi anda.

Share this post