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

» » » » floating menu valid html5 and seo friendly

Wednesday, July 24, 2013

floating menu valid html5 and seo friendly

Menu navigasi melayang diatas header atau yangdisebut dengan floating menu adalah suatu menu yang memakai sistem z-index atau tempatnya absolute sehingga kelihatan melayang. Memang pada dasar penempatan menu ini berada diatas page atau satu lapis diatas halaman dasar. Floating menu atau menu navigasi melayang ini ditempatkan diatas kepala halaman blog yang memiliki ukuran z-index absolut. Menu navigasi floating in header ini sangat cocok buat halaman blog anda, disamping tampilan floating menu ini yang lumayan bagus tetapi kemampuan atau fitur yang ada pada navigasi floating ini juga bagus yaitu sosial media yang disajikan dengan hover drop down image. Floating menu pada tutorial kali ini terinspirasi oleh seorang sahabat yang memang mempertanyakan tentang pembuatan floating menu ini. Jadi buat para bloger yang deman dengan floating menu ini silahkan simak tutorial pemasangannya pada halaman anda. Untuk DEMO Floating menu ini lihat menu yang berada diatas header halaman, silahkan kunjungi halaman ini :
http://templatefullseo.blogspot.com/


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

#top-BD {
background : #333;
box-shadow : 0 1px 3px rgba(0, 0, 0, 0.4);
height : 48px;
width : 100%;
min-width : 970px;
position : fixed;
top : 0;
left : 0;
z-index : 9999;
overflow : hidden;
border-bottom : 1px solid #000;
}
#top-BD ul {
margin : 0 auto;
width : 970px;
list-style-type : none;
height : 30px;
}
#top-BD ul li {
float : left;
}
#top-BD ul li a {
position : relative;
line-height : 28px;
padding : 10px 15px 1px;
color : #aaa;
font-size : 13px;
text-shadow : 0 -1px 0 #000;
display : block;
text-decoration : none;
font-weight : 700;
text-transform : uppercase;
font-family : Geneva, Arial, Helvetica, sans-serif;
}
#top-BD ul li a:hover {
color : #fff;
border-top : 3px solid #FFFF00;
}
.BDsosial a {
display : block;
height : 50px;
width : 50px;
padding : 0 4px;
float : right;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIK6CTpHe1akNRHEnoXrDL2cGKpeaEKooEUTngKBuUjJoa5ZBE0zlFyuXhnT1s1Sd4umE-QfjNnbMfzVzPUXJM0Pis57t_ADZA3qlzOm12-Jm1tQejELSIBEhM_0j1d3CMmVR6u0jEmcM/s1600/Sharing+buttons.png) no-repeat transparent;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
transition : all 0.2s ease-in;
cursor : pointer;
}
.BDsosial a.googleplus {
background-position : 0 -58px;
}
.BDsosial a.googleplus:hover {
background-position : 0 0;
}
.BDsosial a.twitter {
background-position : 0 -290px;
}
.BDsosial a.twitter:hover {
background-position : 0 -232px;
}
.BDsosial a.facebook {
background-position : 0 -406px;
}
.BDsosial a.facebook:hover {
background-position : 0 -348px;
}
.BDsosial a.rss {
background-position : 0 -174px;
}
.BDsosial a.rss:hover {
background-position : 0 -116px;
}


Install Program Tag HTML


Untuk mengintall atau memasang kode tag htmlnya anda harus berada pada halaman " EDIT HTML " silahkan simak penjelasan dibawah ini :

  1. Setelah anda sudah memasang kode CSSnya saatnya kita memasang tag htmlnya
  2. Silahkan klik " TEMPLATE "
  3. Kemudian pilih " EDIT HTML "
  4. Setelah berada pada halaman HTML silahkan carai kode <body>
  5. Setelah ketemu silahkan copy Kode dibawah ini
  6. Kemudian Paste kode tersebut tepat dibawah kode <body>
    NB : Bila tampilan floating menu ini menutupi judul halaman atau sedikit berdekatan dengan judul halaman blog anda silahkan tambahkan code <br/> setelah kode terakhir dari kode yang anda paste tadi. Bila masih kurang silahkan tambahkan kode <br/> kembali. Sesuaikan jarak antara judul halaman anda dengan menu floating ini.
  7. Save template anda dan lihat hasilnya.
  8. Untuk melihat hasl yang lain tentang menu melayang diatas header silahkan kunjungi halaman ini :
    http://rivai-silaban.blogspot.com/2013/06/cara-membuat-menu-melayang-diatas-header.html

<div id='top-BD'>
<ul>
<li>
<a href='LINK ANDA' target='_blank' title='Sitemap'>
Sitemap
</a>
</li>
<li>
<a href='LINK ANDA' target='_blank' title='Privacy Policy'>
Privacy Policy
</a>
</li>
<li>
<a href='LINK ANDA' target='_blank' title='Disclaimer'>
Disclaimer
</a>
</li>
<li>
<a href='LINK ANDA' target='_blank' title='Contact'>
Contact
</a>
</li></ul>
<div class='BDsosial' style='margin:-30px 200px 0 0;'>
<a class='rss' href='URL RSS' rel='external nofollow' target='_blank' title='RSS Link'>
</a>
<a class='googleplus' href='URL Google' rel='external nofollow' target='_blank' title='googleplus'>
</a>
<a class='facebook' href='URL Facebook' rel='external nofollow' target='_blank' title='facebook'>
</a>
<a class='twitter' href='URL Twitter' rel='external nofollow' target='_blank' title='twitter'>
</a>
</div>

</div>

Keterangan Code
  • Ganti tulisan warna MERAH dengan link anda. sesuai dengan tulisan kode diatas
  • Untuk tulisan warna BIRU samakan title warna biru dengan link warna biru, seperti penulisan kode diatas
  • Silahkan ganti nama menu linknya sesuai dengan kebutuhan anda.
  • penulisan kode tidak boleh kurang satu titik pun, hal tersebut dapat mempengaruhi tag htmlnya.


Kesimpulan

Floating menu navigasi ini sangat cocok untuk halaman yang benar benar mengandalkan suatu menu halaman dan design halaman blog. Floating menu navigasi ini memakai sistem penulisan sesuai standart SEO friendly, dan termasuk HTML yang ringan. Valid HTML 5 dan CSS 3.

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 : Unknown Update pada : 5:25 PM

3 comments :

  1. UnknownDecember 22, 2013 at 1:58 PM

    iya gan...
    sama sama gan...

    ReplyDelete
  2. AhmadJanuary 26, 2014 at 11:59 AM

    mantap gan ditunggu kunjungan baliknya ya
    ahmadelc.blogspot.com

    ReplyDelete

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

Find us on Google+ | Powered Blogspot

7 Maret © 2013 Rivai Silaban | BLOG DESIGN