widget jquery menu horizontal

Widget jquery menu horizontal berguna buat blog yang memiliki link yang banyak, widget jquery menu horizontal ini juga cocok untuk menu blog yang berbasis blog Direktory. Pada tutorial kali ini saya terinspirasi dari seorang sahabat, yah boleh dibilang abangan saya sendiri yang membutuhkan suatu kode menu seperti menu widget jquery menu horizontal pada postingan kali ini. Tutorial widget jquery menu horizontal kali ini memiliki tampilan yang menarik dan code script yang ringan sehingga widget jquery menu horizontal ini menjadi salah satu pilihan para blogger mania. Oke langsung saja pada pokok pembicaraan, bila anda menginginkan pemasangan widget jquery menu horizontal ini pada halaman blog anda, silahkan simak penjelasan dibawah ini, jangan lupa dilihat demo widget jquery menu horizontal ini dan test cursor anda, agar lebih meyakinkan anda. Langsung saja menuju TKP.

Demo

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS widget jquery menu horizontal dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSS widget jquery menu horizontal tepat diatas </style> template anda.

/*****************************************
Name : widget jquery menu horizontal
By : Rivai Silaban | Blog Design
Update : Jumat 06 September 2013
******************************************/
ul#BDRSnav {
margin: 0; padding: 0;
float: left;
width: 970px;/* LEBAR MENU */
list-style: none;
position: relative;
font-size: 1.2em;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5NRDuwDjaxx_tnQocAdJkXzfbFjCka0bZcMQXcDalyUVeqSL4hWdL2r6DJLAjjCprG9uQfzsKk8qKmF8bxE596gxIfsJah4wjJoplRS24hMTQCLX0p0uiBhgReefOGg_Suay5qXLqRDs/s1600/bdrsimg.gif') repeat-x;
}
ul#BDRSnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #555;
}
ul#BDRSnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
text-shadow: 1px -2px 1px #000;
}
ul#BDRSnav li:hover {
background-color: #444;
}
ul#BDRSnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0;
top:35px;
display: none;
width: 970px;/* LEBAR SPAN SAMAKAN DENGAN LEBAR MENU */
color: #fff;
background-color: #444444;
}
ul#BDRSnav li:hover span { display: block; }
ul#BDRSnav li span a {
display: inline-table;
padding:2px 6px 5px 13px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBIvxVMSAyyuIvNxe8y_SAZntQKfUE3iYf0T1zgU6n4oLo3_HUuuIWSKavR7naPS2-S0xETIl2D0DvDSJq1CgSK0soJg1oe-LBd3H9U9lyWguw8WDiulGkqJ2_yT8GJbUzucMNdcrXHyQ/s1600/arrow-grey.gif") 0px 50% no-repeat;
color: #ADADAD;
margin:10px;
text-align: left;
text-shadow: 1px -2px 1px #000;
font-weight: bold;
}
ul#BDRSnav li span a:hover {
text-decoration: none;
text-shadow: 1px 2px 1px #000;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBIvxVMSAyyuIvNxe8y_SAZntQKfUE3iYf0T1zgU6n4oLo3_HUuuIWSKavR7naPS2-S0xETIl2D0DvDSJq1CgSK0soJg1oe-LBd3H9U9lyWguw8WDiulGkqJ2_yT8GJbUzucMNdcrXHyQ/s1600/arrow-grey.gif") 2px 50% no-repeat;
text-shadow: 1px 2px 1px #000;
color: #DBDBDB;
}
.bdrscss-tanggal {
font-family:verdana;
color: #CCCCCC;
text-shadow: 2px 2px 1px #000;
font-size: 14px;
text-align: right;
font-weight: bold;
padding:7px 10px;
font-style: italic;
}/*** Blog Design CSS widget jquery menu horizontal and ***/

Install Script

1. Setelah anda selesai menyematkan CSS widget jquery menu horizontal, saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
2. Pada Edit HTML template anda silahkan cari kode </head>
3. Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>
4. Perlu anda ingat bila pada template anda sudah ada kode JQUERY diatas versi 1.4 pada script tulisan kode warna biru dibawah kode tulisan warna BIRU tersebut tidak usah dikut di Copy. Bila sebaliknya versinya dibawah silahkan copy semua kode tersebut.

