Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header

Salam blogger, Kali ini saya sedikit berbagi tentang Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header yang telah di request oleh sahaba-sahabat Zuaz'Z Creator pada halaman Facebook.

Menu drop down dapat kita pasang di atas maupun di bawah nama blog, dengan memasang menu semacam ini tampilan blog kita semakin tampak bagus dan pastinya akan mempermudah pengunjung untuk mencari apa yang dibutuhkan dari blog kita. 

Untuk demonya silakan sobat blogger klik link berikut ini DEMO. Bagi sobat blogger yang berminat memasang menu semacam ini silakan ikutu langkah-langkah berikut ini:

Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header:

1. Seperti biasa sobat harus login dulu di akun blog sobat

2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan

3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan

4. Sobat cari kode ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr0uXxwmi2L06b4-mtfHs_2iesQNx4hnD7ppNGi3lRqJBCUFi5aW2soh4_-cK8JMrLqaEg2or-7rZFW3SFFWdZli9fHIxmj00d5507eXslfcKHl8sKxtLXCmGbCaj8cT7iCZNSLGw8j5Y/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/AVvXsEi2W0fuzENOUH22qvNIhqrM1cLaabbK2q3Aozh9S2KJugcKlyron0F_1TnBPgiYMMfS-FRsaF2F3v9E58wju0Q_OOYd7KNJnotUig0kdB3WRpl_qNoestcN6bvJaJOjRa6UNaqGf85LI1Q/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}


Selanjutnya sobat blogger cari kode berikut:

• <header>  : untuk menempatkan menu di atas nama blog
• </header> : untuk menempatkan menu di bawah nama blog

Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau 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/AVvXsEgTgewjqR7V3nMzlm1IP825hHlTWNjNL__MhCkTXoZYlfzKrKwBh3qinC1MNCIxO_8Bvm_MUN5jzTUZoLNzKp3OIgZ6p2xyYcjjqKyCSGoNW_nZCAwzGcPAdaRAkV-7xOnFGHveFtZgyIQ/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='https://plus.google.com/u/0/106997202037581570725' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/den_zuaz' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.myspace.com/denzuaz' target='new'>Contact on Myspace</a></li>
<li><a href='http://www.facebook.com/zuazTama' target='new'>Zuaz&#39;Z on Facebook</a></li>
</ul>
</li>
<li><a href='http://zuazz.blogspot.com' target='new'>Zuaz&#39;Z Creator</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20komputer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20blog'>Blogspot</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/facebook'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='http://zuazz.blogspot.com/2012/01/tv-online.html'>TV Online</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/computer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/desain%20grafis'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/game'>Game</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/microsoft'>Microsoft</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20aplikasi'>Software APP</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20program'>Software Program</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://zuazz.blogspot.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/AVvXsEiJsT-kftrAstpdRT5Ir2ZaouozXZBI5tRW7tYnEtj9P2C7UDsUvATx5_ZM-C2ytXZQbxz4TPG6Qr0McHGQuCV7rx5kKmPj9yU7Pj9xrUxmOfLaVFCsxF86GL4aCX2yxxd5OxKKwrUl3ZA/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/AVvXsEgDJwqXqdRUaAYkZn6BCqji_YRF34B8qQnTZNngdlv1gL28rh6QJSuQ6Zz3RKmx8lLlhqc98HP-6ebPK1ueyqUJLxGE_TiDVAR7M0az6A87oen6wREgwD1LfpMK1n7jIja7dI0337BvJjo/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Keterangan:

1. Kode berwarna merah adalah Url tujuan, silakan sobat ganti dengan Url pada blog sobat
2. Kode berwarna kuning adalah kalimat yang tampil pada menu dropdown, Silakan sobat sesuaikan.

Demikianlah Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header, semoga bermanfaat bagi sobat blogger.

Referensi : http://zuazz.blogspot.com

Read More

Pengertian LAN WAN MAN

Local Area Network biasa disingkat LAN adalah jaringan komputer yang jaringannya hanya mencakup wilayah kecil; seperti jaringan komputer kampus, gedung, kantor, dalam rumah, sekolah atau yang lebih kecil. Saat ini, kebanyakan LAN berbasis pada teknologi IEEE 802.3 Ethernet menggunakan perangkat switch, yang mempunyai kecepatan transfer data 10, 100, atau 1000 Mbit/s. Selain teknologi Ethernet, saat ini teknologi 802.11b (atau biasa disebut Wi-fi) juga sering digunakan untuk membentuk LAN. Tempat-tempat yang menyediakan koneksi LAN dengan teknologi Wi-fi biasa disebut hotspot.

Pada sebuah LAN, setiap node atau komputer mempunyai daya komputasi sendiri, berbeda dengan konsep dump terminal. Setiap komputer juga dapat mengakses sumber daya yang ada di LAN sesuai dengan hak akses yang telah diatur. Sumber daya tersebut dapat berupa data atau perangkat seperti printer. Pada LAN, seorang pengguna juga dapat berkomunikasi dengan pengguna yang lain dengan menggunakan aplikasi yang sesuai.

Berbeda dengan Jaringan Area Luas atau Wide Area Network (WAN), maka LAN mempunyai karakteristik sebagai berikut :

1. Mempunyai pesat data yang lebih tinggi
2. Meliputi wilayah geografi yang lebih sempit
3. Tidak membutuhkan jalur telekomunikasi yang disewa dari operator telekomunikasi

Biasanya salah satu komputer di antara jaringan komputer itu akan digunakan menjadi server yang mengatur semua sistem di dalam jaringan tersebut.


WAN

WAN adalah singkatan dari istilah teknologi informasi dalam bahasa Inggris: Wide Area Network merupakan jaringan komputer yang mencakup area yang besar sebagai contoh yaitu jaringan komputer antar wilayah, kota atau bahkan negara, atau dapat didefinisikan juga sebagai jaringan komputer yang membutuhkan router dan saluran komunikasi publik.

WAN digunakan untuk menghubungkan jaringan lokal yang satu dengan jaringan lokal yang lain, sehingga pengguna atau komputer di lokasi yang satu dapat berkomunikasi dengan pengguna dan komputer di lokasi yang lain.


MAN

Metropolitan area network atau disingkat dengan MAN. Suatu jaringan dalam suatu kota dengan transfer data berkecepatan tinggi, yang menghubungkan berbagai lokasi seperti kampus, perkantoran, pemerintahan, dan sebagainya. Jaringan MAN adalah gabungan dari beberapa LAN. Jangkauan dari MAN ini antar 10 hingga 50 km, MAN ini merupakan jaringan yang tepaMetropolitan area network atau disingkat dengan MAN. Suatu jaringan dalam suatu kota dengan transfer data berkecepatan tinggi, yang menghubungkan berbagai lokasi seperti kampus, perkantoran, pemerintahan, dan sebagainya. Jaringan MAN adalah gabungan dari beberapa LAN. Jangkauan dari MAN ini antar 10 hingga 50 km, MAN ini merupakan jaringan yang tepat untuk membangun jaringan antar kantor-kantor dalam satu kota antara pabrik/instansi dan kantor pusat yang berada dalam jangkauannya.

Read More