5 Widget yang Wajib Dimiliki Oleh Blogger

5 Widget Yang Harus Dimiliki Oleh Blogger

Widget adalah salah satu komponen terpenting yang harus dimiliki oleh sebuah blog. Tanpa adanya Widget, blog terasa hampa, tidak memiliki fungsi dan kurang optimal. Buat newbie biasanya masih sering mengutak-atik widget dan memasang berbagai macam widget di blognya. Padahal tidak semua widget yang ia pasang benar-benar memiliki fungsi yang jelas. Oleh karena itu dipostingan kali ini saya akan memberikan sebuah tips & trik widget apa saja yang wajib dimiliki oleh setiap blog.

1. Menu Navigasi

Widget pertama yang wajib dimiliki oleh blogger adalah sebuah menu navigasi. Dengan adanya Widget navigasi ini akan memudahkan pengguna untuk memilih kategori yang diinginkan. Apabila sebuah blog tidak memiliki menu navigasi, maka bisa jadi akan membuat pengunjungnya kebingungan & lari !. Menu navigasi ini biasanya berupa drop down menu. Fungsi lain dari menu navigasi adalah kalian bisa menggunakannya sebagai link internal.

Saat ini, untuk template blog tahun 2013-2014 sudah memiliki menu navigasi dalam template-nya. Namun, jika kalian pengguna blogger lawas, tampaknya kalian harus menambahkan widget yang satu ini.

Baca Juga :

- Cara Membuat Menu Horizontal Lavalamp Dengan CSS dan Jquery
- Membuat Drop Down Menu CSS3 di Blogger

2. Social Subscription 

Penggunaan media sosial sudah menjadi hal yang wajib saat ini. Media sosial bisa digunakan untuk mempromosikan blog yang kalian kelola. Tentu saja jika kalian mampu mengelolanya dengan baik. Saat ini ada beberapa pilihan untuk media sosial, namun saat ini kita hanya akan fokus pada 3 media sosial terbesar saat ini yakni Facebook, Twitter & Google+.

Menambahkan widget social subcription akan menjaga follower tetap setia kepada blog yang kalian punya. Tambahkannlah widget Facebook Like Box, Bandage follower ( Lencana ) Twitter atau Lencana Google+. Jangan lupa juga untuk menautkan link blog kalian dengan media sosial yang kalian punya.

Misalkan begini, kalian mempunyai sebuah fanpage facebook yang sudah di-like hingga puluhan ribu orang, lalu suatu saat blog kalian mempunyai sebuah postingan terbaru. Orang-orang yang sudah like fanpage kalian akan segera mengetahui informasi postingan baru yang ada diblog kalian apabila kalian menautkan link blog kalian kedalam media sosial fanpage facebook tersebut. Dan hasilnya ? trafik blog kalian pun bertambah !

Dengan adanya media sosial ini juga, kalian bisa lebih dekat dengan para pengunjung kalian.

Baca Juga :

- Menambahkan Widget Sosial Bookmark dari Shareholic
- Menaruh Widget Flipper Sharing Untuk Blogger

3. Email Subscription

Ada yang tahu widget Email Subcription ? Ituloh yang ada tulisan 'Berlangganan via Email". Dahulu widget ini sempat booming  sebelum adanya facebook atau twitter. Cara kerja Email Subcription sebenarnya hampir mirip dengan Social Subcription. Bedanya dengan menggunakan Email Subcription, penggunjung kalian yang sudah "berlangganan" melalui Email, akan menerima berita baru langsung kedalam emailnya. 

Walaupun sudah banyak ditinggalkan, namun Email Subcription ini tetap penting, saya sendiri masih menggunakannya hingga sekarang :)

Baca Juga :

- Menaruh Kotak Email Subscription Dengan 3 Warna Berbeda
- Menaruh Widget Subscription Berbentuk Perangko

4. Social Sharing

Wdiget ini merupakan salah satu widget yang paling saya suka ! kenapa ? karena dengan adanya widget Social Sharing ini, blog kita akan semakin terkenal dan semakin banyak mendapatkan pengunjung. 

Saat ini ada banyaaak sekali situs yang menawarkan widget social sharing. Saya sendiri menggunakan Widget Social Sharing dari ShareThis. Kalian bisa mencari social sharing yang kalian suka di google, sudah ratusan ribu blog yang menawarkan cara menaruh social sharing diblog.

5. Related Post ( Artikel Terkait )

