Widget jquery menu horizontal berguna buat blo
g 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
- Login ke dashboard anda
- Masuk ke "TEMPLATE" lalu klik " Edit HTML "
- Cari code ]]></b:skin>
- 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.
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/AVvXsEjP264sCxS0FRvEkgm7SGMLGgHy1xDj7PmqagmDh1RqILFK0ymaakc6Z-qaeb0cAlgngD_qL7WxFBIhRSZfEMEkVy1f2LgMh3PweB0LawKnDkZ3c5jCrWVQAjjzM1nXylsyXJK3_OpSKSY/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/AVvXsEg610sBA7lu3A8lyyv2d5PoCPL8eUV-HcG-NpnHqCl-A_XEf6U2BWxZYiKiblRCY3YlutHDJ7Se9xE06qYQUn62PVcg8LcwcD9-dGQMoTWoD5D-fC9sTaeYlyGrgzfMvgI_gT5nS9qK6tI/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/AVvXsEg610sBA7lu3A8lyyv2d5PoCPL8eUV-HcG-NpnHqCl-A_XEf6U2BWxZYiKiblRCY3YlutHDJ7Se9xE06qYQUn62PVcg8LcwcD9-dGQMoTWoD5D-fC9sTaeYlyGrgzfMvgI_gT5nS9qK6tI/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;
Install Script
- Setelah anda selesai menyematkan CSS widget jquery menu horizontal, saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
- Pada Edit HTML template anda silahkan cari kode </head>
- Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>
- Perlu anda ingat bila pada template anda sudah ada kode JQUERY diatas versi 1.4pada 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 tahundocument.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.
Sumber : http://adf.ly/b9Y8c
Title : Widget Jquery Menu Horizontal
Description : W idget jquery menu horizontal berguna buat blo
