Wednesday, June 7, 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>
#navigationbar {
width: 100%;
height: 25px;
background: #fff;
position: fixed;
top: 0px;
left: 0px;
z-index: 999;
border: 1px solid black;
}
.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...

No comments

Post a Comment