Beauty Beauty - Stefani Gifta Ganda's Blog

Kamis, 08 Juni 2017

3D Flip Navigation Tab

Hi, kemarin itu ada yang req tentang ini, tapi saking lamanya sampai Gifta lupa XD Yawdah, langsung aja deh ya^^ 

Step one:

Blogger >> Layout / Tata Letak >> Add a Gadget >> HTML/JavaScript

Step two:

Copy this code:
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// If you have jQuery directly, then skip next line
google.load("jquery", "1");
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#nav-anchor').offset().top;
if (window_top > div_top)
$('#sticky').addClass('nav')
else
$('#sticky').removeClass('nav');
}
// If you have jQuery directly, use the following line, instead
// $(function() {
// If you have jQuery via Google AJAX Libraries
google.setOnLoadCallback(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>

<center>
<style>
.effect {
position: relative;
display: inline-block;
width:120px;
perspective: 180px;
margin:8px;
}
.effect > div, .effect a {
border-radius: 70px 20px 70px 20px;
border:1px solid #000;
font-family:short stack;
font-size:16px;
text-transform:uppercase;
text-align:center;
background-color:#FFDDAC;
color:#000000;
display:inline-block;
width:120px;
padding:3px;
margin-top:3px;
margin-bottom:0px;
margin-right:3px;
margin-left:3px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.effect a {
border-radius: 70px 20px 70px 20px;
border:1px solid #000;
font-family:short stack;
font-size:16px;
text-transform:uppercase;
text-align:center;
background-color:#FFDDAC;
color:#000000;
display:inline-block;
width:120px;
height:20px;
padding:3px;
margin-left:63.5px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.effect > a {
display: block;
color:#fff;
background-color: #DC143C;
width:120px;
text-decoration:none;
}
.effec {
position: relative;
display: inline-block;
width:120px;
perspective: 180px;
margin:8px;
margin-right:20px;
}
.effec > div, .effec a {
border-radius: 20px 70px 20px 70px;
border:1px solid #000;
font-family:short stack;
font-size:16px;
text-transform:uppercase;
text-align:center;
background-color:#FFC5E9;
color:#000000;
display:inline-block;
width:130px;
height:20px;
padding:3px;
margin-top:3px;
margin-bottom:0px;
margin-left:3px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.effec a {
border-radius: 20px 70px 20px 70px;
border:1px solid #000;
font-family:short stack;
font-size:16px;
text-transform:uppercase;
text-align:center;
background-color:#FFDDAC;
color:#000000;
display:inline-block;
width:120px;
padding:3px;
margin-left:64px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.effec > a {
display: block;
color:#fff;
background-color: #DC143C;
width:120px;
text-decoration:none;
}
.shutter > div, .shutter a {transition: 0.1s all linear;position: absolute;}
.shutter > div {z-index: 100;transform-origin: 0% 0%;}
.shutter:hover > div {transform: rotateX(110deg);}


#sticky {
    background-color: transparent;
    padding: 0px;
    width: 100%;
}

#sticky.nav {
    position: fixed;
    top: 0px;
    left: 0px;
    opacity: .5;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#sticky.nav:hover{
    opacity: 1;
}
</style>
<div id="navigationbar"><div id="nav-anchor"><div id="sticky">
<div class= "effect shutter">
    <div>home</div>
     <a href="http://www.giftasblog.co.vu/">Beranda</a>
</div>
<div class= "effec shutter">
   <div>the owner</div>
     <a href="http://www.giftasblog.co.vu/p/about-owner.html">About Me</a>
</div>
</div></div></div></center>
Lalu, paste! Oh iya, bisa dicoba dulu dan diedit di html editor ini

Step three:

Save!

Bye... Sekian dulu tutor kali ini...

There are 3 komentar.

  1. Gifta, mau nanya dong! cara nambahinnya gmn ya? makasih

    BalasHapus
    Balasan
    1. buka Blogger >> klik Layout / Tata Letak >> klik Add a Gadget >> pilih yang HTML/JavaScript

      Hapus