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, August 10, 2013

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

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

0 komentar :

Post a Comment

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