Mungkin cara ini bagi kalangan web designer mungkin ini
sudah biasa namun anda yang kurang ahli dengan web design pasti anda
bertanya-tanya gimana sih nih caranya buat kotak- kotak-an menu?? Nah disini
kami akan mengajak anda untuk belajar bersama-sama untuk membuat menu tersebut
atau bisa di sebut Menu bar. Yang mana Menu ini sangat di butuhkan untuk guna
mempermudah dalam mencari informasi berdasarkan kategori. Dengan adanya menu bar ini maka blog kita akan terlihat lebih ilmiah, teratur, simple, dan Rapi.berikut gambar menu bar .
Well,
langsung aja berikut langkah-langkah untuk memasang menu bar pada Blog,
1.
Anda harus login ke Blog
anda dulu.
2.
Lalu Klik design
pada pojok kanan atas blog anda.
3.
Dan pilih template
dan klik edit HTML.
4.
Lalu Cari <div
class='main-outer'> atau<div
id='main-wrapper'> atau <div id='main'> kalau ingin cepat F4 aja OK.
5.
Setelah anda mendapatkannya
Copy bahasa pemograman berikut :
<<style>
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #000000;
background: -moz-linear-gradient(#444, #000000);
background: -webkit-gradient(linear,left bottom,left top,color-stop(1,
#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-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 0px #9c9c9c;
-webkit-box-shadow: 0 2px 0px #9c9c9c;
box-shadow: 0 2px 0px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
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 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 2px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom,
from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}
#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id='menu'>
<li><a
href='http://ukhybelajar.blogspot.com/'>Home</a></li>
<li><a href='http://ukhybelajar.blogspot.com/' rel='nofollow'
target='_blank'>About me</a>
<ul>
<li><a href='http://ukhybelajar.blogspot.com' rel='dofollow'
target='_blank'>BLOG</a></li>
<li><a href='https://plus.google.com/102537055433055072938'
rel='dofollow' target='_blank'>GOOGLE</a></li>
<li><a
href='https://www.facebook.com/profile.php?id=100004428259374' rel='dofollow'
target='_blank'>FACEBOOK</a></li>
</ul>
</li>
<li><a href='http://ukhybelajar.blogspot.com/' rel='nofollow'
target='_blank'>Sosiologi</a>
<ul>
<li><a href='http://ukhybelajar.blogspot.com/2014/11/lembaga-kemasyarakatan-nasional.html'
rel='dofollow' target='_blank'>LEMBAGA KEMASYAR</a></li>
<li><a
href='http://ukhybelajar.blogspot.com/2014/11/sosiologi-kewenangan-kekuasaan-dan.html'
rel='dofollow' target='_blank'>KEWENANGAN KEKUA</a></li>
<li><a
href='http://ukhybelajar.blogspot.com/2014/11/sosiologo-strafikasi-politik.html'
rel='dofollow' target='_blank'>STRAFIKASI POLITIK</a></li>
<li><a
href='http://ukhybelajar.blogspot.com/2014/11/sosiologi-masalah-sosial-dan-manfaat.html'
rel='dofollow' target='_blank'>MASALAH SOSIAL DAN</a></li>
<li><a
href='http://ukhybelajar.blogspot.com/2014/11/sosiologi-perubahan-sosial-dan.html'
rel='dofollow' target='_blank'>PERUBAHAN SOSIAL </a></li>
</ul>
</li>
<li><a href='http://ukhybelajar.blogspot.com/' rel='nofollow'
target='_blank'>Politik</a>
<ul>
<li><a href= http://ukhybelajar.blogspot.com/' rel='dofollow'
target='_blank'>DEMOKRASI</a></li>
<li><a href= http://ukhybelajar.blogspot.com/' rel='dofollow'
target='_blank'>PARPOL DAN SISTEM</a></li>
<li><a href= http://ukhybelajar.blogspot.com/' rel='dofollow'
target='_blank'>PEMILU</a>
<ul>
<li><a href= http://ukhybelajar.blogspot.com/' rel='dofollow'
target='_blank'>BUDAYA </a></li>
</ul></li></ul>
6.
Setelah itu Paste-kan
sebagai teks biasa di atas kata yang sudah anda Search tadi <div class='main-outer'>
atau<div id='main-wrapper'> atau <div id='main'>
7.
Setelah itu anda tinggal mengubah Tanda # yang
berada dalam ‘ dan ‘ dengan alamat url postingan dan yang didalam >
dan < untuk menulis judul postingan.
8.
Cara untuk melebarkan kotak adalah dengan mencari
kode #cat-nav
{background:#156994;margin:0 15px;padding:0;height:35px;} kemudian tambahkan
kode (width:900px) di antara { dan }, sehingga menjadi :
#cat-nav {background:#156994;width:900px;margin:015px;padding:0;height:35px;}
9.
Dan untuk mengatur
tinggi menu silahkan rubah angka 35 pada kode 35px.
10.
Yang terakhir cara
mengganti warna, background, dan huruf. Perhatikan kode dibawah ini ,
1_<style>
2_/* -- Menu Horizontal + Sub
Menu-- */
3_#cat-nav {background:#156994;margin:0
15px;padding:0;height:35px;}
4_ #cat-nav a { color:#eee;
text-decoration:none; text-shadow: #033148 0px 1px ..........
14_#secnav a { font-family:Georgia, "Times
New Roman", Times, serif; font-
a.
Yang kode berwarna merah
pada baris ke-3 adalah kode warna untuk background , yang mana
untuk
mengganti warna Background harus menggunakan kode warna yang lain bisa anda lihat
disini.
b.
Yang kode berwarna hijau
pada garis ke-4 untuk kode warna huruf.
c.
Dan yang kode yang berwarna
kuning pada baris ke-14 adalah untuk mengganti Font dengan font sesuai
kemauan anda
11.
Lalu untuk memastikan
apakah kode semuanya sudah sesuai maka klik pratinjau terlebih dahulu
untuk memastikannya dan Save.
Demikianlah,
cara membuat Menu bar pada blog, agar blog terlihat lebih ilmiah dan simple serta
menarik. Semoga dapat membantu anda khususnya bagi Mahasiswa atau pembisnis
online, yang mana mungkin cara ini dapat membantu. Lebihnya mungkin dari tuhan
semata dan kurangnya mohon di maafkan karena manusia tak akan pernah luput dari
dosa. Dan saya minta tolong kalau cara ini membantu silahkan like dan comment
ok,,,,,
