Membuat Drown Scrol Blog

Sahabt Bisnis,Penampilan Blog atau website sangat penting dalam pembuatan atau penayangan iklan yang kita Share atau tulis di media Website.Untuk bisa menarik pengunjung ataupun mempermudah para pengunjung untuk mencari apa yang dibutuhkan di dalam website yang anda kembangkan atau anda punyai.

Salah satunya Navigasi yang unik dan menarik Seperti yang akan saya bahas kali ini mengenai Membuat Drown Scrol di atas Website / Blog seperti di bawah ini atau seperti di website yang saya gunakan.



Cara membuatnya cukup mudah -mudah sulit..alias Musul hehhehe... karena harus mengedit HTML satu persatu label. tapi asalkan Giat dan tekun pasti bisa dan menghasilkan Blog / website yang bagus.

Yuk langsung mulai membuatnya :


1. Sahabat bisnis harus masuk bloger dulu
2. Pilih Rancangan /Design dan klik Edit HTML dan lanjutkan.
3. Centang "Expand Templat Widget" Untuk menghindari apabila terjadi kesalahan.
4. Sobat cari kode ></b:skin> dan letakan kode dibawah ini di atas kode ></b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFn0evassw20rFPhpqiU6RjL3Um1Zb-pSFnD6yBoFXLJ3vE_sYvJnYBZihiUtLeryGm-jT7p_YrGPuLgmp7tHsRlLs4ZlA_jDKCFzqMc8STGDHUyTLU_DxQwfkWxtROtszTdu9EMsNnsY/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhblwpDjKW2jO9v_jXyTsHBA0MM8tH1sDc7we3tIUKUbeZLHlJKUJjpmBMFFiPWc_PIxqcpIAc-iKNkr7gjErOTyfwcLmsLmwLRxDEJfTPLT26ciUpe8zAboU9kgm400BsZ7ZZL83A0jj4/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

5. Selanjutnya sobat bisnis cari kode </header>
6. Copy Code dibawah ini dan letakkan tepat di  bawah kode </header>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnxEKQLhnFgdfG4mBkK88K1i6THKyADMjuk1xeCIfLZK1YZrwvWVhYDYPQkL9jYEnWmi7VJQSv0kJnKiSmLswUyi8Kuf5RFN4Dt_MAj3cBftEh1ZqgfFYGIsBOc5Du4wITMScEWoEHk4Q/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='http://www.beraniberbisnis.com/' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://www.beraniberbisnis.com/' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.beraniberbisnis.com/' target='new'>Contact on Myspace</a></li>
<li><a href='http://www.beraniberbisnis.com/' target='new'>Zuaz&#39;Z on Facebook</a></li>
</ul>
</li>
<li><a href='http://www.beraniberbisnis.com/'>Zuaz&#39;Z Creator</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='http://www.beraniberbisnis.com/'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://www.beraniberbisnis.com/'>Blogspot</a></li>
<li class='hr'/>
<li><a href='http://www.beraniberbisnis.com/'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='http://www.beraniberbisnis.com/'>TV Online</a></li>
<li class='hr'/>
<li><a href='http://www.beraniberbisnis.com/'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://www.beraniberbisnis.com/'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='http://www.beraniberbisnis.com/'>Game</a></li>
<li class='hr'/>
<li><a href='http://www.beraniberbisnis.com/'>Microsoft</a></li>
<li class='hr'/>
<li><a href='http://www.beraniberbisnis.com/'>Software APP</a></li>
<li class='hr'/>
<li><a href='http://www.beraniberbisnis.com/'>Software Program</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://www.beraniberbisnis.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://zuazz.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigqKA4jqh7_iRZ1_N9mhd_49QR42SRAIKf_QLVJJET-jnbet3wL7htDQoGUlHlQ2YAUQethOFP_2JXKYajgwl_5nYYo3U2PWemuVBgEUV5mbV-kKCRHZA4SH2Cef-OutNSmhyphenhyphenjXWC0bpY/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK2ySiLMRzauSe3j8ad4iGqroexICDvX-nbQb_EYx25WOQWdJZ_US7MLoxuIPtcNsBue4JkTcjRvk0ZUjF8H3lloYYbZXIPh1Eg38C9JuparQe-dBmX5L9sgPmHUORWqQlvyZZRB0-cII/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

 Setelah Itu Save lihat hasilnya.

Keterangan  :

• - Untuk merubah kode yang berwarna merah adalah Url tujuan, silahkan ganti Url pada blog sobat.
• - Kode berwarna biru adalah kode kalimat yang tampil pada menu DropDown ,Silahkan ganti.

Mudahkan sahabat bisnis, selamat mencoba semoga blog kalian akan lebih menarik dan banyak di gemari para pembaca.

(fandi/Beraniberbisnis.Com)

Irfandi (Penulis)

TENTANG PENULIS:

TERIMA KASIH Sahabat Bisnis Telah Berkunjung Di Website Kami, Semoga Artikel ini Bisa Bermanfaat Untuk Sahabat Bisnis Semua - Bila Artikel Di Atas Bermanfaat Sedianya Untuk Bisa Share Ke yang lainnya " Terima Kasih " SALAM SUKSES