Cara Membuat Menu Bar Keren Di Blog

Cara Membuat Menu di Blog Dengan Mudah dan Juga Keren - yang yang pernah saya sudah bahas dari seblumnya munkin ini ke 10 Cara Membuat Menu di Blog tapi saya baru saja membuat menu yang paling keren karan saya sudah di modifikasi dengan warna 3D bootrap jadi kalau anda tidak cocok sama wanrnya anda bisa edit dan pilih di sini.

Kode Warna Html kamu cari saja waran yang cocok baut edit kalau sudah di pasang pada blog anda, Dengan menu yang saya akan kasih ke pada anda pasti blog anda akan menjadi lebih Soe dan personal dan juga ga kalah keren sama blog yang ada di luwar sana ,jika anda penasaran menu apah sih yang akan di kasih ke pada anda ? kamu bisa lihat gambar di bawah ini.

DEMO

Seperti yang kamu lihat kawan begituh Maco menu ini karan menu ini baru saja saya buat beberapah jm kemudian dengan ta sabar hati saya yang ingin segera membagikan nya.. ke pada .nya tunggu apa lagi kita lanjut pada tutorial Cara Membuat Menu di Blog Dengan Mudah dan Juga Kerendi bawah ini.

Langkah Pertama

1. Kamu Login ke blogger anda masing masing
2. Dan kamu pilih menu Tema dan tekan menu Edit Html
3. Kemudian kamu tekan Kibot Pc CTRL+F kemudian kamu cari kode yang bernama ]]></b:skin> jika sudah ketemu kamu ambil kode di bawah dan copykan di atas kode ]]></b:skin>.

/*----------------------------------------------------------------
Blog Tutorial Yang Mebahas Tentang, Blog, Template,Android, Komputer Dll.
Oleh: AdaniBlog
Blog: Adani -:[TUTORIALCID]:-
URL : http://tutorialcid.blogspot.co.id
Link Tutorial :
-----------------------------------------------------------------*/
/* NAVIGATION */
#navigation{height:38px;width:944px;position:relative;background-color:#0b5394;box-shadow:0 2px 6px 0 #0b5394;-moz-box-shadow:0 2px 6px 0 #0b5394;margin:0 auto 0;padding:0 18px 0 18px;border-bottom:3px solid #DC1E25;}
#navigation li{position:relative;line-height:38px;float:left;list-style:none;display:inline-block;padding:0;margin:0;}
#navigation li a{padding:0 18px;color:#eee;display:block;font-family:'Oswald',Arial,Helvetica,sans-serif;font-size:14px;font-weight:500;text-align:left;text-shadow:1px 1px 0 #222;}
#navigation li a.home{background-position:16px -54px;width:46px;padding:0 0;background-color:#DC1E25;text-indent:-9999px;overflow:hidden;}
#navigation li a{border-left:1px solid #0b5394;border-right:1px solid #0b5394;}
#navigation li:hover a{background-color:#DC1E25;color:#fff;}
#navigation li .sub-nav-wrapper{display:block;position:absolute;z-index:30;margin-left:0px;}
#navigation li .sub-nav-wrapper .sub-nav{width:150px;margin:4px 0 0 0;padding:0 0 0 0;background:#fff;border-top:1px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,0.35);}
#navigation li:hover .sub-nav-wrapper{display:block;}
#navigation li .sub-nav-wrapper .sub-nav li{list-style:none;float:none !important;line-height:26px;display:block;margin:0 0 0 0;padding:0;text-align:left;border-bottom:1px solid #d7d7d7;}
#navigation li .sub-nav-wrapper .sub-nav li:first-child{}
#navigation li .sub-nav-wrapper .sub-nav li:last-child{border:none;}
#navigation li .sub-nav-wrapper .sub-nav li a{border:none !important;background:transparent !important;display:block;padding:0 20px;font-size:12px;font-weight:small;color:#4b4b4b !important;text-shadow:none;box-shadow:inset 0 0 2px rgba(255,255,255,1.0);-moz-box-shadow:inset 0 0 2px rgba(255,255,255,1.0);-webkit-box-shadow:inset 0 0 2px rgba(255,255,255,1.0);}
#navigation li .sub-nav-wrapper .sub-nav li:hover{background:#eaeaea;border-bottom:1px solid #ccc;}
#navigation li .sub-nav-wrapper{pointer-events:none;opacity:0;filter:alpha(opacity=0);top:0;transition:all 0.35s ease-in-out;-moz-transition:all 0.35s ease-in-out;-webkit-transition:all 0.35s ease-in-out;}
#navigation li:hover .sub-nav-wrapper{pointer-events:auto;opacity:1;filter:alpha(opacity=100);top:30px;}
#navigation #search{position:relative;font-family:'Oswald',Arial,Helvetica,sans-serif;float:right;margin:5px 0 5px 10px;}#navigation li.search{float:right;line-height:normal;}
#navigation #search input[type="text"]{height:28px;line-height:28px;background-color:#5b5b5b;background-position:188px -245px;border:0 none;font-size:14px;font-weight:500;color:#fff;width:120px;padding:0 10px;-webkit-transition:all 0.7s ease 0 s;-moz-transition:all 0.7s ease 0s;-o-transition: all 0.7s ease 0s;transition:all 0.7s ease 0s;}
#navigation #search input#search-button{-webkit-transition:all 0.7s ease 0 s;-moz-transition:all 0.7s ease 0s;-o-transition: all 0.7s ease 0s;transition:all 0.7s ease 0s;height:28px;width:30px;background-color:#4b4b4b;background-position:8px -246px;border:none;float:right;cursor:pointer;}
#navigation #search input#search-button:hover{background-color:#DC1E25;}
#navigation #search input[type="text"]:focus{background-color:#fff;text-shadow:none !important;outline:none;color:#555;}
#navigation #search input#search-button,.post-info-icon,.home,#top{background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij3hMNy63Ox8ZsmbAfuueLlcCJIf1tfLHCjTSOe31snQr7Eiy81TOzKISianoD67QvWP0d-sBAqgmVR5ZxGSV-jrns7S43MAAVJVQVPA9YZU8S1jQo61CkSaRxSPVRTNqEqT7REnO7Cqhy/s1600/meta-icon.png");background-repeat:no-repeat;}

