Membuat Gambar Membesar Saat disentuh Cursor

Membuat Gambar Membesar Saat disentuh Cursor - Mungkin sebagian Blogger sering melihat gambar yang menjadi besar apabila tersentuh cursor. Dalam dunia blogging fitur seperti ini sering disebut dengan nama Image Zoom Effects atau Hover Zoom Smooth Effects. Fitur yang satu ini lumayan banyak di senangi para blogger walaupun sebenarnya dengan memasang Image Zoom Effects ini di blog dapat menggangu pengunjung yang sedang membaca postingan kita.

Postingan ini saya buat untuk melengkapi Tutorial di blog ini, buat sobat yang ingin memasangnya silakan Anda ikuti tutorial dibawah ini.

Cara Membuat Gambar Membesar Saat disentuh Cursor :

• Masuk ke akun blogger sobat.
• Pilih Template > Edit HTML.
• Ceklis / Centang Expand Widget Template.
• Cari kode ]]></b:skin> , gunakan fungsi Find dengan menekan tombol CTRL+F pada keyboard.
• Kalau sudah ketemu, letakkan kode berikut tepat di atas kode ]]></b:skin>
  
  .post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
  .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
• Terakhir klik Simpan Template. Sekarang lihat hasilnya di blog Sobat.

Semoga tutorial singkat ini bisa bermanfaat...

Sumber

Read More..

Membuat widget keren social Profile Metro UI

Membuat widget keren social Profile Metro UI - Sahabat MW bagaimana kabarnya... semoga baik-baik aja. gini Gan kali ini saya ingin memposting kan cara membuat widget keren social Profile Metro UI supaya widget ini bisa membuat blog sahabat MW semakin keren sebelum ke tutorialnya saya kasih Preview nya di bawah ini :

Untuk menginstal widget ini ke blog sangat mudah, baik blog anda dengan flatfrom blogger, wordpress atau layanan blogging lainnya dimana style CSS dan HTML diterima pada widget atau template. Anda hanya perlu menambahkan kode gadget/widget pada bagian HTML/JavaScript.
Step by step for blogger

• Pada dasbor >> Masuk menu Tata Letak >> Tambah Gadget >> Pilih HTML/JavaScript
• Copy dan paste kode berikut pada kolom konten: 

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/mwalidain.blog rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/MustaidulW></a></li>
<li><a class="gp" href="https://plus.google.com/101560192906077776792"></a></li>
<li><a class="pi" href=http://pinterest.com/MWalidain rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/MWalidain rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/MWalidain></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/MWalidain rel="nofollow"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

Keterangan : Tulisan yang berwarna di tulis sesuai akun yang anda miliki

• Kemudian disimpan dan lihat hasilnya.

Read More..

Cara Menampilkan PDF di Blog

Jika anda memilik suatu blog, pastinya anda akan berusaha membuat blog anda menarik bukan? Contohnya, jika anda ingin membuat suatu posting dan memuat file, pastinya anda akan berusaha bagaimana supaya file pdf tersebut bisa tampak dan tampil menarik di blog.

Berikut ini adalah salah satu cara yang bisa anda lakukan jika anda menggunakan blogspot.com

• Anda bisa menggunakan account di docstoc.com, jika belum punya account, silahkan sign up terlebih dahulu.
• Jika anda sudah memiliki account di docstoc.com, klik> upload> share document

• Kemudian pilih file pdf yang akan diupload: klik > Select Files

• Setelah proses upload complete, maka anda bisa menambahkan diskripsi file anda agar mudah dicari oleh pengunjung yang mencari di search engine.
• Kemudian klik > save and publish 
• Setelah berhasih dipublish, maka disamping dokumen / file anda akan ada keterangan dan embed pada sisi file. Klik > embed.

• Anda bisa meletakkan embed file ini ke dengan cara klik> copy code dan paste ke Post yang anda buat pada HTML.

• Sebelum anda publish postingan anda, anda bisa melakukan preview untuk melihat tampilan file pdf anda. Untuk menagtur tinggi dan lebar file pdf yang ditampilkan, anda bisa mengaturnya dengan mengganti pada isian "width" dan :height" sesuai kebutuhan anda.
• Kemudian publish postingan anda yang sudah memuat file yang di embed di HTML blogspot anda,

