X
Facebook Facebook Admin Twitter Google+
X
X
Forum Blogger Indonesia Search®
X
isi Archive®
comment search

Sabtu, 15 Maret 2014

❖ CARA MEMBUAT AJAX MENU DI BLOG

Ajax Menu Blogger Cara Membuat Ajax Menu di Blog – masih membahas seputar navigasi menu horisontal blog. Jika pada tutorial sebelumnya pada menu horisontal tersebut masih standar dan mungkin biasa-biasa saja, maka sekarang kita modifikasi navigasi menu tersebut agar lebih elegant pada platform Blogger dengan menggunakan Blogger JSON API dan AJAX sehingga navigasi menu ini bekerja berdasarkan jQuery library dan Blogger JSON API. Pengaturan lain juga bisa anda lakukan untuk membuat bagimana navigasi menu ini dapat bekerja dengan baik. Dalam artian navigasi menu ini bekerja seperti menu drop-down normal apabila javascript di nonaktifkan, sedangkan akan berubah menjadi menu drop-down bertenaga AJAX ketika javascript di aktifkan. Dibawah terdapat tiga style navigasi menu, jika ingin memasang ikuti saja langkah-langkah penerapannya sama. Untuk memasang menerapkan kedalam blog, berikut tutorial untuk Cara Membuat Ajax Menu di Blog.

1. Login ke akun blogger dahulu.
2. Masuk ke menu Template dan pilih Edit HTML.
3. Copy kode CSS berikut ini lalu paste di atas kode ]]></b:skin>
.menunavblue *{margin: 0;padding: 0;}
ul.menunavblue {padding: 0;list-style: none;line-height: 1;overflow: visible !important;}
ul.menunavblue:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.menunavblue li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.menunavblue li a{background:#0098CA url(https://lh5.googleusercontent.com/-wr04E0lX-Iw/Ui2rcMUXtAI/AAAAAAAAGHs/4pmDipZWAgw/h108/blue.gif);text-decoration:none;margin: 0;padding: 11px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #000 !important;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;}
ul.menunavblue li a:hover,ul.menunavblue li a.hoverover{ background-position: 0% -60px;}
ul.menunavblue ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.menunavblue li:hover > ul{display: block;}
ul.menunavblue ul li{float: none;min-width: 160px;background:#3BBAE5;text-shadow: none;}
ul.menunavblue ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.menunavblue ul li a:hover,ul.menunavblue ul li a.hoverover{ background-position: 0% -60px;}
ul.menunavblue ul ul{display: none;left: 100%;top: 0;}
ul.menunavblue li div.submenu {box-shadow: 1px 1px 5px #3BBAE5;display: none;position: absolute;width: 600px;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #ffffff;border-top: none;}
ul.menunavblue li:hover div.submenu {display: block;}
ul.menunavblue ul ,ul.menunavblue ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.menunavblue ul li{background: none !important;float: none !important;}
ul.menunavblue ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #3BBAE5;}
ul.menunavblue ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.menunavblue ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.menunavblue ul.postslist li:last-child{border-bottom: none 0;}
ul.menunavblue ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #3BBAE5;font-size: 0;line-height: 0;}
ul.menunavblue ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.menunavblue ul.postslist li a{background: none;display: block;line-height: 1.4;padding: 0 !important;}
ul.menunavblue .loader{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlmXGGQ_DTM4C5UQDPC-ZDzvU1hSmBcXISTkgbZaD3sgxlV-lrQzMqN-kVtlcSTH5sChJQNM1_e9h90QomrCYrKfW2bAs1TQfQUCm35rNdp4f4Jy5xxuQM2ty64NIFmBjMR_7D-hmfGrk/h120/loading.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.menunavblue .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #000;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#menunavblue {background:#0098CA url(https://lh6.googleusercontent.com/-7AqqOE7ofpk/Ui2rcZ8HbVI/AAAAAAAAGHg/JKehF4xo7iM/h120/bluebg.gif);background-position: 0% -1px;border: 1px solid #3BBAE5;}
.end{ width:2px;}
4. Selanjutnya copy Javascript berikut ini lalu paste di atas kode </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/ajaxbloggermenu.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#menunavblue').ajaxBloggerMenu({
numPosts : 4, // Maksimal tampilan jumlah posting
defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6FBhBWbHsX6ZeALHfPVulZYBllWi8xcrOawcSkf6EE5ZtAxVbhCs-RL9ud3aDagigTtja2jinIajoOfjDckrm6ejUNxlTyCkc0C98JkztON7fo6ptsjI-sFxGoAOsRhmWS01x4aBNnOE/w140-h140-p/no-image.png' // Default thumbnail Image
});
});</script>
5. Copy kode HTML berikut ini lalu taruh kedalam widget caranya seperti biasa, klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode tersebut kemudian klik Simpan.
<ul id='menunavblue' class='menunavblue'>
 <li><a expr:href='data:blog.homepageUrl' title='Halaman Utama'>Home</a></li>
 <li><a href='http://blogkangsilham.blogspot.com/search/label/Komputer' target='_blank' title='Komputer'>Komputer</a>
    <ul class='submenu'>
    <li><a href='http://blogkangsilham.blogspot.com/search/label/Software' target='_blank' title='Software'>Software</a></li>
     <li><a href='http://blogkangsilham.blogspot.com/search/label/Networking' target='_blank' title='Networking'>Networking</a></li>
 <li><a href='http://blogkangsilham.blogspot.com/search/label/Pemrograman' target='_blank' title='Programming'>Programming</a></li>
