Cara Membuat Blogger Slide Show Bergaya dengan JQuery

Jika sebelumnya saya pernah posting cara memasang widget slide show dengan JQuery juga, maka kali ini akan saya bagikan lagi blogger widget slide show dengan cara yang lain. Tapi masih memanfaatkan JQuery. Versi asli berasal dari Basic jQuery Slider. 

 

Untuk hasil "penampakannya" bisa anda cek melalui link demo di bawah ini.

Berikut tutorial memasang slide blog pada template blogger Anda 

Jangan lupa untuk melakukan backup template Anda. 

Langkah 1. Pada Blogger Dashboard klik Design / Rancangan > Edit Html 

Langkah 2. Cari kode berikut ini pada template Html anda: (gunakan Ctrl+F untuk mempermudah pencarian.

]]></b:skin>

Langkah 3. Copy dan Paste kode di bawah tepat di atas / sebelum kode ]]></b:skin>

/* Start Slider Code From http://www.spiceupyourblog.com/ */

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}

ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;max-width:100%;}

ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}

p.bjqs-caption{display:block;max-width:96%;margin:0;padding:2%;position:absolute;bottom:0;background:rgba(0,0,0,0.7);color:#fff;-moz-border-radius: 6px;-webkit-border-radius: 6px;-moz-box-shadow: 4px 4px 4px #dddddd;-webkit-box-shadow: 4px 4px 4px #dddddd;}

}
/* End Slider Code From http://www.spiceupyourblog.com/ */

Langkah 4. Cari kode berikut ini pada template Html anda (gunakan Ctrl+F)

</head>

Langkah 5. Sekarang Copy dan Paste kode di bawah ini tepat di atas / sebelum kode</head>

<!-- Start Slider Code From http://www.spiceupyourblog.com/ -->

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>

<script src='http://yourjavascript.com/9921010228/basic-jquery-slider.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#my-slideshow&#39;).bjqs({

&#39;width&#39; : 940,

&#39;height&#39; : 340,

&#39;showMarkers&#39; : true,
&#39;showControls&#39; : true,
&#39;centerMarkers&#39; : false
});
});
</script>
<!-- End Slider Code From http://www.spiceupyourblog.com/ -->

Keterangan- Kode berwarna kuning adalah script jQuery, jika sebelumnya anda sudah pernah menambahkan jQuery ake template anda, hapus saja kode tersebut. 


Kode berwarna merah adalah lebar dan tinggi gambar slide. Lebar dan tinggi gambar ini bisa anda sesuaikan dan atur sesuai keinginan anda (Sesuaikan dengan lebar dan tinggi kolom widget template Anda).Ingat untuk memberikan hasil tampilan yang bagus, pasang ukuran gambar sesuai dengan ukuran lebar dan tinggi slide yang anda pilih tadi.

Step 6. Simpan template Anda. 

Jika semua langkah di atas sudah anda lakukan dengan benar, Anda sudah menambahkan kode Css dan Scripts ke template anda. Langkah terakhir adalah menampilkan slide show pada Blog Anda. 

Menambahkan kode HTML untuk Slide ke widget 

Untuk memasang kode html di widget blog anda, tambahkan widget baru Add a Gadget >> pilih HTML/JavaScript kemudian copy dan paste kode di bawah ke dalam kolom html widget. Sebelumnya Anda harus mengisi sendiri alamat URL gambar (kode warna hijau) dan keterangan gambar (text warna kuning) sesuai dengan URL tempat gambar anda disimpan dan keterangan yang Anda buat sendiri. 

Kemudian simpan widget.

<div id="my-slideshow">
<ul class="bjqs">
<li><img title="This is a caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHg7TrW1vUSrtxR0JRR1Obj9Ce3pUW8s3x-gBwcY7ajWSfUMcoqVM5cWDl_eKQ_zY-tQcrXuYOhyOKYsu-HTjgd7ZWtVX5i6XkGqOyqG9-hDwsqlp6QbdVHfMP_SEcFASuZHmxtdR10c_n/s1600/slider-image1.jpg"/></li>

<li><img title="This is a another caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsqB8wTzXuKKA9x1EFFvzcoV_bbRbWYh8F0m2C7i0J_ZqaeAT1usX94VyWgJHB8cgkAYgWfgMFA4E2UojTto1mxqd2qLevcbCECPa_MLWHRBD5KsgR19c9qInw7MqgEgCtia_rA88VU7pD/s1600/slider-image2.jpg"/></li>

<li><img title="This is a another longer caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7w8brht1pL6FSmrbPTt0Em-FWu8ZEZmCsmKgRkkmyeZ7DQtAT8Ue3dATw6fXiSRm-uMNsI3MdNZkzmoWRHz9-OINpjAd7pJpjIBZy6NJj6L_Rw8O_1S_VKgaNG0PwmHKP0LojEdAr2dn6/s1600/slider-image-3.jpg"/></li>

<li><img title="This is a another much longer caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkprhVk8H4EuOjZ0ixyeIFyi01fpa0k7WSc27Ie4OyY4WPMyack4tycgdCdNOhkFH-R5xilplyhSue9p2HgH3QMXLzMuN5O4ce35sP1SEpXuvVGEZZxM9XfIYPKts5x7-Ix61KhDbTNqTG/s1600/slider-image4.jpg"/></li>

<li><img title="This is a another longer caption that can be the lenght of the image or even longer onto the next line." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3LJp8t4x0cU8Gfubtd9p7P323Z-Ds3YMDnk3siGDv3QYMQFXJC1ojzaocOXEsdCUyqsbAdJuveP3JoBaA4WjeEAmS1OLS3941wNEGnFdMrOfM_yeC0sgSpA1ZwXcpHukJCjSALQejGxCt/s1600/slider-image5.jpg"/></li>
</ul>
</div>

Selesai. 


Kalau semua langkah tersebut Anda lakukan dengan benar, Blog anda sudah memiliki slide show yang cukup bergaya. 


Selamat mencoba sumber

Read more...

Membuat Daftar Isi Blog Keren

Tentu Anda semua tahu pentingnya membuat Daftar Isi Blog atau Table of Contents (ToC) atau juga disebut Sitemap pada blog/website. Table of Contents merupakan halaman sebuah blog yang berisikan semua link-link posting artikel atau konten yang telah diterbitkan selama ini. Daftar isi juga berupa link-link yang disusun sesuai dengan kategori atau jenis artikel pada sebuah blog. Sitemap atau daftar isi ini bisa dijadikan panduan atau navigasi bagi user atau pengunjung blog untuk mempermudah menemukan artikel atau posting di blog itu sendiri.

Hampir semua website atau blog profesional menyediakan link yang menuju ke halaman Daftar Isi di situs mereka. Bagaimana dengan blog Anda Sob? saya yakin semua sudah memilikinya. Ada banyak sekali tutorial cara membuat Table of Contents (ToC) di Blogger dengan desain dan kelebihan masing-masing. Nah, Desain Blog Problogiz kali ini, ingin juga membagi tutorial cara membuat Daftar Isi (Sitemap) Blog yang Keren untuk Anda sobat blogger.

So, seperti biasa langsung lihat DEMOnya terlebih dahulu :

DEMO TABLE of CONTENTS (ToC) PROBLOGIZ

Gimana Sob, tertarik untuk membuatnya?

Daftar Isi Blog seperti demo diatas (our blog ToC) dibuat dengan CSS dan jQuery yang ringan, dan bekerja secara otomatis memperbarui (update) semua posting artikel baru yang telah diterbitkan. Dengan ditambah lagi Javascript ringan untuk menampilkan semua artikel yang dikelompokkan sesuai dengan kategori atau label di blog. Adanya jQuery script membuat list daftar isi atau susunan artikel terlihat lebih rapi, apik dan tertata secara accordion (sliding) listing.

ToC dengan Accordion jQuery script

ToC tanpa Accordion jQuery script

Lihat perbedaan tampilan gambar Table of Contents dengan Accordion style dan yang tidak, pada ToC tanpa accordion script hasilnya semua post akan tebuka sekaligus. Jika Anda lebih suka tampilan tanpa accordion dengan mudah Anda dapat menghapus scriptnya ( kode Javascript accordion yang berwarna merah)

 CSS

/*--------PROBLOGIZ TOC-----*/ 
.judul-label{ 
background-color:#E5ECF9; 
font-weight:bold; 
line-height:1.4em; 
margin-bottom:5px; 
overflow:hidden; 
white-space:nowrap; 
vertical-align: baseline; 
margin: 0 2px; 
outline: none; 
cursor: pointer; 
text-decoration: none; 
font: 14px/100% Arial, Helvetica, sans-serif; 
padding: .5em 2em .55em; 
text-shadow: 0 1px 1px rgba(0,0,0,.3); 
-webkit-border-radius: .5em; 
-moz-border-radius: .5em; 
border-radius: .5em; 
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
-moz-box-shadow: 1px 1px 4px #AAAAAA; 
box-shadow: 0 1px 2px rgba(0,0,0,.2); 
color: #e9e9e9; 
border: 2px solid white !important; 
background: #6e6e6e; 
background: -webkit-gradient(linear, left top, left bottom, from(#0D0101), to(#575757)); 
background: -moz-linear-gradient(top,  #888,  #575757); 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757'); 
} 
.data-list{ 
line-height:1.5em; 
margin-left:5px; 
margin-right:5px; 
padding-left:15px; 
padding-right:5px; 
white-space:nowrap; 
text-align:left; 
font-family:"Arial",sans-serif; 
font-size:12px; 
} 
.list-ganjil{ 
background-color:#F6F6F6; 
} 
.headactive{ 
    color: #E51E1E; 
    border: 2px solid white !important; 
    background: #1C8DFF; 
    background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2)); 
    background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2); 
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2'); 
}

Disini Anda dapat memberi sentuhan sendiri seperti warna font, background-color, hover, gradient, dll. sesuaikan dengan blog atau selera Anda. Perhatikan kode-kode yang berwarna, keterangan dibawah ini dapat Anda gunakan untuk mempermudah edit CSS :

• kode-kode yang diberi warna BIRU : warna-warna non aktif mode pada tab
• kode-kode yang diberi warna MERAH : warna-warna aktif mode pada tab
• kode warna PINK : warna background list yang bernomor ganjil
• kode warna UNGU : ukuran font dan jenis huruf list konten

Ada 2 metode cara menempatkan CSS di blog, yang pertama letakkan di template langsung atau bisa juga di pasang sekaligus di laman Daftar Isi (mode HTML) di post editor.

Javascript dan jQuery

<script src="https://problogizjs.googlecode.com/files/problogiz.toc.js"></script>
<script src="http://problogiz.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="https://problogizjs.googlecode.com/files/TOCaccordion.js" type="text/javascript"></script>

Pengunaan Javasript dan jQuery diperlukan untuk menampilkan Daftar Isi lebih menarik dan bekerja lebih baik, seperti menuyusun list-list artikel posting, memanggil data-data yang ada (json script), updating post-post baru, dan juga membuat accordion style atau sliding tab bekerja.

keterangan:

• ganti kode berwarna hitam dengan Url alamat blog Anda
• script yang berwarna biru berfungsi agar Table of Contents bekerja.
• script yang berwarna hijau berfungsi untuk memanggil data-data yang ditampilkan dalam hal ini artikel postingan blog yang ada.
• script yang berwarna merah adalah script accordion (tersusun ala sliding vertikal) untuk menu-menu tab daftar isi.

Langkah Memasang Daftar Isi Blog Keren di Blogger

Untuk metode pemasangannya, seluruh kode CSS diletakkan di template dan hanya Javascript di Laman Daftar Isi-nya.

Untuk CSS :

1. Blogger > pilih Template > Edit HTML
2. Control+F> cari kode ]]></b:skin>
3. Copy semua kode CSS diatas dan pastekan tepat sebelum kode ]]></b:skin>
4. Simpan template

Untuk Javascript

1. Masuk ke Laman > pilih Laman baru > pilih Laman kosong > beri Judul Laman (terserah Anda bisa "Sitemap"; "Daftar Isi"; atau " Table of Contents")
2. Kemudian klik HTML (tombol sebelah "Compose") > Copy semua kode javascript, jQuery diatas dan pastekan di area HTML tersebut.
3. Klik Pratinjau > kalau semua OK > Publikasikan

Done!!

tambahan:

Jika Anda sudah mempunyai Laman Daftar Isi Blog, tinggal ganti CSS dan Javascriptnya dengan yang baru kemudian Perbarui Laman-nya.

Anda juga bisa memberi deskripsi penelusuran dan ingat biasanya Pilihan untuk komentar disembunyikan (jangan bolehkan).

Untuk metode kedua, Anda dapat langsung memasang seluruh kode CSS dan Javascript di areaLaman (mode HTML) dan publikasikan. Jangan lupa beri tag tambahan <style> kode CSS </style>kemudian diikuti Javascript dibawahnya.

Selamat Mencoba Kawan!! Semoga Desain Table of Contents sederhana ini bisa berguna buat Anda yang membutuhkan.

Salaam, sumber

Read more...

Cara Mengganti Posting Lama, Posting Baru dan Beranda dengan Gambar

Kalau akun Google kita menggunakan bahasa Inggris, maka di bawah postingan kita, kita akan melihat link yang bertuliskan Newer Posts, Older Posts dan Home. Kalau kita setting akun Google kita menggunakan bahasa Indonesia, sudah pasti dibawah postingan kita akan terdapat tiga link yang bertuliskan Posting Lama,Posting Baru Dan Beranda. Link tersebut kalau dalam dunia blogging (Dalam bahasa Inggris) di sebut dengan istilah Navigation Feet.

Sebelum di ganti

Setelah di ganti

Bentuk default dari Navigation feet di blog, sebenarnya tidak menggangu tampilan blog kita. Blog kita tidak terlihat rame atau acak-acakan gara Navigation Feet tersebut. Tapi, sembilan dari sepuluh blog, mengganti tulisan Posting Lama, Posting Baru dan Beranda dengan Gambar. Kalau blog Lentera Blogger ini sengaja menghilangkan tulisan Newer Posts, Older Posts dan Home dan menggantinya dengan gambar karena Navigation Feet yang menggunakan gambar, membuat blog saya terlihat indah dan cantik.

Jadi, tutorial blog yang akan saya berikan kali ini adalah tentang Cara mengganti Tulisan Posting Lebih Baru, Posting lama dan Beranda dengan gambar. Sebelum sobat blogger mengikuti tutorial ini, silahkan sobat blogger siapkan tiga gambar dulu. Satu Gambar rumah, dua gambar panah yang menghadap kiri dan kanan. Jangan sampai, panahnya menghadap kiri saja atau menghadap kanan saja, bisa-bisa pengunjung blog sobat jadi tersesat dan bingung.

Cara Mengganti Posting Lama, Posting Baru dan Beranda dengan Gambar:

• Sign In di akun blog sobat.
• Pada menu drop down, klik Template
• Klik Edit Html dan Proceed.
• Kasih tanda centang pada Expand Widget Template

Mengganti tulisan Posting Lama atau Older Post
Cari kode <data:olderPageTitle/> Kalau sudah ketemu ganti tersebut dengan kode berikut :

<img src='URL FOTO ATAU GAMBAR ANDA'/>

Mengganti tulisan Posting Baru atau Newer Post
Cari kode <data:newerPageTitle/> Kalau sudah ketemu ganti tersebut dengan kode berikut :

<img src='URL FOTO ATAU GAMBAR ANDA'/>

Mengganti tulisan Beranda atau Home
Cari kode <data:homeMsg/> Kalau sudah ketemu ganti tersebut dengan kode berikut:

<img src='URL FOTO ATAU GAMBAR ANDA'/>

Tulisan URL FOTO ATAU GAMBAR ANDA harus di ganti dengan URL gambar yang sobat blogger miliki. Saran saya, Sebelum sobat blogger mengganti tulisan Posting Lama, Posting Baru dan Beranda dengan Gambar, sebaiknya gambar di simpan dulu di tempat penyimpanan gambar seperti PhotoBucket, supaya sobat blogger tinggal copy paste URL dari gambar yang sudah sobat blogger Upload tersebut.

sumber

Read more...

Cara Membuat Menu Mega Dropdown Horizontal Keren