Selamat Mencoba.....HAPPY BLOGGING......! :-)

Read More..

Cara Membuat Fans Page Facebook Di Blog

Jaringan sosial beserta pluginnya, khususnya Facebook, terbukti telah memperluas dan meningkatkan popularitas, daya jangkau, traffic, serta penjualan produk jenis apapun. Oleh karena itu, membuat Fans Page Facebook di blog/website merupakan hal yang sangat dianjurkan untuk blog/website Sobat.

Cara Membuat Fans Page Facebook di Blog/Website

1. Langkah pertama Sobat login terlebih dahulu di account Facebook Sobat.
2. Kemudian buka halaman ini:  Facebook Page
3. Pilih/klik opsi Merek atau Produk

4. Pilih opsi no.1"website" dan isikan no.2"nama Page" sesuai dengan yang diinginkan. centang "Persetujuan" dan klik "Mulai", seperti contoh gambar berikut:

5. Selanjutnya Sobat akan masuk ke halaman Facebook Page yang telah dibuat. Lakukan kostumisasi terlebih dahulu sesuai petunjuk, misalnya mengupload foto/gambar untuk Facebook Page, mengedit informasi, dan lain sebagainya, atau langsung membuat Facebook Like Box yang nantinya dapat dipasang di blog/website.

Penting: Sebelum menuju langkah berikutnya copy terlebih dahulu url Facebook Fan Page yang telah dibuat. Fungsinya sebagai spesifikasi url untuk like box yang nantinya hendak dibuat.

Contoh url-nya: http://www.facebook.com/pages/K-T-B/300432780037612

6. Berikutnya sobat pilih menu nomer 5 dan klik "add like box" atau bisa juga buka halaman berikut: Like Box

7. Selanjutnya, isikan spesifikasi seperti gambar berikut:

Setting Facebook Like Box:

1. Facebook Page url: paste url Facebook Page yang di copy tadi

2. Width: lebar tampilan facebook like, sesuaikan dengan lebar sidebar widget pada blog sobat.

3. Height: adalah tinggi like box, sesuaikan juga dengan widget pada blog sobat.

4. Color scheme: pilih light jika ingin tampilan terang, dan dark untuk tampilan gelap.

5. Show Faces: Centang untuk menampilkan foto profil likers.

6. Border color: Isikan dengan kode warna jika ingin memberi border atau kosongkan agar transparan.

7. Show stream: Centang jika ingin menampilkan informasi/posting terakhir di like box.

8. Show header: Centang jika ingin menampilkan tulisan header "Temukan kami di Facebook".

Lihat preview tampilan di sebelah kanan form tersebut.

8. Jika settingan yang dibuat sudah beres, klik Get Code. Kemudian akan muncul pop-up window yang menampilkan 3 jenis kode, HTML5, XFBML dan IFRAME pilih salah satu dan copy kodenya. (Untuk Blogger, disarankan pilih HTML 5).

Copy kedua kode tersebut untuk pemasangan Like Box di blog Sobat.

Cara pemasangan like Box pada Blog:

1. Buka Dashboard > Design/Rancangan > Klik add a gadget/tambah gadget.
2. Pilih HTML/JavaScript.
3. Masukkan kode yang telah dicopy ke dalam kotak kode HTML/JavaScript.
4. Save/Simpan

.

Like box telah siap digunakan, dan setiap pengunjung blog/website yang menyukai blog/website Sobat dapat dengan mudah meng-klik like pada like box yag telah disediakan.

Demikianlah Cara Membuat Fans Page Facebook Di Blog semoga bermanfaat Sobat.

Sumber

Read More..

Cara Membuat Scroll Pada Blog Archive (Arsip Blog)

1. Login ke Blogger
2. Di halaman Dasbor, kita pilih Rancangan Blogger.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut......

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

6. Lalu Terapkan Seperti di bawah ini.....

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'> <div style='overflow:auto; width:ancho; height:200px;'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>

7. Kode warna Biru dan Merah adalah kode yang ditambahkan kedalam script tersebut.
 200 adalah tingginya, dan kalian  bisa ubah seseuai ke inginan kalian..

 Selesai

