Anda di halaman 1dari 12

Membuat Menu Drop Down Di

Blogspot
by Budi Cahyono 2 years ago
Banyak cara bagaimana membuat blog terlihat cantik dan salah satu caranya untuk
membuat blog yang kita miliki terlihat cantik adalah dengan mendesai menu secara
dinamis menggunakan menu drop down.

Menu drop down sendiri adalah menu yang menampilkan sederetan link yang
dinamis kearah bawah adapun cara membuat menu drop down pada blogspot
adalah dengan mengikuti langkah dibawah.

1. Masuk ke blogspot anda


2. Klik menu tata letak
3. Klik tambah gadget

Kemudian copy html di bawah

<div id='mbtnavbar'>
<ul id='mbtnav'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
<li>
<a href='#'>Sitemap</a>
<ul>
<li><a href='#'>Sub Page #1</a></li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
</ul>
</li>
</ul>
</div>

4 Save
5. Untuk Tanda # di ganti dengan link alamat artikel anda
6. Untuk menambah menu horizontal anda dapat mengcopy kode yang berada di
dalam <li> </li>
contoh:

<li>
<a href='#'>Nama Menu</a>
</li>

7. Untuk menambah menu vertikal copy kode dibawah


contoh

<li>
<a href='#'>Sitemap</a>
<ul>
<li><a href='#'>Sub Page #1</a></li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
</ul>
</li>

8. kemudian masuk ke menu template > edit HTML


9. Cari kode ']]></b:skin>' dan masukan kode dibawah tepat diatas kode
']]></b:skin>'

#mbtnavbar {
background: #060505;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #BF0100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 140px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav
li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li
li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul,
#mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited
{
background: #BF0100;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #060505;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

Cara Membuat Menu Dropdown atau Menu Menurun


pada Blog
OLEH CHOYYRUL A.

FRIDAY, 9 JANUARY 2015

Bagikan :

Cara membuat menu dropdown atau menurun pada Blogspot atau website.
Bagi kalian yang baru membuat sebuah blog atau website, pastinya kalian
tahu dengan salah satu menu ini. Menu Dropdown digunakan untuk membuat
menu menurun, maksudnya menu yang mempunyai sub menu. Fungsi dari
menu ini yaitu untuk membuat menu yang lebih efektif. Untuk lebih jelasnya,
silahkan lihat gambar dibawah ini ..

Dari gambar diatas terdapat menu KOMPUTER yang mempunyai sub menu
Hardware, Software dan Tutorial. Pembuatan menu dropdown akan lebih
mempermudah pengunjung blog atau website dalam menjelajahi blog atau
website kita.

Ikutilah langkah - langkah dibawah ini untuk pembuatan Menu Dropdown :

1. Masukkah ke akun blogger kamu,

2. Pilih Template, letaknya ada di pojok kiri bawah,


3. Setelah masuk ke Template, seperti gambar di atas, pilihlah Edit Html,

4. Kemudian anda akan dibawa masuk ke halaman Edit Template,

5. Lakukanlah pencarian Menu yang akan kamu buat menjadi Menu


Dropdown. Disini saya akan membuat Menu KOMPUTER yang
mempunyai sub menu Hardware, Software dan Tutorial.

6. Untuk melakukan pencarian tekan tombol CTRL+F,

7. Masukkan kata pencarian, lihat gambar dibawah ini.


8. Untuk membuat Menu Dropdown, tambah kan kode dibawah ini :

<li><a href='#'>KOMPUTER</a>

<ul>

<li><a href='#'>Hardware</a></li>

<li><a href='#'>Software</a></li>

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

</ul>

</li>

Penjelasan kodenya adalah :

<li><a href='#'>KOMPUTER</a>

Digunakan untuk membuat Menu Utama, tambahkan tanda # di Menu


Utama.

<ul>

<li><a href='#'>Hardware</a></li>

<li><a href='#'>Software</a></li>
<li><a href='#'>Tutorial</a></li>

</ul>

Kode di atas digunakan untuk membuat Sub Menu.

Pada Sub Menu, ganti tanda # dengan alamat URL blog kamu.

9. Terakhir klik Save Template untuk menyimpan template.

10. Selesai. Jika ada pertanyaan, silahkan melalui komentar dibawah ini.

Cara Baru Ganti Template Blog Keren


OLEH CHOYYRUL A.

SATURDAY, 17 JANUARY 2015

Bagikan :

Untuk mempunyai sebuah situs web, seseorang tidak harus tahu atau mahir
dalam pemograman web. Asalkan seseorang tersebut bisa dan paham cara
mengoperasikan komputer, dia bisa membuat sebuah situs web. Blogspot
merupakan sebuah weblog yang dapat anda gunakan untuk membuat
sebuah web statis. Menggunakan Blogspot anda tidak perlu paham atau
mahir dalam bahasa pemograman web, karena Blogspot telah menyediakan
fitur - fitur untuk membuat sebuah weblog. Dalam pengembangan sebuah
situs web, anda harus memikirkan tentang desain atau tampilan untuk situs
anda. Blogspot juga telah menyediakan macam - macam template untuk blog
anda, anda tinggal memilih template tersebut. Jika template dari Blogspot
kurang menarik, anda juga dapat mengambil template dari luar, karena
sekarang banyak yang menyediakan template gratis.

Bagaimana cara ganti template blog jika ambil dari luar?

Di artikel ini darikomputer akan memberikan tutorial cara mengganti


template blog dengan cepat dan mudah.

1. Pertama, sediakan dulu template blog yang akan anda gunakan. Anda
dapat mencarinya di google.com

2. Masuk ke akun blog anda. Pilih -> Template, letaknya di pojok kiri bawah.

3. Kemudian pilih -> Backup/Restore. Lihat tanda berwarna orange pada


gambar dibawah ini :
4. Setelah itu anda akan masuk ke halaman seperti gambar dibawah ini.
Pilihlah -> Download full Template, agar kita mempunyai cadangan
template jika nanti template yang baru ternyata Error.

5. Kemudian pilih -> Choose file. Untuk memilih file Template.


6. Cari dimana file Template kamu simpan dan klik Open. Seperti gambar
diatas.

7. Terakhir pilih -> Upload. Otomatis file template kamu akan terupload dan
berganti dengan yang baru.