Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Saturday, June 22, 2013

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.


Cara membuat menu melayang diatas header

    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("http://4.bp.blogspot.com/-E91PS1bAsZw/UYvYd9vZsGI/AAAAAAAABFc/AI4TkWQXgd8/s1600/FB-1.png "); }
      ul.vay-social li.vay-twitter {
      background-image:url("http://3.bp.blogspot.com/-qxb6-Q0TNw8/UYvYlGs4W9I/AAAAAAAABGI/xyiD1yhDfxY/s1600/T-1.png "); }
      ul.vay-social li.vay-gplouse {
      background-image:url("http://4.bp.blogspot.com/-LJXvGstrucY/UYvYeUNXT8I/AAAAAAAABFg/r7HPBE22y5U/s1600/G-1.png"); }
      ul.vay-social li.vay-youtube {
      background-image:url("http://4.bp.blogspot.com/-9EwbelK6J2w/UYvYn4dxH3I/AAAAAAAABGc/NQS4GvLn1fc/s1600/Y-2.png "); }
      ul.vay-social li.vay-rss {
      background-image:url("http://4.bp.blogspot.com/-A9roDjDVabQ/UYvYhnoNfOI/AAAAAAAABF0/kZlPN6rfP2o/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="http://3.bp.blogspot.com/-8-6GYqu9jog/UZDVm4NZV5I/AAAAAAAABI4/3Y0hRvwPNkw/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="http://1.bp.blogspot.com/-OzrPhLRZLr4/UZDVnBdPmTI/AAAAAAAABI8/A1w7be2ATiY/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="http://1.bp.blogspot.com/-2s_4TNL2gJ0/UZDVnoNtTXI/AAAAAAAABJI/A3qNknnab7M/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="http://4.bp.blogspot.com/-Icefud9kqsk/UZDVoiBXmrI/AAAAAAAABJQ/_dcdsWuux0k/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://lh4.googleusercontent.com/-3TFxlGaJYqU/USE9N_fvQOI/AAAAAAAAAO8/0_ocwXMKYkw/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.

      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.... !!! .

      Me

      Admin Rivai Silaban

      Share article with : Google+ Facebook Twitter
      Di posting oleh : Rivai Silaban Update pada : 10:38 PM

      10 comments :

      1. mantab jos gandos otos otos mas bro postingan yang luar biasa sudah saya praktekin hasilnya memuaskan hahah. cuman foto profilnya kalau kursor diarahin kesana kok namanya masih namanya agan rivai ya?

        ReplyDelete
        Replies
        1. lihat kode link gambar kamu sob, perhatikan bagian
          title=" ganti nama kamu "

          Lihat pada kode diatas warna hijau seperti pada tutorial diatas..

          Makasih atas pendapatnya
          salam bloger

          Delete
      2. oh ya gan mau nanyak masalah komen. blog ane kalau ada orang komen gk bisa di balesin. biar bisa dibalesin gimana caranya?

        ReplyDelete
        Replies
        1. ada 2 alternatif sob, soal masalah ini .

          yang pertama soal kode yang memang tidak ikhususkan replay comment.

          yang kedua kesalahan kode error code.

          tapi dari blog kamu, saya lihat itu masalah kehilangan kode. jadi sangat rumit ibenarin harus dilihat ulang kembali.

          untuk solusinya harus membuat kode manual comment untuk mengganti kode komentar.
          solusi lainnya lihat settingan di dasbor untuk masalah komentar silahkan edit.

          Delete
      3. Saya nge fans banget sama Rivan hehe :D
        Trik tips nya sangat bermanfaat semua

        ReplyDelete
      4. Jika sobat tidak menemukan kode

        >> div id='outer-wrapper <<

        Cari saja kode
        taruh di bawah header :)

        ReplyDelete
        Replies
        1. tepat sekali mbak..
          kayaknya saya rencananya mau nimba ilmu lagi nih sama mbak..

          thx atas penjelasannya, sangat membantu sekali buat semuanya.

          Delete

      1. Komentar SPAM Akan secepatnya dihapus
      2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
      3. Cek komentar masuk sebelum bertanya.
      4. Link aktiv tidak akan berpungsi.
      5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
      6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
      7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
      8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

      Salam bloger .. !!
      Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
      Konversi Kode Forum Diskusi Join to Blog