Popular Post

Popular Posts

Posted by : Unknown Rabu, 01 Oktober 2014


Menu Navigasi pada blog merupakan elemen yang perlu diperhatikan di dalam sebuah blog yang mementingkan
penampilan dan style untuk setiap detilnya. Ada bermacam-macam bentuk menu navigasi di dalam sebuah blog itu, ada menu navigasi horizontal, menu navigasi vertikal atau yang lainya. Selain menggunakan menu horisontal drop down menu, kita juga bisa membuat menu horisontal sederhana (tanpa cabang) ataupun membuat menu horisotal bercabang dengan script css. Seperti yang telah saya buat dalam postingan sebelumnya tentang menu horisontal versi dynamic drive, maka kali ini akan dibuat versi css menu maker. Tampilan menunya bisa dilihat pada gambar di bawah ini.
Untuk membuatnya bisa lakukan posedur berikut:

1.  Login ke menu blogger. Klik Design  -> Edit HTML
2.  Backup template anda
3.  Setelah itu, letakkan kode dibawah ini diatas ]]></b:skin>

#navbar-iframe {
height:0px; visibility: hidden; display: none;
}

#fixed {position:fixed;top:0;left:0;width:100%;height:35px;z-index:999;}

#fixedinner{text-align:center;background:transparent;height:35px;position:relative;z-index:999;}

* html, * html body{overflow-y:hidden;height:100%;}

* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }

* html #fixedinner{margin-right:17px;}

* html #fixed {position:absolute;}

* html #outer-wrapper {height:100%;overflow:auto}

.toppica{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCorajFAr3N7pJ_jWkBZ4Kx8_rpu_cCzHXxrRaIkIQVedd152BYd_cRt3H5rQbzUvL-coREAicAe1KsabRbFp44CA63Q98G4entMozZeRKIffBfT01lmVWeyeme6QK0sGM_AVg-rV0BZU/s320/navbar.gif);width:100%;margin:0 auto;border-bottom:4px solid #666}

.topnav{width: 970px;height:35px;overflow: hidden;margin:0 auto;padding:0px 10px 0px 10px; }

h1{font-size:24px;}

#searcha{float:right;width:180px;height:20px;margin-top:5px;padding-right:5px}

#searcha form{float:left}

#searcha input[type="text"]{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-3bF0lNldJiDFmT2FP7vHfEW6WiUDwKYylBiccOErb7tnGFZ_JApdFji9DdnsA_A4n4jMg9k_gAHV-P8nJ1q0dKyfWA4Z2GRiAz5ccJVkw6uZp3r5zCBBULQDQ6JVtmwdiBUtw-T82-Y/s1600/search_button.png) no-repeat scroll 4px center;float:left;border:1px solid #ccc;width:146px;margin-top:1px;padding:3px 15px;font-size:12px;text-align:right}

#searcha input[type="text"]:focus{background:#FFF}

#searcha input[type="submit"]{display:none}

h1,h2,h3,h4{font-weight:700;font-family:'Open Sans', cursive;}

ul.isocial{list-style:none;margin:0;padding:5px 20px 0 0}

ul.isocial li{float:right;margin:0 5px;padding:0}

ul.isocial li a{float:right;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMdaU_W_VEuww8V3DrB4Gbm0rH9AOfA8gHZRhq1n2D7YfoR6pmAIZVnIn9m5FdZLudmzWmvkudlOUMML-6xGSrbu-2dnqqeX7rs9EVWK25YXcBHEBrG79YcMOAZjW92ri9ea6ntKgPjw4/s1600/social+letter.png);background-position:0 0;background:repeat:no-repeat;display:inline-block;text-indent:-9999px;overflow:hidden;width:24px;height:24px;position:relative}

ul.isocial li a.rss{background-position:0 0}

ul.isocial li a.rss:hover{background-position:0 -25px}

ul.isocial li a.facebook{background-position:-25px 0}

ul.isocial li a.facebook:hover{background-position:-25px -25px}

ul.isocial li a.twitter{background-position:-50px 0}

ul.isocial li a.twitter:hover{background-position:-50px -25px}

ul.isocial li a.google{background-position:-75px 0}

ul.isocial li a.google:hover{background-position:-75px -25px}

ul.isocial li a.youtube{background-position:-100px 0}

ul.isocial li a.youtube:hover{background-position:-100px -25px}

4. Setelah Itu, letakkan kode di bawah ini tepat di bawah  </body>

<div id='fixed'>

<div id='fixedinner'>

<div class='toppica'>

<div class='topnav'>

<div style='font:bold 16px Verdana;float:left;padding-top:8px;color:#aaa;'>

Selamat Datang Di Kyoure Blog

</div>

<div id='searcha'>

<form action='/search' class='search' id='searchform' method='get'>

<div>

<input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Type and Enter&quot;;}' onfocus='if (this.value == &quot;Type and Enter&quot;) {this.value =&quot;&quot;;}' size='30' type='text' value='Type and Enter'/>

</div>

</form>

</div>

<div style='float:right;padding:0px 0px 5px 0px;'>

<ul class='isocial'>

<li><a class='rss' href='https://profile.yahoo.com/SHXZSXWDP6XRHZ5V5VWZHWYYQ4/' target='_blank' title='Email'/></li>

<li><a class='facebook' href='https://www.facebook.com/fabianbkzz' target='_blank' title='Facebook'/></li>

<li><a class='twitter' href='https://twitter.com/Kyoure45' target='_blank' title='Twitter'/></li>

<li><a class='google' href='https://plus.google.com/u/0/101572435285925217384' target='_blank' title='Google Plus Profile'/></li>

<li><a class='youtube' href='https://www.youtube.com/channel/UCHcxbz8Bbiei6HwV6tPG4jw' target='_blank' title='Video'/></li>

</ul>

</div>

</div>

</div></div>

</div>

Keterangan :
warna :

Merah : Bisa Di Ganti Sesuai Yang Anda Inginkan
Kuning : Diganti Dengan Profil Yahoo Anda Sendiri
Hijau : Diganti Dengan Link Profil Facebook Anda Sendiri
Biru : Diganti Dengan Link Twitter Anda Sendiri
Ungu : Diganti Dengan Link Google Acount Anda Sendiri
Orange : Diganti Dengan Link Youtube Anda Sendiri

Selesai.

Leave a Reply

Catatan:
- Usahakan Komentar Tidak Menyinggung
- No Spamming dan Harus Sopan
- Tidak Mengandung Kata Kasar
- Tidak Berbau Porno
- Boleh Kritikan Atau Saran

Subscribe to Posts | Subscribe to Comments

- Copyright © 2013 Aksas-45"Blog | Artikel Kyoure Searching And Sharing - Devil Survivor 2 - Powered by Blogger - Designed by Johanes Djogan -