cara membuat widget flying navigasi with subscribe

Flaying menu navigasi with form subscribe ini adalan nama sebuah widget menu melayang diatas header dengan gabungan email subscribe. Menu yang satu ini dapat anda andalkan untuk menu halaman blog kesayangan anda. Widget Flaying navigasi ini responsive terhadap lebar dari resolusi screen layar komputer. Widget Navigasi ini valid HTML 5 dan CSS 3. Perkara untuk SEO penulisan kode tag widget ini menganut sistem EO Friendly serta memiliki kode yang ringan dalam masalah loading. Html widget ini menganut dua sistem IE yaitu IE6 dan IE7.Tampilan yang begitu menarik menjadi andalan dari widget ini, dan form email subscribe menjadi suatu pelengkap untuk meyempurnakan widget ini buat para bloger mania yang suka dengan design design yang unik dan menarik. Buat anda yang pengen memasang widget Flaying Menu Navigsi with Subscribe ini silahkan simak tutorial dibawah ini.
Untuk melihat demonya silahkan KLIK DISINI lihat menu dibagian atas 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 : Flaying Navigasi with Subscribe
By : Rivai Silaban | Blog Design
Update : 25/08/2013
******************************************/
#BDRS-menu {
border-top:3px solid #99FF00;
z-index:100;
top:0;
left:0;
width:100%;
height: 25px;
position:fixed;
margin:0 0 4px;
padding:8px 0 6px;
background-color: #111;box-shadow: 1px 0 5px #111;
}
#BDRS-menu .menuku{
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
box-shadow: 0 2px 1px #9c9c9c;
}
#BDRS-menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
list-style-type: none;
}
#BDRS-menu a
{
float: left;
padding: 0 20px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#BDRS-menu li:hover > a
{
color: #fafafa;
border-bottom:2px solid #99FF00;
margin-bottom:-2px;
}
*html #BDRS-menu li a:hover /* IE6 */
{
color: #fafafa;
}
#BDRS-menu li:hover > ul
{
display: block;
}
#BDRS-menu ul
{
list-style: none;
margin: 0 auto;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
border-radius: 5px;
max-width : 980px;
margin : 0 auto;
background-color: #444;
}
#BDRS-menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
width:150px;
}
#BDRS-menu ul li:last-child
{
box-shadow: none;
}
#BDRS-menu ul a
{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #BDRS-menu ul a /* IE6 */
{
height: 10px;
width: 150px;
}
*:first-child+html #BDRS-menu ul a /* IE7 */
{
height: 10px;
width: 150px;
}
#BDRS-menu ul a:hover
{
background-color: #666666;
}
#BDRS-menu ul li:first-child a
{
border-radius: 5px 5px 0 0;
}
#BDRS-menu ul li:first-child a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#BDRS-menu ul li:first-child a:hover:after
{
border-bottom-color: #666666;
}
#BDRS-menu ul li:last-child a
{
border-radius: 0 0 5px 5px;
}
#BDRS-menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #BDRS-menu { zoom: 1; } /* IE6 */
*:first-child+html #BDRS-menu { zoom: 1; } /* IE7 */
#BDRS-menu ul li:first-child a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#BDRS-menu ul li:first-child a:hover:after
{
border-bottom-color: #666666;
}
#BDRS-menu .right .BD-box {
margin-top : 0px;
padding : 0 10px;
float: right;
}
#BDRS-menu .right .BD-box input {
border : rgb(9, 149, 223) solid 1px;
font-size : 12px;
padding : 5px;
text-shadow : 1px 1px 0 #FFF;
width : 150px;
color : #996600;
font-family : georgia;
border : rgb(9, 149, 223) solid 1px;
border-color : #999900;
background-color: #F0FFD9;
}
#BDRS-menu .right .BD-box input:hover {
background-color: #FFFFFF;
}
#BDRS-menu .right .BD-box .submit {
border : rgb(9, 149, 223) solid 2px;
color : #000000;
cursor : pointer;
font-family : verdana;
font-size : 12px;
padding : 0 0 3px 0;
text-shadow : 0px 1px #999;
text-transform : uppercase;
width : 100px;
height : 25px;
background-color : #99CC00;
border-color : #999900;
font-style: italic;
font-weight: normal;
}
#BDRS-menu .right .BD-box .submit:hover {
background-color :#999900;
color : #FFFFFF;
border-color : #996600;
text-shadow: none;
}/*** Blog Design CSS and ***/