</ul>
</li>
 <li><a href='http://blogkangsilham.blogspot.com//search/label/CSS' target='_blank' title='CSS'>CSS</a>
<ul class='submenu'>
 <li><a href='http://mas-andes.blogspot.com/search/label/Slider' target='_blank' title='Slider'>Slider</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Navigasi' target='_blank' title='Navigasi'>Navigasi</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Image%20Effect' target='_blank' title='Image Effect'>Image Effect</a></li>
</ul>
</li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Tips%20Trik%20Blogger' target='_blank' title='Blogging'>Blogging</a>
    <ul class='submenu'>
     <li><a href='http://mas-andes.blogspot.com/search/label/HTML' target='_blank' title='HTML'>HTML</a></li>
     <li><a href='http://mas-andes.blogspot.com/search/label/Jquery' target='_blank' title='jQuery'>jQuery</a></li>
     <li><a href='http://mas-andes.blogspot.com/search/label/Widget' target='_blank' title='Widget Blog'>Widget Blog</a></li>
    </ul>
</li>
<li><a href='http://mas-andes.blogspot.com/search/label/SEO' target='_blank' title='SEO'>SEO</a></li>
<li><a href='http://mas-andes.blogspot.com/p/blog-page_8467.html' target='_blank' title='Sitemap'>Sitemap</a></li>
<li><a class="end">&nbsp;</a></li>
</ul>
Seluruh link di atas silahkan ganti dengan link label pada blog anda.

Setelah semua terpasang dengan benar maka navigasi menu hasilnya akan tampak seperti berikut ini:


Sedangkan apabila ingin memasang dengan warna lain seperti pada dibawah ini, langkah-langkah cara pemasangannya juga sama persis seperti pada yang sudah diterangkan pada point 1-5 diatas. Berikut demo dan source kode menunya:


