cara membuat menu floating widget social

Menu navigasi yang satu ini tergolong unik dan melibatkan beberapa sosial media, menu navigasi untuk blog ini setelah saya buat beberapa hari yang lalu menuai respon yang positiv dari teman teman bloger saya, Lumayan banyak emailyang saya terima untuk cara membuat menu floating sosial media ini, oke agar jangan menyita waktu untuk menjelaskan lebih panjang lebar lagi tentang menu floating sosial media ini langsung saja lihat demonya , lihat bagian atas menu template tersebut.
KLIK DISINI

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


#BD-MENU {
width : 100%;
height : 63px;
margin : 0 auto;
box-shadow : 0 -1px 10px rgba(50, 50, 50, 0.3);
background : #fff;
position : fixed;
z-index : 9999;
overflow : hidden;
top : 0;
left : 0;
}
#BD-MENU #BD-MENU-NAV {
width : 960px;
height : 63px;
margin : 0 auto;
padding : 0;
font-size : 14px;
text-align : left;
}
#BD-MENU #BD-MENU-NAV p {
width : 90px;
float : left;
padding : 23px 0;
}
ul.BD-SOS {
float : right;
width : 860px;
padding : 0;
margin : 0;
margin-top : 5px;
list-style-type : none;
}
ul.BD-SOS li {
float : left;
padding : 0;
margin : 0;
height : 54px;
}
ul.BD-SOS li a {
float : left;
display : block;
padding : 0;
margin : 0;
width : 100%;
height : 100%;
}
ul.BD-SOS li a span {
position : absolute;
left : -90000px;
}
ul.BD-SOS li.bdone {
width : 170px;
margin-right : 5px;
padding-top : 3px;
background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg_yrQM_8t6zaE9qMcBswqrSnDU376f1dSo36PYiNmyuUjWWLjoJk2Zlgr5eOykWQgUabb7clqYFJUpH7SsVxeIjIAi-7RoA1wnqxvgeIuLaPakgSEazK17xBgPO1hf_9Wx6EFPdTHurI/s1600/SOSIAL-MENU.jpg&quot;) 0 0;
}
ul.BD-SOS li.bdone a:hover {
background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg_yrQM_8t6zaE9qMcBswqrSnDU376f1dSo36PYiNmyuUjWWLjoJk2Zlgr5eOykWQgUabb7clqYFJUpH7SsVxeIjIAi-7RoA1wnqxvgeIuLaPakgSEazK17xBgPO1hf_9Wx6EFPdTHurI/s1600/SOSIAL-MENU.jpg&quot;) 0 54px;
}
ul.BD-SOS li.bdfb {
width : 148px;
padding-top : 4px;
background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg_yrQM_8t6zaE9qMcBswqrSnDU376f1dSo36PYiNmyuUjWWLjoJk2Zlgr5eOykWQgUabb7clqYFJUpH7SsVxeIjIAi-7RoA1wnqxvgeIuLaPakgSEazK17xBgPO1hf_9Wx6EFPdTHurI/s1600/SOSIAL-MENU.jpg&quot;) -179px 0;
}
ul.BD-SOS li.bdfb a:hover {
background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg_yrQM_8t6zaE9qMcBswqrSnDU376f1dSo36PYiNmyuUjWWLjoJk2Zlgr5eOykWQgUabb7clqYFJUpH7SsVxeIjIAi-7RoA1wnqxvgeIuLaPakgSEazK17xBgPO1hf_9Wx6EFPdTHurI/s1600/SOSIAL-MENU.jpg&quot;) -179px 54px;
}
ul.BD-SOS li.bdtwit {
width : 187px;
padding-top : 3px;
background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg_yrQM_8t6zaE9qMcBswqrSnDU376f1dSo36PYiNmyuUjWWLjoJk2Zlgr5eOykWQgUabb7clqYFJUpH7SsVxeIjIAi-7RoA1wnqxvgeIuLaPakgSEazK17xBgPO1hf_9Wx6EFPdTHurI/s1600/SOSIAL-MENU.jpg&quot;) -327px 0;
}
ul.BD-SOS li.bdtwit a:hover {
background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg_yrQM_8t6zaE9qMcBswqrSnDU376f1dSo36PYiNmyuUjWWLjoJk2Zlgr5eOykWQgUabb7clqYFJUpH7SsVxeIjIAi-7RoA1wnqxvgeIuLaPakgSEazK17xBgPO1hf_9Wx6EFPdTHurI/s1600/SOSIAL-MENU.jpg&quot;) -327px 54px;
}
ul.BD-SOS li.bdrs {
width : 110px;
margin-right : 7px;
padding-top : 1px;
background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg_yrQM_8t6zaE9qMcBswqrSnDU376f1dSo36PYiNmyuUjWWLjoJk2Zlgr5eOykWQgUabb7clqYFJUpH7SsVxeIjIAi-7RoA1wnqxvgeIuLaPakgSEazK17xBgPO1hf_9Wx6EFPdTHurI/s1600/SOSIAL-MENU.jpg&quot;) -513px 0;
}
ul.BD-SOS li.bdrs a:hover {
background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg_yrQM_8t6zaE9qMcBswqrSnDU376f1dSo36PYiNmyuUjWWLjoJk2Zlgr5eOykWQgUabb7clqYFJUpH7SsVxeIjIAi-7RoA1wnqxvgeIuLaPakgSEazK17xBgPO1hf_9Wx6EFPdTHurI/s1600/SOSIAL-MENU.jpg&quot;) -513px 54px;
}
ul.BD-SOS li.bdtube {
width : 110px;
margin-right : 5px;
padding-top : 1px;
background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg_yrQM_8t6zaE9qMcBswqrSnDU376f1dSo36PYiNmyuUjWWLjoJk2Zlgr5eOykWQgUabb7clqYFJUpH7SsVxeIjIAi-7RoA1wnqxvgeIuLaPakgSEazK17xBgPO1hf_9Wx6EFPdTHurI/s1600/SOSIAL-MENU.jpg&quot;) -639px 0;
}
ul.BD-SOS li.bdtube a:hover {
background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg_yrQM_8t6zaE9qMcBswqrSnDU376f1dSo36PYiNmyuUjWWLjoJk2Zlgr5eOykWQgUabb7clqYFJUpH7SsVxeIjIAi-7RoA1wnqxvgeIuLaPakgSEazK17xBgPO1hf_9Wx6EFPdTHurI/s1600/SOSIAL-MENU.jpg&quot;) -639px 54px;
}
ul.BD-SOS li.bduser {
width : 88px;
background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg_yrQM_8t6zaE9qMcBswqrSnDU376f1dSo36PYiNmyuUjWWLjoJk2Zlgr5eOykWQgUabb7clqYFJUpH7SsVxeIjIAi-7RoA1wnqxvgeIuLaPakgSEazK17xBgPO1hf_9Wx6EFPdTHurI/s1600/SOSIAL-MENU.jpg&quot;) -757px 0;
}
ul.BD-SOS li.bduser a:hover {
background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg_yrQM_8t6zaE9qMcBswqrSnDU376f1dSo36PYiNmyuUjWWLjoJk2Zlgr5eOykWQgUabb7clqYFJUpH7SsVxeIjIAi-7RoA1wnqxvgeIuLaPakgSEazK17xBgPO1hf_9Wx6EFPdTHurI/s1600/SOSIAL-MENU.jpg&quot;) -757px 54px;
}




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


