Blog Mas Andes

Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)
Cara Membuat Ajax Menu di Blog

Cara Membuat Ajax Menu di Blog

Mas Andes 17/09/2013 40 comments Print
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV0fskzDN4XCmyrevaV9ldrA97YE6YprAzJLEUqdNoailQklgwGhvzEplZM1-4Fp8SoUblLxyqsAh0iK7XjqNCtZXvACHDIezt0csdkXCOkuJL497mnag7PhdwdQAeg-x8BQwZlTKw6vY/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/AVvXsEgEH85rR2FLmksug_okF2qKg51s1YvQySNSRjaXhEpx9KNa-M_aSgt2Y_rdKh62sR9wFGZ0UUouSvxXCBCvSsXMSaj0XK6wy2lmvYwEd37KL481liSnN6h7X0IpktT1XpgSYuGGMsPQ0Qg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHSyyiXWpGhoYcUqdGahOZQmxpGOOw1R81YSWfBdJuu4LKWw745AA4aSFnwRo2xeVMEcV9VT701QAZQGSK46DasKziAuyBKWMAzqIzrVDg9OwskjGcfZdiw65Ziv13AEsdOla5JT236bI/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/AVvXsEheCAX8n78OEYH4L8gP0f7-lET-FydAx2m7YoEpIkVxLQU7bvMmZbkMZtiEle17RwkZIX9_nS7-BoIFzfZSI3_vunvxDulawfZDmUwoTUK1uKKIIDwNnDm2WNsclnJrLNRA8xDcvPJUb2g/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://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>
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/AVvXsEit_9gWSetMC0MYTULGly46thHVYNL7VUQjczWjgg-q8WCykodETPXxw5tc9M6RZ32w-KmW2T4FMf0RYTpltB5kK6dJKbtIswq4l3ci8x2mdItEkSwfsZrN7Zm90j5Ec2ob7CR_gZoY1lo/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOzb3spq6e5Pzo61oz1xbjZ1mruh9J2gNrZTUGSQuBHYU2HvwX62YILltnH2A-L4RPyxkqhCmxRH2U7lMf95BBNhR-hEQ3RzsnmKV7Jt5-4TlmtvRdzWqvgzKAt16FJqjeTJnjbvw_X2U/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOzb3spq6e5Pzo61oz1xbjZ1mruh9J2gNrZTUGSQuBHYU2HvwX62YILltnH2A-L4RPyxkqhCmxRH2U7lMf95BBNhR-hEQ3RzsnmKV7Jt5-4TlmtvRdzWqvgzKAt16FJqjeTJnjbvw_X2U/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/AVvXsEgEH85rR2FLmksug_okF2qKg51s1YvQySNSRjaXhEpx9KNa-M_aSgt2Y_rdKh62sR9wFGZ0UUouSvxXCBCvSsXMSaj0XK6wy2lmvYwEd37KL481liSnN6h7X0IpktT1XpgSYuGGMsPQ0Qg/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/AVvXsEhXwRSU-VgDVDibDHLUzVMmxQKqay84WnG79QpIkulDdGSZOKdQVChgZPCaxvTqAw8OmF1bbyRu5lR8IEx4x_RLpfm4DNzUiSUlVx-u0AWSyFUDnKleg0YHQT79gl2NnQldFSc-iTVCRm4/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/AVvXsEheCAX8n78OEYH4L8gP0f7-lET-FydAx2m7YoEpIkVxLQU7bvMmZbkMZtiEle17RwkZIX9_nS7-BoIFzfZSI3_vunvxDulawfZDmUwoTUK1uKKIIDwNnDm2WNsclnJrLNRA8xDcvPJUb2g/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/AVvXsEj-m2lDSV_sBBBtO6kp8IKOxa0_1qUvfc4eg9T5c9LzeenrnVTEZc9x6pM2f936WorvkCY_Y1pr_1X_hzML6hItiBqlBd7adtSQRzYBT2WrsTsXV3u_AQH1Sxmx6WSf1hzKggGbPkSz6ms/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/AVvXsEgEH85rR2FLmksug_okF2qKg51s1YvQySNSRjaXhEpx9KNa-M_aSgt2Y_rdKh62sR9wFGZ0UUouSvxXCBCvSsXMSaj0XK6wy2lmvYwEd37KL481liSnN6h7X0IpktT1XpgSYuGGMsPQ0Qg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzqdNhTL3gUnYSVlna-GFWwtAFzhUp347Ji93cOfDWQEoK5aAcHUziTckk2zRgcT3WBjhv04OtgOGnl2_8tso53Go5gYquauMy4Y63Wm36yMlF85nruL2JGnT5qNLLet4uCppcNBjbwYw/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/AVvXsEheCAX8n78OEYH4L8gP0f7-lET-FydAx2m7YoEpIkVxLQU7bvMmZbkMZtiEle17RwkZIX9_nS7-BoIFzfZSI3_vunvxDulawfZDmUwoTUK1uKKIIDwNnDm2WNsclnJrLNRA8xDcvPJUb2g/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>

