How to Add Shadow and Text Hover Effect to Image on blogger ?

Good Luck... ^_^  Hi guys! Thank you for your visit. Have you hear about hover effect? Hover effect is an affect that active when you put your cursor on an object, for example an image. Effect that produced are so many. For example Shadow and Text Hover Effect to Image. 

Blogger tricks, hacks, widgets.

Interested? To know the steps, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML3. Copy the code below, and paste above ]]></b:skin>

#image-hover {
}

#figure {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 1px;
}

#figure:hover {
-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
box-shadow:0 0 20px rgba(0,0,0,0.75);
}

#figure .caption {
position:absolute;
bottom:0;
left:0;
opacity: 0.75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}

#figure:hover .caption {
margin-bottom:0px;
}

#image-hover .caption {
width:100%;
height:90px;
padding:10px;
background:#B1D7F0;
color:#B1D7F0;
font-family: Arial, Helvetica, sans-serif;
}

#image-hover .caption b {
text-shadow: 0px 2px 0px #B1D7F0;
}
#image-hover .caption {
color: #000000;
line-height: 24px;
font-size: 14px;
text-shadow: 0px 2px 0px #000;
}

4. Then, to active the hover effect, just use this code below

<div id="image-hover">
<div id='figure'>
<a href="http://full-tricks.blogspot.com/" target="_blank">
<img src="http://1.bp.blogspot.com/-ycrEcnVzJAs/TcXGWwcjL3I/AAAAAAAAAYQ/MiQNmK44ZOg/s200/fullblogtricks-blogger-icon.jpg"></a>
<span class='caption'>
Blogger tricks, hacks, widgets
</span></div></div>

=> Replace the red code with your link
=> Replace the blue code with your image URL
=> Replace the orange code with your image text

Good Luck... ^_^ 

READMORE

How to Add Moving Down Background for Blogger ?

Now, I will share about Moving Down Background for Blogger. This trick is very unique. Why? Because the blog background will move without scrolling. So I called this "Unique Background". Want to see the DEMO? OK, now if you want to try Moving Down Background for Blogger, just follow the steps below.






1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function(){

// ***
// Scrolling background
// ***

// height of background image in pixels
var backgroundheight = 4000;

// get the current minute/hour of the day
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();

// work out how far through the day we are as a percentage - e.g. 6pm = 75%
var hourpercent = hour / 24 * 100;
var minutepercent = minute / 30 / 24 * 100;
var percentofday = Math.round(hourpercent + minutepercent);

// calculate which pixel row to start graphic from based on how far through the day we are
var offset = backgroundheight / 100 * percentofday;

// graphic starts at approx 6am, so adjust offset by 1/4
var offset = offset - (backgroundheight / 1);

function scrollbackground() {
// decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// apply the background position
$('body').css("background-position", "50% " + offset + "px");
// call self to continue animation
setTimeout(function() {
scrollbackground();
}, 70
);
}

// Start the animation
scrollbackground();
});
//]]>
</script>

4. Then try to find