Berikut kodenya:
CSS*
.menunavred *{margin: 0;padding: 0;}
ul.menunavred {padding: 0;list-style: none;line-height: 1;overflow: visible !important;}
ul.menunavred:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.menunavred li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.menunavred li a{background:#9A0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu0krLS7ZSiI8gpWavjulE8EGD00J04wduV0PBwWkTw7IPwQyKfh2vukpLFdt5wPOBXiSkRjsMY50-VKyCNKkkHD87XiU9MqlOan-DIuTFOZaMTGBiM5LMIaS_eqKH2R9ROnwSkCYtZPE/h108/bg.gif);text-decoration:none;margin: 0;padding: 11px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #000 !important;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: none !important;}
ul.menunavred li a:hover,ul.menunavred li a.hoverover{background: #e75921 url(https://lh5.googleusercontent.com/-40_aCZhuUlg/Uf8EdzACNTI/AAAAAAAAF7s/SH3wNWFxxxk/h120/bg_red.png);}
ul.menunavred ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.menunavred li:hover > ul{display: block;}
ul.menunavred ul li{float: none;min-width: 160px;background:#e75921;text-shadow: none;}
ul.menunavred ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.menunavred ul li a:hover,ul.navmenured ul li a.hoverover{background: #fff url(https://lh5.googleusercontent.com/-40_aCZhuUlg/Uf8EdzACNTI/AAAAAAAAF7s/SH3wNWFxxxk/h120/bg_red.png);}
ul.menunavred ul ul{display: none;left: 100%;top: 0;}
ul.navmenured li div.submenu {box-shadow: 1px 1px 5px #e75921;display: none;position: absolute;width: 600px;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #ffffff;border-top: none;}
ul.navmenured li:hover div.submenu {display: block;}
ul.navmenured ul ,ul.navmenured ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.navmenured ul li{background: none !important;float: none !important;}
ul.navmenured ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #9A0000;}
ul.navmenured ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.navmenured ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.navmenured ul.postslist li:last-child{border-bottom: none 0;}
ul.navmenured ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #9A0000;font-size: 0;line-height: 0;}
ul.navmenured ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.navmenured ul.postslist li a{background: none;display: block;line-height: 1.4;padding: 0 !important;}
ul.navmenured .loader{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlmXGGQ_DTM4C5UQDPC-ZDzvU1hSmBcXISTkgbZaD3sgxlV-lrQzMqN-kVtlcSTH5sChJQNM1_e9h90QomrCYrKfW2bAs1TQfQUCm35rNdp4f4Jy5xxuQM2ty64NIFmBjMR_7D-hmfGrk/h120/loading.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.navmenured .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #000;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#navmenured {background:#9A0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP7RfiVDqIjLx6_v6PGlFnH_K7p5pjppKzzzp_nEUxqnN_Fxeq97_rg6gZm4lFFYc8aup_7bpHOCKdnIGGr2hchr_NMc3ZUTeOtDPpgigTicvBMDs3NO1TuV6m7L5nabw9EXzPiHlUM1U/h120/bg1.gif);border: 1px solid #e75921;}
.end{ width:2px;}
Javascript*
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/ajaxbloggermenu.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#navmenured').ajaxBloggerMenu({
numPosts : 4, // Maksimal tampilan jumlah posting
defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6FBhBWbHsX6ZeALHfPVulZYBllWi8xcrOawcSkf6EE5ZtAxVbhCs-RL9ud3aDagigTtja2jinIajoOfjDckrm6ejUNxlTyCkc0C98JkztON7fo6ptsjI-sFxGoAOsRhmWS01x4aBNnOE/w140-h140-p/no-image.png' // Default thumbnail Image
});
});</script>
HTML*
<ul id='navmenured' class='menunavred'>
 <li><a expr:href='data:blog.homepageUrl' title='Halaman Utama'>Home</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Komputer' target='_blank' title='Komputer'>Komputer</a>
 <ul class='submenu'>
 <li><a href='http://mas-andes.blogspot.com/search/label/Software' target='_blank' title='Software'>Software</a></li>
  <li><a href='http://mas-andes.blogspot.com/search/label/Networking' target='_blank' title='Networking'>Networking</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Pemrograman' target='_blank' title='Programming'>Programming</a></li>
</ul>
</li>
 <li><a href='http://mas-andes.blogspot.com/search/label/CSS' target='_blank' title='CSS'>CSS</a>
<ul class='submenu'>
 <li><a href='http://mas-andes.blogspot.com/search/label/Slider' target='_blank' title='Slider'>Slider</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Navigasi' target='_blank' title='Navigasi'>Navigasi</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Image%20Effect' target='_blank' title='Image Effect'>Image Effect</a></li>
</ul>
</li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Tips%20Trik%20Blogger' target='_blank' title='Blogging'>Blogging</a>
 <ul class='submenu'>
  <li><a href='http://mas-andes.blogspot.com/search/label/HTML' target='_blank' title='HTML'>HTML</a></li>
  <li><a href='http://mas-andes.blogspot.com/search/label/Jquery' target='_blank' title='jQuery'>jQuery</a></li>
  <li><a href='http://mas-andes.blogspot.com/search/label/Widget' target='_blank' title='Widget Blog'>Widget Blog</a></li>
 </ul>
</li>
<li><a href='http://mas-andes.blogspot.com/search/label/SEO' target='_blank' title='SEO'>SEO</a></li>
<li><a href='http://mas-andes.blogspot.com/p/blog-page_8467.html' target='_blank' title='Sitemap'>Sitemap</a></li>
<li><a class="end">&nbsp;</a></li>
</ul>



CSS*
.menunavgreen *{margin: 0;padding: 0;}
ul.menunavgreen {padding: 0;list-style: none;line-height: 1;overflow: visible !important;}
ul.menunavgreen:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.menunavgreen li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.menunavgreen li a{background:#52e052 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCDCRj2yB9WTfYlyJmeKexaAdOW6fwIlm-QTPNL_YrHsc3MPoANSxi956MWHoM5psln8Owt4c5g0tVMvfsgoCHI1sV1oxWryKRzJA7Ea5D0To-Q7367h0vnkmS_GpDBK0B-qd5MQy3HEw/h108/green.gif);text-decoration:none;margin: 0;padding: 11px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #000 !important;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;}
ul.menunavgreen li a:hover,ul.menunavgreen li a.hoverover{ background-position: 0% -60px;}
ul.menunavgreen ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.menunavgreen li:hover > ul{display: block;}
ul.menunavgreen ul li{float: none;min-width: 160px;background:#52e052;text-shadow: none;}
ul.menunavgreen ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.menunavgreen ul li a:hover,ul.menunavgreen ul li a.hoverover{ background-position: 0% -60px;}
ul.menunavgreen ul ul{display: none;left: 100%;top: 0;}
ul.menunavgreen li div.submenu {box-shadow: 1px 1px 5px #52e052;display: none;position: absolute;width: 600px;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #ffffff;border-top: none;}
ul.menunavgreen li:hover div.submenu {display: block;}
ul.menunavgreen ul ,ul.menunavgreen ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.menunavgreen ul li{background: none !important;float: none !important;}
ul.menunavgreen ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #2BAA2B;}
ul.menunavgreen ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.menunavgreen ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.menunavgreen ul.postslist li:last-child{border-bottom: none 0;}
ul.menunavgreen ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #52e052;font-size: 0;line-height: 0;}
ul.menunavgreen ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.menunavgreen ul.postslist li a{background: none;display: block;line-height: 1.4;padding: 0 !important;}
ul.menunavgreen .loader{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlmXGGQ_DTM4C5UQDPC-ZDzvU1hSmBcXISTkgbZaD3sgxlV-lrQzMqN-kVtlcSTH5sChJQNM1_e9h90QomrCYrKfW2bAs1TQfQUCm35rNdp4f4Jy5xxuQM2ty64NIFmBjMR_7D-hmfGrk/h120/loading.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.menunavgreen .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #000;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#menunavgreen {background:#52e052 url(https://lh4.googleusercontent.com/-84N8in2YMCc/UjS0YrTZQ7I/AAAAAAAAGJc/fWb8wN23bAg/h120/greenbg.gif);background-position: 0% -1px;border: 1px solid #52e052;}
.end{ width:2px;}
Javascript*
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/ajaxmenublogger.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#menunavgreen').ajaxBloggerMenu({
numPosts : 4, // Maksimal tampilan jumlah posting
defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6FBhBWbHsX6ZeALHfPVulZYBllWi8xcrOawcSkf6EE5ZtAxVbhCs-RL9ud3aDagigTtja2jinIajoOfjDckrm6ejUNxlTyCkc0C98JkztON7fo6ptsjI-sFxGoAOsRhmWS01x4aBNnOE/w140-h140-p/no-image.png' // Default thumbnail Image
});
});</script>
HTML*
<ul id='menunavgreen' class='menunavgreen'>
 <li><a expr:href='data:blog.homepageUrl' title='Halaman Utama'>Home</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Komputer' target='_blank' title='Komputer'>Komputer</a>
    <ul class='submenu'>
    <li><a href='http://mas-andes.blogspot.com/search/label/Software' target='_blank' title='Software'>Software</a></li>
     <li><a href='http://mas-andes.blogspot.com/search/label/Networking' target='_blank' title='Networking'>Networking</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Pemrograman' target='_blank' title='Programming'>Programming</a></li>
</ul>
</li>
 <li><a href='http://mas-andes.blogspot.com/search/label/CSS' target='_blank' title='CSS'>CSS</a>
<ul class='submenu'>
 <li><a href='http://mas-andes.blogspot.com/search/label/Slider' target='_blank' title='Slider'>Slider</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Navigasi' target='_blank' title='Navigasi'>Navigasi</a></li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Image%20Effect' target='_blank' title='Image Effect'>Image Effect</a></li>
</ul>
</li>
 <li><a href='http://mas-andes.blogspot.com/search/label/Tips%20Trik%20Blogger' target='_blank' title='Blogging'>Blogging</a>
    <ul class='submenu'>
     <li><a href='http://mas-andes.blogspot.com/search/label/HTML' target='_blank' title='HTML'>HTML</a></li>
     <li><a href='http://mas-andes.blogspot.com/search/label/Jquery' target='_blank' title='jQuery'>jQuery</a></li>
     <li><a href='http://mas-andes.blogspot.com/search/label/Widget' target='_blank' title='Widget Blog'>Widget Blog</a></li>
    </ul>
</li>
<li><a href='http://mas-andes.blogspot.com/search/label/SEO' target='_blank' title='SEO'>SEO</a></li>
<li><a href='http://mas-andes.blogspot.com/p/blog-page_8467.html' target='_blank' title='Sitemap'>Sitemap</a></li>
<li><a class="end">&nbsp;</a></li>
</ul>
CSS Jquery Navigasi




menu navigasi dropdown ajax jquery keren

Bagaimana ? Menarik bukan ?
Nah, untuk membuatnya ikuti saja langkah-langkah dibawah ini :
  • Log in ke dashboar blog kita
  • Pilih menu Template dan klik Edit HTML
  • Beri tanda cek pada Expand widget templates
  • Letakkan kode berikut ini sebelum ]]></b:skin>