Berlangganan artikel via email

40 Response to "Cara Membuat Ajax Menu di Blog"

avatar
Anonymous
9/17/13, 1:21 AM

widiiihh ngeri kaleee... :D keren mas andes , saya baru liat menu ajax , ternyata seperti itu
nicee share mas

Balas
avatar
Anonymous
9/17/13, 1:50 AM

Memang bener Mas Andes ini, Luar biasa artikelnya selalu
Bermanfaat buat saya dan buat sobat blogging yang lain...
Izin nyimak Mas..? Keren dan menawan Ajak Menu,,
Seperti yang Memposting nya..hhhh di srupput lagiiii
Terima kasih Mas....

Balas
avatar
Anonymous
9/17/13, 3:47 AM

bener-bener master nih, saya baru tahu ada menu sehebat ini, keren mas, wah codenya banyak banget yah, makasih mas :)

Balas
avatar
Anisayu Nastutik
9/17/13, 7:35 AM

lihat kodenya pening
tapi lihat hasilnya jadi bening
dg warna suka yang terpaling

Balas
avatar
Anonymous
9/17/13, 8:37 AM

Jadi pengen ngerombak punyaku..... wkwkwkwkkk

Balas
avatar
Anonymous
9/17/13, 9:06 AM

waw ada banyak pilihan kodenya.

Balas
avatar
Anonymous
9/17/13, 12:03 PM

Wiiidiiihh Kerenn Bangettt Masss Sayaa jadiii Kepengenn Nyoba Tuhhh Hehehehe

Balas
avatar
Unknown
9/17/13, 12:34 PM

keren deh ,, salut sama mas andes hehe

Balas
avatar
Unknown
9/17/13, 4:52 PM

Keren warna teal tuh mas yg pertama..kesannya elegan banget mantaab

Balas
avatar
Staff Administrator
9/17/13, 6:32 PM

Mas Andes memang paling briliant deh...soal urusan ini .. :)
sebelmnya Pernah denger mas namanya..tapi sekarng baru tau cara sama wujud tampilannya...
Lanjut mas :)

Balas
avatar
Staff Administrator
9/17/13, 6:34 PM

No sepatu mas Karris...ukuran berapa mas.. :)

Balas
avatar
Staff Administrator
9/17/13, 6:37 PM

Banyak kode...banyak rezeki loh mas.... hehe :)

Balas
avatar
Unknown
9/17/13, 11:19 PM

Iya mas Budi bener banget, cuman kalau kode kayak gini bikin pusing deh...

Balas
avatar
Unknown
9/17/13, 11:20 PM

apalagi kalau warnanya kuning :)

Balas
avatar
Unknown
9/17/13, 11:22 PM

dulu cuman gosip yah mas, tapi sekarang sudah terbukti nyata...

Balas
avatar
Sopala Multapa
9/18/13, 12:00 AM

lama tak berkunjung mas .. makin mantap euy tutorna

Balas
avatar
Anonymous
9/18/13, 6:16 AM

Asik nih warnanya ada yang senada dengan belog saya.. manteb ya ada potonya... mau pasang kode ]]> ndak ketemu di belog saya mas...

sama mau nanya lagi mas, kalau mau pasang artikel terkait dibawah postingan di belog bagaimana? terimakasih master.

Balas
avatar
Mas Andes
9/18/13, 8:13 AM

kalo template mang yono kode CSSny taruh aja di atas kode ini mang:
--></style>
<style id='template-skin-1' type='text/css'>

