.

Saturday, February 11, 2017

Simple Floating Navbar

Hasil gambar untuk ice cream tumblr
Gak usah basa-basi lagi / Sasha request cara membuat floating navbar versi simple. Ini dia caranya.

Steps for Designer/Denim
1. Login ke blogger seperti biasa
2. Klik Tata Letak/Layout
3. Klik Add Gadget (di kolom mana saja), kemudian pilih HTML/JavaScript
4. Pastekan kode di bawah ini di kolom yang besar
<style>
#navigation {
width:100%;
background:#999999;
display:;
opacity:1;
z-index:999;
text-align:left;
position:fixed;
top:0px;
left:0px;
padding:10px;
}

a.jieun {
color:#000;
background:transparent;
}

a.jieun:hover {
background-color: #ccc;
color:#fff;
}


.shfiagdz a {
background:transparent;
display:inline-block;
width:200px;
margin-left:15px;
margin-right:15px;
font:17px Nunito;
padding:2px;
border-left:0px solid #e6e6e6;
text-align:center;
color:#fff;
text-decoration:none;
text-transform:uppercase;
letter-spacing:1px;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
}

</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<div id='navigation'>
<div style="text-align:center;">
<div class='shfiagdz'>
<a class="jieun" href="http://shafiagadiz.blogspot.co.id/">#Home</a>
<a class="jieun" href="http://shafiagadiz.blogspot.co.id/p/the-owner.html">#Owner</a>
<a class="jieun" href="http://shafiagadiz.blogspot.co.id/p/menu.html">#Stuffs</a>
<a class="jieun" href="http://shafiagadiz.blogspot.co.id/p/linkies_10.html">#Linkies</a>
</div></div></div>
</div>

5. Kemudian klik Save. Edit-edit dulu ya.

Steps for Blogskin
1. Login ke blogger
2. Klik Template, kemudian cari kode </head>
3. Paste kan kode di bawah ini di atas kode tersebut
<style>
#navigation {
width:100%;
background:#999999;
display:;
opacity:1;
z-index:999;
text-align:left;
position:fixed;
top:0px;
left:0px;
padding:10px;
}

a.jieun {
color:#000;
background:transparent;
}

a.jieun:hover {
background-color: #ccc;
color:#fff;
}


.shfiagdz a {
background:transparent;
display:inline-block;
width:200px;
margin-left:15px;
margin-right:15px;
font:17px Nunito;
padding:2px;
border-left:0px solid #e6e6e6;
text-align:center;
color:#fff;
text-decoration:none;
text-transform:uppercase;
letter-spacing:1px;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
}

</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<div id='navigation'>
<div style="text-align:center;">
<div class='shfiagdz'>
<a class="jieun" href="URL BLOG">#Home</a>
<a class="jieun" href="URL PAGE">#Owner</a>
<a class="jieun" href="URL PAGE">#Stuffs</a>
<a class="jieun" href="URL PAGE">#Linkies</a>
</div></div></div>
</div>

4. Klik Save Template. Edit-edit dulu juga ya.

No comments:

Post a Comment