Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Saturday, August 31, 2013

cara membuat jquery flying menu valid html5

Widget Flying menu ini menganut sistem Jquery, Valid HTML 5 dan CSS3 adalah menjadi andalan utama serta mempunyai sistem penulisan tag html yang SEO Friendly. Buat para bloger menu ini dapat diandalkan untuk keperluan bloging sebab tidak memakan banyak tempat dan widget untuk sebuah menu. Script yang ringan membuat widget flying menu Jquery ini menjadi pilihan dan dengan tampilan yang elegan membuat halaman blog kesayangan anda semakin top dipandang dari nilai seni suatu halaman blog. Seperti nama blog saya " BLOG DESIGN " yang tetap mengandalkan Design Design halaman blog khususnya Blogspot lebih elegan dan terampil, tapi tidak menyalahi aturan baik itu dalam sistem SEO Friendly , Validasi HtML 5 , Pemakaian CSS 3 dan kecepatan script ataupun beban tag html yang begitu ringan.
Untuk melihat demonya silahkan KLIK DISINI lihat menu dibagian kanan halaman.


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 dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda

/*****************************************
Name : Jquery Flying Menu
By : Rivai Silaban | Blog Design
Update : 31 Agustus 2013
******************************************/
#fbdrs_menu{
position:absolute;
top:120px;
right:0px;
z-index:9999;
width:150px;
height:50px;
}
#fbdrs_menu .label{
padding-left:12px;
line-height:50px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
font-weight:bold;
color:#FFFFFF;
letter-spacing:3px;
background-color: #990000;
font-style: italic;
text-shadow: 2px 0px 1px #000;
Padding-left:12px;
Border-top: solid #0066FF 5px;
border-bottom:1px solid #B90000;
}
#fbdrs_menu .menu{display:none;}
#fbdrs_menu .menu .menu_item{
display:block;
background:#000;
color:#bbb;
border-top:1px solid #000;
border-bottom:1px solid #A80000;
padding:10px 20px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
text-decoration:none;
background-color: #6C0000;
font-style: italic;
font-weight: 600;
Padding-left:12px;
text-shadow: none;
}
#fbdrs_menu .menu a.menu_item:hover{
color:#FFCC00;
background-color: #990000;
text-shadow: 2px 0px 1px #000; }
}/*** Blog Design CSS and ***/


Install Script


  1. Setelah anda selesai menyematkan CSSnya 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 Jquery Flying Menu start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/39313108410/jquery-flying.js"></script>
<script type="text/javascript">
function FloatMenu(){
var animationSpeed=1500;
var animationEasing='easeOutQuint';
var scrollAmount=$(document).scrollTop();
var newPosition=menuPosition+scrollAmount;
if($(window).height()<$('#fbdrs_menu').height()+$('#fbdrs_menu .menu').height()){
$('#fbdrs_menu').css('top',menuPosition);
} else {
$('#fbdrs_menu').stop().animate({top: newPosition}, animationSpeed, animationEasing);
}
}
$(window).load(function() {
menuPosition=$('#fbdrs_menu').position().top;
FloatMenu();
});
$(window).scroll(function () {
FloatMenu();
});
jQuery(document).ready(function(){
var fadeSpeed=500;
$("#fbdrs_menu").hover(
function(){ //mouse over
$('#fbdrs_menu .label').fadeTo(fadeSpeed, 1);
$("#fbdrs_menu .menu").fadeIn(fadeSpeed);
},
function(){ //mouse out
$('#fbdrs_menu .label').fadeTo(fadeSpeed, 0.75);
$("#fbdrs_menu .menu").fadeOut(fadeSpeed);
}
);
});
</script>
<!-- Rivai Silaban | BLOG DESIGN script Jquery Flying Menu End -->


Install tag html


  1. Setelah anda selesai memasang code CSSnya saatnya anda dipaksa untuk memasang kode tag htmlnya pada halaman blog anda agar muncul pada saat dibrowsing.
  2. Cari code <body> setelah ketemu copy kode dibawah ini dan pastekan tepat dibawah kode <body>

<!-- Rivai Silaban | BLOG DESIGN Jquery Flaying Menu start -->
<div id="fbdrs_menu">
<div class="label">Main Menu</div>
<div class="menu">
<a href="http://rivai-silaban.blogspot.com/" title="Menu Kategory 1" class="menu_item">Menu Kategory 1</a>
<a href="http://rivai-silaban.blogspot.com/" title="Menu Kategory 2" class="menu_item">Menu Kategory 2</a>
<a href="http://rivai-silaban.blogspot.com/" title="Menu Kategory 3" class="menu_item">Menu Kategory 3</a>
<a href="http://rivai-silaban.blogspot.com/" title="Menu Kategory 4" class="menu_item">Menu Kategory 4</a>
<a href="http://rivai-silaban.blogspot.com/" title="Menu Kategory 5" class="menu_item">Menu Kategory 5</a>
<a href="http://rivai-silaban.blogspot.com/" title="Menu Kategory 6" class="menu_item">Menu Kategory 6</a>
<a href="http://rivai-silaban.blogspot.com/" title="Menu Kategory 7" class="menu_item">Menu Kategory 7</a>
<a href="http://rivai-silaban.blogspot.com/" title="Menu Kategory 8" class="menu_item">Menu Kategory 8</a>
<a href="http://rivai-silaban.blogspot.com/" title="Menu Kategory 9" class="menu_item">Menu Kategory 9</a>
<a href="http://rivai-silaban.blogspot.com/" title="Menu Kategory 10" class="menu_item">Menu Kategory 10</a> </div>
</div>
<!-- Rivai Silaban | BLOG DESIGN Jquery Flaying Menu End -->

Keterangan Code
  • Tulisan kode warna MERAH ganti dengan link menu anda .
    Untuk title dan menu harus sama penulisannya biar lebih SEO Friendly lihat tulisan warna HIJAU .
  • Tulisan warna HIJAU ganti dengan nama menu halaman anda.
  • Silahkan edit CSSnya sesuai dengan tampilan halaman blog anda.

Kesimpulan

Widget Jquery Flying Menu pada tutorial kali ini terinspirasi oleh seorang sahabat saya, semoga pada tutorial kali ini, sahabat saya dapat memasangnya pada halaman blognya dan menyenangkan hatinya.

Buat para teman teman bloger yang mengalami masalah dalam memasang widget flaying menu navigasi with email subscribe ini, silahkan hubungi saya atau share bersama saya melalui form komentar dibawah.

Widget Jquery flaying Menu
Sabtu 31 Agustus 2013
By : Admin Blog Design
Rivai Silaban

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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 10:14 PM

2 comments :

  1. Wow baru lagi Bang.. banyak banget Bang tutorial SEO dan
    Tutorial Valid HTML5 nya sampai saya kewalahan memasang nya
    Terima kasih atas artikel dan Ilmu berbagi nya..salam sukses

    ReplyDelete
    Replies
    1. iyah bang maklum lagi ada ilmu sedikit yah dibuat saja sayang dipendam heheh..
      thx atas pendapatnya.

      Delete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog