Jumat, 11 Juli 2014

Cara Buat Dropdown Menu di Bloger

Cara Membuat Dropdown Menu di blog - Hmm, Lagi-lagi saya posting tentang dropdown menu hehe gak apa-apa deh, sobat sudah pada tau dropdown menu itu apa kan? Dropdown menu adalah sebuah kotak tab/bar yang isinya berupa navigasi link. Fungsi Dropdown menu yaitu untuk menyimpan link-link penting di suatu blog, agar pengunjung dapat lebih mudah mengunjungi halman-halaman utama yang ada pada suatu blog itu.Dropdown menu kali ini saya buat sendiri kode CSSnya, oke dibawah ini adalah screenshotnya:



1. Login ke Blogger
2. Pilih Template >> Edit HTML
3. Cari kode ]]></b:skin>, copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>.
1234567891011121314151617181920
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkDQ65NGe4t0nG27_-gipMflIRPnI2vVIyaS1VvRkv5WvbZsks0RHJ1ePSfoCnjKDrS-CPYFgtXiv70d5iKdvO7FU05pgIpNEcEN6nn5Ui2wz2uFDyZFf43hx7boHAp6q5np7D_Lc44t0/s1600/menu1.PNG) repeat-x top;width:980px;margin:0 auto;padding:0 auto;}
#menuwrapper{width:980px;height:35px;margin: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:bold 12px Arial;text-transform:none;color:#fff;padding:6px 10px 6px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixCQcuCY86Ug-NbrhTObdutKpsDI4G4md8hhZYeLv0mgmZPbSuXRCAifJwMZ-e9VQgxM3YwWbXMtAqQITwR7n0eAi6uWNB1rHEcC_A3KBgfdyufTq_93tq36bXgFc_eUdMLW6o6x-ekcYK/s1600/nav.png) repeat-x;margin:8px 0 8px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #555;text-shadow: 0 1px 1px #0e3d68;}
#menubar a:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVce8kPWJaR5kxegv0L806KMHgkBneiji5if24-GyuypRWgYEpSiDl7nf6gbufxS_cez7r-ONp8jy8J07w1M-Wc606DyVhvdA1EHVt24dvnJapl8iEl3BExfiOC8vEs4AVtL3Kxh047hw/s1600/nav.png) repeat-x}
#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;-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{color:#80C8FE}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkDQ65NGe4t0nG27_-gipMflIRPnI2vVIyaS1VvRkv5WvbZsks0RHJ1ePSfoCnjKDrS-CPYFgtXiv70d5iKdvO7FU05pgIpNEcEN6nn5Ui2wz2uFDyZFf43hx7boHAp6q5np7D_Lc44t0/s1600/menu1.PNG);text-decoration:none;margin:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border:0px solid #04498a}
#menubar li ul li.hr{border-bottom:1px solid #fff;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0}
#menubar ul a:hover{background-color:#555!important;color:#80C8FE!important;text-decoration:none}

Sekarang Cari Kode <!-- /content-wrapper--> lalu letakan kode di bawah tepat di bawahnya

12345678910111213141516171819202122232425262728293031323334353637383940414243

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqO-C6itB8VgUGTWLIIEMuy_RyfA7K0H24oBq8VqKyhKdhL530DPnoZWkD9998HuRAIC5OHS8swIjnkxWS4x-5uB47Gw5Nsx6lje7c8oOx1R41Ad5k8STVXYa7bX6ze8XVHnT_7kc88fAo/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
Perhatian!
Jika Kode <!-- /content-wrapper--> tidak ketemu carilah kode yang mirip atau memiliki kesamaan, <!-- /content-wrapper--> biasanya terletak di bawah tag <body>
Jika Sebelumnya Template anda telah memiliki kode menu, hapus saja lalu ganti dengan kode diatas
4. Anda bisa ganti kata-kata Menu1, Menu 2 dan yang lain dengan nama menu yang anda inginkan dan untuk kode "#" itu adalah alamat link dari menu yang anda buat. Sengaja saya beri tanda # agar tidak menuju halaman apapaun, silahkan anda ganti dengan alamat link yang anda inginkan.

Semoga Tutorial Saya Ini Bermanfaat Bagi Anda Yang Membutuhkan Navigasi Dropdown Menu , Jangan Lupa Berkomentar Dahulu Sebelum Mempraktekan Walaupun Hanya Berterima Kasih
Lihat Selengkapnya »

Kamis, 10 Juli 2014

Legenda masalembu



                Masalemboe adalah kepulauan terpencil yang ada di kabupaten sumenep, dan salah satu dari gugusan kepulauan di daerah sumenep. dilihat dari segi geografisnya kecamatan masalembu berada di sebelah utara kepulauan madura dan menjadi perbatasan paling utara dari kabupaten tersebut. menurut beberapa sumber masalembu ditemukan pada sekitar tahun 1927 yang di temukan pertama kali oleh DATUK KAIDANI yang berasal dari kepulauan RAAS , beliau sendiri adalah pedagang kelapa yang membawa dagangannya dari sulawesi ke pulau jawa, di suatu ketika beliau berlayar dari sulawesi dengan membawa dagangannya menuju pulau jawa tetapi di tengah perjalanannya beliau kehabisan bekal dan berlabuh di sebuah pulau yang di dalamnya hanya terdapat hutan dan hewan liar. beliau berlabuh tepat di sebelah tenggara pulau tersebut d karena beliau kehabisan perbekalan dan air untuk konsumsi beliau langsung membuat sumur yang tidak terlalu jauh dari bibir pantai, kemudian beliau menelusurui kedalam pulau untuk memastikan bahwa di dalam pulau tersebut terdapat penduduk, tapi sayangnya yang di temukan cuma pohon2 liar dan sapi2 liar dan beberapa hewan lain sejenis burung. dengan inisiatifnya beliau menebangi beberapa pohon dan menggantinya dengan kelapa yang ia bawa. sebenarnya menurut sumber yang saya tanya pembuatan sumur tersebut adalah kedatangan ia pertama kali dan penelusuran ke dalam pulau adalah kedatangan kali kedua beliau. dan secara berangsur-angsur beliau membawa keluarganya untuk menempati pulau tersebut dan menjulukinya dengan NUSA LEMBU (PULAU SAPI).
bersambung..........
Lihat Selengkapnya »