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.
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>
7. Klik Tambah Gadget dan pilih 'HTML / Javascript
8. Paste kode di bawah ini.
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.
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 */6. Pergi ke blogger dan klik Layout
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 */
7. Klik Tambah Gadget dan pilih 'HTML / Javascript
8. Paste kode di bawah ini.
<ul class="tblog_cssTabs">Information :
<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>
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.
0 Kommentare:
Kommentar veröffentlichen