/* Menu Navigasi*/.w2bmenu *{margin: 0;padding: 0;}ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;}ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}ul.w2bmenu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}ul.w2bmenu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;}ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;}ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}ul.w2bmenu li:hover > ul{display: block;}ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;}ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;}ul.w2bmenu ul ul{display: none;left: 100%;top: 0;}/* AJAX Menu Stylings */ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;}ul.w2bajaxmenu li:hover div.submenu {display: block;}ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}ul.w2bajaxmenu ul li{background: none !important;float: none !important;}ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;}ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;}ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;}ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;}ul.w2bajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}#w2bajaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}
  • Jika blog sobat sudah terdapat plug in jquery, maka abaikan saja langkah ini. Letakkan kode berikut sebelum </head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  • Letakkan lagi kode berikut ini sebelum </head> 
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/ajaxbloggermenu.min.js"></script><script type="text/javascript">jQuery(document).ready(function($) {          $('#w2bajaxmenu').ajaxBloggerMenu({                   numPosts : 4, // Number of Posts to show                   defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image          });});</script>
  • Simpan template sobat
  • Buka Menu Layout dan tambahkan gadget HTML/Javascript dan masukkan kode berikut ini:
<ul id="w2bajaxmenu" class="w2bmenu">          <li>                   <a href="http://namabloganda.blogspot.com">Home</a>          </li>          <li>                   <a href="#">Contoh Dropdown</a>                   <ul>                             <li><a href="http://namabloganda.blogspot.com/search/label/AdSense">Sample Label</a></li>                             <li><a href="http://namabloganda.blogspot.com/search/label/Gadgets?q=Irfan">Label w/ Search</a></li>                             <li><a href="http://namabloganda.blogspot.com/search?q=ourreference">Search Query</a></li>                   </ul>          </li>          <li><a href="http://namabloganda.blogspot.com">Contoh normal</a></li></ul>
  • Save 
Yang harus sobat ketahui disini bahwa menu navigasi ini hanya mendukung Label URL, Search query dan Label with search query.
Untuk contoh masing-masingnya seperti berikut :

Label
http://namabloganda.blogspot.com/search/label/AdSense
Label with Search query
http://namabloganda.blogspot.com/search/label/Gadgets?q=Irfan
Search query
http://namabloganda.blogspot.com/search?q=ourreference

Ubah kode berhighlight hijau, biru dan ungu tersebut sesuai kebutuhan sobat
* Team Zombie: @Blak_jak45 *
X

Posting Komentar

- Tuangkan saran maupun kritik dan jangan meninggalkan Spam.
- Berkomentarlah dengan bijak sesuai dengan konten yang tersedia.
- Dilarang Promosi disini.

on/off contact message music