Desain Blog kali ini akan membagi tutorial cara membuat Menu Navigasi Mega Dropdown keren dengan CSS pada Blogger, yang dapat digunakan untuk berbagai macam kebutuhan website/blog.Menu Mega Dropdown Horizontal ini umumnya digunakan pada komersial website atau juga pada website berskala besar, namun sekarang Anda dapat menikmati menu mega dengan css tersebut di blog Anda. Menggunakan menu mega dropdown dapat juga dijadikan solusi efektif bagi yang ingin menampilkan konten blog yang banyak sekaligus juga menjaga tampilan blog tetap bersih.

Pada awalnya Menu Mega Dropdown yang didesain oleh net.tutsplus.com untuk tujuan komersial, namun akhirnya juga dibagikan versi free-nya yang secara apik dan detail dijelaskan dalam tutorial mega menu di website-nya. Timbul keinginan saya mencoba menerapkan menu navigasi mega dropdown tersebut di blog saya waktu itu, akan tetapi hasil tampilan menu kurang cocok saat itu. Oleh karena itu saya membuat beberapa modifikasi pada kode CSS maupun HTML, agar benar-benar sesuai dengan karakter blog, khusunya blogspot.

Menu Mega Dropdown pada kode CSS original-nya dibuat dengan Drop Down Container yang diberi background image PNG (juga scirpt behavior untuk handle cross-browser compatibility, khususnya IE 6), saya tidak lagi, hanya menggunakan background-color dengan gradient (juga belum support di IE), tapi bekerja dengan baik di browser seperti Chrome, Firefox dan Opera (di-IE 9 hanya gradient-color tidak berfungsi). Pada beberapa code CSS, saya juga mengganti properti dari kolom-kolom pada drop down agar sesuai dengan kebutuhan blog, posisi penempatan kolom dan posisi Drop Down Container (Aligning to the Right dan Aligning to the Left).

Lebih baik Anda langsung lihat DEMO Menu Mega Dropdown versi Originalnya DISINI
Dan untuk melihat code sources versi Orignalnya, Anda bisa kunjungi websitenya DISINI

Khusus kode HTML dan isi menu kontainer (seperti menu font, h2, paragraf) sebagian besar telah saya rubah, menyesuaikan blog saya tentunya. Anda juga dapat meng-edit-nya kembali sesuka dan sesuai kebutuhan blog masing-masing nantinya. Silahkan lihat Demo Live Versi Modif-nya dibawah ini:

DEMO MENU MEGA DROPDOWN HORIZONTAL

Contoh Kode HTML yang saya gunakan kurang lebih sebagai berikut :

HTML code: 

<div id="menu">
<li><a href="#" class="drop">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>Hi and welcome here ! Selamat datang di situs Blog Anda</p>             
<p><b>Sebuah Blog tentang....</b> </p>             
</div>
<div class="col_2">
<h2>Cross Browser Support</h2>
</div>
<div class="col_1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2btQwOGjvubZkTOLKHaqlFzmq8GFu2AmCcbaZitOyHsEG25jKluusEtHrvkN5W45bwn8qtVPT0LsxTYmfIGguw_BqS9bfQCwhzjMaufCjSh3Iic42yq7x3uxNXAw8NuhFBYht0LNjo63d/s1600/browsers.png" width="125" height="48" alt="browser support" title="browser utama" />
</div>
<div class="col_1">
<p>Gunakan <b>Chrome</b> atau Mozilla Firewok untuk tampilan Blog yang lebih optimal</p>
</div>
</div><!-- End 2 columns container -->
</li><!-- End Home Item -->
<li><a href="#" class="drop">Tutorials</a><!-- Begin 3 columns Item -->
<div class="dropdown_3columns"><!-- Begin 3 columns container -->
<div class="col_3">
<h2>Tutorials on Blog</h2>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">TutorialBlogger</a></li> 
<li><a href="#">Tutorial SEO</a></li> 
<li class='has-sub '><a href="#">Desain Blog</a>
             <ul>
               <li><a href='#><span>CSS3</span></a></li>
               <li><a href='#'><span>jQuery</span></a></li>
               <li><a href='#'><span>Javascript</span></a></li>
            </ul>
