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
- Login ke dashboard anda
- Masuk ke "TEMPLATE" lalu klik " Edit HTML "
- Cari code ]]></b:skin>
- 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
Install Script
- Setelah anda selesai menyematkan CSSnya 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.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
- Setelah anda selesai memasang code CSSnya saatnya anda dipaksa untuk memasang kode tag htmlnya pada halaman blog anda agar muncul pada saat dibrowsing.
- Cari code <body> setelah ketemu copy kode dibawah ini dan pastekan tepat dibawah kode <body>
- 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.
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.... !!! .
Admin Rivai Silaban
Wow baru lagi Bang.. banyak banget Bang tutorial SEO dan
ReplyDeleteTutorial Valid HTML5 nya sampai saya kewalahan memasang nya
Terima kasih atas artikel dan Ilmu berbagi nya..salam sukses
iyah bang maklum lagi ada ilmu sedikit yah dibuat saja sayang dipendam heheh..
Deletethx atas pendapatnya.