Pendidikan Berkarakter: Cara Mudah Membuat Menu Navigasi Slide Blogspot

Langkah-langkah Membuat Menu Navigasi

Slide Horizontal Blogspot

Bagi anda yang mau memperindah blog anda dengan menampilkan menu navigasi slide. Apa itu Navigasi slide…? Bahasa sederhananya adalah suatu menu yang ditampilkan dibagian bawah title bar (areal judul blog), ini digunakan selain mempercantik blog, juga digunakan untuk mengkategorikan menu dan sub- sub menu . contoh gambar dapat dilihat pada bagian bawah gambar judul blog ini.

Ikuti langkah-langkah berikut ini:

1. Login ke Blogger, disini anda akan dibawa langsung ke daksbar blog anda,

2. Klik Rancangan

3. Kemudian Klik Edit HTML

4. Klik Kotak sebanyak 1X sehingga muncu tanda ceklis (V) pada kotak yang berada sebelum kata Expand Template Widget

5. Lalu cari kode berikut ]]></b:skin> dengan cara tekan Ctrl + F maka akan muncul menu baru di bagian atas tulisan Backup/Restore Template

6. Copy kode ]]></b:skin> tersebut kemudian pastekan lalu tekan Enter

7. Maka carilah kode ]]></b:skin> pada kotak edit template

8. Copy semua code-code berwarna merah berikut, kemudain pastekan tepat diatas (sebelum) code ]]></b:skin> silakan di copy:

#Menumainwrapx {

background:url(http://farm2.static.flickr.com/1046/5118494385_6bed6df208_t.jpg) repeat-x scroll 0 0 #222222;

border-bottom:1px solid #CCCCCC;

height:42px;

margin:0;

padding:0;

}

#NavbarMenux {

width: 950px;

height: 41px;

font-size: 13px;

color:#333333;

margin: 0px;

padding: 0;

font-weight:bold;

font-family:arial;

margin: 0 auto;

}

#NavbarMenuleftx {

width: 950px;

margin: 0;float:left;}

#navx { margin: 0;

padding: 0; }

#navx ul {

float: left;

list-style: none;

margin: 0;

padding: 0; }

#navx li {

list-style: none;

margin: 0px;

padding: 0; }

#navx li a,

#navx li a:link,

#navx li a:visited {

height: 22px;

color: #333333;

display: block;

font-size: 13px;

text-decoration: none;

margin: 0;

padding:10px 13px 9px 13px;

border-right: 1px solid #CFCFCF; }

#navx li a:hover,

#navx li a:active {

color: #333;

margin: 0;

text-decoration: none;

background:#F0F0F0;

}

#navx li li a, #nav li li a:link,

#navx li li a:visited {

background:url(http://farm2.static.flickr.com/1190/5119105082_e113afd892_t.jpg) repeat-x scroll 0 0 #f5f5f5;

min-width: 150px;

color: #333333;

font-size: 14px;

font-weight: normal;

float: none; margin: 0;

padding: 5px 10px;

font-weight:bold;

font-family:arial;

box-shadow: 0px 3px 3px rgba(0,0,0,0.8);

-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);

-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);

text-align:left;}

#navx li li a:hover,

#navx li li a:active {

background: #F5F5F5;

color: #333;

}

#navx li {

float: left;

padding: 0; }

#navx li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px;

margin:0;

padding: 0;

border-top:1px solid #242424;

}

#navx li ul a {

width: 140px; }

#navx li ul ul {

margin: -41.5px 0 0 176px;

border:none;}

#navx li:hover ul ul,

#navx li:hover ul ul ul, #navx li.sfhover ul ul,

#navx li.sfhover ul ul ul {

left: -999em; }

#navx li:hover ul,

#navx li li:hover ul,

#navx li li li:hover ul,

#navx li.sfhover ul,

#navx li li.sfhover ul,

#navx li li li.sfhover ul {

left: auto; }

#navx li:hover,

#navx li.sfhover {

position: static; }

9. Apakah anda sudah paste code di atas….?

10. Klau sudah, langkah selanjutnya klik Simpan template