Read More..

Cara membuat witget populer post warna-warni

Langsung kita coba cara membuat widget populer dengan warna yang seperti pelangi (rainbow) sehingga menarik perhatian pengunjung untuk melihatnya.

Pastikan kamu sudah memasang widget populer bawaan dari Blogger.

1. Login ke akun Blogger kamu.
2. Dari Dasboard klik blog kamu yang akan dipasang widged populer
3. Setelah itu klik menu Tata Letak atau Layout
4. Kemudian klik Tambah Gadget atau Add a Gadget
5. Pilih Widget Entri Populer atau Populer Post
6. Klik simpan

Langkah selanjutnya adalah menaruh kode yang akan membuat widget populer kamu menjadi pelangi (rainbow).

1. Diasumsikan widget populer kamu telah terpasang di blog yang akan diubah tampilan widget pelangi (caranya seperti diatas).
2. Dari dasboard  blog kamu pilih menu Template
3. Untuk mengantisipasi terjadi kesalahan ataupun kamu tidak cocok dengan tampilan widget populer pelangi (rainbow), save dulu template utama kamu.
4. Untuk menyimpan template utama, saat di pilihan template, pilih cadangkan/pulihkan pada pojok kanan atas.
5. Kemudian unduh template lengkap dan save atau simpan. (file ini untuk mengembalikan setingan awal)
6. Kini melanjutkan merubah menjadi widget populer rainbow. masuk kedalam menu edit HTML
7. Pada area HTML cari kode ]]></b:skin> . Agar pencarian cepat ketemu, gunakan Ctrl + F atau F3 dari keyboard kemudian ketikkan kode diatas yang dicari.
8. Setelah ketemu Copykan kode untuk mengubah widget populer menjadi Rainbow seperti di bawah ini.
9. Copykan kode diatas  kode ]]></b:skin>

/* Rainbow Popular Post by http://hzndi.blogspot.com*/

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

/* Rainbow Popular Post by http://hzndi.blogspot.com*/

Sumber Kode html: http://hzndi.blogspot.com/2012/08/cara-membuat-widget-popular-post-warna.html

     10. simpan dan kamu lihat hasilnya.

selesai dech

Read More..

Cara Merubah Tampilan Popular Post Diblog Menjadi Scroll Box

 

 
Cara Merubah Tampilan Popular Post Diblog Menjadi Scroll Box, jadi tidak perlu lagi memasukan link label 1 per 1 secara manual di kotak atau widget HTML / Java Script lagi.

Fungsi nya adalah  untuk menghemat
tempat diblog dan juga agar memudahkan pengunjung untuk melihat semua label diblog kita.

Berikut ini beberapa  Cara Merubah Tampilan Popular Post Diblog Menjadi Scroll Box :

1). Login ke Blogger Masbro & Mbakbro
2). Masuk Ke Dashboard
3). Klik Template
4). Lalu klik Edit HTML
5). Centang dulu kotak Expand Template Widget sebelum mengeditnya
6). Cari kode ]]></b:skin>  untuk memudahkan pencarian tekan Ctrl+F
7). Jika sudah ketemu dengan kode  ]]></b:skin> , pasang kode dibawah ini tepat diatas ]]></b:skin>

.popular-posts{
       height:250px;
       overflow:auto;
}

8). Cari Kode dibawah ini.

<div class='widget-content popular-posts'>

 9). Jika sudah ketemu, hapus kode tersebut lalu ganti dengan kode dibawah ini.

<div class='widget-content popular-posts' style='height:250px;overflow:auto;'>

10). Yang terakhir klik Simpan / Save . Dan lihat hasilnya

Note : Tulisan yang berwarna Biru "250" itu adalah ukuran height / tinggi kotak label tersebut. Kalian bisa menggatinya dengan yang kalian mau

Read More..

Membuat scroll box berdasarkan label

Acap kali ketika kita menampilkan judul-judul artikel dari satu label (kategori), kita harus menuliskan judul-judul tersebut berikut link-nya. Tentu saja hal ini cukup memakan waktu dan terbilang ribet. Padahal jika tahu caranya, cukup dengan memamfaatkan script recent posts. Hanya saja dengan cara ini, judul yang pertama ditampilkan adalah yang paling baru dipublikasikan.

