cara membuat widget jquery flying menu

Widget Flying menu ini memakai sistem jquery, cara membuat widget lebih simpel pemasangannya untuk halaman blog kesayangan anda. widget jquery flying menu ini mempunyai berbagai fitur untuk digunakan para bloger demi meningkatkan trafik blog dan design yang lebih elegan dan menarik dimata para pengunjung. Soal menu saya berasumsi bahwa para bloger mania sudah lebih memahaminya dari pada saya sendiri, 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. Autor box
3. Link sponsor
4. Form Email subscribe
   

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 widget Flying menu
By : Rivai Silaban | Blog Design
Update : Jumat 06 September 2013
******************************************/
*{
margin:0;
padding:0;
} #bdr_menu {
box-shadow : 0 1px 3px rgba(0, 0, 0, 0.4);
width:100%;
position : fixed;
top : 0;
right : 0;
z-index : 9999;
border-bottom : 5px solid;
background-color: #666666;
border-color: #FFFF00;
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size:15px;
color: #fff;
}
.oe_overlay{
opacity:0;
position:fixed;
top:0px;
right:0px;
width:100%;
height:100%;
background-color: #000000;
}
.oe_menu{
list-style:none;
margin:5px 10px;
width:auto;
clear:both;
float: right;
padding-top:10px;
}
.oe_menu > li{
width:120px;
height:48px;
padding-bottom:2px;
float:left;
position:relative;
}
.oe_menu > li > a{
display:block;
background-color:#000000;
color:#CCCCCC;
text-decoration:none;
font-weight:bold;
font-size:12px;
width:95px;
padding:10px;
margin:1px;
text-shadow:0px 0px 1px #000;
opacity:0.8;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
box-shadow:0 0 3px #fff;
border-radius:5px;
}
.oe_menu > li > a:hover,
.oe_menu > li.selected > a{
opacity:0.5;
text-shadow:0px 0px 2px #000;border-radius:none; }
.oe_wrapper ul.hovered > li > a{
text-shadow:0px 0px 1px #FFF;
color: #000000;
background-color: #FFFF00;
}
.oe_menu div{
position:absolute;
top:50px;
left:1px;
background:#fff;
width:533px;
height:180px;
padding:30px;
display:none;
margin-top:-10px;
}
.oe_menu div ul li a{
text-decoration:none;
color:#222;
padding:2px 2px 2px 4px;
margin:2px;
display:block;
font-size:12px;
}
.oe_menu div ul.oe_full{
width:100%;
}
.oe_menu div ul li a:hover{
color:#990000;
background-color: #EFEFEF;
}
.oe_menu li ul{
list-style:none;
float:left;
width: 150px;
margin-right:25px;
}
.oe_heading{
color:#aaa;
font-size:16px;
margin-bottom:5px;
padding-bottom:10px;
border-bottom:1px solid #ddd;
margin-right:5px;
margin-top:-15px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
} #riv_sub {
text-align: center;
width:533px;
height:180px;
padding 10px;
}
#riv_sub .NBTstyle{
padding:7px 15px 7px 5px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
border-radius: 4px;
box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#riv_sub .NBT-email{
font-family: &quot;Trebuchet MS&quot;,sans-serif;
font-size:1.2em;
font-weight:bold;
color:#111;
text-align: center;
}
#riv_sub .NBTsubmit{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #c4c4c4;
cursor: pointer;
border-radius: 4px;
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
.Rivai-PostAuthor {
font-size:10px;
margin:0 auto;
padding:10px;
width:533px;
text-shadow:1px 0 0 #fff;
background:#F7F7F7;
min-height:170px;
margin-right: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.Rivai {
padding:10px 10px 0 0;
margin:0;
font-size:12px;
float:left;
width:120px;
text-align:center;
}
.Rivai img {
border:2px solid #888;
background-color: #FFFFFF;
padding:2px;
margin:20px 5px 0px 5px;
opacity: 0.5;
}
.Rivai:hover img {
border:2px solid #ccc;
cursor:pointer;
opacity: 1;
box-shadow: 1px 1px 4px #000;
}
.Rivai-text {
float:right;
width: 70%;
font:14px Trebuchet MS,sans-serif;
text-align:justify;
color:#111;
margin:0;
padding:0 0 0 10px;
border-left:1px #c4c4c4 solid;
}
.Rivai-footer{
padding:10px 0;
font:bold 12px Trebuchet MS;
}
.more a{
background-color:#F7F7F7;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
text-align: center;
border: solid #0066FF 1px;
padding:2px 10px;
margin-right: 5px;
border-color: #DBDBDB;
float: right;
}
.more a:hover {background-color:#F3F3F3;
color: #0000;
text-decoration: none;
border: solid #0066FF 1px;
text-shadow: 0 1px #999;
border-color: #CCCCCC;
box-shadow: 0 0px 2px #999;}
}/*** 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 menu start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script type="text/javascript" src="http://yourjavascript.com/1280316193/flying-jquery.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/1933710162/flying.js"></script>
<script type="text/javascript">
Cufon.replace('ul.oe_menu div a',{hover: true});
Cufon.replace('h1,h2,.oe_heading');
</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="bdr_menu">
<div>
<img alt='my' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYwSysn-pgNAGrI7hlypaLbTlzcl26qEip7QDSYVMJqKor_GmUar8Ia2GxL23DkhAteQJ881XGJLZEAk8_Wj95JeFEcBA52kr7WimcZ4ajw1Gox67Pkkoylq9bRlQBalctujbC5Sm5Uzo/h76/admin.png' style='margin-top:10px;margin-left:10px; float:left' title='rivai silaban'/>
</div>
<div class="oe_wrapper" style="float:right">
<div id="oe_overlay" class="oe_overlay"></div>
<ul id="oe_menu" class="oe_menu">
<li><a href="LINK ANDA" title="sitemap" target="_blank">Sitemap</a></li>
<li><a href="LINK ANDA" target="_blank" title="disclaimer">Disclaimer</a></li>
<li style="margin-right:10px;" title="Privacy Polis" target="_blank"><a href="LINK ANDA">Privacy Policy</a></li>
<li><a href="">Kategory</a>
<div>
<ul>
<li class="oe_heading">All category blog</li>
<li><a href="LINK ANDA" target="_blank" title="judul">Tutorial</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">Tip's Blog</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">html 5</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">CSS</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">Script</a></li>
</ul>
<ul style="margin-top:20px;">
<li><a href="LINK ANDA" target="_blank" title="judul">Blogspot</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">Joomla</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">Wordpress</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">Jquery</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">Slider</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">Design</a></li>
</ul>
<ul style="margin-top:20px;">
<li><a href="LINK ANDA" target="_blank" title="judul">Adsense</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">PPC</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">Menu</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">Widget</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">Layuot</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">slideshow</a></li>
</ul> </div>
</li>
<li><a href="">About Us</a>
<div style="left:-119px; color:#000000" class='Rivai-PostAuthor'><!-- -112px -->

<span class='Rivai'>

<span style='font-family: Geneva, Arial, Helvetica, sans-serif; padding:3px 10px; border:solid #0000FF 1px; background-color:#00CCFF; margin-top:7px; text-align: center; border-color: #0066FF; border-radius:3px; color:#000000; text-shadow: NONE;'>
<b>
Rivai Silaban </b> </span>
<a href='http://rivai-silaban.blogspot.com' target='_blank'>
<img alt='Rivai Silaban' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqBLKAguWnUy5g089y9_93TxXnsMOaW01fL5EdHCAS87bygvKR54w-jQHAikltjtwjb0DdqqdXoj-0Cn-EheOSZm8zW3PeShahwl28aoyX1piUCJurh-AMJbag345TxD765s1o4SLb6bo/h120/rivai.jpg' width='100' title="my image"/>
</a> </span>

<span style='font-size: large;margin-top:-10px;' class='Rivai-text'>
<b>
<span style='font-family: Trebuchet MS,sans-serif; color: #990000;margin-top:-10px;'>
My Profil </span> </b>
<br/>
<p style='font-family: Georgia, &quot;Times New Roman&quot;, Times, serif; border-top: dashed #999 1px; border-bottom: dashed #999 1px; font-size: 12px; color: #333333; padding:10px 0 10px 0; line-height: 1.5em;margin-top:5px;'>
Saya adalah seorang yang suka dengan photografi dan berbagai dunia maya lainnya, saya suka
Bloging dan memiliki ilmu sedikit tentang Design Grafis, Buat sohib sohib yang suka dengan bloging mari sama sama membangun ikatan persaudaraan diantara bloger Indonesia.
<br/>
Salam bloger....!!
<br/><span class="more" style='float:right;text-align:right;margin-top:18px;'>
<a href='https://plus.google.com/108560124605502700357' rel='nofollow' target='_blank' title="Profil">
&gt;&gt; Read More </a>
</span></p>
</span>


</div>
</li>
<li><a href="">Subscribe</a>
<div style="left:-239px;" id="riv_sub" >

<span class='NBT-email' style="color: #FF0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; font-weight: bold; font-style: italic; text-shadow: 1px 1px 1px #000; line-height: 1.5em; margin-left:1px; width: 320px; float: left;">Update Artikel with Subscribe<br/>
Subscribe this Artikel <br/><br/>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='ID FEEDBURNER'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='NBTstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>
<input alt='' class='NBTsubmit' title='' type='submit' value='KIRIM'/><br/>
</form></span>

<span style="float:right; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 12px; color: #666666; padding: 0px; width: 200px; text-align: left; line-height: 1.5em;margin-top:10px;">Silahkan daftarkan email anda untuk mendapatkan Update geratis terbaru dari kami...<br/>
<br/>Silahkan cek email anda untuk melakukan registrasi,<br/>Salam Kami...</span>
</div>
</li>
<li><a href="">Kontak</a>
<div style="left:-359px;">
<ul>
<li class="oe_heading">Sosial Media</li>
<li><a href="LINK ANDA" target="_blank" title="judul">Google Plus</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">Facebook</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">Twitter</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">Pirates</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">Digg</a></li>
</ul>
<ul>
<li class="oe_heading">My Site</li>
<li><a href="LINK ANDA" target="_blank" title="judul">www.site-one.com</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">Blog Wordpress</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">Blogspot.com</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">Site Joomla</a></li>
</ul>
<ul>
<li class="oe_heading">Admin Servis</li>
<li><a href="LINK ANDA" target="_blank" title="judul">Fax</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">Handhone</a></li>
<li><a href="LINK ANDA" target="_blank" title="judul">@mail</a></li>

</ul>
</div>
</li>
<li><a href="">Partner</a>
<div style="left:-479px;">
<ul>
<li class="oe_heading">Link sponsor Blog</li>
<li><a href="LINK ANDA" target="_blank" title="Link Partner">Link Partner</a></li>
<li><a href="LINK ANDA" target="_blank" title="Link Partner">Link Partner</a></li>
<li><a href="LINK ANDA" target="_blank" title="Link Partner">Link Partner</a></li>
<li><a href="LINK ANDA" target="_blank" title="Link Partner">Link Partner</a></li>
<li><a href="LINK ANDA" target="_blank" title="Link Partner">Link Partner</a></li>
<li><a href="LINK ANDA" target="_blank" title="Link Partner">Link Partner</a></li>
</ul>
<ul style="margin-top:20px;">
<li><a href="LINK ANDA" target="_blank" title="Link Partner">Link Partner</a></li>
<li><a href="LINK ANDA" target="_blank" title="Link Partner">Link Partner</a></li>
<li><a href="LINK ANDA" target="_blank" title="Link Partner">Link Partner</a></li>
<li><a href="LINK ANDA" target="_blank" title="Link Partner">Link Partner</a></li>
<li><a href="LINK ANDA" target="_blank" title="Link Partner">Link Partner</a></li>
<li><a href="LINK ANDA" target="_blank" title="Link Partner">Link Partner</a></li>
</ul>
<ul style="margin-top:20px;">
<li><a href="LINK ANDA" target="_blank" title="Link Partner">Link Partner</a></li>
<li><a href="LINK ANDA" target="_blank" title="Link Partner">Link Partner</a></li>
<li><a href="LINK ANDA" target="_blank" title="Link Partner">Link Partner</a></li>
<li><a href="LINK ANDA" target="_blank" title="Link Partner">Link Partner</a></li>
<li><a href="LINK ANDA" target="_blank" title="Link Partner">Link Partner</a></li>
<li><a href="LINK ANDA" target="_blank" title="Link Partner">Link Partner</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div>
</div></div>
<!-- Rivai Silaban | BLOG DESIGN menu End -->

Keterangan Code

• Tulisan kode warna MERAH ganti dengan link anda
• Tulisan warna BIRU adalah kode link profil gplus.
• Tulisan warna HIJAU adalah Judul Menu
• Tulisan koe warna KUNING adalah link gambar logo.
• Tulisan kode Blok Hitam adalah link gambar admin
• Bila anda ingin lebih berkreasi silahkan anda edit CSSnya untuk menyesuaikan tampilan widget ini dengan thems template anda.

Kesimpulan

Jquery widget flying menu ini sangat cocok buat para bloger yang memiliki jumlah link atau kategory yang begitu banyak sehingga semua link dan kategori dapat dilihat oleh para pengunjung dengan cepat. Widget ini Valid HTML 5 dan menganut sistem penulisan tag link yang SEO Frienly.

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 Jquery Flying menu
Jumat , 06 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:35 PM