July 2012 ~ Pro Bloggers

CSS3 Bubble Buttons With Hover Effect For Blogger

Posted by Anonymous On 10:05 PM No comments

This are very cool and awesome looking buttons for blogger. This buttons are made of pure css and have a cool hover effect. On hover the bubble background of the buttons starts spinning button. This buttons can be added easily so i will teach you how to add this buttons to blogger.

Below is the Demo Of this Button

TEXT HERE TEXT HERE   TEXT HERE TEXT HERE
TEXT HERE   TEXT HERE   TEXT HERE   TEXT HERE
TEXT HERE    TEXT HERE TEXT HERE    TEXT HERE
TEXT HERE TEXT HERE TEXT HERE TEXT HERE

Steps To Add Bubble Buttons To Blogger

Login to your Dashboard.
Go to Template >>Edit Html.
Find for ]]></b:skin> tag.
Paste the below code just above ]]></b:skin> tag

.button {
font: 15px Calibri, Arial, sans-serif;
text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
text-decoration: none !important;
white-space: nowrap;
display: inline-block;
vertical-align: baseline;
position: relative;
cursor: pointer;
padding: 10px 20px;
background-repeat: no-repeat;
background-position: bottom left;
background-image: url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png');
background-position: bottom left, top right, 0 0, 0 0;
background-clip: border-box;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
-moz-box-shadow: 0 0 1px #fff inset;
-webkit-box-shadow: 0 0 1px #fff inset;
box-shadow: 0 0 1px #fff inset;
-webkit-transition: background-position 1.2s;
-moz-transition: background-position 1.2s;
transition: background-position 1.2s;
}

.button:hover {
background-position: top left;
background-position: top left, bottom right, 0 0, 0 0;
}

.button:active {

bottom: -3px;
}

.button.big {
font-size: 30px;
}

.button.medium {
font-size: 16px;
}

.button.small {
font-size: 12px;
}

.button.rounded {
-moz-border-radius: 4em;
-webkit-border-radius: 4em;
border-radius: 4em;
}

.blue.button {
color: #0f4b6d !important;
border: 1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}

.blue.button:hover {
background-color: #63c7fe;
background-image: url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}

.green.button {
color: #345903 !important;
border: 1px solid #96a37b !important;
background-color: #79be1e;
background-image: url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image: url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}

.green.button:hover {
background-color: #89d228;
background-image: url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image: url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}

.orange.button {
color: #693e0a !important;
border: 1px solid #bea280 !important;
background-color: #e38d27;
background-image: url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image: url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}

.orange.button:hover {
background-color: #ec9732;
background-image: url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image: url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}

.gray.button {
color: #525252 !important;
border: 1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image: url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image: url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}

.gray.button:hover {
background-color: #b6bbc0;
background-image: url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image: url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), url('http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzbutton.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

Now,click on Save the Template.
Now, write a New Post.
To have this button there just paste any of the below code as per your choice.

Note: First choose size of a button then choose for the color of the button

For Big Buttons

For Medium Buttons

For Small Buttons

For Small Rounded Buttons

It's Done.

Message or Notification Scroll Out For Blogger

Posted by Anonymous On 6:34 AM 5 comments

This is an amazing message scroll out for blogger. This widget can be added to any to any blog for some notification or any important message. This widget is made by me and has a simple css hover effect in it.

Steps To Add Message Scroll Out To Blogger

Login to your Dashboard.
Go to Templates >>Edit Html.
Find for ]]></b:skin> tag.
Paste the below code before ]]></b:skin> tag.

.message-slide-out-by-blog-toolz {
position:fixed;
z-index:9999;
text-decoration:none !important;
color:white !important;
background-color:rgba(34, 34, 34, 0.64);
padding:10px;
font-family:'verdana';
font-size:13px;
border-radius:0px 5px 5px 0px;
top:10px;
left:-180px;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-ms-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
font-weight:bold;
padding-left:35px;
}
.message-slide-out-by-blog-toolz:hover {left:0px;}

Now,click on Save the Template.
Now,go to Layout.
Click on Add a Gadget >>Html/Javascript.
Paste below code the there.

<a class='message-slide-out-by-blog-toolz' href='http://blog-toolz.blogspot.in/2012/07/css-bullet-style-hover-effect-for.html' target='_blank'>Colour Changing Bullet Style</a>

Note: Change the red link with your link and green text with your display text.

Now,click on Save.

It's Done.

CSS Styled Popular Post Widget For Blogger

Posted by Anonymous On 6:00 AM No comments

This is a different type of Popular post widget which is designed by Deepak Kamat.This widget changes its color as per the popularity of the post like a Heat Meter.Having this widget is too lengthy so i have added it to a single button.This widget also has nudge effect and hover effect
View Demo

Steps To Add CSS Popular Post Widget

Login to your Dashboard.
Go to Layout >>Add a Gadget.
Choose for Popular Post Widget.
Add Setting as in below image.

screen shot of settings of popular post widget

Now, Click on the Below button.

Then Click on Add Widget.

It's Done.

Animated Bullet Style Hover Effect For Blogger

Posted by Anonymous On 3:36 AM 2 comments

This are very awesome bullet style with hover effect for blogger. This is surely gonna make your post beautiful. This bullet style are made by me and does not need any extra effort.So today i will teach you how to add this bullet style to blogger.

Steps To Add Animated Bullets To Blogger

Login to your Dashboard.
Go to Template >> Edit Html.
Find for ]]></b:skin>
Paste the below code before ]]></b:skin>

.post ul {list-style:none;
}
.post ul li {
line-height: 1.0em;
background: transparent url(http://i1269.photobucket.com/albums/jj591/aditya9172/w2b_bloggerbullet.png) no-repeat scroll -4px 0px;
margin: 1.0em 0;
padding: 0 0 1.0em 28px;
}
.post ul li:hover {
background: transparent url(http://i1269.photobucket.com/albums/jj591/aditya9172/w2b_bloggerbullet2.png) no-repeat scroll -2px 0px;
}

Now, Click on Save the Template.

It's Done.

Post Rating Widget For Blogger

Posted by Anonymous On 2:39 AM No comments

This is a rating widget for blogger.This widget will appear below the title of the post. This widget will sure ly help the blog owner to have note on what reader like what they don't like.This widget is also available in stars. Below are the steps given to make it to stars.This Post Rating Widget Is Originally made by js-kit.com

View Demo

Steps To Add Post Rating Widget

Login to your Dashboard.
Go to Templates >>Edit html.
Tick Expand the Widgets.
Find for below code in the html.

<data:post.body/>

Paste the below code just above the <data:post.body/> tag.

<b:if cond='data:blog.pageType == "item"'>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title' view='score'>
</div>
</b:if>

Note:- If you want to add star rating like look then simply delete the red link.

Now, Find for below code there.

</body>

Paste the below code before </body> tag

Now, Click on Save the Template.

It's Done.

Customize Comment Background Style For Blogger

Posted by Anonymous On 1:36 AM 1 comment

This is a new type of comment form which can be customized easily. This comment form has a background image in it. This background can be change with any other background.Many of the blogs have a different type of comment form.This comment form can be changed every day as it needs only a background image.No any other requirement. So today i will teach you how to add this comment background style to blogger.

Steps To Add Comment Background Style To Blogger

Login to your Dashboard.
Go to Template >>Edit Html.
Tick on Expand the Widgets.
Find for ]]></b:skin> tag.
Paste the below code before ]]></b:skin> tag.

#blog-toolz-form iframe{
background:#000000 url(Image Url) repeat;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-ms-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#000000;
width:560px; height:213px !important;
}

Notice:- To find some Good backgrounds go to background lab.com

Replace the Red link with your image link.

Update For Comment Background Style For Blogger

#blog-toolz-form iframe:hover{
background:#000000 url(Hover Image Url) repeat;
border:2px dotted #F35C1B;

Note: Change The Red Text With Your Image Link And Blue Text With Your Dotted Line Color.

Add the above CSS script just below the first script.
This the below image.

Now, Find for <div class='comment-form'>
Replace the above code with the below code.

After that click on Save the Template.

It's Done.

CSS Tooltip Hover Description Gadget For Blogger

Posted by Anonymous On 7:38 AM No comments

This is a description gadget for blogger. Many times when explaining some thing we have to explain meaning of some word. It's necessary but explaining it in a different style makes our blog look good. So i have tutorial on description gadget for blogger. It looks like as it is in the image. Dont See The Color of font it can be changed.This awesome tooltip is made by Red Team Design

View Demo

Steps To Add CSS Tool tip To Blogger

Login to your Dashboard.
Go to Templates >>Edit Html.
Find for ]]></b:skin> tag.
Paste the below code before ]]></b:skin>.

.tooltip{position: relative;background: #eaeaea;cursor: help;display: inline-block;text-decoration: none;color: #222;outline: none;}.tooltip span{visibility: hidden;position: absolute;bottom: 30px;left: 50%;z-index: 999;width: 230px;margin-left: -127px;padding: 10px;border: 2px solid #ccc;opacity: .9;background-color: #ddd;background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));-moz-border-radius: 4px;border-radius: 4px;-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;text-shadow: 0 1px 0 rgba(255,255,255,.4);}.tooltip:hover{border: 0; /* IE6 fix */}.tooltip:hover span{visibility: visible;}.tooltip span:before,.tooltip span:after{content: "";position: absolute;z-index: 1000;bottom: -7px;left: 50%;margin-left: -8px;border-top: 8px solid #ddd;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 0;}.tooltip span:before{border-top-color: #ccc;bottom: -8px;}

Now,click on Save the Template.
Now, Write a New Post.
To have description on any text paste the below code in html section there.

<a href="#" class="tooltip">The Text That Will Have A Tooltip<span>The Actual Description That Appears On Hover</span></a>

Note.1:- Change the Red Text With the Word you want Description and change the Blue Text with Description of that word.

Note.2:- After adding the script in the html section dont go to compose section back other wise it wont work,directly click on Publish.

Now,Publish the Post.

It's Done.

Exclusive Flying Twitter Bird For Blogger

Posted by Anonymous On 7:08 AM 1 comment

This is a flying twitter bird gadget for blogger. This bird flys every where in your blog. It will fly and will have a seat at your screen. If you scroll down it comes down and seats there.So this bird is surely gonna increase your follower.So have a look on it's tutorial.This Bird is made by Way2Blogging

View Demo

Steps To Add Flying Twitter Bird

Login to your Dashboard.
Go to Template >>Edit Html.
Find for </body> tag.
Paste the below code after </body> tag.

Click on Save the Template.

It's Done.

Shareaholic jQuery Sharing Buttons For Blogger

Posted by Anonymous On 6:40 AM No comments

This are one of the best Sharing Buttons For Blogger. This buttons are placed below every post. This buttons include all the popular website to share. This buttons have a very great hover effect. This look as if they are digged under and on hover they come out.This buttons are made by shareaholic.com
So i will teach you how to add them on blogger.

Steps To Add Shareahoic Buttons To Blogger

Login to to Dashboard.
Go to Template >>Edit Html.
Find for ]]></b:skin> tag.
Paste the below code before/above ]]></b:skin> tag.

div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}.shareaholic-show-on-load{display: block !important;}div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important;}div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important; text-indent:0px !important;text-decoration:none !important;}div.shr-count{font:12px bold,arial !important;position: relative !important;}div.shr-count-outline{position: absolute !important;color: white !important;}div.shr-count-center{position: absolute !important;color: blue !important;}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px top !important}li.shr-3{background-position:-180px bottom !important}li.shr-3:hover{background-position:-180px top !important}li.shr-5{background-position:-300px bottom !important}li.shr-5:hover{background-position:-300px top !important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px bottom !important}li.shr-10:hover{background-position:-600px top !important}li.shr-38{background-position:-2280px bottom !important}li.shr-38:hover{background-position:-2280px top !important}li.shr-40{background-position:-2400px bottom !important}li.shr-40:hover{background-position:-2400px top !important}li.shr-43{background-position:-2580px bottom !important}li.shr-43:hover{background-position:-2580px top !important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px top !important}li.shr-74{background-position:-4440px bottom !important}li.shr-74:hover{background-position:-4440px top !important}li.shr-88{background-position:-5280px bottom !important}li.shr-88:hover{background-position:-5280px top !important}li.shr-106{background-position:-6360px bottom !important}li.shr-106:hover{background-position:-6360px top !important}li.shr-201{background-position:-12060px bottom !important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px bottom !important}li.shr-219:hover{background-position:-13140px top !important}

Now, Tick Expand the Widgets.
Find for <div class='post-footer'>
Paste the below code after/under <div class='post-footer'>

<b:if cond='data:blog.pageType == "item"'>
<div class='shr_class shareaholic-show-on-load'>
</div>
<script type='text/javascript'>
var SHRSB_Settings = {"shr_class":{"src":"http://www.shareaholic.com/media/css/styles/sb","link":"","service":"5,7,2,38,3,219,43,52,201,88,74,10,106,45,40,210,78,39","apikey":"6ffe2cbf142c45bd4cd03b01ec46b8658","localize":true,"shortener":"google","shortener_key":"","designer_toolTips":true,"twitter_template":"Some fancy post title - http://goo.gl/dbqlx via @BlogToolz"}};
</script>
<script type='text/javascript'>
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-sb.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script><a href='http://blog-toolz.blogspot.com/' target='_blank'>Blogger Social Gadget</a></b:if>

Change The Red Highlighted word with your Twitter Username.

Click on Save the Template.

It's Done

Rounded Borders Images In Blogger

Posted by Anonymous On 6:22 AM No comments