body {

just copy this code and put under body {

background:url(http://lh6.ggpht.com/_dfnTVAxeWMI/SrFV2ZgHUvI/AAAAAAAACU8
/yP_7acjnv5U/bgscroll.jpg);

5. Click SAVE TEMPLATE 

READMORE

How to Add Meteor Shower on My Blog ?

Now, we will try to make an effect. That's Meteor Shower on My Blog. This effect is very interesting. When you open your blog (has added this effect) you blog will be get meteor shower. Very nice right? OK, now if you want to add meteor shower on your blog, just follow the steps below. Want to see the DEMO?

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Choose "HTML/Java Script"
4. Then, add the code below

<script language="javascript">
nd_mode="meteor";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_top";
</script>
<script language="javascript" src="http://www.netdisaster.com/js/mynd.js">
</script>

5. Click SAVE

READMORE

How to Create Curved Objects on Blogspot ?

It is one of the variations of curved objects or can be called "BORDER-RADIUS". With border-radius, our blog will look flexible. Unfortunately, border-radius can't support on Internet Explore. Now, we will learn and try to create curved objects on blog. The curved objects are separated by the browser.

Mozilla Firefox

<div style="background-color:#ccc; -moz-border-radius:5px; border:1px solid #000; padding:10px;">FULL BLOG TRICKS</div>

<div style="background-color:#ccc; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:1px solid #000; padding:10px;">FULL BLOG TRICKS</div>

<div style="background-color:#F5F6CE; -moz-border-radius-topright:30px; -moz-border-radius-bottomright:30px; border:5px solid #000; padding:10px;">FULL BLOG TRICKS</div>

Safari

<div style="background-color:#A9D0F5; -webkit-border-top-left-radius:30px; -webkit-border-bottom-right-radius:30px; border:5px solid #38610B; padding:10px;">FULL BLOG TRICKS</div>

<div style="background-color:#F5D0A9; -webkit-border-top-left-radius:50px; -webkit-border-top-right-radius:50px; border:5px solid #38610B; padding:10px;">FULL BLOG TRICKS</div>

Opera 10.5

<div style="background-color:#F5F6CE; border-radius:30px; border:5px solid #38610B; padding:10px;">FULL BLOG TRICKS</div>

OK, that's all friend. Hopefully useful... 

READMORE

Simple Fog Effect for Blogger Image

Maybe you are boring with the image on your blog. Because the image does't has any effect. Now we will add some effect to your image. That's Simple Fog Effect for Blogger Image. Usually fog effect can be called with "Blur". The effect is when you put your cursor on the image, the image will be foggy. 

Nice right? OK, if you want to try Simple Fog Effect for Blogger Image, just follow the steps below.

1. Log in to your blogger icon
2. Go to Design --> Edit HTML3. Copy the code below, and paste above ]]></b:skin>

.FBT-blur img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.FBT-blur:hover img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}

4. Click SAVE TEMPLATE

Then to "call" the effect just add some code, so the image code will be like this

<a class="FBT-blur" href="http://full-tricks.blogspot.com/"><img alt="blogger icon" border="0" src="http://3.bp.blogspot.com/-a0b5TxNurp8/TeW6QAGDFVI/AAAAAAAAAaU/MBH8_54AreY/s200/fullblogtricks-blogger-icon.jpg" /></a>

So easy right? 

READMORE

Make a Glowing Navigation Menu with jQuery for Blogger

Hi guys! Today, we will try to create Glowing Navigation Menu with jQuery for Blogger. Maybe this trick is almost similar with Hide Show Social Bookmarks with Hover. But, I think Glowing Navigation is better. Want to see the DEMO? OK, now if you want to try Glowing Navigation Menu with jQuery for Blogger, just follow the steps below.



1. Log in to your blogger account
2. Go to Design --> Editt HTML3. Copy the code below, and paste above ]]></b:skin>

.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
}

4. Then copy the code  below, and paste above </head>

<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery-1.2.3.js' type='text/javascript'/>
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery.kwicks-1.5.1.js' type='text/javascript'/>
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>

5. Click SAVE TEMPLATE
6. Now, go to Design --> Page Elements --> Add Gadget, choose "HTML/Java Script"
7. After that, add this code

<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='#' title='Home'>Home</a></li>
<li id='kwick2'><a href='#' title='Contents'>Blog</a></li>
<li id='kwick3'><a href='#' title='About'>About</a></li>
<li id='kwick4'><a href='#' title='Futures'>Portfolio</a></li>
<li id='kwick5'><a href='#' title='Contact us'>Contact</a></li>
<li id='kwick6'><a href='#' title='Recomended links'>Resource</a></li>
</ul>
</div>
</td>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>

=> You have to customize the URL first
8. Click SAVE 

READMORE

Magic Image! Move Image Freely in blogger

Hi, friends! Now, we are gonna make a crazy trick. That's Magic Image! Move Image Freely. Freely? Yups... you and your visitors of your blog can move images wherever. Left, right, top, or bottom. It's up to you. Curious? See the DEMO. OK, now if you wanna try Magic Image! Move Image Freely, just follow the steps below.









