Cara membuat menu melayang diatas header

Menu pada halaman situs web ataupun blog sangat diperlukan dimana kita dapat memberi satu isyarat buat para pengunjung untuk memberitahukan tentang apa saja yang ada di halaman situs web ataupun blog. Sebagai pengguna media internet yang mempunyai situs web ataupun blog di dunia maya hal ini bukanlah baru melainkan sudah tergolong biasa, tapi menu yang akan kita bahas kali ini adalah mengenai cara membuat menu floating di halaman situs. Sistem menu dalam tutorial kali ini bisa dikatakan sistem melayang ( Berada di atas halaman / absolute )

Menu floating ini sangat simpel dan tidak memakan tempat di halaman situs web ataupun blog anda. Inilah yang menjadi suatu alasan bahwa menu yang satu ini berguna untuk halaman kita. Menu floating yang dibarengi dengan gambar admin serta sosial media ini tidak memakai script dan boleh dikatakan lodingnya ringan. Oke langsung saja menuju TKP... gambar dibawah ini adalah screen shoot dari tutorial yang akan kita buat ini.

Fitur




• Image admin
• Navigasi menu
• Tombol Facebook
• Tombol Twitter
• Tombol Gplus
• Tombol Youtube
• Tombol RSS 

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

.Rivai {
padding:10px 10px 0 0;
margin:0;
font-size:12px;
float:left;
width:110px;
text-align:center;
}
.Rivai img {
border:2px solid #888;
background-color: #FFFFFF;
padding:2px;
margin:0px 5px 0px 5px;
opacity: 1;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(9deg);
-o-transform: rotate(9deg);
-webkit-transform: rotate(9deg);
-ms-transform: rotate(9deg);
transform: rotate(9deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817,
M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.Rivai:hover img {
border:2px solid #ccc;
cursor:pointer;
opacity: 1;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
} ul.vay-social {
margin:15px auto;
display:inline-block;
margin-top: -40px;
margin-left: 650px;
list-style-type: disc;
}
ul.vay-social li { display:inline; float:left; background-repeat:no-repeat; }
ul.vay-social li a { display:block; width:48px; height:48px;
padding-right:10px; position:relative; text-decoration:none; }
ul.vay-social li a strong {
font-weight:normal;
position:absolute;
left:50px;
color:#fff;
padding:3px;
z-index:2000;
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75);
background-color:#FF0000;
-moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
bottom: 50px;
}
ul.vay-social li.vay-facebook {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi43AXioQJP0asO7vR3JKfpFK8VQQOBOmQXaLzVUEEtiuNu02QuclJuDXhOU_-uoxR6_SXmVJLX0-Z5_HC0kofvXLqaXgQCzoHi7OO8XHAV7HgaxiW-3ePsqK5viNa57r8tD0N7UN6JHMA/s1600/FB-1.png "); }
ul.vay-social li.vay-twitter {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRG_EfRJDH1sSuOAqKCow8-w2rtC4C52MxsaF8LzEVqpKlRgpmH2pQA8v05rdpY3kgIctbovNGvD7LRwsqRxCRfjwXhWe0qOcHToV2f0tv5tQtn02vMdyxUDSoM4AH55Sg1MESmI1xbeg/s1600/T-1.png "); }
ul.vay-social li.vay-gplouse {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCd7BwzfkSRnuIuawSA_Ld98pmSdL_BPquhPl-CN_t3tfrXY9HOmOnLXaRtENYZAhbmSmnkMHm9_vjr-iYw1hfD2lDQSMr_OMvbn1WGJWkK3lA8pOsg25gfDow5pd1eSjScnPWS7lZX4/s1600/G-1.png"); }
ul.vay-social li.vay-youtube {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7QVkS2fJNMbApGf0RWp-xtF0DR3Ay6mx4He7FCluij9WwQRtnVTdBt2oLTE3l6zJek343Rr-UcvEaPrgXs6jF5dHsgsDBZqdXuTC-vlOmnrgD1T03xnlRDPsyLlfgD3tm_tnMOtaRodw/s1600/Y-2.png "); }
ul.vay-social li.vay-rss {
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbeisk6e2xAlYUzbXY6IlZwis84cghLYk_ETqLeDlA5cCYjPZtGFEIMY5s0UIOMxPuOmlAv7r-pqe_lYhjGFfDrIZZ_z_F-rpCZlj3eu8w-Za8CXiXMsB3yJd9QTHOt05fefEBDEYhCao/s1600/RSS-1.png "); }
#vay-skin:hover li { opacity:0.1; }
#vay-skin li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;
-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#vay-skin li a strong { opacity:0; -webkit-transition-property: opacity, top;
-webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#vay-skin li:hover { opacity:1; }
#vay-skin li:hover a strong { opacity:1; top:-5px; }
#top-wrapper{
background:url() repeat-x;
width:100%;
margin:0 auto;
padding:0 auto;
-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);
-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4); border-bottom:1px solid #444;
border-top:5px solid #f1c822;
background-color: #620000;
border-bottom-color: #FF0000;
border-top-color: #00FF00;
}
#topbar{width:980px;height:40px;margin:0 auto}
#top{width:100%}
#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#top a{
display:block;
text-decoration:none;
font:normal 11px Arial;
text-transform:none;
color:#33FF00;
border-right:0px solid #484747;
border-left:0px solid #191919;
padding:7px 0px 0px;
background-color: #620000;
border-right-color: #6F0000;
border-left-color: #6F0000;
}
#top a.arrow{}
#top li{float:left;position:static;width:auto}
#top:hover li { opacity:0.7; }
#top li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;
-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#top li a strong { opacity:0; -webkit-transition-property: opacity, top;
-webkit-transition-duration: 300ms; -moz-transition-property: opacity, top;
-moz-transition-duration: 300ms; }
#top li:hover { opacity:1; }
#top li:hover a strong { opacity:1; top:-5px; }#top li ul,#top ul li{width:170px}
#top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;
text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#top li ul{
z-index:100;
position:absolute;
display:none;
background:#222;
padding-bottom:0px;
-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4); background-color: #820000;
}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#FFFF00;color:#fff}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#top li ul li.hr{
border-bottom:1px solid #333;
border-top:1px solid #000;
display:block;
font-size:1px;
height:0;
line-height:0;
margin:0px 0;
border-top-color: #000000;
border-bottom-color: #FF0000;
}
#top ul a:hover{
background-color:#D70000!important;
color:#FFFF00!important;
text-decoration:none;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 2px 2px #000;
}
#top a span,#top a.arrow span{font:bold 12px Arial;color:#FFFFFF;
display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}
#top li:hover a span,#top li:hover a.arrow span{color:#FFFF00}.clearfix:after{content:".";display:block;
height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
#inner{padding-top:40px;}
#fixed {position:fixed;top:0;left:0;width:100%;height:38px;z-index:999;}
#fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
* html #fixedinner{margin-right:17px;}
* html #fixed {position:absolute;}

