Tutorial Membuat Menu Navigasi Horizontal Sederhana Di Blog Dengan Widget

Tutorial Membuat Menu Navigasi Horizontal Sederhana Di Blog Dengan Widget

Menu Navigasi Horizontal - Sebuah menu di dalam blog merupakan sesuatu yang wajib ada, baik itu secara horizontal maupun vertikal. Cara membuat menu navigasi horizontal dalam sebuah ada bermacam-macam, baik itu bersentuhan langsung dengan kode script template itu sendiri atau bisa juga dengan menambahkan widget yang di isi kode html. Dengan widget pun, modelnya juga bermacam-macam. Ada yang memakai menu drop down dan ada juga yang tidak.

Dalam kesempatan ini, saya tertarik untuk berbagi Tutorial Membuat Menu Navigasi Horizontal Sederhana Di Blog Dengan Widget yang masuk kriteria sederhana menurut saya. Sebenarnya dalam sebuah blog, sudah pasti ada menu bawaan horizontal atau vertikal. Tapi dengan menambahkan atau membuat sendiri menu horizontal akan terasa lebih indah tampilan blog kita.

Cara membuatnya silahkan ikuti petunjuk di bawah ini

1. Sign in ke blog kalian

2. Klik pada bagian Tata Letak, lalu Klik Tambahkan Gadget

3. Lalu cari widget HTML/Java Script kemudian klik tanda (+) untuk menambahkan

4. Setelah muncul kotak dialog, pada bagian judul abaikan saja alias di kosongi. Dan pada bagian konten isi dengan kode HTML yang ada dibagian akhir tutorial ini.

5. Kemudian SIMPAN. Dan letakkan di tempat yang kalian anggap pas untuk menu ini.

Sangat sederhana bukan ? . . . .

Silahkan Copy Paste kode HTML di bawah ini

<style>
/*------ CSS3 Drop Down Menu By Kios-Tutorial (www.kios-tutorial.blogspot.com)---------*/
#Kios-Tutorial-menu, #Kios-Tutorial-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#Kios-Tutorial-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;
}
#Kios-Tutorial-menu:before,
#Kios-Tutorial-menu:after {
content: "";
display: table;
}
#Kios-Tutorial-menu:after {
clear: both;
}
#Kios-Tutorial-menu {
zoom:1;
}
#Kios-Tutorial-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;
}
#Kios-Tutorial-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;
}
#Kios-Tutorialmenu li:hover > a {
color: #fafafa;
}
*html #Kios-Tutorial-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#Kios-Tutorial-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;
}
#Kios-Tutorial-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#Kios-Tutorial-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);
}
#Kios-Tutorial-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;
}
#Kios-Tutorial-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#Kios-Tutorial-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#Kios-Tutorial-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);
}
#Kios-Tutorial-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;
}
#Kios-Tutorial-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;
}
#Kios-Tutorial-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;
}
#Kios-Tutorial-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#Kios-Tutorial-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#Kios-Tutorial-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="Kios-Tutorial-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Cinema 4D</a></li>
<li><a href="#">Blog dan SEO</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
</ul>

NOTE :
Ganti warna merah (#) dengan URL kalian dan warna biru ganti dengan Judul yang kalian inginkan.

TUTORIAL MENU DROP DOWN (cooming soon)

Sampai disini dulu tips & trik dari saya, semoga artikel diatas bermanfaat buat kita semua.

Terima kasih sudah berkenan mampir dan meluangkan waktu untuk membaca artikel

Membuat Menu Navigasi Horizontal Sederhana

Tutorial Tips & Trik Photoshop | Illustrator | Cinema 4D | Blog & Seo