11. Langkah pertama sudah selesai. Silahkan anda bernapas sejenak ………………..

Catatan: Kode diatas belum bisa menampilkan menu navigasi yang inginkan. Untuk menampilkan menu navigasi anda harus mengikuti langkah –langkah berikut ini.

Langkah-langkahnya:

1. Klik Rancangan

2. Kemudian klik Elemen laman biasanya terletak di bagian samping kiri edit HTML

3. Langkah selanjutnya klik Tambah Gadget, maka akan muncul kotak dialog Tambah Gadget

4. Cari HTML/JavaScript, kemudian klik tanda plus (+) yang berada di samping kanannya

5. Tunggu sebenter sampai loading selesai

6. Kemudian copy dan pastekan code-code berikut pada kotak dialog HTML/JavaScript:

<li><a href='yourlink'>profil sekolah</a></li>

<li><a href='yourlink'>Guru Mapel</a></li></ul>

<li><a href='/'>Kurikulum</a><ul>

<li><a href='yourlink'>Ulangan</a></li>

<li><a href='yourlink'>Perangkat Pembelajaran</a></li>

<li><a href='yourlink'>Program Kerja</a></li>

<li><a href='yourlink'>Rencana Anggaran</a></li>

<li><a href='yourlink'>jadwal pelajaran</a></li></ul>

<li><a href='/'>Kesiswaan</a><ul>

<li><a href='yourlink'>Program</a></li>

<li><a href='yourlink'>Rencana Anggaran</a></li>

<li><a href='yourlink'>Ekstra kurikuler</a></li>

<li><a href='yourlink'>struktur Organisasi</a></li>

<li><a href='yourlink'>Anggota osis</a></li></ul>

<li><a href='/'>Sarpras</a><ul>

<li><a href='yourlink'>Program</a></li>

<li><a href='yourlink'>data barang</a></li>

<li><a href='yourlink'>Dana Perawatan Barang</a></li></ul>

<li><a href='/'>Humas</a><ul>

<li><a href='yourlink'>Program</a></li>

<li><a href='yourlink'>Rencana Anggaran</a></li>

<li><a href='yourlink'>Jadwal Upacara</a></li></ul>

<li><a href='yourlink'>Program</a></li>

<li><a href='yourlink'>Rencana Anggaran</a></li>

<li><a href='yourlink'>Buku Kasus</a></li></ul>

<li><a href='yourlink'>Program</a></li>

<li><a href='yourlink'>Rencana Anggaran</a></li>

<li><a href='yourlink'>Kegiatan UKS</a></li>

<li><a href='yourlink'>struktur Organisasi</a></li>

<li><a href='yourlink'>Buku kunjungan</a></li></ul>

<li><a href='yourlink'>Program</a></li>

<li><a href='yourlink'>Rencana Anggaran</a></li>

<li><a href='yourlink'>Kegiatan PMR</a></li>

<li><a href='yourlink'>struktur Organisasi</a></li>

<li><a href='yourlink'>Downlod Gratis</a></li></ul>

<li><a href='/'>Seputar Pendidikan</a><ul>

<li><a href='yourlink'>belum ada</a></li>

<li><a href='yourlink'>Anggota osis</a></li></ul>

<li><a href='/'>Tutorial</a><ul>

<li><a href='yourlink'>belum ada</a></li>

<li><a href='yourlink'>belum ada</a></li></ul>

<li><a href='/'>Download</a><ul>

<li><a href='yourlink'>belum ada</a></li>

<li><a href='yourlink'>belum ada</a></li></ul>

Catatan: 1. Code </li> digunakan untuk menambah link baru

2. Code </ul> digunakan untuk mengakhiri link

3. Ganti kata yang beri warna kuning di atas dengan nama yang anda inginkan.

4. Ganti kata Yourlink dengan alamat link postingan anda contoh: http://pend-karakter.blogspot.com

7. Kemudian klik Simpan

Selamat,……anda sudah menyelesaikan menu navigasi anda!!!!

Pendidikan Berkarakter

Monday, January 9, 2012

Cara Mudah Membuat Menu Navigasi Slide Blogspot

No comments:

Post a Comment