<!-- Rivai Silaban | BLOG DESIGN script widget jquery menu horizontal start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$("ul#BDRSnav li").hover(function() {
$(this).css({ 'background' : '#444444 '});
$(this).find("span").show();
} , function() {
$(this).css({ 'background' : 'none'});
$(this).find("span").hide();
});});</script>
<!-- Rivai Silaban | BLOG DESIGN script widget jquery menu horizontal End -->

Install Program Tag HTML

• Setelah anda selesai memasang code script widget jquery menu horizontal saatnya anda dipaksa untuk memasang kode tag htmlnya pada halaman blog anda agar muncul pada saat dibrowsing.
• Copy code dibawah dan pastekan dibawah semua code header template anda, atau diatas postingan blog anda.

<!-- Rivai Silaban | BLOG DESIGN script menu start -->
<ul id="BDRSnav">
<li><a href="URL BLOG ANDA " target="_self" rel="nofollow" title="home">Home</a></li>
<li>
<a href="#" rel="nofollow" title="XXX">Contact</a>
<span>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Google Plus</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Twitter</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Facebook</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">RSS Feed</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">@gmail.com</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Call : 0812 3456 7891</a>
</span>
</li>
<li>
<a href="#" rel="nofollow" title="XXX">Kategory</a>
<span>
<a href="LINK" target="_self" rel="nofollow" title="XXX">TUKANG COPAS</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">SPAMMER</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">PEMBAJAK CONTEN</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">CONTEN TIRUAN</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">PEMBAJAK ARTIKEL</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Komputer</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Internet</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">kesehatan</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Pendidikan</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Sains</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Robotic</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Glamor</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Style Trend</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">The Company</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Horor</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Bio Kimia</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Calculation</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">User Map</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Adsense</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">eCPM</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">CPC Clicker</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Design Grafis</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Developer</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Game</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Blogger</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Comunity</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Article</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Wanita</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Laki Laki</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Obat Kuat</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">SPAMMER</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Pembajak</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">sEX</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">tOY'S</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">iNDONESIA</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Virus</a>
</span>
</li>
<li>
<a href="#" rel="nofollow" title="XXX">Service</a>
<span>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Sitemap</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Desclaimer</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Privacy Policy</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">SEO </a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Webdevloper</a>
</span>
</li>
<li><a href="#" rel="nofollow" title="XXX">Site</a>
<span>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Google.org</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Blogspot.com</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">wordpress.org</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">Joomla.org</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">facebook.com</a>
<a href="LINK" target="_self" rel="nofollow" title="XXX">twitter.com</a>
</span>
</li>
<div class="bdrscss-tanggal">
<SCRIPT language="JavaScript" type="text/javascript">
//Ganti nama hari dan bulan, sesuai dengan bahasa anda.
var dayNames = new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu");
var monthNames = new Array("Januari","Februari","Maret","April","Mei","Juni","Juli",
"Agustus","September","Oktober","Nopember","Desember");var dt = new Date();
var y = dt.getYear();
if (y < 1000) y +=1900;// format tahun
document.write(dayNames[dt.getDay()] + ", " + dt.getDate() + " " + monthNames[dt.getMonth()] + " " + y);
</SCRIPT>
</div>
</ul>
<!-- Rivai Silaban | BLOG DESIGN menu End -->

Keterangan Code

• Tulisan kode warna MERAH ganti dengan link anda, sesuai dengan kebutuhan anda.
• Tulisan warna BIRU ganti dengan nama dan title menu anda.
  
  Cth : Bila menu anda [ Tutorial ] maka title samakan dengan menu anda menjadi [ title="Tutorial" ]
  
  
• Ganti semua tulisan berwarna BIRU & MERAH sesuai dengan kebutuhan anda.
• Saya berharap anda sudah memahami CSS, silahkan edit CSSnya sesuai dengan kebutuhan blog anda.

Kesimpulan

Widget jquery menu horizontall ini sangat cocok buat para bloger yang memiliki jumlah link atau kategory yang begitu banyak sehingga semua link dan kategori dapat dilihat oleh para pengunjung dengan cepat. widget jquery menu horizontal menganut sistem penulisan tag link yang SEO Frienly.

Bila teman teman mengalami masalah dalam pemasangan wiget jquery menu horizontal ini atau ada kesalahan penulisan kode silahkan hubungi saya atau share bersama saya lewat form komentar dibawah ini. Pergunakan semua fasilitas pada halaman blog ini untuk mempermudah anda.

Widget jquery menu horizontal
Minggu, 10 November 2013
By : Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 2:32 PM