Widget ini adalah widget yang terakhir yang wajib dimiliki oleh setiap blogger. Biasa disebut juga Related Post atau bahasa Indonesianya Artikel Terkait. Dengan adanya Widget ini, pengguna dapat membaca postingan terkait sesuai dengan label yang dipilih. Selain itu, dengan adanya widget related post, pengunjung tidak perlu repot-repot untuk mencari artikel yang masih berketerkaitan. Jadi, pengunjung akan betah & berlama-lama diblog kamu. Jika tidak ada widget ini, bisa-bisa blog kamu seperti kuburan, setelah habis dikunjugi lalu ditinggal pergi hehehe.

Kesimpulan

Itulah beberapa widget yang menurut saya wajib untuk dimiliki oleh setiap blog. Saya sendiri sudah merasakan manfaat dari memiliki widget-wdiget tersebut. Blog yang memiliki kelima widget tersebut menurut saya sudah cukup untuk menunjang SEO. Jika kalian merasa ada widget yang wajib juga, silakan tambah dikomentar ! Thanks.

Read more »

Cara Membuat Menu Horizontal Lavalamp Dengan CSS dan Jquery

Sebelumnya Taqobalallahu Minna Waminkum. Selamat lebaran 1433 H bagi kawan2ku semuanya. setelah beberapa hari vakum dikarenakan kegiatan offline, akhirnya bisa update postingan juga nih gan. Di tanggal 2 Syawal ini saya akan membagikan sebuah Horizontal menu keren dengan pilihan warna yang beragam. Selain itu terdapat pilihan warna 6 buah yang bisa disesuaikan dengan warna template blog kamu.

Drop down menu juga sangat dibutuhkan untuk sebuah blog, selain untuk mempercantik tampilan blog, dengan menggunakan fitur ini, blog kamu akan lebih terlihat fresh dan memperlebar space blog kamu karena akan ada beberapa link yang bisa ditaruh di horizontal menu ini. Oh iya, sebelumnya terima kasih kepada insicdesigns yang sudah mendesain drop down menu ini serta kepada helperblogger yang sudah membuatnya bekerja lebih baik untuk platform blogger. Langsung saja kamu lihat cara membuatnya di bawah ini :

1. Login ke Blogger.com

2. Klik Template --> Back Up template kamu terlebih dahulu, Lihat caranya di bawah ini :

• Untuk Antarmuka Blog yang lama klik disini 
• Untuk Antarmuka Blog yang Baru klik disini 

3. Masih di bagian Template, Kamu klik Edit HTML --> Pilih Lanjutkan --> Cari kode  </head>, kamu bisa gunakan CTRL + F untuk pencarian lebih mudah. Salin kode di bawah ini dan letakkan di atas kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://hzndi.googlecode.com/files/lavalamp-menu.js" type="text/javascript"></script>

Note : jika kamu sudah ada kode Jquery yang berwarna biru di blog kamu, kamu tinggal menambahkan kode yang ada di bawah kode warna biru saja.

4. Sekarang kamu cari kode ]]></b:skin> dan kamu salin kode di bawah ini kemudian kamu letakkan diatas kode ]]></b:skin>

/*lava lamp menu http://www.hzndi.blogspot.com/ start*/
.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
 -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
 height: 18px;
        font-family: calibri;
}

.magenta {
 background : rgb(190,64,120);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 border: 1px solid #841144;
 
}

.cyan {
 background : rgb(64,181,197);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 border: 1px solid #2f8893;
 
}

.yellow {
 background : rgb(255,199,79);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 border: 1px solid #c08c1f;
 
}

.orange {
 background : rgb(255,133,64);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 border: 1px solid #c04f11;
 
}

.dark {
 background : rgb(89,89,89);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 border: 1px solid #272727;
 
}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
 color: #fff;
 text-shadow: 0 -1px 0 rgba(0,0,0,.40);
 
}

.lavalamp a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}

.lavalamp ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}

.lavalamp ul li {
    list-style: none;
    float:left;

    text-align: center;
    }

.lavalamp ul li a {
    padding: 0 20px;
    text-align: center;
    }

.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}
/*lava lamp menu http://www.hzndi.blogspot.com/ end*/

5. Klik Simpan template.

6. Sekarang kamu klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu salin kode di bawah ini dan kamu masukkan kedalam kotak HTML/Javasript tadi.

<div class="lavalamp dark">
 <ul>
  <li class="active"><a href="">Home</a></li> 
