Image Hover with Navi -Like Me-
Hello :) Well, I wanna speak english now.. Because,
Sasha is requested and I think she can't speak Indonesian. Actually
Vladi is request first. But, I sent the tutorial in e-mail and sent it to Vladi. So, can we listen the tutorial. This tutorial maybe make your head spinning *LOL* but I think, you can do it ^^ so, check it out! Before it, please look the preview first ^^
Look cool isn't it? :p Oh! One more! DO NOT RE-TUTOR OR RE-POST !!! I don't like that! Comment if you wanna do this! Check the tutor okay! THIS TUTOR IT'S ONLY FOR BLOGSKINS! OTHER TEMPLATES I DON'T KNOW IT WORKS OR NOT
1. Dashboard > Template
2. Press CTRL + F and search </style> code. For Mac, CMD + F
3. Copy the code below
/*I THINK YOU DON'T HAVE TO TOUCH THIS THING. EXCEPT THE COLOUR FOR TITLE*/
.view {
width: 226px;
height: 300px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: url(http://i.imgur.com/x9x1x.png), auto;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 226px;
height: 300px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: TITLE TEXTS COLOUR;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 40px 0 0 0;
}
.view p {
font-family: 'Lora', Georgia, serif;
font-style: italic;
font-size: 11px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
font-family: trebuchet MS;
font-size:11px;
display: inline-block;
text-decoration: none;
padding: 3px;
background: #000;
color: #fff;
text-transform: uppercase;
filter: alpha(opacity=0.60);
opacity: 0.6;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
background: #323232;
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-eighth .mask {
background-color: rgba(255, 255, 255, 0.7);
top: -200px;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-out 0.5s;
-moz-transition: all 0.3s ease-out 0.5s;
-o-transition: all 0.3s ease-out 0.5s;
-ms-transition: all 0.3s ease-out 0.5s;
transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2 {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.1s;
-moz-transition: all 0.2s ease-in-out 0.1s;
-o-transition: all 0.2s ease-in-out 0.1s;
-ms-transition: all 0.2s ease-in-out 0.1s;
transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
color: #333;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.2s;
-moz-transition: all 0.2s ease-in-out 0.2s;
-o-transition: all 0.2s ease-in-out 0.2s;
-ms-transition: all 0.2s ease-in-out 0.2s;
transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.3s;
-moz-transition: all 0.2s ease-in-out 0.3s;
-o-transition: all 0.2s ease-in-out 0.3s;
-ms-transition: all 0.2s ease-in-out 0.3s;
transition: all 0.2s ease-in-out 0.3s;
}
.view-eighth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
top: 0px;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
-webkit-animation: bounceY 0.9s linear;
-moz-animation: bounceY 0.9s linear;
-ms-animation: bounceY 0.9s linear;
animation: bounceY 0.9s linear;
}
.view-eighth:hover h2 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
background: #fff
}
.view-eighth:hover p {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.view-eighth:hover a.info {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
4. I think you don't have to edit the code. But, It's up to you. If you can edit that code and change it with yours, just edit it^^
5. Done with the code? Paste it before </style> code
6. Copy the code below
<div style="margin-right:-19px;">
<div class="view view-eighth">
<img src="
YOUR IMAGE URL" style="background: transparemt; border: 2px solid #eeeeee; float:
CHANGE IT WITH LEFT OR RIGHT; margin-right: 5px; margin-bottom: 8px;width:220px;height:300px;" />
<div class="mask"><br>
<h2>
YOUR TITLE HERE</h2>
<br>
CONTENT HERE. PUT ANYTHING LIKE C-BOX NAVI STATUS , ETC
</span></div></div>
</div>
7. Paste the code at place you want.
8. Preview and save
It's little bit dizzy but
KEEP TRYING!! Hehe :D
Labels: Tutorial
Image Hover with Navi -Like Me-
Hello :) Well, I wanna speak english now.. Because,
Sasha is requested and I think she can't speak Indonesian. Actually
Vladi is request first. But, I sent the tutorial in e-mail and sent it to Vladi. So, can we listen the tutorial. This tutorial maybe make your head spinning *LOL* but I think, you can do it ^^ so, check it out! Before it, please look the preview first ^^
Look cool isn't it? :p Oh! One more! DO NOT RE-TUTOR OR RE-POST !!! I don't like that! Comment if you wanna do this! Check the tutor okay! THIS TUTOR IT'S ONLY FOR BLOGSKINS! OTHER TEMPLATES I DON'T KNOW IT WORKS OR NOT
1. Dashboard > Template
2. Press CTRL + F and search </style> code. For Mac, CMD + F
3. Copy the code below
/*I THINK YOU DON'T HAVE TO TOUCH THIS THING. EXCEPT THE COLOUR FOR TITLE*/
.view {
width: 226px;
height: 300px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: url(http://i.imgur.com/x9x1x.png), auto;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 226px;
height: 300px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: TITLE TEXTS COLOUR;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 40px 0 0 0;
}
.view p {
font-family: 'Lora', Georgia, serif;
font-style: italic;
font-size: 11px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
font-family: trebuchet MS;
font-size:11px;
display: inline-block;
text-decoration: none;
padding: 3px;
background: #000;
color: #fff;
text-transform: uppercase;
filter: alpha(opacity=0.60);
opacity: 0.6;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
background: #323232;
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-eighth .mask {
background-color: rgba(255, 255, 255, 0.7);
top: -200px;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-out 0.5s;
-moz-transition: all 0.3s ease-out 0.5s;
-o-transition: all 0.3s ease-out 0.5s;
-ms-transition: all 0.3s ease-out 0.5s;
transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2 {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.1s;
-moz-transition: all 0.2s ease-in-out 0.1s;
-o-transition: all 0.2s ease-in-out 0.1s;
-ms-transition: all 0.2s ease-in-out 0.1s;
transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
color: #333;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.2s;
-moz-transition: all 0.2s ease-in-out 0.2s;
-o-transition: all 0.2s ease-in-out 0.2s;
-ms-transition: all 0.2s ease-in-out 0.2s;
transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.3s;
-moz-transition: all 0.2s ease-in-out 0.3s;
-o-transition: all 0.2s ease-in-out 0.3s;
-ms-transition: all 0.2s ease-in-out 0.3s;
transition: all 0.2s ease-in-out 0.3s;
}
.view-eighth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
top: 0px;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
-webkit-animation: bounceY 0.9s linear;
-moz-animation: bounceY 0.9s linear;
-ms-animation: bounceY 0.9s linear;
animation: bounceY 0.9s linear;
}
.view-eighth:hover h2 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
background: #fff
}
.view-eighth:hover p {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.view-eighth:hover a.info {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
4. I think you don't have to edit the code. But, It's up to you. If you can edit that code and change it with yours, just edit it^^
5. Done with the code? Paste it before </style> code
6. Copy the code below
<div style="margin-right:-19px;">
<div class="view view-eighth">
<img src="
YOUR IMAGE URL" style="background: transparemt; border: 2px solid #eeeeee; float:
CHANGE IT WITH LEFT OR RIGHT; margin-right: 5px; margin-bottom: 8px;width:220px;height:300px;" />
<div class="mask"><br>
<h2>
YOUR TITLE HERE</h2>
<br>
CONTENT HERE. PUT ANYTHING LIKE C-BOX NAVI STATUS , ETC
</span></div></div>
</div>
7. Paste the code at place you want.
8. Preview and save
It's little bit dizzy but
KEEP TRYING!! Hehe :D
Labels: Tutorial
Cupcakes Time!!
Meet me the webmistress peeps!
The Girl Behind The Screen:
Just a ordinary girl who obsessed with Korea and Japan. Who's her? Guess yooo :D Whatever.. My name its Shabrina. Shabrina L. Rais. Now being a 6th Grade student in Al-Jannah Islamic Fullday School (yippee)! Be a human girl since 5 May 2002. Give me present? (LOL! Whut?). You have to know, I'm addicted with KPOP. Woohoo! Especially SNSD. You don't know them? Whutevaa.. Being a SONE since 2012. Beggining Sone, huh? Okay! Time to go :D Bay bayy '-')/
Call me Cupcakes okay! Byee!!
Biased:
1. Kim Taeyeon - Girls' Generation: ULTIMATE one huh? Yapp.. my first bias :D I think, I addicted to much with her (LOL)! Even I said my face it's look like Taeyeon maybe? #justkidding (whatever).
2. Tiffany Hwang - Girls' Generation: The 2nd. Ship this with Taeng >< I just love her same like Taeng.. Locksmith forever!!!
3. Jessica Jung - Girls' Generation: The 3rd. Wae so much SNSD bias? Because my fandom it's SONE. So, im focused with SNSD. (See it at F.A.Q).
4. Krystal Jung - F(x): The 4th. The sister of Jessica :D Oh my god! So much addicted with her >< Krystalized! That was me! Oh my Jung! I LOVE YAA!
5. Choi Sulli - F(x): The 5th. My Barbie Doll Sulli! Really like her pout! OMG, so cute >< Antis? Go away! Sulli it's mine! (LOL)
6. Byun Baekhyun - EXO: The last but not the least, Baekhyun! The one of my bias who is namja ^^ GO AWAY! BAEKHYUN MINE!! HUH?! :p Just kidding :D
About this site:
This blog it's officialy made by Shabrina L. Rais. For the first time, this blog named
http://miss-animeee.blogspot.com/ I don't know why I named that. I just don't have any idea. And the template it's soo simple! The VERY SIMPLE template. And I'm so happy I have a blog. My mom telling me about a Blogger World. So, in Desember 2012, i made my very first blog. I forgot for the link. I just remember the tittle: SHABRINA BLOG. And the blog was so empty >< And then, I made this blog at March 9 2013. Before it, made a kpop blog :)
One day, I saw Vesya's blog. You know the url right? It's
http://vesya-lithaa.blogspot.com/. Then, I see her blog and I think that was a AWESOME blog. And then, I try to find a inspired thing from Vesya's blog. One day, I asked her, "What's header?". I just can't imagine how a header looks! When I found a tutobies blog and it's explains about HEADER. Then, I started to making a header in photoscape and photoshop. But, I can't use it on blogger.
And then, I found Nurul Atiqah's blog. I found a nice header and the texts was saying: 'SNOW FLOWERS'. I decided to use that header for my own blog. When I use it, I already know how to use header at blogspot. When I see my header, I think, I'm gonna change my website name to
http://snow-flowerss.blogspot.com. I think, thats a good name for my blog :)
Some people asked me: "What's template do you use for your blog? Classic or Designer?". Hard question when I don't know everything about a CLASSIC TEMPLATES. And then, I see someone blogs who used a classic template and I'm so corious because her blog it's so awesome! And then I asked her where she get this template? And the she said, this is blogskins. You can find it at
http://blogskins.com and then I know all about blogskins and addicted with blogger's world ^^
OPEN FOR EVERYONE!!! ALWAYS OPEN :D (UNDER CONTRUCTION FOR BANNERS)
Already see my affies? Do you check the rules for affies here?
Tell me in cbox if you wanna ex-links banners