" />
" />
" />
" />
" />
Membuat blog itu gampang-gampang susah. Dikatakan gampang kalau kita membuat blog saja tanpa harus mengedit sesuai yang sudah ditampilkan bloger. Tetapi kadang tampilannya kurang bagus dilihat. Nah supaya bagus perlu ada tambahan dan mengedit tampilan blog.
Kali ini saya coba memberikan gambaran dan contoh bagaimana di blog kita ada menubar seperti blog saya ini. Caranya gampang sekali.
1. Silahkan masuk di bloger
2. Setelah di Dasbor Bloger klik buka daftar entri
3. Kemudian klik Template
4. Dan klik edit HTML
5. Silahkan copy saja dan Letakkan HTML dibawah ini diatas <div class='main-outer'> ( supaya gampang mencarinya klik ctrl F saja dan ketikkan di kotak search <div class='main-outer'>
6. Lalu paste HTML yang dicopy tadi.
7. Kalau sudah klik simpan template
8. Silahkan dilihat di blog hasilnya.
selesai deh...Selamat mencoba
Itu kan menubar saya, kalau ingin mengubah silahkan ubah sesuai keinginan teman-teman dengan cara memasukkan alamat misal :
'http://www.smpn1sumenep.com'>Sekolahku</a> -->MENUBAR
<ul id='sub-custom-nav'>
<li><a
href='http://www.smpn1sumenep.com'>Web</a></li> --->SUB MENUBAR
<li><a
href='http://perpustakaansmpn1sumenep.blogspot.com'>Perpustakaan</a></li>
Keterangan : Warna Merah adalah Alamatnya dan Warna Biru adalah Nama yang dimunculkanOK Teman-teman dibawah ini HTMLnya
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px
1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif;
font-size:11px; font-style:normal; font-weight:400; color:#fff;
text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0;
padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman",
Times, serif; font-style:italic; font-weight:700; font-size:14px;
display:block; z-index:100; padding:0 15px; line-height:35px;
text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul { position:
absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li { height:30px;
border-top:1px solid #fff; }
#secnav li ul li a { font-family:Verdana,
Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px;
font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul { margin: -30px
0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover
ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul,
#secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul {
left: auto; }
#secnav li:hover,#secnav li.hover
{ position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a
href='http://pknsmpn1sumenep.blogspot.com'>Beranda</a></li>
<li><a
href='http://www.smpn1sumenep.com'>Sekolahku</a>
<ul id='sub-custom-nav'>
<li><a
href='http://www.smpn1sumenep.com'>Web</a></li>
<li><a
href='http://perpustakaansmpn1sumenep.blogspot.com'>Perpustakaan</a></li>
</ul>
</li>
<li><a
href='#'>e-book</a>
<ul id='sub-custom-nav'>
<li><a href='http://kodecahaya.blogspot.com/'>Alamat
e-book</a></li>
<li><a href='http://www.rajaebookgratis.com/'>Raja
e-book</a></li>
<li><a href='http://duniadownload.com/'>Dunia
Download</a></li>
</ul>
</li>
<li><a href='#'>Agama</a>
<ul id='sub-custom-nav'>
<li><a href='http://islamqa.info/id/84299'>Aqidah
Akhlak</a></li>
<li><a
href='http://media.isnet.org/islam/Silsilah/index.html'>Bunga
Rampai</a></li>
<li><a href='http://www.eramuslim.com'>Media
Islam</a></li>
<li><a
href='http://kumpulankitabkuning.blogspot.com/'>Kumpulan Kitab
</a></li>
<li><a href='http://bukharimuslim.wordpress.com/'>Kumpulan
Hadits Bukhari Muslim </a></li>
<li><a href='http://1001hadits.blogspot.com/'>Kumpulan
Hadits </a></li>
<li><a href='http://www.islam2u.net/ '>Kisah Sahabat
Rasulullah SAW </a></li>
<li><a href='http://ceritaislami.net/ '>Cerita Islam
</a></li>
<li><a href='http://kisahmuslim.com/ '>Cerita Muslim
</a></li>
</ul>
</li>
<li><a href='#'>pendidikan</a>
<ul id='sub-custom-nav'>
<li><a href='http://bse.kemdikbud.go.id/'>Rumah
Belajar</a></li>
<li><a
href='http://www.duniabelajar.web.id/p/kumpulan-soal-soal-olimpiade-sains.html'>Dunia
Belajar </a></li>
<li><a href='http://padamu.siap.web.id/'>Padamu Negeri
</a></li>
<li><a
href='http://www.duniabelajar.web.id/p/kumpulan-soal-soal-olimpiade-sains.html'>Soal
OSN </a></li>
<li><a href='http://223.27.144.195:8081/index.php
'>Dapodik</a></li>
<li><a href='http://www.wapikweb.org/ '>Wapik
</a></li>
<li><a href='https://id.wikipedia.org/wiki/Halaman_Utama
'>wikipedia </a></li>
<li><a href='http://erickinstitute.com/soal-dan-pembahasan-matematika-osn-smp-tingkat-kabupaten-2014/ '>OSN Erick Institute</a></li>
</ul>
</li>
<li><a href='#'>Tutorial</a>
<ul id='sub-custom-nav'>
<li><a
href='http://www.kanginanjaya.blogspot.com/2013/01/cara-membuat-sub-menu-bar-di-blog.html#more'>Tutotial
Blog</a></li>
<li><a href='http://tips-tutorial-blog.blogspot.com/ '>Tip
Trik Blog </a></li>
<li><a
href='http://www.idfreelance.net/desain/kumpulan-tutorial-desain-photoshop/'>Kumpulan
Tutorial Photoshop </a></li>
<li><a href='http://www.ilmugrafis.com/tutorial.php '>Ilmu
Grafis </a></li>
</ul>
</li>
<li><a href='#'>Software</a>
<ul id='sub-custom-nav'>
<li><a
href='http://www.downloadsoftwaregratisan.com/2014/04/Disk-Space-Analyze-WinDirStat.html#more
'>Kumpulan download software</a></li>
<li><a href='http://duniadownload.com/software.html'>Dunia
Download </a></li>
<li><a href='http://download.cnet.com/windows/ '>download
net </a></li>
<li><a
href='http://20326056.siap-sekolah.com/2013/07/24/aplikasi-pendidikan-software-pendidikan-gratis-dapatkan-di-sini/comment-page-1/
'>Software Pendidikan </a></li>
<li><a
href='http://www.javacreativity.com/2012/05/software-gamelan-software-unik-dan.html
'>Software Gamelan </a></li>
</ul>
</li>
<li><a href='#'>Hiburan</a>
<ul id='sub-custom-nav'>
<li><a href='http://www.youtube.com/ '>YOUTUBE</a></li>
<li><a href='http://www.divine-music.info/ '>MUSIC HTML
</a></li>
<li><a href='http://www.mivo.com/home.php '>Mivo TV
</a></li>
<li><a href='http://nobartv.com/tv-online/1/50/K-Vision
'>K-Vision TV </a></li>
</ul>
</li>
<li><a href='#'>MGMP</a>
<ul id='sub-custom-nav'>
<li><a href='http://mgmppknkabsumenep.blogspot.com '>MGMP
SMP Kab Sumenep</a></li>
<li><a
href='http://ainamulyana.blogspot.com/2013/03/struktur-kurikulum-smp-2013-kompetensi.html
'>PPKn</a></li>
<li><a
href='https://www.academia.edu/4067162/JURNAL_PENDIDIKAN_KEWARGANEGARAAN_VOL_2_NO_4_NOP_2103'>JURNAL/KARYA
TULIS </a></li>
<li><a href='http://asminkarris.wordpress.com/ '>RPP/Materi KTSP </a></li>
<li><a href='http://www.slideshare.net/reninazta/jurnal-pkn-edisi2no4november2012libre
'>Jurnal PKn </a></li>
</ul>
</li>
<li><a
href='http://i-herbal.blogspot.com/'>Kesehatan</a></li>
</ul>
</div>
sumber : http://www.kanginanjaya.blogspot.com/2013/01/cara-membuat-sub-menu-bar-di-blog.html#more
sumber : http://www.kanginanjaya.blogspot.com/2013/01/cara-membuat-sub-menu-bar-di-blog.html#more
Tidak ada komentar:
Posting Komentar