- Dengan memasang Menu Horizontal di blog dapat memperindah blog atau mempercantik blog
- Dengan memasang Menu Horizontal di blog dapat memudahkan pengunjung di dalam melakukan navigasi konten blog kita.
Menu Horizontal yang saya berikan pada tutorial blogspot kali ini memiliki tampilan yang sangat Keren yaitu berwarna hitam yang dibuat dengan menggunakan kode CSS. Menu Horizontal ini cocok untuk semua warna background blog. Ada satu kemudahan yang sobat blogger dapatkan dari memasang Menu Horizontal yang keren ini. Apa kelebihannya? Sobat blogger tidak perlu Edit Template untuk memasang Menu Horizontal ini.
Cara Memasang Menu Horizontal Di Blog
- Sign In di blogger.com
- Pada menu drop down, pilih Layout
- Klik Add a gadget dan pilih HTML/JavaScript
- Copy Paste kode di bawah ini pada kolom yang tersedia
<style>
/*------ CSS3 Drop Down Menu By TutorialBlogspot (www.tutorialblogspot.com)---------*/
#TutorialBlogspot-menu, #TutorialBlogspot-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#TutorialBlogspot-menu {
width: 100%;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#TutorialBlogspot-menu:before,
#TutorialBlogspot-menu:after {
content: "";
display: table;
}
#TutorialBlogspot-menu:after {
clear: both;
}
#TutorialBlogspot-menu {
zoom:1;
}
#TutorialBlogspot-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#TutorialBlogspot-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#TutorialBlogspot-menu li:hover > a {
color: #fafafa;
}
*html #TutorialBlogspot-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#TutorialBlogspot-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#TutorialBlogspot-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#TutorialBlogspot-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#TutorialBlogspot-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#TutorialBlogspot-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#TutorialBlogspot-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#TutorialBlogspot-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#TutorialBlogspot-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#TutorialBlogspot-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#TutorialBlogspot-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#TutorialBlogspot-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#TutorialBlogspot-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#TutorialBlogspot-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<ul id="TutorialBlogspot-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Web design</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
- Simpan Menu Navigasi Horizontal sobat blogger
Tambahan :
Ganti Yang warna merah dengan URL blog sobat dan warna biru sesuai dengan label yang diinginkan
Untuk di ketahui, Menu Navigasi Horizontal ini di buat oleh seorang Web Master yang bernama Catlin Rosu.
