widget flying navigasi jquery tooltip

Widget Flying Navigasi ini memakai sistem Jquery dan tampilan title dengan jenis tooltip, widget ini berada di atas header halaman blog dengan karakter melayang. Widget Flying Navigasi Jquery Tooltip ini merupakan menu yang unik dengan menampilkan isi title link dengan polesan CSS agar lebih menarik dan terlihat lebih elegan pada sistem navigasi halaman blog. Wiget Flying Navigasi Jquery Tooltip ini menganut sistem penulisan tag SEO Frienly dan valid HTML 5. Untuk melihat bagaimana pemasangannya silahkan simak tutorial dibawah ini dan lihat demonya melalui tombol demo dibawah ini, langsung saja menuju TKP.

Demo

Fitur Widget

1. Menu sistem flying in header
2. Link Menu item
3. Sistem Jquery Tooltip
4. Tooltip color system
5. Hover Menu creative

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 :Flying Navigasi Jquery Tooltip
By : Rivai Silaban | Blog Design
Update : Minggu 08 September 2013
******************************************/
#BD-RSmenu {
background-color: #0066CC;
z-index: 100;
position: fixed;
width: 100%;
border-bottom:solid #FF0000 3px;
height: 40px;
top: 0px;
left: 0px;
box-shadow:0 0 4px 1px #000;
}
#BD-RSmenu ul { padding-left: 30px; margin-top:15px;}
#BD-RSmenu ul li {
float: left;
list-style: none;
margin-right: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
#BD-RSmenu ul li a {
color: #fff;
padding: 5px 8px;
text-decoration: none;
text-shadow: 1px 0 1px #111;
}
#BD-RSmenu ul li a:hover {
text-decoration: none;
color: #999999;
border-top:solid #fff 3px;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
border:1px;
}
.clfix-bdrs { display: inline-block; }
html[xmlns] .clfix-bdrs { display: block; }
* html .clfix-bdrs { height: 1%; }
.bdrscolTip{
display: none;
position: absolute;
left: 50%;
top: 40px;
padding:6px;
background-color: white;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
font-style: normal;
line-height:1;
text-decoration: none;
text-align: center;
text-shadow: 0 0 1px white;
white-space: nowrap;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.bdrstyTip,.bdrstyTipShadow {
border: 6px solid transparent;
bottom: 23px;
height: 0;
left: 50%;
margin-left: -6px;
position: absolute;
width: 0;
transform: rotate(180deg);
}
.bdrstyTipShadow { border-width: 7px; bottom: 24px; }
.bdrscolTipContainer{ position: relative; text-decoration: none !important; }
.putih .bdrstyTip { border-top-color: #fff;}
.putih .bdrstyTipShadow { border-top-color: #ddd;}
.putih .bdrscolTip { background-color: #fff; border: 1px solid #ddd; color: #555; }
.kuning .bdrstyTip { border-top-color: #f9f2ba; }
.kuning .bdrstyTipShadow { border-top-color: #e9d315; }
.kuning .bdrscolTip { background-color: #f9f2ba; border: 1px solid #e9d315; color: #5b5316; }
.biru .bdrstyTip { border-top-color:#d9f1fb; }
.biru .bdrstyTipShadow { border-top-color:#7fcdee; }
.biru .bdrscolTip { background-color:#d9f1fb; border:1px solid #7fcdee; color:#1b475a; }
.hijau .bdrstyTip { border-top-color:#f2fdf1;}
.hijau .bdrstyTipShadow { border-top-color:#b6e184;}
.hijau .bdrscolTip { background-color:#f2fdf1; border:1px solid #b6e184; color:#558221; }
.merah .bdrstyTip { border-top-color:#bb3b1d; }
.merah .bdrstyTipShadow { border-top-color:#8f2a0f; }
.merah .bdrscolTip { background-color: #bb3b1d; border: 1px solid #8f2a0f; color: #fcfcfc; text-shadow: none; }
.hitam .bdrstyTip { border-top-color: #333; }
.hitam .bdrstyTipShadow { border-top-color: #111; }
.hitam .bdrscolTip { background-color: #333; border: 1px solid #111; color: #fcfcfc; text-shadow: none; }
/*** 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.6 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.
5. Perhatikan tulisan warna hijau pada script dibawah ini, warna biru menjai warna latar belakang tooltipnya, bila anda ingin mengganti warna lain sesuai dengan thems template anda silahkan ganti sesuai dengan warna yang tersedia dibawah ini.
   Warna Merah ganti dengan tulisan " merah "
   Warna Hitam ganti dengan tulisan " hitam "
   Warna Kuning ganti dengan tulisan " kuning "
   Warna Hijau ganti dengan tulisan " hijau "
   Warna Putih ganti dengan tulisan " putih "
   Warna Biru ganti dengan tulisan " biru " ( warna tooltip tutorial )

<!-- Rivai Silaban | BLOG DESIGN script menu start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script type="text/javascript" src="http://yourjavascript.com/9211130588/tooltip-jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('li.bdlis > a[title]').colorTip({color:'biru'});
});
</script>
<!-- Rivai Silaban | BLOG DESIGN script menu End -->

Install Program Tag HTML

• Setelah anda selesai memasang code scriptnya 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>
  

<!-- Rivai Silaban | BLOG DESIGN script menu start -->
<div id="BD-RSmenu">
<ul class="clfix-bdrs">
<li class="bdlis"><a href="LINK MENU " title="Home page">Home</a></li>
<li class="bdlis"><a href="LINK MENU" title="Silahkan lihat profil admin blog">About Us</a></li>
<li class="bdlis"><a href="LINK MENU" title="Lihat bagian disclaimer blog">Disclaimer</a></li>
<li class="bdlis"><a href="LINK MENU" title="Privacy Policy halaman blog">Privacy Policy</a></li>
<li class="bdlis"><a href="LINK MENU" title="Silahkan hubungi saya">Contact Us</a></li>
</ul>
</div>
<br/><br/>
<!-- Rivai Silaban | BLOG DESIGN menu End -->

Keterangan Code

• Tulisan kode warna MERAH pada "Code HTML " ganti dengan link menu anda.
• Tulisan warna BIRU adalah tulisan title tooltip menu
• Tulisan warna HIJAU adalah Judul Menu
• Tulisan kode warna KUNING adalah Jarak antara menu dengan halaman anda, bila terlalu ekat silahkan tambahkan code <br/>, sebaliknya bila terlalu jauh silahkan kurangi kode <br/>.
• Bila anda ingin lebih berkreasi silahkan anda edit CSSnya untuk menyesuaikan tampilan widget ini dengan thems template anda. Untuk Kode warna MERAH pada kode CSS merupakan warna latar belakang menu. ( warna biru pada tutorial )

Kesimpulan

Widget Flying Navigasi Jquery tooltip ini merupakan menu halaman blog yang lebih unik ibanding menu menu biasa. widget menu ini menganut sistem SEO Frienly dan valid HTML 5.

Bila teman teman mengalami masalah dalam pemasangan wiget ini atau ada kesalahan penulisan kode silahkan hubungi saya atau share bersama saya lewat form komentar dibawah ini.

Widget Flying Navigasi Jquery Tooltip
Minggu 08 September 2013
By : Rivai Silaban | Blog Design

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

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 1:30 PM