cara membuat navigasi floating di blog

Floating menu navigasi di halaman blog dengan aplikasi translate, menambah tampilan halaman blog anda semakin kren dan elegan. Menu navigasi melayang diatas header ini mempunyai fitur translate yang disisipkan diantara menu. Fitur translate yang ada pada menu navigasi floating menu ini termasuk ringan dan tidak mempengaruhi loading halaman blog anda. Simak penjelasan dibawah ini dan langsung saja menuju TKP.
Untuk melihat demonya silahkan 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

/* BLOG DESIGN thame navigation start */
#BD-nav{
background:#333; // warna latar belakang
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
height:38px; // tinggi menu
width:100%;
min-width:970px;
position:fixed;
top:0;
left:0;
z-index:9999;
overflow:hidden;
border-bottom:1px solid #000;
background-color: #510000;
}#BD-nav ul{
margin:0 auto;
width:970px; // lebar menu
list-style-type: none;
height: 30px;
}#BD-nav ul li{float:left;}#BD-nav ul li a{position:relative;
line-height:28px;
padding:5px 15px 1px;
color:#aaa;
font-size:13px;
text-shadow:0px -1px 0px #000;
display:block;
text-decoration:none;
font-weight: 700;
text-transform: uppercase;
font-family: Geneva, Arial, Helvetica, sans-serif;
}#BD-nav ul li a:hover{
color:#fff;
border-bottom:3px solid #FFFF00;
}#BD-nav ul li a:hover:after{content:'';
width:25px;
height:0;
position:absolute;
left:40%;
margin-left:-5px;
bottom: 0px;
border-height:5px;
border-style:solid ;
border-color: transparent transparent #FFFF00 transparent; }
#translator-BD {
float:right;
display:block;
width:150px;
border:1px solid #0A340A;
background-color:#CCCCCC;
overflow:hidden;
position:relative;
margin:5px 0 0;
vertical-align: middle;}
#translator-BD select {border:none;background:transparent;font:normal normal 11px Tahoma,Verdana,Arial,Sans-Serif;width:100%;color:black;cursor:text;padding:5px 10px;}
#translator-BD a,#translator-BD a:hover
{display:block;background-color:#FFFFFF;border:none;color:white;margin:00;
text-decoration:none;position:absolute;top:0;
right:0;bottom:0;cursor:pointer;width:30px;}
#translator-BD a:before {content:"";display:block;width:0;height:0;border:5px solid
transparent;border-left-color:#000000;position:absolute;top:50%;left:13px;margin-top:-5px;}
#translator-BD a:hover {background-color:#EBEBEB;border-left-color:#FFFFFF;}
#translator-BD a:active {background-color:#999999;border-left-color:#FFFFFF;}
#translator-BD select:focus,
#translator-BD a:focus,
#translator-BD select:active,
#translator-BD a:active {border:none;outline:none;cursor:pointer;}
/* BLOG DESIGN thame navigation 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.
  

<!-- BLOG DESIGN thame navigation start -->
<div id='BD-nav'><ul>
<li><a href='LINK ANDA ' rel="nofollow" target="_blank" title="sitemap">Sitemap</a></li>
<li><a href='LINK ANDA ' rel="nofollow" target="_blank" title="Privacy Policy">Privacy Policy</a></li>
<li><a href='LINK ANDA' rel="nofollow" target="_blank" title="Disclaimer">Disclaimer</a></li>
<li><a href='LINK ANDA' rel="nofollow" target="_blank" title="Contact">Contact</a></li>
<span id='translator-BD'><select id='translate-language'><option selected='selected' value='en'>English</option><option value='af'>Afrikaans</option><option value='sq'>Albanian</option><option value='ar'>Arabic</option><option value='hy'>Armenian</option><option value='az'>Azerbaijani</option><option value='eu'>Basque</option><option value='be'>Belarusian</option><option value='bn'>Bengali</option><option value='bg'>Bulgarian</option><option value='ca'>Catalan</option><option value='zh-CN'>Chinese</option><option value='hr'>Croatian</option><option value='cs'>Czech</option><option value='da'>Danish</option><option value='nl'>Dutch</option><option value='eo'>Esperanto</option><option value='et'>Estonian</option><option value='tl'>Filipino</option><option value='fi'>Finnish</option><option value='fr'>French</option><option value='gl'>Galician</option><option value='ka'>Georgian</option><option value='de'>German</option><option value='el'>Greek</option><option value='gu'>Gujarati</option><option value='ht'>Haitian Creole</option><option value='iw'>Hebrew</option><option value='hi'>Hindi</option><option value='hu'>Hungarian</option><option value='is'>Icelandic</option><option value='ga'>Irish</option><option value='it'>Italian</option><option value='ja'>Japanese</option><option value='kn'>Kannada</option><option value='ko'>Korean</option><option value='la'>Latin</option><option value='lv'>Latvian</option><option value='lt'>Lithuanian</option><option value='mk'>Macedonian</option><option value='ms'>Malay</option><option value='mt'>Maltese</option><option value='no'>Norwegian</option><option value='fa'>Persian</option><option value='pl'>Polish</option><option value='pt'>Portuguese</option><option value='ro'>Romanian</option><option value='ru'>Russian</option><option value='sr'>Serbian</option><option value='sk'>Slovak</option><option value='sl'>Slovenian</option><option value='es'>Spanish</option><option value='sw'>Swahili</option><option value='sv'>Swedish</option><option value='ta'>Tamil</option><option value='te'>Telugu</option><option value='th'>Thai</option><option value='tr'>Turkish</option><option value='uk'>Ukrainian</option><option value='ur'>Urdu</option><option value='vi'>Vietnamese</option><option value='cy'>Welsh</option><option value='yi'>Yiddish</option></select><a href='#' id='translate-me' title='Translate!'></a></span>
<script type='text/javascript'>
(function() {
var mylang = &quot;id&quot;, // Your website language
anchor = document.getElementById(&#39;translate-me&#39;);
anchor.onclick = function() {
window.open(&#39;http://translate.google.com/translate?u=&#39;+encodeURIComponent
(location.href)+&#39;&amp;langpair=&
#39;+mylang+&#39;%7C&#39;+document.getElementById(&#39;translate-language&#39;)
.value+&#39;&amp;hl=en&#39;);
return false;
}
})();
</script></ul></div>
<!-- BLOG DESIGN thame navigation and -->

Keterangan Code

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

Kesimpulan Menu navigasi sangat diperlukan pada halaman blog sebagai aplikasi tempat berbagai link artikel maupun halaman pada sebuah halaman blog. Menu floating navigasi ini dilengkapi dengan script tranlator dari berbagai bahasa yang didukung oleh google.com

widget

• tutorial footer style ide blogspot v1
• widget social media blogspot
• widget social media
• cara membuat widget spoiler background style
• widget kategori floating
• cara membuat widget link di atas postingan blog
• cara membuat widget space iklan text
• cara membuat widget permalink with space iklan
• cara membuat halaman kontak di blog
• cara membuat subscribe with advertise
• cara membuat widget share image hover

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