Sekalipun demikian, ada keuntungan lain jika menampilkan judul-judul artikel dengan cara ini, yaitu: kita bisa menampilkan judul artikel dari banyak kategori hanya dengan menggunakan satu script saja, bahkan untuk gadget yang diletakkan pada tempat lain. Sebagai contoh, kamu bisa melihat pada menu Tips Blogging, HTML-Komnet, dan Lain-lain.

Untuk membuat widget ini, ikuti saja langkah-langkah berikut:

• Dari halaman dasbor, klik Tata Letak - Element Halaman.
• Klik Tambah Gadget lalu pilih HTML/JavaScript.
• Tempelkan (paste) script berikut:
  

  <script style="text/javascript">
  var numposts = 50;
  var standardstyling = true;
  </script>
  
  <script type='text/javascript' src='http://enes-sc.googlecode.com/files/rc-label.js'></script>
  
  <ul>
  <script src="http://NamaBlogKamu.blogspot.com/feeds/posts/default/-/Nama%20Label?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
  </ul>

• Ubah nilai var numposts sesuai jumlah judul yang ingin ditampilkan.
• Ganti NamaBlogKamu sesuai nama blog kamu sendiri.
• Ganti Nama Label sesuai nama label (kategori) yang ingin ditampilkan.
  Catatan:
  Untuk Nama Label yang diberi spasi, penulisannya harus menggunakan %20 sebagai pengganti spasi. Misalnya: label Blog Tutorial harus ditulis Blog%20Tutorial, label Lirik dan Puisi harus ditulis Lirik%20dan%20Puisi, dll. Dan jangan lupa, besar kecil huruf akan berpengaruh pada berfungsi tidaknya widget ini. Karena itu Nama Label harus benar-benar sesuai dengan nama label yang ada pada blog kamu.
• Jika tidak ingin menggunakan bullets, hapus saja perintah <ul> dan </ul>-nya.
• Simpan hasilnya dan ucapkan Alhamdulillah.....

Jika kamu ingin menampilkan judul artikel dari dua atau lebih label dalam satu gadget, tambahkan saja script terakhir (dari <ul> sampai dengan </ul>) di bawahnya. Misalnya mau memasukkan judul-judul artikel pada label Puisi, Sosial Budaya, serta Lirik dan Syair, maka dibuat seperti ini:

<script style="text/javascript">
var numposts = 50;
var standardstyling = true;
</script>

<script type='text/javascript' src='http://enes-sc.googlecode.com/files/rc-label.js'></script>

Puisi
<ul>
<script src="http://NamaBlogKamu.blogspot.com/feeds/posts/default/-/Puisi?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
<br/>

Sosial Budaya
<ul>
<script src="http://NamaBlogKamu.blogspot.com/feeds/posts/default/-/Sosial%20Budaya?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
<br/>

Lirik dan Syair
<ul>
<script src="http://NamaBlogKamu.blogspot.com/feeds/posts/default/-/Lirik%20dan%20Syair?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>

Tambahan perintah <br/> (enter) setelah </ul> untuk memberi jarak antara nama label yang satu dengan yang lainnya.

Read More..

Widget menu drop down bercabang

Menu ini merupakan menu horizontal dimana menu drop down nya tidak seperti biasanya, melainkan sangat besar dan bercabang.


langsung saja ikuti langkah-langkah di bawah ini:
1. Login ke blog kamu
2. Pilih Template > Edit HTML > Cari kode ]]></b:skin>
3. Setelah ketemu letakan kode CSS di bawah ini tepat di atas kode ]]></b:skin>

body, ul, li {
 font-size:14px;
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 text-align:left;
}

/* Navigation Bar */

#menu {
 list-style:none;
 width:940px;
 margin:30px auto 0px auto;
 height:43px;
 padding:0px 20px 0px 20px;

 /* Rounded Corners */

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

 /* Background color and gradients */

 background: #014464;
 background: -moz-linear-gradient(top, #0272a7, #013953);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

 /* Borders */

 border: 1px solid #002232;

 -moz-box-shadow:inset 0px 0px 1px #edf9ff;
 -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
 box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
 float:left;
 text-align:center;
 position:relative;
 padding: 4px 10px 4px 10px;
 margin-right:30px;
 margin-top:7px;
 border:none;
}