Install tag html

• Setelah kode CSSnya sudah terpasang kini saatnya kita akan memasukkan kode tag htmlnya.
• Copy code dibawah ini lalu pastekan dibawah widget " HEADER "
  Pada halaman blog pasti mempunyai "Header" jadi anda pastekan kode dibawah ini dibawah semua kode HEADER blog anda.
• Save halaman anda dan lihat hasilnya, semoga bermanfaat.
  

<!-- Rivai Silaban | BLOG DESIGN Flaying navigasi start -->
<div class="content-wrapper">
<ul id="BDRS-menu" class="menuku">
<li><a href="link anda " target="_self" rel="nofollow" title="home">Home</a></li>
<li><a href="#" rel="nofollow" title="about">About</a>
<ul>
<li><a href="link anda" target="_blank" rel="nofollow" title="profil">My profil</a></li>
<li><a href="link anda" target="_blank" rel="nofollow" title="album">My Album</a></li>
<li><a href="link anda" target="_blank" rel="nofollow" title="job">My job</a></li>
<li><a href="link anda" target="_blank" rel="nofollow" title="skill">My Skill</a></li>
</ul></li>
<li><a href="#" rel="nofollow" title="kategori">Categories</a>
<ul>
<li><a href="link anda" target="_blank" rel="nofollow" title="tutorial">Tutorial</a></li>
<li><a href="link anda" target="_blank" rel="nofollow" title="trik bloger">Trik Blogspot</a></li>
<li><a href="link anda" target="_blank" rel="nofollow" title="blogspot">Blogspot</a></li>
<li><a href="link anda" target="_blank" rel="nofollow" title="wordpress">Wordpress</a></li>
<li><a href="link anda" target="_blank" rel="nofollow" title="joomla">Joomla</a></li>
<li><a href="link anda" target="_blank" rel="nofollow" title="web design">Wob Design</a></li>
</ul></li>
<li><a href="#" rel="nofollow" title="kontak">Contact</a>
<ul>
<li><a href="link anda" target="_blank" rel="nofollow" title="gplus">Gplus</a></li>
<li><a href="link anda" target="_blank" rel="nofollow" title="facebook">Facebook</a></li>
<li><a href="link anda" target="_blank" rel="nofollow" title="twitter">Twitter</a></li>
</ul></li>
<li><a href="link anda" target="_blank" rel="nofollow" title="sitemap">sitemap</a></li>
<li><a href="link anda" target="_blank" rel="nofollow" title="disclaimer">Disclaimer</a></li>
<li><a href="link anda" target="_blank" rel="nofollow" title="privacy policy">Privacy Policy</a></li>
<li><a href="link anda" target="_blank" rel="nofollow" title="link exchange">Link Exchange</a></li>
<span class='right'>
<span class='BD-box'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=600,height=550&apos;);return true' target='popupwindow'>
<img alt="feedburner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3bN5pC-AX7lWJ8TRgxtYQzGLBunJatZfqFjvcgLuE3tB5vkXcvEDQkG5hVfQHZ5yYJRhhnzNigzOKu8qJlrVwBwOrJWtDChbs2b6CDAQK5ObSgOV0Jod5TvXgVr_siKS0JY8kR8RNlL8/h77/feedburner.png" title='feedburner' style="margin-bottom:-9px;"/> <input name='email' type='text' class='required email' onblur='if (this.value == &apos;&apos;) this.value = &apos;Enter email here !!&apos;;' onclick='if (this.value == &apos;Enter email here !!&apos;) this.value = &apos;&apos;;' value='Enter email here !!' /> <input class='submit' id='submit' name='submit' title='subscribe' type='submit' value='SUBSCRIBE'/>
<input name='uri' type='hidden' value='ID FEEDBURNER'/>
<input name='loc' type='hidden' value='en_US'/>
</form></span></span></ul></div><br />
<!-- Rivai Silaban | BLOG DESIGN Flaying navigasi End -->

Keterangan Code

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

Kesimpulan

Widget Flaying menu navigasi with email subscribe ini memiliki tampilan responsive dan design yang unik. Fitur yang dipadukan antara menu navigasi dan form email subscribe ini menjadi andalan buat para bloger untuk memasang widget ini pada halaman blognya.

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 flaying navigasi with subscribe
Minggu, 25 Agustus 2013
By : Admin 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 : 4:10 PM