buat pasang artikel terkait di bawah post, cari kode ini mang <div class='post-footer'>
taruh kode ini di bawahnya:
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='background-color: #52E052; padding: 5px 5px 5px 10px; font-weight: bold; color: #000;'>Artikel Terkait :</div> <div class='rbbox'> <div style='background: #E9FBE9; padding:10px;height:200px;overflow:auto;border:2px solid #52E052;'> <div id='artikelterkait'/> <script type='text/javascript'> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement(&#39;ul&#39;); var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i &lt; maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k &lt; entry.link.length; k++) { if (entry.link[k].rel == &#39;alternate&#39;) { alturl = entry.link[k].href; break; } } var li = document.createElement(&#39;li&#39;); var a = document.createElement(&#39;a&#39;); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l &lt; json.feed.link.length; l++) { if (json.feed.link[l].rel == &#39;alternate&#39;) { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;); var txt = document.createTextNode(label); var h = document.createElement(&#39;b&#39;); h.appendChild(txt); var div1 = document.createElement(&#39;div&#39;); div1.appendChild(h); div1.appendChild(ul); document.getElementById(&#39;artikelterkait&#39;).appendChild(div1); } } } function search10(query, label) { var script = document.createElement(&#39;script&#39;); script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39; + label + &#39;?alt=json-in-script&amp;callback=listEntries10&#39;); script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = &quot;<data:label.name/>&quot;; var test = 0; for (var i = 0; i &lt; labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel &lt; maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> <script type='text/javascript'>RelPost();</script></div> </b:if>

Balas
avatar
Wahyu Eka Prasetiyarini
9/18/13, 10:26 AM

ternyata ajax menu seperti itu ya. bagus banget mas. saya malah baru tahu ada menu yang semacam itu. sebelumnya saya belum pernah menemukan menu yang secanggih buatan mas andes.

Btw Kode nya banyak banget :D

Balas
avatar
Agus Setya
9/18/13, 11:57 AM

mau di belikan sepatu mas bud

Balas
avatar
Agus Setya
9/18/13, 11:57 AM

jangan lupa untuk menabung

Balas
avatar
MANG YONO
9/18/13, 1:26 PM

Terimakasih mas... langsung saya coba.

Balas
avatar
Unknown
9/18/13, 8:41 PM

ga berani edit2 html lagi deh, bikin pusing tampilan yg sekarang >.<
tapi keren ko mas menu ajax-nya

Balas
avatar
Unknown
9/18/13, 9:33 PM

Sobat blogger kalee tuh mas hehehehehe PIIS deh

Balas
avatar
Anonymous
9/18/13, 9:39 PM

wahh emang disini tempatnya tutorial keren-keren

Balas
avatar
MANG YONO
9/24/13, 5:49 AM

udah saya praktekan cara pasang artikel terkait di belog saya mas, tapi kok ndak muncul dan tersimpan ya.

Balas
avatar
Mas Andes
9/24/13, 6:58 PM

kalo tidak tersimpan di refresh dulu mang pencet F5. memang kadang saat edit template saya juga seperti itu, walopun sudah di klik simpan terkadang setelah di lihat lagi kodenya tidak tersimpan. solusinya di refresh kemudian masukin lagi kodenya mang

Balas
avatar
BagasUnix
10/4/13, 1:18 PM

Mas kenapa kaga bisa ya?

Balas
avatar
Anonymous
10/28/13, 12:37 PM

widih,,,,gila bener ..panjang banget kodenya..tapi ok banget tipsnya :)

Balas
avatar
Unknown
10/29/13, 5:45 PM

Baru mampir lagi dimari, Soale saya rada sibuk di dunia nyata
Mase..? Lho Mas Budi koq nanya no sepatu, arep ngasih
Sepatu apa piye ya..?

Balas
avatar
Anonymous
10/29/13, 5:47 PM

Yah begitu adanya Mas Anthonie. terima kasih atas masukanya Mas

Balas
avatar
Unknown
3/12/14, 4:23 PM

mas klo mau menyatukan dengan header seperti di blog mas andes ini gmn ?

Balas
avatar
Unknown
3/31/14, 7:17 PM

Mas jika hanya menambahkan ajax nya saja gimana ? soalnya, warna menu navigation nya tidak ada yg senada dengan blog saya mas :)

Balas
avatar
Inspironi
5/5/14, 9:13 PM

Aslinya tutorial ini dari way2blogging.

Balas
avatar
Unknown
8/16/14, 8:15 AM

mas... kok ajak menu saya jelek?

Balas
avatar
Unknown
9/12/14, 10:11 AM

mas bagaimana menyatukan menu ajaxnya dengan header seperti punya mas andes..?? terima kasih

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Cara Membuat Ajax Menu di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode