Social Media Trick Game: Blogger Tricks

Showing posts with label Blogger Tricks. Show all posts

IP Address Finder Widget

21:21 Blogger Tricks, Blogger Widgets No comments

Hi Friends today i am going to share IP Address finder. Just copy the HTML source code shown below and put it on your website and blogger. This service is free for personal use.

Go to your Blogger > Dashboard

Select Layout tab.

Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.

Live Demo 125x125 pixel

<a href="http://tricksteacher.blogspot.com/2013/06/ip-address-finder-widget.html"><img src="http://www.wieistmeineip.de/ip-address?size=125x125" border="0" width="125" height="125" alt="IP" /></a>

468x60 pixel

<a href="http://tricksteacher.blogspot.com/2013/06/ip-address-finder-widget.html"><img src="http://www.wieistmeineip.de/ip-address/?size=468x60" border="0" width="468" height="60" alt="IP" /></a>

Float AdSense And Other Ads On Left And Right Side Of Your Blog And Website

04:40 AdSense, Blogger Tricks, Tricks And Tips No comments

Hi Friends Today I am going to share, how to use 160px X 600Px AdSense ads which can be float right or left side of your blog and website. Not only AdSense ads can be float but you can use any affiliates ads to make float.

Go to Blogger.com > Dashboard

Select Layout tab.

Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.

    <style>
    #tricksteacherflotads {
    height:30px;
    width:auto;
    background: #333333 url('..');
    background-repeat:repeat-x;
    text-align:left;
    padding-top:4px;
    }
    #bsadsbase{
    height:600;
    margin:0auto;
    width:180px;
    background:#fff;
    border-bottom:2px #333333 solid;
    border-right:2px #333333 solid;
    border-left:2px #333333 solid;
    text-align:center;
    padding:4px;
    }
    #bsadsheadline{
    opacity:1.0;
    height:auto;
    width:auto;
    position:fixed;
    top:65px;
    left:10px;
    border-bottom:1px #005094 solid;
    border-bottom:0px blue solid;
    color:#333;
    padding:0px;
    z-index:1001;
    font-size:13px;}
    </style>
    <script type="text/javascript">
    function getValue()
    {
    document.getElementById("bsadsheadline").style.display = 'none';
    }
    </script>
    <div id="bsadsheadline">
    <div id="tricksteacherflotads">
    <span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em"></span>
    <span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px"><a href="http://www.tricksteacher.blogspot.com" target="_blank" onclick="getValue()">close(x)</a></span>
    </div>
    <div id="bsadsbase">
    <h3></h3>
    <p align="left"><h3></h3></p>
    <p>
    Ads code here    <br/></p></div></div>

    Replace "Ads code here" with your AdSense or others ads code.

    Change 180px to increase or decrease wide

    Change Left with right to float right side of your blog.

How To Add Animated Google Plus Follower Box Widget In Blogger

21:23 Blogger Tricks, Blogger Widgets, Google Tricks No comments

Google Plus follower box is essential to increase your Google fan like Facebook fan box. However Google has already introduced this widget for blogger. So I just modified the original traditional widget with little spice.

Go to Blogger.com
Selecet Layout tab.

Click on "Add a Gadget" then
select "HTML/JavaScript" Gadget.

Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.

Live Demo

<style>
.bloggerspiceGplus{
    margin: 10px auto;
    background-color: #FEFEFE;
    width: 260px;
    padding: 10px 0 10px 10px;
    height: 255px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border: 10px solid #E50913;
}
.bloggerspiceGplus:hover {
    border: 10px solid #A0060E;
    background-color: #E50913;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
// Google Plus Widget by www.tricksteacher.blogspot.com //
</style>
<div class="bloggerspiceGplus">
<div class="g-plus" data-action="followers" data-height="290" data-href="https://plus.google.com/106080909507696381306" data-source="blogger:blog:followers" data-width="280"></div>
</div>

Alter 106080909507696381306 with your Google Plus ID

How To Get Free .Tk Domain

21:33 Blogger Tricks, Tricks And Tips No comments

Domains are very important for every website. Website without domain is incomplete. There are many domain in the world. Mostly website sale domain and hosting. But some website giving free hosting and domain. so i am tell you how to give free .tk domain.

Go to www.dot.tk

Type your domain.

Enter your Website/Blog URL

Registration length to 12 months

Now click on Signup

Click on the indicated button. you have got your own .tk domain.
Enjoy free domain.

How To Make Grab Our Button Widget And Add It To Blog with video tutorial

00:27 Blogger Tricks, Tricks And Tips No comments

I am share How To Make Grab Our Button Widget And Add It To Blog. Grab Our Button promote your blog via other blog.

How To Create A Badge For Blog

Go to Cooltext

Select PIXEL BADGE.

Select color

And download image

<div dir="ltr" style="text-align: left;" trbidi="on">
<center>
<div dir="ltr" style="text-align: center;" trbidi="on">
<a href="http://tricksteacher.blogspot.com/"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQT_iGg5Cek4yt5_pSjt8KsNkKknhqsgC_nRpM6nr18c-h3b4OtVjGFxTDc3KMWiHRpqK3XpNMYyRTnrpy3L-qI6XDI1sMnCRjjADBuFqqp9KYMwOj9i-Y1s-8DPjkNxfyoIkfV7Qi9Puz/s1600/tricks.gif" title="Blogger tricks" /></a></div>
</center>
<center>
<input onclick="this.focus();this.select()" readonly="" type="tricksteacher1" value="<a href="www.tricksteacher.blogspot.com/"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQT_iGg5Cek4yt5_pSjt8KsNkKknhqsgC_nRpM6nr18c-h3b4OtVjGFxTDc3KMWiHRpqK3XpNMYyRTnrpy3L-qI6XDI1sMnCRjjADBuFqqp9KYMwOj9i-Y1s-8DPjkNxfyoIkfV7Qi9Puz/s1600/tricks.gif" title="Blogger tricks" /></a>" />
</center>
</div><div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://tricksteacher.blogspot.com/2013/05/how-to-make-grab-our-button-widget-and.html">+grab this</a></div>
</div>

Replace http://tricksteacher.blogspot.com/ with your link

Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQT_iGg5Cek4yt5_pSjt8KsNkKknhqsgC_nRpM6nr18c-h3b4OtVjGFxTDc3KMWiHRpqK3XpNMYyRTnrpy3L-qI6XDI1sMnCRjjADBuFqqp9KYMwOj9i-Y1s-8DPjkNxfyoIkfV7Qi9Puz/s1600/tricks.gif your pic link

4 in 1 Social Subscribing Slide Out Widget For Blogger

02:32 Blogger Tricks, Blogger Widgets, Share Box No comments

Today I am share 4 in 1 Social Subscribing Slide Out Widget For Blogger.
If you don't have a space for your social subscribing widgets then don't worry.
I an share Hide and show them out with smooth j Query slide out hover effect.
This 4 in 1 slide out widget contains a floating facebook like box,your recent tweets, Google +1 button and feed burner email subscription.

Go to blogger.com
Go to Layout
Add a Gadget
Click HTML Javascript
Paste the code

<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
img,a {
    border: 0;
}

#on {
    visibility: visible;
}

#off {
    visibility: hidden;
}

#facebook_div {
    width: 196px;
    height: 340px;
    overflow: hidden;
}

#twitter_div {
    width: 246px;
    height: 353px;
    overflow: hidden;
}

#google_plus_div {
    width: 152px;
    height: 97px;
    overflow: hidden;
    margin-left: 50px;
    margin-top: 10px;
}

#knfeedburner_div {
    width: 300px;
    height: 97px;
    overflow: hidden;
    margin-top: 5px;
    margin-left: -4px;
}

#kakinetwork_div {
    width: 300px;
    height: 97px;
    overflow: hidden;
}/* right side style */#facebook_right {
    z-index: 10005;
    border: 2px solid #3c95d9;
    background-color: #fff;
    width: 196px;
    height: 353px;
    position: fixed;
    right: -200px;
}

#facebook_right img {
    position: absolute;
    top: -2px;
    left: -35px;
}

#facebook_right iframe {
    border: 0px solid #3c95d9;
    overflow: hidden;
    position: static;
    height: 360px;
    left: -2px;
    top: -3px;
}

#twitter_right {
    z-index: 10004;
    border: 2px solid #6CC5FF;
    background-color: #6CC5FF;
    width: 246px;
    height: 353px;
    position: fixed;
    right: -250px;
}

#twitter_right_img {
    position: absolute;
    top: -2px;
    left: -35px;
    border: 0;
}

#google_plus_right {
    z-index: 10003;
    background-color: #F2F2F2;
    border: 2px solid #006ec9;
    border-top: 2px solid #0056a0;
    border-bottom: 2px solid #0056a0;
    border-right: 2px solid #0056a0;
    border-left: hidden;
    width: 152px;
    height: 97px;
    position: fixed;
    right: -154px;
}

#google_plus_right_img {
    position: absolute;
    top: -2px;
    left: -33px;
    border: 0;
}

#feedburner_right {
    z-index: 10003;
    background-color: #fefefe;
    border: 2px solid #5b5b5b;
    border-top: 2px solid #5b5b5b;
    border-bottom: 2px solid #5b5b5b;
    border-right: 2px solid #5b5b5b;
    border-left: hidden;
    width: 300px;
    height: 97px;
    position: fixed;
    right: -303px;
}

#feedburner_right_img {
    position: absolute;
    top: -2px;
    left: -33px;
    border: 0;
}

#kakinetwork_right {
    z-index: 10003;
    border: 2px solid #303030;
    background-color: #fff;
    width: 300px;
    height: 97px;
    position: fixed;
}

#kakinetwork_right img {
    position: absolute;
    top: -2px;
    left: -101px;
}/* left side style */#facebook_left {
    z-index: 10005;
    border: 2px solid #3c95d9;
    background-color: #fff;
    width: 196px;
    height: 353px;
    position: fixed;
    left: -200px;
}

#facebook_left img {
    position: absolute;
    top: -2px;
    right: -35px;
}

#facebook_left iframe {
    border: 0px solid #3c95d9;
    overflow: hidden;
    position: static;
    height: 360px;
    right: -2px;
    top: -3px;
}

#twitter_left {
    z-index: 10004;
    border: 2px solid #6CC5FF;
    background-color: #6CC5FF;
    width: 246px;
    height: 353px;
    position: fixed;
    left: -250px;
}

#twitter_left_img {
    position: absolute;
    top: -2px;
    right: -35px;
    border: 0;
}

#google_plus_left {
    z-index: 10003;
    background-color: #006ec9;
    border: 2px solid #006ec9;
    border-top: 2px solid #0056a0;
    border-bottom: 2px solid #0056a0;
    border-left: 2px solid #0056a0;
    border-right: hidden;
    width: 152px;
    height: 97px;
    position: fixed;
    left: -154px;
}

#google_plus_left_img {
    position: absolute;
    top: -2px;
    right: -33px;
    border: 0;
}

#feedburner_left {
    z-index: 10003;
    background-color: #fefefe;
    border: 2px solid #5b5b5b;
    border-top: 2px solid #5b5b5b;
    border-bottom: 2px solid #5b5b5b;
    border-left: 2px solid #5b5b5b;
    border-right: hidden;
    width: 300px;
    height: 97px;
    position: fixed;
    left: -303px;
}

#feedburner_left_img {
    position: absolute;
    top: -2px;
    right: -33px;
    border: 0;
}

#kakinetwork_left {
    z-index: 10003;
    border: 2px solid #303030;
    background-color: #fff;
    width: 300px;
    height: 97px;
    position: fixed;
}

#kakinetwork_left img {
    position: absolute;
    top: -2px;
    right: -101px;
}

.box-title1 {
    border: 1px solid #ddd;
/*border-radius*/
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
/*box-shadow*/
    -webkit-box-shadow: 5px 5px 5px #CCCCCC;
    -moz-box-shadow: 5px 5px 5px #CCCCCC;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding: 10px;
    margin: 10px 0;
}

.enteryouremail {
    background: #fff !important;
    border: 1px solid #d2d2d2;
    padding: 0px 8px 0px 8px;
    color: #a19999;
    font-size: 12px;
    height: 25px;
    width: 165px;
/*border-radius*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 0px;
}

.submitbutton {
    background: #F2F2F2;
    border: 1px solid #F66303;
/*box-shadow*/
    -webkit-box-shadow: 3px 3px 3px #666;
    box-shadow: 3px 3px 3px #666;
    font: bold 12px Arial, sans-serif;
    color: #000000;
    height: 25px;
    padding: 0 12px 0 12px;
    margin: 0 0 0 5px;
/*border-radius*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
}
</style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script>
<script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script>
<br />
<div id="on">
<div id="facebook_right" style="top: 18%;">
<div id="facebook_div">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqS1fiRP-8uetRhxxXECJcDSTW8sN1YaefUyhYGRaNLPcw9_JUA3pYvu49wGzykz2r6TofqugeNCRJuRAQT50jIuJM85drHxo-jEW-JKEbfyPfyu8iopcP4i0Kd6tGxf9ET4vAGfYtJiZN/s1600/tricksteacher.blogspot.com-facebook-icon.png" />
   <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fasadtariq786&width=200&height=346&colorscheme=light&show_faces=true&border_color&stream=false&header=false" style="border: none; height: 346px; overflow: hidden; width: 200px;">
   </iframe>
</div>
</div>
</div>
<div id="on">
<div id="twitter_right" style="top: 35%;">
<div id="twitter_div">
<img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRfpY7k_GpRvF_hqXQ_uu75CUrJ2qDgL70MQIE1qU1jR5gjus_bqF7SNvBNtw1zriTIhttmmQFqWoiyZ0ge9_9QpVc6lIPbRmoTIAK-B5ZvnF5oLsBVV8jqIN-LHNiaisPOKUG6vxZkiUU/s1600/tricksteacher.blogspot.com-twitter.png" />
   <script src="http://widgets.twimg.com/j/2/widget.js"></script>
   <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('asadtariq77').start();</script>
</div>
</div>
</div>
<div id="on">
<div id="google_plus_right" style="top: 52%;">
<div id="google_plus_div">
<img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-aDtUy04uHiTOzJ0rux4A8tBNstYVhYu4a-2MC5feVtsdaAlj2d-ir4JJiSDcbFNc_h9-NrylLtpkRlbWPjiRZkNE58WlJtmte10xCrysanGpqeH1eIyFhKlp7aepJsrCXOAdVqUPlib9/s1600/tricksteacher.blogspot.com-google+.png" />
   <br />
<div style="float: left; margin: 10px 10px 10px 0;">
<g:plusone expr:href="data:post.url" size="tall"></g:plusone>
   </div>
</div>
</div>
<div id="on">
<div id="feedburner_right" style="top: 69%;">
<div id="knfeedburner_div">
<center>
    <h4 style="color: #f66303;">
You can also receive Free Email Updates:</h4>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/USDlLP', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="enteryouremail" gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" value="Enter your email here..." /><input name="uri" type="hidden" value="hblogger" /><input class="submitbutton" type="submit" value="Submit" />
    </form>
</center>
<img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAHpu99vlzz-X77PeWoaATEtEFkyrmXT4utUQE_LnMOz_iQPotbrWJWOZe_Jbac2_vBCFBGCrTdICqawMy5qcXjWQHR9kcWpu73NNAUe1rrnB2k-Xkuhj0BbxzZmMLKsDLPRexNhhFd5hX/s1600/tricksteacher.png" />
   </div>
</div>
</div>
</div>
</div>

replace asadtariq786 with your facebook fanpage username.
Replace asadtariq77 with your twitter username.
Replace blogspot/USDlLP with your feedburner username.

Google Flag Translate Widget For Blogger/Blogspot

07:57 Blogger Tricks, Blogger Widgets No comments

How To Add Google Flag Translator To Blogger

Just press the Add To Blogger Button below and this will takes to you Add Widget section.
Change title as you wish.
Hit the Add Widget button.
Drag and drop the widget as you wish

Now save it and refresh your blog.....

How To Ad Boxes with CSS Effects Also Used Advertise On Your Blog website

10:47 Blogger Tricks, Blogger Widgets No comments

Hello friends. Today I am share How To Ad Boxes with CSS Effects Also Used Advertise On Your Blog website This Widget increases the Beautification of your ads and inspire advertisers to advertise on your blog and website. This is great gadget Widgets. I am personal used this Widgets .

Go to Blogger and Edit >Templates

search ]]></b:skin> (ctrl+f)

]]></b:skin>

Paste the below code above it

/* -------------------www.tricksteacher.blogspot------------------*/
div.bsap_125 a{width:125px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;float:left;line-height:100%;margin:0 4px 10px 0;}
div.bsap_125 img{border:2px solid #ddd;clear:right;padding:5px;}
div.bsap_125 a.adhere{color:#666;font-weight:bold;font-size:12px;border:2px solid #ccc;background:#e7e7e7;text-align:center;width:125px;height:125px;line-height:1000%;}
div.bsap_125 a.adhere:hover{border:2px solid #999;background:#ddd;color:#333;}
html>
body div.bsap_125 a.adhere{width:123px;height:123px;}
div.bsap_468 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
div.bsap_468 img{border:0;clear:right;}
div.bsap_468 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:468px;height:60px;line-height:480%;}
div.bsap_468 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
html>
body div.bsap_728 a.adhere{width:726px;height:90px;}
div.bsap_728 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
div.bsap_728 img{border:0;clear:right;}
div.bsap_728 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:128px;height:90px;line-height:730%;}
div.bsap_728 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
html>
body div.bsap_336 a.adhere{width:334px;height:280px;}
div.bsap_336 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
div.bsap_336 img{border:0;clear:right;}
div.bsap_336 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:336px;height:280px;line-height:2200%;}
div.bsap_336 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
html>
body div.bsap_468 a.adhere{width:466px;height:58px;}
.bsap a{text-shadow:1px 1px 1px #111!important;color:#eee!important;overflow:visible!important;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;border:0 none!important;-webkit-border-top-left-radius:80px;-webkit-border-bottom-right-radius:80px;-moz-border-radius-topleft:80px;-moz-border-radius-bottomright:80px;border-top-left-radius:80px;border-bottom-right-radius:80px;margin:0 10px 10px 0 !important;padding:7px!important;}
.bsap a:hover{-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;}
.bsap a img{border:0 none!important;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px!important;}
.bsap .even{margin-right:0!important;}
.bsap .ad1{background:#e42b2b!important;}
.bsap .ad2{background:#ff8400!important;}
.bsap .ad3{background:#a800ff!important;}
.bsap .ad4{background:#49a7f3!important;}
.bsap .ad5{background:#41d05f!important;}
.bsap .ad6{background:#B24700!important;}
.bsap .ad7{background:#FFE500!important;}
.bsap .ad8{background:#007D47!important;}
.bsap .ad9{background:#330000!important;}
.bsap .ad10{background:#990000!important;}
.bsap .ad11{background:#f70000!important;}

Ad HTML Codes

Go to blogger.com
Go to Layout
Add a Gadget
Click HTML Javascript
And Paste the code in it

125x125 Code
<center>
<div id="bsap_125" class="bsap_125 bsap">
<a href="YOUR URL" class="ad1" title="Ad Title" id="bsa_1451626" target="_blank"> <img src = "IMAGE URL"alt ="AdName"height =" 125 "width =" 125 "/> </a>
<a href="YOUR URL" class="ad2 even" title="Ad Title" target="_blank"> <img src = "IMAGE URL"alt =" AdName "height =" 125 "width =" 125 "/> </a>
<a href="YOUR URL" class="ad3" title="Ad Title" target="_blank"> <img src = "IMAGE URL "alt =" AdName "height =" 125 "width =" 125 "/> </a>
<a href="YOUR URL" class="ad4 even" title="Ad Title" target="_blank"> <img src = "IMAGE URL"alt =" AdName "height =" 125 "width =" 125 "/> </a>
</div></center>

468x60

728x90
center>
<div id="bsap_728" class="bsap_728 bsap">
<a href="YOUR URL" class="ad6" title="Ad Title" id="bsa_1451626"
target="_blank"> <img src = "IMAGE URL "alt ="AdName"height =" 90
"width =" 728 "/> </ a>
</ Div>
</ Center>

336x280
<center>
<div id="bsap_336" class="bsap_336 bsap">
<a href="YOUR URL" class="ad8" title="Ad Title" id="bsa_1451626"
target="_blank"> <img src = "IMAGE URL "alt ="AdName"height =" 280
"width =" 336 "/> </ a>
</ Div>
</ Center>

Add Social Media Share Widget For Blogger

02:17 Blogger Tricks, Blogger Widgets No comments

Beautiful social media connect widget fof blogger

Go To Blogger
Design >>>>
Edit HTML
Search for ]]></b:skin> (ctrl+f) and paste the following code just above it,

/* -------------tricksteacher SOCIAL SHARE WIDGET-------------------- */
#search{width:350px; border:1px solid #E0DFD9;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEholyMRePyMgY6EpgELTKo1DslRPrt5O4cyK6r5UTYfYpaHJGWL0GSRq7qZ0A-VMq2sD4FeGiKu8OK-DcXfI3VjzPn9Hnqy8JGKvM6_E5himTal7qceYPxzUoYlY12FA8iHVjqbjJ4goVI/s1600/search-bg.png) left top repeat-x;height:32px;padding:0;text-align:left;overflow:hidden}
#search #s{width:80%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left}
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px}
#search-wrap{padding:15px 0}
.topsearch #search{margin-top:0;margin-bottom:10px}

.social-connect-widget{background:#FFF;border:1px solid #E7E6DE;padding:10px}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#F5F4EF}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px}

Then Search (ctrl+f)

<div id='sidebar-wrapper'>

Now Paste the following code just below it

<div class='topsearch'>
<div class='clerfix' id='search'>
    <form action='/search' id='searchform' method='get'>
        <input id='s' name='q' onblur='if (this.value == "") {this.value = "Search here...";}' onfocus='if (this.value == "Search here...") {this.value = ""}' type='text' value='Search here...'/>
        <input class='search-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVscGS6En9T-7Vat9aE1nm0sttW1gtC4WztrHQdBrl919eACE1IRelyJJ7Vi5OrXPxX81anjOkLztuwaSaig1sNiD1gbaZGpbk6tztbPAxaSgoXytlKMeRWzJjhOQ-TEng6uTq1_JdOyE/s1600/search.png' title='Search' type='image'/>
    </form>
</div>
</div>
<div style='clear:both;'/>
<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'>
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb-qEor3qjpFrkUv9cgppKXJsUvsyusIYtnfYh1l0LStXOGsF_IgGDbp6u7I_62rrc3oJAU7D-OG59UxD3LXxU_cedoolGiUYWQ5PSb1P68dhgfHLemlqyzed7L_-zXhJ5mAc-iSnijqE2/s1600/social-connect-rss.png' title='RSS Feed'/></a><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Subscribe to our RSS Feeds!</a>
</div>

<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://twitter.com/asadtariq77'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUl5wvnVcNsAZEmm5gE98sHhjCWg5A1v5x_7aJlVliiffZOmHxOVCQlubB8Go5Yo6wxUL11WalEDqlQvrhX5xsticrVxl2cEwWqo3rUFYiL0SnIULS43EbinVYRV5VIBQAI9bvsABlwtCD/s1600/social-connect-twitter.png' title='Follow Us on Twitter!'/></a><a href='http://twitter.com/asadtariq77'>Follow Us on Twitter!</a>
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://facebook.com/asadtariq786'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP1R5sONOJxmqGxssHGZxXc2yh_iJ7hDNCBnyZgW7BojP6DZKjJn0s4bW_OEpob80WsMZnynbKf3GyXyDvEWWpgILgfsjfOy6EjZOJaKBjXOr-DwSrc0G-nBzQuiqwx3BBJUdEpDjSkLjh/s1600/social-connect-facebook.png' title='Be Our Fan'/></a><a href='http://facebook.com/asadtariq786''>Follow us on Facebook!</a>
</div>
<div style='clear:both;'/>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLUfVn538iep6m4NQZX-jI98JUfzGpRU8oRMzlS4ey2QipHdfKuJGmEGJ1Hi7WUtsD9phHskAlKxq8J2PZ1zqoKi9pNUmuLHqIOEhUHeiB1-VMis_wuDRsGypHkJCDWgppwwf_aDWDAsk/s1600/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgejCx_3oUWA-ZSlwxx1hDl5qw_-bfpkQwKegTtT4o9asVrCnT6mcqFnLWMWJSJyIuYB4me-560A39YC3sduSW6NSJIj6Uz_sLB82vwlDR-M5ydl1NhdRrSh1mTSTK0iXc74dTK1VGJQMw/s1600/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz7EeLfKblvGi2mNishRyv4NwpRqs6GaH_l8qVTpHiJ9f3qkTcZmZXpR48W-iRgeoo_YaUELg9tBFNKv34nDiZqftO0PUck9Q554VS_fHqiyVhXIdCH6u9Fn760ALHWAmFAaZGzEDNP1M/s1600/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNI8TuXMZtlM0e0SxXyrMZnT-nwcm0rD_mQnoXWSSWLm7DjYiiViCthCeYoTq_oLHbMRWGEejI8pNPuyyMOVPi-oz4PBF77hBc3S5Cs-4qN6znlP-hNqft2lOcQhYevXaol-E6pvEYSDM/s1600/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSLwIvYETD2FAGBl8XJSSBZQNx9rjWgk06lMCozfGgWXDayoe9XEgnqlWVSY3HS78NW6OqljqltDllg6uLPyySCGBJsK4C7OpamgUt9P4gdAglSWG8I4qXKppMxTRVHJCgi1XpQLnn8jY/s1600/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqOyua4zqu9R8KhfqH29_6hxZmZNAQWEZJDSdiBEAzZ3nVihtxuEvb92godpQfWPX4AcKUtIPyKhMxjH2iKr_8g-p_zysQA9EHn0-LRa-gZl2Q3hvK-kl_Xa_9HcONkOC3NXJpXOUxDRk/s1600/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje8nDAClhWaWNQBpWxkiYAvnoz0Z9E01XnDerrzpDMBCCNzaNY8FYZIe_GUxt9vuHGevyxLgEZyDx8UJNVo4eTA6vpQvF4mB_URk-m_doi2uSrzF04lZmUGi21c9frmN6LoxT2lntyu3E/s1600/more.png' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
<div style='clear:both;'/>

Replace http://twitter.com/asadtariq77 with your twitter profile link

Replace http://facebook.com/asadtariq786 with your Facebook Profile link

Save your template and Bingo you are done.

If you liked this post, Please Share This !!

Author Bio Box Widget New Style For Website And Blogger

08:39 Blogger Tricks, Blogger Widgets No comments

Go to blogger.com
Add gadget --- HTML --- javascript.
Paste inside Empty box
Save it done

<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
#profiletricksteacher{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;

}

#profiletricksteacher:hover {
border:2px solid #ccc;
cursor:pointer;

}

.opacity {
opacity: 0.5;
margin-left: 50px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.opacity:hover {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}

</style> 

<style>
#profiletricksteacher{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;

}

#profiletricksteacher:hover {
border:2px solid #ccc;
cursor:pointer;

}

.opacity {
opacity: 0.5;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
zoom: 1;
}
.opacity:hover {
opacity: 1;
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}

</style>

<img align="left" class="opacity" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYkZzauB86Se6WbKy3eCrCbtL5VAki_Dmv7utzxj8Ye6ttXMpsOn5d8p3QbSchiZ36yRC4YoKCPEY1APVa6-BDG9nKBj6xPmSNQXQ1mYJ104h77Y0lTo17KJZaoow9bueNiegxe88RwFGk/s1600/a1.jpg" id="profiletricksteacher" />

Hi! I am tricksteacher a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer.

<a href="http://tricksteacher.blogspot.com/" style="color: #888888;">Read More..</a> </div>

Replace all yellow mark Your Img URL 50*50 And URL Change

Live Demo

Hi! I am tricksteacher a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. Read More..

Automatic Backlink for Blogger and Website

09:33 Blogger Tricks, Blogger Widgets No comments

Automatic Backlink for Blogger and Website

<a href="http://tricksteacherdemo.blogspot.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzxL3p7ik13c9BvbqGnHjnbhEAVjm1a2O0EpXzDUD-zD442YIY2wgpITQxYhWFhI2upfIYok91K5tALwTBSxQefL4LkJswAppKqloi8mX2tn0WqKpEB_GtL48dCQrn7CnSkcn0flHA_BA/s1600/asad.gif" /></a><br />

<a href="http://tricksteacherdemo.blogspot.com/" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDw9zmA4e4y3vEI6k4UcHOukJJdl3vsN5Jp86J4cHDR5K1gPgnSrAsKaiJV9-_RSpK1u2zPWl4tm8_3PxZVJ1OaeFYrfQnlDiDq_96LITgdguNemmxlbBE4rik5Q35OuCbZ__Gq_KH4Fs/s1600/Nadbcu.gif" /></a>

Note , replace http://tricksteacherdemo.blogspot.com your link

Social Bookmarking Widget For Blogger

22:54 Blogger Tricks, Blogger Widgets No comments

Today I am share Social Bookmarking Widget For Blogger. Social bookmarking widget is need of every blogger and helps you to boost traffic on your blog. used Social bookmarking widget share your post twitter' Facebook' Google+ Gmail ant etc

How To Add Social Bookmarking Widget For Blogger

Click on below Add to Blogger button

Choose your blog and add click on Add Widget button

Drag the widget at the bottom of your page layout

click on Save Arrangements button and you are done.

Note - This widget will appear on post pages only,if you want to show this widget at the bottom of every post on your homepage then remove first line (<b:if cond='data:blog.pageType == "item"'>) and last line(</b:if> from the code.

How to Add Design Labels Buttons For Blogger with CSS3

10:27 Blogger Tricks, CSS No comments

How to Add Design Labels Buttons For Blogger with CSS3

    login blogger account

    Go to Template / HTML / Proceed

    By using (CTRL+F) key find this code ]]></b:skin>

Now just above/before the code you've found at step 3 paste the following CSS3 codes.

.cloud-label-widget-content span a{margin:0 2px 6px 0;padding: 3px;text-transform: uppercase;border: solid 1px #C6C6C6;border-radius: 3px;float:left;text-decoration: none;font-size:10px;}.cloud-label-widget-content span a:hover {border:1px solid #6BB5FF;text-decoration: none;-moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out;-moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); }

How to Add a Label Widget

CSS3 Animated "Live Demo" And "Download" Bubble Buttons For Blogger

00:50 Blogger Tricks, CSS No comments

How To Add Animated CSS3 Bubble Buttons To Blogger

For easy and better inderstanding here I am dividing this article in two parts.

CSS Part
HTML Part

so let's start

1. CSS Part

Go to Blogger Dashboard > Template
As always take a backup of your template
Search for below code in your template

]]></b:skin>

Add below code just above it

.button { font: 15px Calibri, Arial, sans-serif; /* A semi-transparent text shadow */ text-shadow: 1px 1px 0 rgba(255,255,255,0.4); /* Overriding the default underline styling of the links */ text-decoration: none !important; white-space: nowrap; display: inline-block; vertical-align: baseline; position: relative; cursor: pointer; padding: 10px 20px; background-repeat: no-repeat; /* The following two rules are fallbacks, in case the browser does not support multiple backgrounds. */ background-position: bottom left; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.png'); /* Multiple backgrounds version. The background images are defined individually in color classes */ background-position: bottom left, top right, 0 0, 0 0; background-clip: border-box; /* Applying a default border raidus of 8px */ -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; /* A 1px highlight inside of the button */ -moz-box-shadow: 0 0 1px #fff inset; -webkit-box-shadow: 0 0 1px #fff inset; box-shadow: 0 0 1px #fff inset; /* Animating the background positions with CSS3 */ /* Currently works only in Safari/Chrome */ -webkit-transition: background-position 1s; -moz-transition: background-position 1s; transition: background-position 1s; } .button:hover { /* The first rule is a fallback, in case the browser does not support multiple backgrounds */ background-position: top left; background-position: top left, bottom right, 0 0, 0 0; } .button:active { /* Moving the button 1px to the bottom when clicked */ bottom: -1px; } /* The three buttons sizes */ .button.big { font-size: 30px; } .button.medium { font-size: 18px; } .button.small { font-size: 13px; } /* A more rounded button */ .button.rounded { -moz-border-radius: 4em; -webkit-border-radius: 4em; border-radius: 4em; } /* Defining four button colors */ /* BlueButton */ .blue.button { color: #0f4b6d !important; border: 1px solid #84acc3 !important; /* A fallback background color */ background-color: #48b5f2; /* Specifying a version with gradients according to */ background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.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 */ .green.button { color: #345903 !important; border: 1px solid #96a37b !important; background-color: #79be1e; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.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 */ .orange.button { color: #693e0a !important; border: 1px solid #bea280 !important; background-color: #e38d27; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xFBO_l-vnUEpeAaxWk4vBdv6oud8U9TnoZzCr5xoNWw1Mfrpszz0IV2N1bgSE5yVzskl7ptJCxQ6ZIdDRTAvF-dagRI705tWcRUS-bIVGdxctMQaouF6O33PL1zZmJXi9RWbCyscr88/s1600/helperblogger-button_bg.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 we have integrated the CSS part in the template let's see how to use them.

2. HTML Part

Here I am listing button's HTML part according to their sizes.First choose size of button then choose color of button.

1
TEXT HERE TEXT HERE TEXT HERE TEXT HERE

<a href="LINK HERE" class="button big blue">TEXT HERE</a>
<a href="LINK HERE" class="button big green">TEXT HERE</a>
<a href="LINK HERE" class="button big orange">TEXT HERE</a>
<a href="LINK HERE" class="button big gray">TEXT HERE</a>

2

TEXT HERE TEXT HERE TEXT HERE TEXT HERE

<a href="LINK HERE" class="button blue medium">TEXT HERE</a>
<a href="LINK HERE" class="button green medium">TEXT HERE</a>
<a href="LINK HERE" class="button orange medium">TEXT HERE</a>
<a href="LINK HERE" class="button gray medium">TEXT HERE</a>

3

TEXT HERE TEXT HERE TEXT HERE TEXT HERE

<a href="LINK HERE" class="button small blue">TEXT HERE</a>
<a href="LINK HERE" class="button small green">TEXT HERE</a>
<a href="LINK HERE" class="button small orange">TEXT HERE</a>
<a href="LINK HERE" class="button small gray">TEXT HERE</a>

4

TEXT HERE TEXT HERE TEXT HERE TEXT HERE

<a href="LINK HERE" class="button small blue rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small green rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small orange rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small gray rounded">TEXT HERE</a>

Now replace "LINK HERE" with the link which you want to add it to button and replace "TEXT HERE" with the text which you want to appear on your button.

That's all.I hope you will like these button.


If you liked this post, Please Share This !!

Unordered List

How To Create A Badge For Blog

How To Add Google Flag Translator To Blogger

Ad HTML Codes

125x125 Code

468x60

728x90

336x280

Automatic Backlink for Blogger and Website

How To Add Social Bookmarking Widget For Blogger

How to Add Design Labels Buttons For Blogger with CSS3

How to Add a Label Widget

How To Add Animated CSS3 Bubble Buttons To Blogger

1. CSS Part

2. HTML Part

Labels

Blog Archive

Ordered List

Blogger templates

Blogger news

Blogroll

About