</li> 
</ul>   
</div>
</div><!-- End 3 columns container -->
</li><!-- End 3 columns Item -->
<li><a href="#" class="drop">Blogger Template</a><!-- Begin 3 columns Item -->
<div class="dropdown_4columns"><!-- Begin 4 columns container -->
<div class="col_4">
<h2>Menu Blogger Templates</h2>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">1 Column</a></li>
<li><a href="#">2 Columns</a></li>
<li><a href="#">3 Columns</a></li>
</ul>   
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">Best Blogger Template</a></li>
<li><a href="#">Etnik Blogger Template</a></li>
</ul></div>
</div><!-- End 3 columns container -->
</li><!-- End 3 columns Item -->
<li><a href="#" class="drop">Making Money</a><!-- Begin 3 columns Item -->
<div class="dropdown_3columns "><!-- Begin 3 columns container -->
<div class="col_3">
<h2>Ads for Blogger</h2>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">Google AdSense</a></li>
<li><a href="#">KlikSaya.com</a></li>
</ul>   
</div>
</div><!-- End 3 columns container -->
</li><!-- End 3 columns Item -->
<li><a href="#" class="drop">Blog Tools</a><!-- Begin 3 columns Item -->
<div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->
<div class="col_3">
<h2>Usefull Tools</h2>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">Kode Warna HTML</a></li> 
<li><a href="#">Parse Kode HTML</a></li> 
</ul>   
</div>
</div><!-- End 3 columns container -->
</li><!-- End 3 columns Item -->
<li><a href="#" class="drop">Internet & Tech</a><!-- Begin 3 columns Item -->
<div class="dropdown_4columns align_right"><!-- Begin 3 columns container -->
<div class="col_4">
<h2>Internet & Tech List</h2>
</div>
<div class="col_1">
<ul>
<li><a href="#">info Komputer</a></li>
<li><a href="#">Laptop</a></li> 
<li><a href="#">info Software</a></li>
</ul>  
</div> 
<div class="col_1"> <ul>  
<li><a href="#">iPad</a></li>
<li><a href="#">iPhone</a></li>
</ul>  
</div>
<div class="col_1">
 <ul>  
<li><a href="#">Download Gratis</a></li> 
<li><a href="#">Network Social</a></li> 
</ul>  
</div> 
<div class="col_1"> 
<ul>
<li><a href='#'>Info&News</a></li>
<li><a href='#'>Kesehatan</a></li>
            </ul>
</div></div></li> 
<!-- End 3 columns container -->
<!-- End 3 columns Item -->
<li><a href="#" class="drop">Link Exchange</a><!-- Begin Home Item -->
<div class="dropdown_2columns align_right"><!-- Begin 2 columns container -->
<div class="col_2">
<h2>Tukar Link Yuk !!!</h2>
</div>
<div class="col_2">
      <p>Bagi Anda yang ingin saling tukar link silahkan pasang link blog ini di blog Anda, dan link blog Anda akan terpasang di blog ini.</p>
</div>
<div class="col_2">
<h2>Link Banner Blog</h2>
</div>
<div class="col_1">
<a href="url Banner Blog Anda" width="150" height="50" /></a><br />
<p>Klik untuk <a href="#" target="_blank">TUKAR LINK</a></p>
</div>
</div><!-- End 2 columns container -->
</li><!-- End Home Item -->

Anda bisa mengedit item-item menu navigasi dan kalimat pada menu nav sesuai keinginan:

• Menu item code yang berwarna merah adalah item-item navigasinya
• Code yang berwarna ungu adalah url gambar cross browser dan banner blog
• Adapun kalimat yang berupa pargaraf dan h2 (warna hitam), sesuaikan dengan blog Anda
• Code yang berwarna biru adalah sub menu

Kode CSS yang saya gunakan seperti ini :

CSS code: 

<style type="text/css">
body, ul, li {
 font-size:13px;
 font-family:Georgia, Helvetica, sans-serif;
 line-height:20px;
 text-align:left;
}

/* Navigation Bar */

#menu {
 list-style:none;
 width:100%;
 margin:0px auto 0px auto;
 height:40px;
 padding:0px ;