4. Kemudian kamu gantikan warna dengan susuwai kalian kemudian kamu coba Save dan kamu cari lagi kode </head> jika sudah ketemu kode </head> ini anda ambil kode di bawah di bawah kode tersebut.

<nav>
<ul id="navigation">
<li class="current"><a class="home" href="/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="http://tutorialcid.blogspot.co.id/">Daftar Isi</a></li>
<li><a href="http://tutorialcid.blogspot.co.id/">Blog Tutorial</a>
<div class="sub-nav-wrapper"><ul class="sub-nav">
<li><a href="http://tutorialcid.blogspot.co.id/">Blogger SEO</a></li>
<li><a href="http://tutorialcid.blogspot.co.id/">Blogger Widget</a></li>
<li><a href="http://tutorialcid.blogspot.co.id/">Blogger Tips</a></li>
</ul>
</div>
</li>
<li><a href="#">Template</a>
<div class="sub-nav-wrapper"><ul class="sub-nav">
<li><a href="http://tutorialcid.blogspot.co.id/">Simpel</a></li>
<li><a href="http://tutorialcid.blogspot.co.id/">Responsive</a></li>
<li><a href="http://tutorialcid.blogspot.co.id/">Gallery</a></li>
<li><a href="http://tutorialcid.blogspot.co.id/">Magazine</a></li>
<li><a href="http://tutorialcid.blogspot.co.id/">Games</a></li>
<li><a href="http://tutorialcid.blogspot.co.id/">Film</a></li>
<li><a href="http://tutorialcid.blogspot.co.id/">Berita</a></li>
<li><a href="http://tutorialcid.blogspot.co.id/">Toko Online</a></li>
</ul>
</div>
</li>
<li><a href="#">Ragam Menu</a>
<div class="sub-nav-wrapper"><ul class="sub-nav">
<li><a href="http://tutorialcid.blogspot.co.id/">Media Sosial</a></li>
<li><a href="http://tutorialcid.blogspot.co.id/">Download</a></li>
<li><a href="http://tutorialcid.blogspot.co.id/">Software</a></li>
<li><a href="http://tutorialcid.blogspot.co.id/">Bisnis Online</a></li>
</ul>
</div>
</li>
<li class="search">
<form action="/search" id="search" method="get">
<input name="q" placeholder="Search..." size="30" type="text"><input id="search-button" type="submit" value=""></form>
</li>
</ul>
</nav>

5. Kemudian kamu Ulr http://tutorialcid.blogspot.co.id ini dengan alamat Ulr anda jika sudah kamu coba simpan dan juga buka New tab.Jika anda berhasil anda pasti menu yang kamu inginkan akan segera muncul pada tampilan blog anda ,jika ada ke gagalan tahap pasang kode Css anda bisa lakukan dari awal jika anda mau ber taya anda bisa comen di bawah.

Demikian lah pada tutorial Cara Membuat Menu di Blog Dengan Mudah dan Juga Keren ini jika andauka pada artikel adaniblog kamu bisa like dan shree dengan menekan menu di atas ,terimakasih atas sbelumnya anda telah masuk ke blog saya semoga bermanpaat bagi anda wasalam.

Lokasi:

tes

Cara Membuat Menu Bar Keren Di Blog

Langkah Pertama

Menu Halaman Statis