<li><a href="MASUKKAN URL YANG INGIN KAMU TUJU DISINI">GANTI DENGAN KATA2 SESUKA KAMU</a></li>
<li><a href="MASUKKAN URL YANG INGIN KAMU TUJU DISINI">GANTI DENGAN KATA2 SESUKA KAMU</a></li> 
<li><a href="MASUKKAN URL YANG INGIN KAMU TUJU DISINI">GANTI DENGAN KATA2 SESUKA KAMU</a></li>
<li><a href="MASUKKAN URL YANG INGIN KAMU TUJU DISINI">GANTI DENGAN KATA2 SESUKA KAMU</a></li> 
<li><a href="MASUKKAN URL YANG INGIN KAMU TUJU DISINI">GANTI DENGAN KATA2 SESUKA KAMU</a></li> 
<li><a href="MASUKKAN URL YANG INGIN KAMU TUJU DISINI">GANTI DENGAN KATA2 SESUKA KAMU</a></li> 
 </ul>
 <div class="floatr"></div>
</div>

Note : Untuk kode yang berwarna biru diatas adalah warna background dari menu horizontal. Kamu bisa pilih salah satu warna backgroundnya dengan mengganti kode tersebut dengan salah satu kode di bawah ini.

A. Warna default

Kode warna Default : <div class="lavalamp">

B. Warna magenta

Kode warna Magenta : <div class="lavalamp magenta">

C. Warna Cyan

Kode warna Cyan : <div class="lavalamp cyan">

 

D. Warna Hitam

Kode warna Hitam : <div class="lavalamp dark">

E. Warna Oranye

 

Kode warna Oranye : <div class="lavalamp orange">

F. Warna Kuning

Kode warna Kuning : <div class="lavalamp yellow"> 

7. Klik Simpan Template dan kamu bisa melihat demo onlinenya dari helperblogger disini

Read more »

Cara Membuat Horizontal Menu Dengan CSS

Banyak yang membayangkan membuat atau menaruh horizontal adalah hal yang sulit bahkan teramat sulit sekali. Padahal caranya mudah jika kita mengikuti langkah-langkahnya satu persatu. Terlebih lagi horizontal menu memiliki fungsi yang sangat penting, Tntunya selain dapat menghemat space  blog kita, dengan menggunakan horizontal menu akan semakin membuat tampilan blog kita semakin menarik.

Dan di tutorial kali ini saya akan membagikan sebuah tutorial tentang cara menaruh horizontal menu di dalam blog. Di beberapa postingan sebelumnya saya pernah membagikan cara ini, kamu bisa lihat lebih lengkapnya di daftar isi blog. 

Oh iya, horizontal menu ini di buat oleh dynamicdrive. Oke langsung saja jika kamu tertarik untuk membuat bisa kamu lihat caranya di bawah ini.

1. Login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu salin kode CSS di bawah ini.

<style type="text/css">

/* Horizontal Menu untuk Blogger By http://www.hzndi.blogspot.com/ */

div.topbar {
 height: 16px;
 background: #e16031;
}

ul.claybricks {
 font-weight: bold;
 width: 100%;
 background: #e3e490;
 padding: 6px 0 6px 0;
 margin: 0;
 text-align: left;
        font-family: calibri;
}

ul.claybricks li {
 display: inline;
}

ul.claybricks li a {
 color: black;
 padding: 6px 8px 4px 8px;
 margin-right: 20px;
 text-decoration: none;
}

ul.claybricks li a:hover, ul.claybricks li a.selected {
 color: white;
 background: #5d4137;
 background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
 background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
 background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
 background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
 background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
 -moz-box-shadow: 0 0 5px #595959;
 -webkit-box-shadow: 0 0 5px #595959;
 box-shadow: 0 0 5px #595959;
 padding-top: 17px;
 padding-bottom: 6px;
}

/* http://hzndi.blogspot.com */

</style>
<div class="topbar">
</div>
<ul class="claybricks">
 <li><a href="masukkan-url-yang-inginkan">masukkan-kata2-yang-inginkan</a></li>
 <li><a href="masukkan-url-yang-inginkan">masukkan-kata2-yang-inginkan</a></li>
 <li><a href="masukkan-url-yang-inginkan">masukkan-kata2-yang-inginkan</a></li>
 <li><a href="masukkan-url-yang-inginkan">masukkan-kata2-yang-inginkan</a></li>
 <li><a href="masukkan-url-yang-inginkan">masukkan-kata2-yang-inginkan</a></li>
 <li><a href="masukkan-url-yang-inginkan">masukkan-kata2-yang-inginkan</a></li>
