Saturday, 31 March 2012
Moving Down Background for Blogger Widget
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
Meteor Shower on My Blog!!! Amazing Blogger widget
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
Add Zoom Hover Effect to Image to blogger
1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above ]]></b:skin>
.hovergallery img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}
.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}
4. Then if you want to active the effect, use this code
<a class="hovergallery" 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>
=> Replace the blue code with your link
=> Replace the red code with image URL
5. Finish... Hopefully useful.
Add Floating Spoiler Menu Jquery Image
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
Social Sharing Pearl Type Widget Below Every Post
A great and amazing widget that catches the eye of a lot of people this widget is created by to start blogging and its given to our loyal readers so I hope that you all like it. From tostartblogging.com
How To Add This Widget?
As its great we will go on the steps directly so I hope that you all like it.
1- Choose design then go to edit html.
2- Click on expand widget templates.
3- Search for
]]></b:skin>
4- Paste this code above it.
.Fadein img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.Fadein:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
5- Search for:
<data:post.body/>
6- Just after it paste this code Note: if you have added the read more then after the read more code paste it.
<b:if cond='data:blog.pageType == "item"'>
<center><span style='color: #7AA1C3; font-size: 12px; font-family: Verdana;'><b>If You Enjoyed This Post Please Take 5 Seconds To Share It.</b></span><br/>
<!-- Twitter -->
<a class='Fadein' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' height='70px' src='http://i1111.photobucket.com/albums/h472/ahmedronaldo/TWITTER.png' width='70px'/></a>
<!--DIGG-->
<a class='Fadein' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' height='90px' src='http://i1111.photobucket.com/albums/h472/ahmedronaldo/DIGG.png' width='90px'/></a>
<!--Stumble-->
<a class='Fadein' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='http://i1111.photobucket.com/albums/h472/ahmedronaldo/STUMBLE.png' width='100px'/></a>
<!--Facebook-->
<a class='Fadein' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' height='90px' src='http://i1111.photobucket.com/albums/h472/ahmedronaldo/FACEBOOK.png ' width='90px'/></a>
<a class='Fadein' expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' height='70px' src='http://i1111.photobucket.com/albums/h472/ahmedronaldo/Technorati.png ' width='70px'/></a>
</center><a href="http://www.tostartblogging.com/2012/03/top-social-sharing-plugins-all-in-one.html" style="float:right;font-size:10px;">Top Social Sharing Plugins</a>
<a href="http://www.tostartblogging.com/" target="_blank" style="float:right;font-size:10px;padding:0 4px 0 0">To Start Blogging</a></b:if>
Removing our credits will let your site be closed because its against law so please leave the credits.
Now you are done and congratulations for this new look for your site and for the amount of traffic you will get.
Last Words:
I hope you like it please share this post with all your friends and peace : )
Subscribe to:
Comments (Atom)