Install Program Tag HTML

• Login ke dashboard anda
• Masuk ke "Template"
• lalu klik "Edit HTML"
• Cari code <div id='outer-wrapper'> ( tekan Ctrl+F untuk mempercepat )
• Copas Code HTML dibawah ini, paste di bawah code
  <div id='outer-wrapper'>

<div id='fixed'>
<div id='fixedinner'>
<div id='top-wrapper'>
<div id='topbar'><ul id='top' style="margin-left:135px">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjayIHnQsChhYliS7nGheQplQpfc9ajy3Hii_kBSkEkV3NeHOuU7SkLe8Qat28N4s1c0_RVtJmKG2rymKCyAmR5hZvHYZ2jS0x3DZq3C08FOCQzvZ4E3CzwinwW6Qvv0YYKlNjoNpouXm0/s1600/ABOUT-US.jpg " width="100" height="37" align="bottom" style="margin-bottom:-5px;" /></a>
<ul>
<li><a href='#'>Admin Profil</a></li>
<li class='hr'/>
<li><a href='https://www.facebook.com/halaktoba' target="_blank">Fanpage Batak Toba</a></li>
<li class='hr'/>
<li><a href='https://www.facebook.com/rivaisilaban' target="_blank">Facebook Admin</a></li>
<li class='hr'/>
<li><a href='https://twitter.com/Rivai_Silaban' target="_blank">Twitter Admin</a></li>
<li class='hr'/>
<li><a href='https://plus.google.com/108560124605502700357' target="_blank">Gplouse Admin</a></li>
<li class='hr'/>
<li><a href="https://www.youtube.com/channel/UCxLE683fC-YfQnRRWaPtWjQ?feature=guide" target="_blank">Youtube Chanel</a> </li>
</ul></li><li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG08cPsEiDQKvCCliXUsyRaawmrOy1lxBwks4izCH2778T-DpBXbaOhjsKpyEeI8emdADerZlNeoRMW6U8zhB1i1eKGCECkTY-E9agkC7rwe1B4_HqCKOxRk3hksr29ec-MuI896iJd3g/s1600/COMUNITY.jpg" width="100" height="37" align="bottom" style="margin-bottom:-5px;" /></a>
<ul>
<li><a href='http://rivai-silaban.blogspot.com/search/label/sermon'>Religius</a></li>
<li class='hr'/>
<li><a href='http://rivai-silaban.blogspot.com/search/label/batak'>Budaya Batak</a></li>
<li class='hr'/>
<li><a href='http://rivai-silaban.blogspot.com/search/label/Motivasi'>Motivasi</a></li>
<li class='hr'/>
<li><a href='http://rivai-silaban.blogspot.com/search/label/Renungan'>Renungan</a></li>
<li class='hr'/>
<li><a href='http://rivai-silaban.blogspot.com/search/label/Illustrasi'>Illustrasi</a></li>
</ul>
</li><li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-KRN25SONff2ReJOK9bjhC43u8I0dhAMLuIIwOUkUSwcRNYi8ipuQUkTgPgQA4PO4xC84pI6CFirhFxiPwAxJU1Cr4L6SMjq0Y5jJT1bbVo3TQkuTRJLfDCr8aXym0a-IisZzfSBaQCI/s1600/KOMPUTER.jpg" width="100" height="37" align="bottom" style="margin-bottom:-5px;" /></a>
<ul>
<li><a href='http://rivai-silaban.blogspot.com/search/Berita'>Tehnic</a></li>
<li class='hr'/>
<li><a href='#'>Software</a></li>
<li class='hr'/>
<li><a href='#'>Download</a></li>
</ul></li><li><a href='#'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Oera7uqoo1W9_UNfZsC2wDMSIpKZ2BaNSW0h6q8j2uXoBASLL5cT7ng-WIKoMpjaWzIFbVGZckqCddP2-pRkopjRBYutXziyXURendZ3ldpzn-SLzoTCTS5QoVjvcHXVzztN-631o6o/s1600/tutorial.jpg" width="100" height="37" align="bottom" style="margin-bottom:-5px;"/></a>
<ul>
<li><a href='http://rivai-silaban.blogspot.com/search/label/trik%20pendukung'>Trik Blog</a></li>
<li class='hr'/>
<li><a href='http://rivai-silaban.blogspot.com/search/label/menu'>Menu Navigasi</a></li>
<li class='hr'/>
<li><a href='hhttp://rivai-silaban.blogspot.com/search/label/post'>Post Trik</a></li>
<li class='hr'/>
<li><a href='http://rivai-silaban.blogspot.com/search/label/widget'>Widget</a></li>
</ul>
</li>
</ul>
<br class='clearit'/><div>
<ul class="vay-social" id="vay-skin">
<li class="vay-facebook">
<a href="https://www.facebook.com/rivaisilaban" target="_blank" ><strong>Facebook</strong></a>
</li>
<li class="vay-twitter">
<a href="https://twitter.com/Rivai_Silaban" rel="nofollow" target="_blank" ><strong>Twitter</strong></a>
</li><li class="vay-gplouse">
<a href="https://plus.google.com/108560124605502700357" rel="nofollow" target="_blank" ><strong>Google+</strong></a>
</li><li class="vay-youtube">
<a href="https://www.youtube.com/channel/UCxLE683fC-YfQnRRWaPtWjQ?feature=guide" rel="nofollow" target="_blank"><strong>YoutubeChanel</strong></a></li><li class="vay-rss">
<a href="http://feeds.feedburner.com/RivaiSilaban" rel="nofollow" target="_blank" ><strong>RSS</strong></a>
</li></ul></div>
<div style='clear:both;'/><div class='Rivai' style="float:left; margin-right:550px; margin-left:5px; margin-top:-70px">
<a href="http://rivai-silaban.blogspot.com" target="_blank" title="Rivai Silaban"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqBLKAguWnUy5g089y9_93TxXnsMOaW01fL5EdHCAS87bygvKR54w-jQHAikltjtwjb0DdqqdXoj-0Cn-EheOSZm8zW3PeShahwl28aoyX1piUCJurh-AMJbag345TxD765s1o4SLb6bo/h120/rivai.jpg' alt="Rivai Silaban" width='100' height='100' border="0"/></a>
<span style='font-family: &quot;Trebuchet MS&quot;, sans-serif;'></span></div>
</div></div>
</div></div>

Keterangan Code

• Code tulisan warna Merah ganti URL sesuai dengan tulisannya
• Code tulisan warna Hijau ganti dengan code URL gambar anda
• Sesuaikan dengan template anda, serta ganti semua link dalam code tersebut 

Bila anda mengalami kesulitan dalam pemasangan Floating menu ini pada artikel yang ada di postingan halaman blog ini silahkan share menggunakan form komentar dibawah. Makasih atas kunjungannya.

menu

• cara membuat menu blogspot
• cara membuat widget menu slick blogspot
• widget mega menu blogspot
• widget menu
• widget jquery menu horizontal
• widget navigasi gradient style blogspot
• widget menu bar google style
• widget Floating Menu Social media valid html5
• widget flying navigasi jquery tooltip
• cara membuat widget jquery flying menu
• cara membuat jquery flying menu valid html5

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 : 10:38 PM