</ul>

3. Letakkan Widget di bawah header blog.

4. Simpan template dan lihat hasilnya.

Read more »

Membuat Drop Down Menu CSS3 di Blogger

Drop Down Menu, pasti sudah tidak terdengar asing lagi untuk kalian. Tentunya dengan Menerapkan Trik yang satu ini, blog kita akan lebih cantik dan membuat blog kita lebih simple dan menghemat tempat. Kenapa mengehamt tempat ? karena biasanya kita menaruh kategori atau label blog dengan widget, sekarang tinggal di taruh saja link-link label blog tersebut di drop down menu. Memang di beberapa postingan sebelumnya saya pernah membuat tutorialnya yang bisa kamu lihat di bawah ini :

1. Membuat Horizontal Menu Dengan CSS
2. Membuat Drop Down Menu Dengan CSS
3. Menaruh CSS3 Drop Down Menu Dengan CSS
4. Membuat Drop Down Menu Ala Facebook

Nah langsung saja kita mulai tutorialnya :) lihat caranya di bawah ini :

1. Login ke Blogger.com

2. Klik Template --> Edit HTML --> Klik Lanjutkan, kemudian kamu cari kode ]]></b:skin>

3. Salin kode CSS di bawah ini dan kamu letakkan di atas kode ]]></b:skin> 

/* Drop Down Menu By hzndi.blogspot.com */
#nav {
 float: left;
 font: bold 12px Arial, Helvetica, Sans-serif;
 border: 1px solid #121314;
 border-top: 1px solid #2b2e30;
 overflow: hidden;
 width: 100%;
 background: #3C4042;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
 background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
}

#nav ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

#nav ul li {
 float: left;
}

#nav ul li a {
 float: left;
 color: #d4d4d4;
 padding: 10px 20px;
 text-decoration: none;
 background: #3C4042;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
 background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
 border-left: 1px solid rgba(255, 255, 255, 0.05);
 border-right: 1px solid rgba(0,0,0,0.2);
 text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
/* Drop Down Menu By hzndi.blogspot.com */
#nav ul li a:hover,
#nav ul li:hover > a {
 color: #252525;
 background: #3C4042;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
 background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}

#nav li ul a:hover,
#nav ul li li:hover > a {
 color: #2c2c2c;
 background: #5C9ACD;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
 background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
 background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
 border-bottom: 1px solid rgba(0,0,0,0.6);
 border-top: 1px solid #7BAED9;
 text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
/* Drop Down Menu By hzndi.blogspot.com */
#nav li ul {
 background: #3C4042;
 background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
 background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 left: -999em;
 margin: 35px 0 0;
 position: absolute;
 width: 160px;
 z-index: 9999;
 box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
 -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
 -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
 border: 1px solid rgba(0, 0, 0, 0.5);
}

#nav li:hover ul {
 left: auto;
}

#nav li ul a {
 background: none;
 border: 0 none;
 margin-right: 0;
 width: 120px;
 box-shadow: none;
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 border-bottom: 1px solid transparent;
 border-top: 1px solid transparent;
}

.nav ul li ul {
    position: absolute;
    left: 0;
    display: none;
    visibility: hidden;
}

.nav ul li ul li {
    display: list-item;
    float: none;
}

.nav ul li ul li ul {
    top: 0;
}

.nav ul li ul li a {
    font: normal 13px Verdana;
    width: 160px;
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
}

#nav li li ul {
 margin: -1px 0 0 160px;
 visibility: hidden;
}

#nav li li:hover ul {
 visibility: visible;
}
/* Drop Down Menu By hzndi.blogspot.com */

4. Simpan template, namun belum selesai nih, setelah itu kamu klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu salin lagi kode HTML/Javascript di bawah ini.

<div id="nav">
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Our Portfolio</a></li>
  <li><a href="#">One Dropdown</a></li>
  <li><a href="#">Three Levels</a>
  <ul>
   <li><a href="#">Level 2.1</a></li>
   <li><a href="#">Level 2.2</a></li>
   <li><a href="#">Level 2.3</a></li>
  </ul>
  </li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact Us</a></li>
 </ul>
</div>

NOTE :