Have a different blog is a dream of each and every blogger. Images have a great impact on a look of a blog. So if some one wants to do something different than this the best thing any blogger can do. Making the borders of images rounded. This images are made from an external link.

Below Is The Rounding Border Software.

Choose a File from your Computer or Browse it from Internet.
Then Click on Round Image Button

It's Done.

Slide Out Yahoo Music Player For Blogger

Posted by Anonymous On 3:36 AM No comments

This is a Music Player for your blog. Many people love music and also want to add music to ther blog. It has a slide out effect. This music player floats at the left down corner of your blog.So have it in your blog.

View Demo

Steps To Add Yahoo Music Player To Blogger

Login to your Dashboard.
Go to Layout >>Add a Gadget.
Choose for Html/Javascript.
Paste the Below Code there.

Note.1:- Change the Red Text With Your Songs Url.

Note.2:- Change the Green Text With Your Songs Name.

Now,Click on Save.

It's Done.

To have some more info on Yahoo Music Player click here

Slide Out Sharing Buttons For Blogger By Website Informer

Posted by Anonymous On 3:23 AM 1 comment

This is Pop Up Sharing Buttons for Blogger. This Buttons Are placed at the button of your Blog. On Click on More.... Button it Pop Ups with many more Sharing Buttons.This buttons have a smooth pop p effect. This buttons are made by Website Informer.com. So have this buttons in your blog.

View Demo

Follow The Below Steps:

Click on the above button to Add it to Blogger.

It's Done.

jQuery Inner Zoom Effect For Blogger

Posted by Anonymous On 10:54 PM 2 comments

This post is having zoom effect for blogger images. This zoom effect is different because normally zoom effect is created outside the image. In this zoom effect it will appear inside the image. See the demo you will understand every thing. This effect is made using jQuery. This effect is awesome looking. So have this in your blog.This amazing effect is made by Paul Crowe

This Is The Demo Of Inner Zoom Effect

Follow The Below Steps:

Step.1:-Adding Zoon Effect Script

Login to your Dashboard.
Go to Template--->Edit Html.
Find for </head> tag.
Copy and paste the below code there.

Note:If you have add the highlighted script before then remove it.

Step.2:-Adding Zoom Effect To Images

Write a New Post.
After Uploading an Image, Click on above Html button.
Find for your image url.

After Finding the Url paste the below code after <a and before href=

class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2"

See the Below Image.

Now, Publish the Post.

It's Done......

Ready Made Follow Me Buttons For Blogger

Posted by Anonymous On 10:13 PM No comments

Have social follow me buttons is very important today. I have provided you many social follow me buttons before. This my new follow me button. This buttons include Facebook,Twitter,Google+ and RSS. This buttons look good as you can see in the picture.This buttons can be placed any where as they are so good looking.

Wanna See A Demo.......... Click here

Steps To Add This Follow Me Buttons

Login to your Dashboard.
Go to Layout--->Add a Gadget.
Choose for Html/Javascript.
Copy and paste the below code there.

<a href="http://facebook.com/BloggingTrickzAndToolz" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i1269.photobucket.com/albums/jj591/aditya9172/facebook-30x43.png" /></a><a href="http://twitter.com/BlogToolz" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i1269.photobucket.com/albums/jj591/aditya9172/twitter-30x43.png" /></a><a href="https://plus.google.com/102590191362594199985/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i1269.photobucket.com/albums/jj591/aditya9172/googleplus-30x43.png" /></a><a href="http://feeds.feedburner.com/BlogginTrickzAndToolz" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i1269.photobucket.com/albums/jj591/aditya9172/rss-30x43.png" /></a>

Now, change the above Highlighted Links with your links.
Click on Save.

It's Done.

3D Follow Me Buttons With Rotation Effect For Blogger

Posted by Anonymous On 4:14 AM 1 comment

This is another Follow me buttons for blogger. This buttons are having a smooth rotation effect. This buttons include RSS, Mail, Facebook, Twitter, Google+.This buttons can be place any where.
This buttons are made by Paul Crowe the Founder of Spice Up Your Blog.This buttons have a name tag on them.

Follow The Below Steps:

Click on the Above Button.
New Page will Appear.
Click on Edit Content.
Now Replace your links with my links.
And Click on Add Widget.

It's Done.

Facebook Like Box Pop up For Blogger

Posted by Anonymous On 12:08 AM No comments

Having 1000+ makes our blogs reputation good. This can be increased by having Facebook like page to your blog.This pop up has a cut button. Many of my friends told me to remove the cut button so that only on like the pop up disappears.Having this facebook pop up will surely increase your likes as pop ups before the page opens.Thanks to MBT For Originally Making This Gadget

Steps To Add This Facebook Pop Up

Click on the Above Buttons.
Then click on Add Widget.
It's Done.

Rainbow Links for Blogger

Posted by Anonymous On 11:52 PM No comments

This rainbow links look good .This links change there colors on hover. This changing of color will be applied to all the links in blogger.This type of links can be seen in many blog. Many people link such types of link and hence they apply it in there blog.

View Demo

Follow The Below Steps:

Click on the above button.
New Page will appear.
Click on Add Widget button and it's done.

jQuery Text Resize Buttons For Blogger

Posted by Anonymous On 11:32 PM 2 comments

This gadget is Text Resize Gadget which can make your posts text larger and larger. This gadget is positioned at the right upper corner of the post. It look great and uses a jquery for it. Having it is just for the convenience of the the viewer. So that the viewer can adjust the text as per his/her requirement.This gadget is originally made by the very famous Paul Crowe founder of Spice up your blog.

View Demo

Steps To Add This Resize Buttons To Blogger

Login to your Dashboard.
Go to Template-->Edit Html.
Click on "Expand the Widgets"
Find for </head> tag.
Copy and paste the below code above/before it.

Now find for the below code in html.

Copy and paste the below code just after/below the <div class='post-header-line-1'/>.

<b:if cond='data:blog.pageType == "item"'><table border='0' style='float:right; margin-left:5px;'><tr><td><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip2FIyyZYrzSS3vVADunj-MK__GG2dAFYHQAFI5TP3BFFpU6GHAVZfT4M_CJ7ea4v29fDXFcT73vaSYk_iqjt94sr5Ac9pTn_SYpUo6OD1Na4xlQ_-jA7hEgkg_18zmkwjMQ31eugOL6M/s1600/font-size-blogger-gadget.png'/> | <a class='increaseFont' style='cursor: pointer; cursor: hand;' title='Larger Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQXssfmPDBzP_tnYcZvIuaDdvCAgmHqHAAF44C7zbzxJcwLAeL5FZg3uOHPK2sgZy0ttH-l-0iS0a34SUNSQFKpwtL7I_hO0vwx-HIBW2MvFOYY4uu-ktlc-20YeyvCl2C5pFxuTTbd74/s1600/bigger-font+-+Copy.png'/></a><a class='decreaseFont' style='cursor: pointer; cursor: hand;' title='Smaller Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibZEKTZfQ9sjzZbr2RYrY30WLYDQedKDgXz0irFGymHQCmC5v0tmZVkf3xafDu2WsYBOhrDIeabR7mBt3eIZPS0kVoZWsMulKUBD_PqZOjVinrMZwP4XgK6K2DB_wt1y8eMz0a2VZLlZY/s1600/smaller-font.png' style='cursor: hand;'/></a><a class='resetFont' style='cursor: pointer; cursor: hand;' title='Reset Text Size'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwwF11Z-qTMsYBTjidqh5gNpYre1TA3dc2jDfOJWIYgMzgqdonWvxlzEMC4icHVXrFu9PPdHIC8fGEClKxD5QHICTsHyIlPMCL0x5OSTmLvef9oNzQjd7qbOftSyqSEcZF6YAcomk4LqQ/s1600/reset-font.png' style='cursor: hand;'/></a></td></tr></table></b:if>

Now Find for the below given code.

<data:post.body/>

Replace <data:post.body/> with the below code.

Now, Click on Save the Template.

It's Done.

Image:
or URL:

Below is the Demo Of this Button

Steps To Add Bubble Buttons To Blogger

For Big Buttons

For Medium Buttons

For Small Buttons

For Small Rounded Buttons

Steps To Add Message Scroll Out To Blogger

Steps To Add CSS Popular Post Widget

Steps To Add Animated Bullets To Blogger

Steps To Add Post Rating Widget

Steps To Add Comment Background Style To Blogger

Update For Comment Background Style For Blogger

Steps To Add CSS Tool tip To Blogger

Steps To Add Flying Twitter Bird

Steps To Add Shareahoic Buttons To Blogger

Below Is The Rounding Border Software.

Steps To Add Yahoo Music Player To Blogger

Follow The Below Steps:

This Is The Demo Of Inner Zoom Effect

Follow The Below Steps:

Step.1:-Adding Zoon Effect Script

Step.2:-Adding Zoom Effect To Images

Steps To Add This Follow Me Buttons

Follow The Below Steps:

Steps To Add This Facebook Pop Up

Follow The Below Steps:

Steps To Add This Resize Buttons To Blogger

Site search

Labels

Labels

Categories

Blog Archive

Subscribe via email