/* 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: 2px 10px 4px 10px;
 margin-right:10px;
 margin-top:7px;
 border:none;
}

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

 /* 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:georgia, Helvetica, sans-serif;
 font-size:10px;
 display:block;
 outline:0;
text-decoration:none;text-transform: uppercase; 
text-shadow: 1px 1px 3px #366479, -1px -1px 3px #3464AB, 1px 1px #3464AB, -1px -1px #366479;
span :line-height:1em; font-size:0,5em; font-weight:bold; color:#B3E4E4;
}

#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/AVvXsEhmR4JHIqRfGvGTXVcvzYS7j4258R3JHJVxyhKBXV7jDl1EP-D1mUT3gEV6JqNYaKZJeDzV6k4EjGxCZlTC3zhH1ovlnyQ3_5Q1N0NpoXTjiNi_qfawx0ASnZYowMwWK3KlX-_laeK98aQj/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmR4JHIqRfGvGTXVcvzYS7j4258R3JHJVxyhKBXV7jDl1EP-D1mUT3gEV6JqNYaKZJeDzV6k4EjGxCZlTC3zhH1ovlnyQ3_5Q1N0NpoXTjiNi_qfawx0ASnZYowMwWK3KlX-_laeK98aQj/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 #014464;
 border-top:none;

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

 /* 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: 170px;}
.dropdown_4columns {width: 300px;}
.dropdown_5columns {width: 420px;}


#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:160px;}
.col_4 {width:300px;}
.col_5 {width:410px;}

/* Right alignment */
#menu .menu_right {
 float:right;
 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 h2, #menu h3, #menu div li {
 font-family:georgia, Helvetica, sans-serif;
 line-height:21px;
 font-size:12px;
 text-align:left;
 color:#5BAB70;
text-shadow: 1px 0px 1px black
}
#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 {
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
line-height:18px;
 margin:0 0 10px 0;
 color: #331111;
}

#menu li:hover div a {
font-weight: normal; 
font-size:11px;
color:black;
}
#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 {
 line-height:15px;
 position:relative;
 text-shadow: 1px 1px 1px #ffffff;
 padding:0;
 margin:0;
 float:none;
 text-align:left;
 width:auto;
}
#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:120px;

 /* 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 ;
}
</style>

• Lebar body menu ini saya buat  100%, Anda bisa merubahnya dengan edit codewidth:100%, sesuai lebar blog (lebar header-wrapper atau container-wrapper)
• Yang lain pada CSS diatas seperti warna, jenis font, ukuran font, style font, background color, ukuran column dan border, dst. jika mau Anda bisa memodifikasi sendiri sesuai selera Anda

Sehingga kalau digabungkan kode HTML dan CSS diatas akan menghasilkan Menu Navigasi Mega Dropdown Keren seperti ini :

Cara Pasang Menu Mega Dropdown di Blogger

• Masuk Blogger > pilih Tata Letak
• Klik Add a Gadget atau Add a Page element
• Pilih HTML/JavaScript widget
• Paste semua kode Menu Mega Drop Down tersebut (kode CSS + HTML) dalam HTML/JavaScript widget
• Klik Save
• Kemudian drag atau geser HTML/JavaScript widget tersebut dan letakkan tepat dibawahheader / judul Blog. lihat gambar dibawah :

Jika Anda ingin menambah atau mengurangi menu tab, maka dengan mudah bisa ditambah atau di-delete / hapus line kode html tersebut :

<li><a href="#" ><span>Nama Item</span></a></li>

Selesai!! Anda sekarang menggunakan Menu Mega Dropdown Horizontal Keren di blog Anda, silahkan modifikasi atau menambah sekedar ucapan "Selamat Datang" di Item Navigasi Home, atau menambah gambar banner blog Anda tentu lebih mempercantik dan profesional menu mega dropdown ini. Seperti contoh screenshot ini :

screenshot 1

screenshot 2

Ok Kawan, mudah-mudahan Anda suka tutorial menu mega dropdown ini dan dapat membuat blog Anda semua lebih menarik dan fungsional. Jangan segan untuk bertanya jika Anda mengalami masalah berkaitan menu dropdown ini, saya akan membantunya sebisa mungkin.

Enjoy it!! Now sumber

Read more...