• Ganti tanda # dengan alamat URL yang kamu suka.
• Ganti Home, About US, dll dengan kata-kata yang kamu suka.

5. Simpan Template dan kamu lihat hasilnya :)

Read more »

Menaruh Drop Down Menu Dengan Facebook Style

Sudah beberapa tutorial Drop Down Menu yang saya berikan pada blog ini, namun yang ini berbeda dengan yang sebelumnya. Kamu akan menaruh drop down menu dengan gaya facebook, untuk hasilnya bisa kamu lihat gambar di atas, ikuti cara menaruhnya di bawah ini.

1. Masuk ke Blogger.com

2. Klik Rancangan --> Elemen Laman --> Tambah Gadget --> HTML/Javascript dan salin kode javascriptnya di bawah ini.

    <style>
    #mbtnavbar {
        background: #3B5998;
        width: 100%;
    
        color: #FFF;
            margin: 10px 0;
            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;
         
    }
    #mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
        color: #FFF;
        display: block;
       font:bold 12px Helvetica, sans-serif;
       margin: 0;
        padding: 9px 12px 11px 12px;
            text-decoration: none;
            border-right:0px solid #627AAD;

    }
    #mbtnav li a:hover, #mbtnav li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;
        text-decoration: none;
            margin: 0;
        padding: 9px 12px 11px 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: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        margin: 1px 0 0 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;

     
    }
    #mbtnav li li a:hover, #mbtnav li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;
     
    }


    #mbtnav li li li a, #mbtnav li li li a:link, #mbtnav li li li a:visited {

        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;
        margin: 1px 0 0  -14px;
     
     
    }
    #mbtnav li li li a:hover, #mbtnav li li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;
    }

    </style>
    <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>
                       <ul>
                        <li><a href='#'>Sub Sub Page #1</a></li>
                        <li><a href='#'>Sub Sub Page #2</a></li>
                        <li><a href='#'>Sub Sub Page #3</a></li>
                      </ul>
    </li>
                      </ul>
                </li>

              </ul>
            </div>

NOTE :

• Ganti # dengan alamat URL kamu dan kata-kata "Home, COntact, dll" dengan kata-kata yang kamu suka. Contoh jika kita ingin membuat link baru :

         <li><a href='http://hzndi.blogspot.com'>Tutorial Blog</a></li>

• Untuk Kode yang berwarna ungu, itu adalah sub page-nya.

3. Simpan Template dan lihat hasilnya :D

Read more »

Menaruh CSS3 Drop Down Menu Dengan CSS

 

Blog yang kamu punya tidak memiliki dropdown menu ? nah pada kesempatan ini saya akan memberikan bagaimana cara membuat dropdown menu pada blog kamu sehingga blog kamu akan terasa lebih menarik dan mudah di akses. Oh iya, tutorial ini saya dapatkan dari mybloggertricks.com dan kode CSS dropdown menu di atas di buat oleh Catalin Rosu. Lihat cara menaruhnya di bawah ini :

1. Masuk ke Akun Blogger kamu.

2. Klik Rancangan --> Elemen Laman --> Tambah Gadget --> HTML/Javascript.