#menu li:hover {
 border: 1px solid #777777;
 padding: 4px 9px 4px 9px;

 /* Background color and gradients */

 background: #F4F4F4;
 background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

 /* Rounded corners */

 -moz-border-radius: 5px 5px 0px 0px;
 -webkit-border-radius: 5px 5px 0px 0px;
 border-radius: 5px 5px 0px 0px;
}

#menu li a {
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color: #EEEEEE;
 display:block;
 outline:0;
 text-decoration:none;
 text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
 color:#161616;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
 padding-right:21px;
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFzrol2GvXaH5Ou4G9soMGlCOyonBQF973jQwsSXSRA1H5dJ6ehofiK6BGQmoMOWs5uk_XwEpU3_nCa_1ckH25YBUpCRwMK-HGsnaOK6y1Zy7CAGXLle6YqGJYEfQDpeVDagChnDnb2sv7/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFzrol2GvXaH5Ou4G9soMGlCOyonBQF973jQwsSXSRA1H5dJ6ehofiK6BGQmoMOWs5uk_XwEpU3_nCa_1ckH25YBUpCRwMK-HGsnaOK6y1Zy7CAGXLle6YqGJYEfQDpeVDagChnDnb2sv7/s1600/drop.png") no-repeat right 7px;
}

/* Drop Down */

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
 margin:4px auto;
 float:left;
 position:absolute !important;
 left:-999em; /* Hides the drop down */
 text-align:left;
 padding:10px 5px 10px 5px;
 border:1px solid #777777;
 border-top:none;

 /* Gradient background */
 background:#F4F4F4;
 background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

 /* Rounded Corners */
 -moz-border-radius: 0px 5px 5px 5px;
 -webkit-border-radius: 0px 5px 5px 5px;
 border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
 left:-1px ;
z-index:444 !important;
    top:auto;
}

/* Columns */

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
 display:inline;
 float: left;
 position: relative;
 margin-left: 5px;
 margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

/* Right alignment */

#menu .menu_right {
 float:right !important;
 margin-right:0px;
}
#menu li .align_right {
 /* Rounded Corners */
 -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
 left:auto;
 right:-1px;
 top:auto;
}

/* Drop Down Content Stylings */

#menu p, #menu h2, #menu h3, #menu div li {
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 font-size:12px;
 text-align:left;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
 font-size:21px;
 font-weight:400;
 letter-spacing:-1px;
 margin:7px 0 14px 0;
 padding-bottom:14px;
 border-bottom:1px solid #666666;
}
#menu h3 {
 font-size:14px;
 margin:7px 0 14px 0;
 padding-bottom:7px;
 border-bottom:1px solid #888888;
}
#menu p {
 line-height:18px;
 margin:0 0 10px 0;
}

