Cara Membuat Kategori di Blogger

Akhirnya bisa posting lagi :D.Postingan kali ini Welly Wahyudi akan membahas tentang cara membuat Kategori(label) di blogger. Kategori atau bisa disebut label adalah pengelompokan posting atau artikel yang kita buat. Misalnya saya mengelompokkan Cara Membuat Akun Google ke dalam label Buat Akun dan cara membuat Kategori di Blogger ke dalam label Tips Trik Blogger. Ada 2 tahap membuat label di blogger, berikut tahapannya :

Memberi Kategori Pada Postingan

1. Loggin ke blogger dengan ID anda
2. Untuk memberi label pada posting, pada saat membuat postingan anda harus mengisi label yang ada pada bagian bawah kolom dengan nama kategori yang anda inginkan.
   
3. Jika ingin memberi label pada postingan yang sudah diterbitkan, anda tinggal mengedit postingan dan mengisi label seperti cara di atas kemudian terbitkan kembali.

Menambah Widget Label ke Blog

1. klik RANCANGAN dan pilih Elemen Laman
   
2. klik Tambah Gadget pada bagian yang ingin anda letakkan widget label
   
3. setelah muncul beberapa pilihan widget, cari Label dan langsung klik tanda + untuk menambahnya
   
4. akan muncul halaman seperti ini
   
5. klik SIMPAN

Selamat mencoba dan semoga bermanfaat :)

Cara membuat menu navigasi horizontal dropdown keren di blog

Hai sobat blogger ! sudah lama tak berjumpa ya, hampir 1 bulan saya tidak mengupdate isi postingan di blog ini, hampir sebulan itu saya mendapat kendala besar yang membuat saya jarang update. Saya memohon maaf untuk hal itu. Oke , kali ini saya akan berbagi ilmu tutorial blogging yang cukup keren sobat . Sesuai judulnya, kali ini saya akan membuat menu navigasi yang pernah saya pakai di blog ini atau bisa lihat sendiri pada gambar yang saya pasang diatas. Menu navigasi ini telah saya modifikasi sedemikian rupa sehingga menjadikannya keren dan elegan.. Bagaimana ? tertarik untuk membuatnya ? langsung saja kalau begitu kita simak dan bahas tutorialnya bersama-sama.

1.) Baca Basmallah
2.) Masuk ke akun blogger sobat
3.) Masuk ke Dashboard > Template > Edit Html > Lanjutkan
4.) Centang tanda Expand Template Widget
5.) Lalu cari kode [[></b:skin>
6.) Jika sudah ketemu, masukkan kode dibawah ini tepat diatas kode [[></b:skin>

Kode

menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Arial", Arial;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
font-size:14px;
font-weight:bold;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

7.) Simpan Template
8.) Buka Tata Letak > Tambah Gadget > Html/Javascript
9.) Masukkan kode berikut di form Konten yang tersedia 

Kode

<div class="menu"><ul><li><a href="#"> Nama Link </a></li><li><a href=" # "> Nama Link </a><ul><li><a href=" # "> Nama Link </a></li><li><a href=" # "> Nama Link </a></li><li><a href=" # "> Nama Link </a></li><li><a href=" # "> Nama Link </a></li></ul></li><li><a href="#"> Nama Link </a><ul><li><a href="#"> Nama Link </a></li><li><a href="#"> Nama Link </a></li></ul></li><li><a href="#">Nama Link</a></li></ul></div>

11.) Ganti # dengan URL yang akan dituju
Ganti Nama Link dengan nama yang akan ditampilkan dalam menu.
14.) Simpan dan lihat hasilnya