Tutorial image flip and link

Monday, May 11, 2015

Today is what day,but this is written by curious

Annyeonghaseyo..
Today tutorial is image flip and link.I mean,hover on the image,it will flip..and at the back image,will give you the link,or put something you want.


Let's start:
  • Blogger > Layout > Add HTML Javascript
  • Code below,copy and paste in it

<style>

#card {
cursor:crosshair;
-webkit-transform-style: preserve-3d;
-webkit-perspective: 1000;
width: 100px;
height: 100px;
position: relative;
}
.back, .front {
position: absolute;
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.3s ease-in;
width: 100%;
height: 100%;
font-family: Helvetica, Arial, sans-serif;
color: #fff;
font-weight: bold;
}
.back {
-webkit-transform: rotateY(180deg);
overflow: hidden;
}
#card-container {
cursor:crosshair;
display: inline-block;
text-align: justify;
}
#card-container:hover .back {
-webkit-transform: rotateY(0deg);
}
#card-container:hover .front {  
-webkit-transform: rotateY(-180deg);
}

a.navigateu {
display:inline-block;
padding-top:40px;
width:100px;
height:60px;
color: #999;
background:url(http://subtlepatterns.com/patterns/subtlenet2.png);
text-align:center;
margin-bottom:10px;

}
</style>
<div id="card-container">
    <div id="card">
        <div class="back"><a class="navigateu"  href="http://tutorialsfreebies.blogspot.com">about</a></div>
        <div class="front"><img src="http://s6.favim.com/orig/65/asian-clothing-fashion-female-Favim.com-575925.jpg"height="100/" width="100"  /></div>
    </div></div>


  • green:Change your link/or whatever you want
  • red:image after flip
  • blue:image before flip

CLICK HERE on your header

Friday, January 30, 2015

Today is what day,but this is written by curious

Annyeonghaseyo..
Today i will show you how to make sliding box over your header.like one i had..
This tutorial i made by myself..the combination from the existing one.
I hope you happy using my tutorial.

  1. Copy this code

<div style="margin-bottom:-20px;"/>
<style>
.maintitle {
border-radius: 0px 0px 15px 15px;
width:300px;
padding:10px;
color:white;
font-size:11px;
height:20px;
margin-top:150px;
margin-left:auto;
margin-right:auto;
background: #000;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
  #isikotak {
position:fixed;
border:0px solid #FFD9E8;
width:100%;
left:0px;
top:-140px;
height:150px;
padding:4px;
text-align:left;
background-color:white;
background-color:#000;
background-position: right;
background-repeat:no-repeat;
color:#fff;
font-family:Lucida Calligraphy;
-webkit-transition: 1.0s;
font-size:10px;
-moz-transition: 1.0s;
 }
 #isikotak:hover {
top:0px;
  }
</style>
 <center><div id="isikotak"><div class="maintitle">
<center>C L I C K   H E R E</center></div>
<div style="margin-top: -80px;">
<img src="http://31.media.tumblr.com/tumblr_lgu4qd4rM81qetvgko1_500.png" style="border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px;padding:2px;;filter:alpha(opacity=90);opacity:.9; border: 1px dotted #e2e2e2;background-color:#eee; height: 100px;margin-top:-93px; padding: 0px; width: 150px;"/><div style="margin-top:-113px;margin-left:160px;letter-spacing:.1em;"/><span style="font-style:italic;font-size:12px;color:#FFE0E9;">W</span>elcome to my blog.Continue your words here."<br/>
<span style="font-weight:bold;color:#FFE0E9;">BLOG NAME</span>:Tutorial Site<br/>
<span style="font-weight:bold;color:#FFE0E9;">SINCE</span>:2013<br/>
<span style="font-weight:bold;color:#FFE0E9;">NICKNAME OF THIS SITE</span>:Tutorbabies
 </div></div></div></center></div>

2.Paste on your HTML JAVASCRIPT.

3.Change whatever i've bold,italic and color on the code.

4.Then,save..

Just like that.. :)