#menu li:hover div a {
 font-size:12px;
 color:#015b86;
}
#menu li:hover div a:hover {
 color:#029feb;
}
.strong {
 font-weight:bold;
}
.italic {
 font-style:italic;
}
.imgshadow {
 background:#FFFFFF;
 padding:4px;
 border:1px solid #777777;
 margin-top:5px;
 -moz-box-shadow:0px 0px 5px #666666;
 -webkit-box-shadow:0px 0px 5px #666666;
 box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
 width:auto;
 float:left;
 margin:5px 15px 5px 5px;
}
#menu li .black_box {
 background-color:#333333;
 color: #eeeeee;
 text-shadow: 1px 1px 1px #000;
 padding:4px 6px 4px 6px;

 /* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;

 /* Shadow */
 -webkit-box-shadow:inset 0 0 3px #000000;
 -moz-box-shadow:inset 0 0 3px #000000;
 box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
 list-style:none;
 padding:0;
 margin:0 0 12px 0;
}
#menu li ul li {
 font-size:12px;
 line-height:24px;
 position:relative;
 text-shadow: 1px 1px 1px #ffffff;
 padding:0;
 margin:0;
 float:none;
 text-align:left;
 width:130px;
}
#menu li ul li:hover {
 background:none;
 border:none;
 padding:0;
 margin:0;
}
#menu li .greybox li {
 background:#F4F4F4;
 border:1px solid #bbbbbb;
 margin:0px 0px 4px 0px;
 padding:4px 6px 4px 6px;
 width:116px;

 /* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
#menu li .greybox li:hover {
 background:#ffffff;
 border:1px solid #aaaaaa;
 padding:4px 6px 4px 6px;
 margin:0px 0px 4px 0px;
}

.tabs-inner .widget li a {
padding: 1px ;
display:block !important;
border: 1px solid  transparent !important ;
}

lalu Simpan.

4. Kembali ke menu Tata Letak > Add Gadget > Pilih HTML/JavaScript > Copy kode di bawah ini.

<div id='menu'>
<li><a class='drop' href='#'>Home</a><!-- Begin Home Item -->
<div class='dropdown_2columns'><!-- Begin 2 columns container -->
<div class='col_2'>
<h2>Welcome !</h2>
</div>
<div class='col_2'>
<p>Ini adalah menu denan Mega Drop Down menu. Cara membuatnya hanya menggunakan CSS tanpa JavaScript</p>         
</div>
<div class='col_2'>
<h2>Cross Browser Support</h2>
</div>
<div class='col_1'>
<img alt='' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhapFPSOf_htA8k3WxmTu-Pu1SAYxB_k6w2wDAww4wFeNBSrlvIII5jRwUKzDfKpwSTKFGmQ4RxmFVvDMwVIILasf0yfQFH7tTA_X0lIbqOpbHo3il8mlYHwELJZh5THnguKrRwZSlRVKoy/s1600/browsers.png' width='125'/>
</div>
<div class='col_1'>
<p>Mega Drop Down Menu ini telah diuji dan berhasil untuk semua browser.</p>
</div>
</div><!-- End 2 columns container -->
</li><!-- End Home Item -->
<li><a class='drop' href='#'>5 Columns</a><!-- Begin 5 columns Item -->
<div class='dropdown_5columns'><!-- Begin 5 columns container -->
<div class='col_5'>
<h2>Ini adalah contoh untuk kolom 5</h2>
</div>
<div class='col_1'>
<p class='black_box'>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p class='italic'>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_1'>
<p class='strong'>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class='col_5'>
<h2>Fitur Post Dengan Images</h2>
</div>
<div class='col_3'>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhswQA2y8nUWi-FlnO0u1jH0CGK0LIBd2l814FV_IfdjOerX37Pd9QoN5yz3JbEKIkDN_wG3IDaAr8eAmdGFqVvLxW2-R6e28E56Y_6jIZyFzkF0Dqi7f8-Y1xyHlRc5USrv-ItTHZpM6S0/s1600/01.jpg' width='70'/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p><br/>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9UAJ5k1bhzpPOfNot9LzOGmCvdiGd34Vad7V7iIKDMni97IRC2EOvOwLCscrYTlwYaGoRfbgEOXzL8Otaau6DP1ytFcOmTrUww1VEPhDZS0FDMkmA08WtiyfLJEkZdpnz0wQg2tO6MJay/s1600/02.jpg' width='70'/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p>
</div>
<div class='col_2'>
<p class='black_box'>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
</div><!-- End 5 columns container -->
</li><!-- End 5 columns Item -->
<li><a class='drop' href='#'>4 Columns</a><!-- Begin 4 columns Item -->
<div class='dropdown_4columns'><!-- Begin 4 columns container -->
<div class='col_4'>
<h2>This is a heading title</h2>
</div>
<div class='col_1'>
<h3>Some Links</h3>
<ul>
<li><a href='#'>ThemeForest</a></li>
<li><a href='#'>GraphicRiver</a></li>
<li><a href='#'>ActiveDen</a></li>
<li><a href='#'>VideoHive</a></li>
<li><a href='#'>3DOcean</a></li>
</ul>
</div>
<div class='col_1'>
<h3>Useful Links</h3>
<ul>
<li><a href='#'>NetTuts</a></li>
<li><a href='#'>VectorTuts</a></li>
<li><a href='#'>PsdTuts</a></li>
<li><a href='#'>PhotoTuts</a></li>
<li><a href='#'>ActiveTuts</a></li>
</ul>
</div>
<div class='col_1'>
<h3>Other Stuff</h3>
<ul>
<li><a href='#'>FreelanceSwitch</a></li>
<li><a href='#'>Creattica</a></li>
<li><a href='#'>WorkAwesome</a></li>
<li><a href='#'>Mac Apps</a></li>
<li><a href='#'>Web Apps</a></li>
</ul>
</div>
<div class='col_1'>
<h3>Misc</h3>
<ul>
<li><a href='#'>Design</a></li>
<li><a href='#'>Logo</a></li>
<li><a href='#'>Flash</a></li>
<li><a href='#'>Illustration</a></li>
<li><a href='#'>More...</a></li>
</ul>
</div>
</div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->
<li class='menu_right'><a class='drop' href='#'>1 Column</a>
<div class='dropdown_1column align_right'>
<div class='col_1'>
<ul class='simple'>
<li><a href='#'>FreelanceSwitch</a></li>
<li><a href='#'>Creattica</a></li>
<li><a href='#'>WorkAwesome</a></li>
<li><a href='#'>Mac Apps</a></li>
<li><a href='#'>Web Apps</a></li>
<li><a href='#'>NetTuts</a></li>
<li><a href='#'>VectorTuts</a></li>
<li><a href='#'>PsdTuts</a></li>
<li><a href='#'>PhotoTuts</a></li>
<li><a href='#'>ActiveTuts</a></li>
<li><a href='#'>Design</a></li>
<li><a href='#'>Logo</a></li>
<li><a href='#'>Flash</a></li>
<li><a href='#'>Illustration</a></li>
<li><a href='http://blazerracing.blogspot.com/'>Get This Menu</a></li>
</ul>
</div>
</div>
</li>
<li class='menu_right'><a class='drop' href='#'>3 columns</a><!-- Begin 3 columns Item -->
<div class='dropdown_3columns align_right'><!-- Begin 3 columns container -->
<div class='col_3'>
<h2>Lists in Boxes</h2>
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='#'>FreelanceSwitch</a></li>
<li><a href='#'>Creattica</a></li>
<li><a href='#'>WorkAwesome</a></li>
<li><a href='#'>Mac Apps</a></li>
<li><a href='#'>Web Apps</a></li>
</ul>
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='#'>ThemeForest</a></li>
<li><a href='#'>GraphicRiver</a></li>
<li><a href='#'>ActiveDen</a></li>
<li><a href='#'>VideoHive</a></li>
<li><a href='#'>3DOcean</a></li>
</ul>
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='#'>Design</a></li>
<li><a href='#'>Logo</a></li>
<li><a href='#'>Flash</a></li>
<li><a href='#'>Illustration</a></li>
<li><a href='#'>More...</a></li>
</ul>
</div>
<div class='col_3'>
<h2>Here are some image examples</h2>
</div>
<div class='col_3'>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9UAJ5k1bhzpPOfNot9LzOGmCvdiGd34Vad7V7iIKDMni97IRC2EOvOwLCscrYTlwYaGoRfbgEOXzL8Otaau6DP1ytFcOmTrUww1VEPhDZS0FDMkmA08WtiyfLJEkZdpnz0wQg2tO6MJay/s1600/02.jpg' width='70'/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p><br/>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhswQA2y8nUWi-FlnO0u1jH0CGK0LIBd2l814FV_IfdjOerX37Pd9QoN5yz3JbEKIkDN_wG3IDaAr8eAmdGFqVvLxW2-R6e28E56Y_6jIZyFzkF0Dqi7f8-Y1xyHlRc5USrv-ItTHZpM6S0/s1600/01.jpg' width='70'/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href='#'>Read more...</a></p>
</div>
</div><!-- End 3 columns container -->
</li><!-- End 3 columns Item -->
</div>

Keterangan:
Teks Warna Merah silahkan anda ganti dengan link atau tulisan yang anda inginkan

Read More..