Welcome here! Please leave your comment and follow my blog. Use CTRL+C to copy (no right click allowed)
This blog is full of tutorials. Please use them, by clicking the "STUFF" page above^^ Thanks for your visit!!
I'm Gifta, I can't online everyday /^-^\/>

Thank you for your visit, please use my tutorials...!
August 05, 2016

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>
.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