<div id='BD-MENU'>
<div id='BD-MENU-NAV'>
<p>
<img alt='my' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtg-2IFYC1QFZf6PzeN7I4iiQO2TZDL7_DK_JKTIGbKE0AgwvtucOgGElqSOc6UUzafJfwVkxHHeBJtT83_M0-Dehl9_0baWwtgBhZwqN8xYFJGZWhSdvJsHhtdOVsa-aHct0bk2TdROQ/h120/rivai.jpg' style='margin-top:-18px;margin-left:23px;border:solid #fff 2px; box-shadow: 0 0 1px 2px #FA2001; border-radius:50px;' title='me' width='50'/>
</p>
<ul class='BD-SOS'>
<li class='bdone'>
<a href='LINK GPLUS ANDA' rel='nofollow' target='_blank' title='google plus'>
<span>
G-plus
</span>
</a>
</li>
<li class='bdfb'>
<a href='LINK FB ANDA' rel='nofollow' target='_blank' title='join to facebook'>
<span>
facebook
</span>
</a>
</li>
<li class='bdtwit'>
<a href='LINK TWITTER ANDA' rel='nofollow' target='_blank' title='follow twitter'>
<span>
twitter
</span>
</a>
</li>
<li class='bdrs'>
<a href='LINK RSS ANDA' rel='nofollow' target='_blank' title='rss'>
<span>
rss
</span>
</a>
</li>
<li class='bdtube'>
<a href='LINK YOUTUBE' rel='nofollow' target='_blank' title='youtube'>
<span>
youtube
</span>
</a>
</li>
<li class='bduser'>
<a href='LINK JOIN TO BLOG' rel='nofollow' target='_blank' title='join to blog'>
<span>
follow
</span>
</a>
</li>
</ul>
</div>
</div>
<div class='clearer'/>
<br/>
<br/>
<br/>



7. Save template anda, dan lihat hasilnya

Kesimpulan

Untuk kode CSSnya silahkan anda edit sesuai kebutuhan anda
Untuk Kode HTMLnya kode yang bertuliskan warna BIRU silahkan anda ganti dengan link gambar anda.
Untuk Kode tulisan warna MERH silahkan anda ganti dengan link sosial media anda sesuai yang tertulis pada code tersebut

Menu floating di atas halaman ini valid html 5 dan seo friendly serta memiliki script yang ringan, silahkan anda coba dan selamat berkreasi. salam bloger.

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 : 3:49 PM