1. Log in to your blogger icon
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above ]]></b:skin>

.FBT_magic img { cursor: move;}

4. Then, copy the code below and paste above </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;div.FBT_magic img&quot;).draggable();
});
</script>

5. Click SAVE TEMPLATE

Now if you wanna use this effect, just use this code

<div class='FBT_magic'><img src='PICTURE-URL'/></div>

OK, That's all friend... Hopefully useful... 

READMORE

Add Floating Spoiler Menu in blogspot

Hi, guys! Now, we will try to add floating spoiler menu. This spoiler menu is difference with others. We don't need to click the button to display the menu. Just put your cursor on this menu, and the menu wil be slide out. Want to see the DEMO? Now, if you wanna add floating spoiler menu into your blog, just follow the steps below.






1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Chose "HTML/Java Script"
4. Add the code below

<style text-type="CSS">
#bmenu{
position:fixed;
right:5px;
center:0px;
background-color:#000;
border-radius:10px;
-moz-border-radius:10px;
border:1px solid #FFF;
width:202px;
height:20px;
color:#FF0606;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}

#bmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}

#bmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#FF0606;
margin:15px 0;
padding:0 15px;}

#bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}

#bmenu li a:hover{
color:#fff;}

#bmenu:hover{
z-index:5;
height:175px;
</style>

<div id="bmenu">
<h3>
TITLE</h3>
<ul>
<li><a href="#">FBT-1</a></li>
<li><a href="#">FBT-2</a></li>
<li><a href="#">FBT-3</a></li>
<li><a href="#">FBT-4</a></li>
<li><a href="#">FBT-5</a></li>
</ul>
</div>

Customize:
=> The position of floating spoiler menu
=> The title of this menu
=> The title and link location

5. Click SAVE

READMORE

How toChange Image Just with Scroll in blogspot ?

Hi, friends! Now, I will post about a trick. That's Change Image Just with Scroll. The effect is when you put  your cursor on the picture and scroll the mousewheel, the picture will be change. Let's see the DEMO. Now if you want to try this trick, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add gadget
3. Choose "HTML/Java Script"

<img id="slideshow" src="PICTURE-1" />

<script type="text/javascript">
var myimages=[
"PICTURE-1",
"PICTURE-2",
"PICTURE-3",
"PICTURE-4",
"PICTURE-5"
]
var slideshow=document.getElementById("slideshow")
var nextslideindex=0
function rotateimage(e){
var evt=window.event || e
var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta
nextslideindex=(delta<=-120)? nextslideindex+1 : nextslideindex-1
nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex
slideshow.src=myimages[nextslideindex]
if (evt.preventDefault)
evt.preventDefault()
else
return false
}
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"

if (slideshow.attachEvent)
slideshow.attachEvent("on"+mousewheelevt, rotateimage)
else if (slideshow.addEventListener)
slideshow.addEventListener(mousewheelevt, rotateimage, false)
</script>

=> You can replace the images that will be change
=> The image of PICTURE-1 must be same with PICTURE-1
4. Click SAVE

OK, that's all friends... Hopefully usefull :D 

READMORE

Add Slant Images Effect for Blogger?

Hi, friends! Now, I will post about an image effect for blogger, thats's Add Slant Images Effect for Blogger. The effect is when you put your cursor on the image (which has added slanted effect), the image will be zooming and slanting at the moment.

• DEMO - Put your cursor on the picture above

How can I add slant images effect for my blog? Just follow the step below, friend!

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above

.FBT-slant:hover{
-moz-transform:rotate(22.5deg) scale(1.20);
-webkit-transform:rotate(22.5deg) scale(1.20);
}

4. Click 

To activate this effect, just use the class. Look at the example code below (the red-code is the class)

<img class="FBT-slant" src=" http://4.bp.blogspot.com/-oQKkFPiX0uo/Tk5rq8E6Z1I/AAAAAAAAAf4/njtG_1q_tSU/s1600/blogger_batik_by_mardee.png" />

OK, thats's all, friend. Hopefully useful...

READMORE