3. Masukkan kode javascript di bawah ini ke dalam kotak HTML/Javascript tadi.

    <style>

    /*------ CSS3 Drop Down Menu By MBT (www.mybloggertricks.com)---------*/

    #mbt-menu, #mbt-menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

    }

    #mbt-menu {

    width: 960px;

    margin: 60px auto;

    border: 1px solid #222;

    background-color: #111;

    background-image: -moz-linear-gradient(#444, #111);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));

    background-image: -webkit-linear-gradient(#444, #111);

    background-image: -o-linear-gradient(#444, #111);

    background-image: -ms-linear-gradient(#444, #111);

    background-image: linear-gradient(#444, #111);

    -moz-border-radius: 6px;

    -webkit-border-radius: 6px;

    border-radius: 6px;

    -moz-box-shadow: 0 1px 1px #777;

    -webkit-box-shadow: 0 1px 1px #777;

    box-shadow: 0 1px 1px #777;

    }

    #mbt-menu:before,

    #mbt-menu:after {

    content: "";

    display: table;

    }

    #mbt-menu:after {

    clear: both;

    }

    #mbt-menu {

    zoom:1;

    }

    #mbt-menu li {

    float: left;

    border-right: 1px solid #222;

    -moz-box-shadow: 1px 0 0 #444;

    -webkit-box-shadow: 1px 0 0 #444;

    box-shadow: 1px 0 0 #444;

    position: relative;

    }

    #mbt-menu a {

    float: left;

    padding: 12px 30px;

    color: #999;

    text-transform: uppercase;

    font: bold 12px Arial, Helvetica;

    text-decoration: none;

    text-shadow: 0 1px 0 #000;

    }

    #mbt-menu li:hover > a {

    color: #fafafa;

    }

    *html #mbt-menu li a:hover { /* IE6 only */

    color: #fafafa;

    }

    #mbt-menu ul {

    margin: 20px 0 0 0;

    _margin: 0; /*IE6 only*/

    opacity: 0;

    visibility: hidden;

    position: absolute;

    top: 38px;

    left: 0;

    z-index: 9999;

    background: #444;

    background: -moz-linear-gradient(#444, #111);

    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

    background: -webkit-linear-gradient(#444, #111);

    background: -o-linear-gradient(#444, #111);

    background: -ms-linear-gradient(#444, #111);

    background: linear-gradient(#444, #111);

    -moz-box-shadow: 0 -1px rgba(255,255,255,.3);

    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

    }

    #mbt-menu li:hover > ul {

    opacity: 1;

    visibility: visible;

    margin: 0;

    }

    #mbt-menu ul ul {

    top: 0;

    left: 150px;

    margin: 0 0 0 20px;

    _margin: 0; /*IE6 only*/

    -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    box-shadow: -1px 0 0 rgba(255,255,255,.3);

    }

    #mbt-menu ul li {

    float: none;

    display: block;

    border: 0;

    _line-height: 0; /*IE6 only*/

    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    }

    #mbt-menu ul li:last-child {

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    }

    #mbt-menu ul a {

    padding: 10px;

    width: 130px;

    _height: 10px; /*IE6 only*/

    display: block;

    white-space: nowrap;

    float: none;

    text-transform: none;

    }

    #mbt-menu ul a:hover {

    background-color: #0186ba;

    background-image: -moz-linear-gradient(#04acec, #0186ba);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

    background-image: -webkit-linear-gradient(#04acec, #0186ba);

    background-image: -o-linear-gradient(#04acec, #0186ba);

    background-image: -ms-linear-gradient(#04acec, #0186ba);

    background-image: linear-gradient(#04acec, #0186ba);

    }

    #mbt-menu ul li:first-child > a {

    -moz-border-radius: 3px 3px 0 0;

    -webkit-border-radius: 3px 3px 0 0;

    border-radius: 3px 3px 0 0;

    }

    #mbt-menu ul li:first-child > a:after {

    content: '';

    position: absolute;

    left: 40px;

    top: -6px;

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

    border-bottom: 6px solid #444;

    }

    #mbt-menu ul ul li:first-child a:after {

    left: -6px;

    top: 50%;

    margin-top: -6px;

    border-left: 0;

    border-bottom: 6px solid transparent;

    border-top: 6px solid transparent;

    border-right: 6px solid #3b3b3b;

    }

    #mbt-menu ul li:first-child a:hover:after {

    border-bottom-color: #04acec;

    }

    #mbt-menu ul ul li:first-child a:hover:after {

    border-right-color: #0299d3;

    border-bottom-color: transparent;

    }

    #mbt-menu ul li:last-child > a {

    -moz-border-radius: 0 0 3px 3px;

    -webkit-border-radius: 0 0 3px 3px;

    border-radius: 0 0 3px 3px;

    }


    </style>


    <ul id="mbt-menu">
    <li><a href="#">Home</a></li>
    <li>
    <a href="#">Categories</a>
    <ul>
    <li><a href="#">CSS</a></li>
    <li><a href="#">Graphic design</a></li>
    <li><a href="#">Development tools</a></li>
    <li><a href="#">Web design</a></li>
    </ul>
    </li>
    <li><a href="#">Work</a></li>
    <li><a href="#">About</a></li>
    <li><a href="http://hzndi.blogspot.com">Tutorial Blog</a></li>
    </ul>

NOTE : 

Kamu ganti kode yang berwarna biru dengan kata-kata yang kamu suka, seperi "beranda, download, dll".

Kamu ganti kode #  yang berwarna hijau dengan alamat url kamu atau alamat artikel url kamu.

4. Simpan Template.

Jika ada pertanyaan, kritik, saran tentang artikel ini, bisa kamu berikan komentar kamu di kotak komentar di bawah ini.

Read more »