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

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.

Read More

How To Add Flipper Sharing Widget Below Every Post In Blogger

Hi Friends , Today i am going to share about how to add flipper sharing widget below every post in your blogger and website. This widget make your  backlinks for sites and  increase your traffic.

 How To Add Flipper Sharing Widget Below Every Post In Blogger

    Go To Blogger.com > Design > Edit Html

    Find <data:post.body/> Using 

CTRL+F

Copy the code below and paste it just after <data:post.body/> tag.

      <style>

        /*--------TricksTeacher Flipper Sharing Widget ------*/

        .flipper a {

        display:block;

        height:48px;

        width:48px;

        padding:0 4px;

        float:left;

        background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAJLNFui31YHQTExxivlEq7jl_sZwEtH0UcDrMTXIL1M2MkE-RRKmgGpU1UNDFjcAqR1l9XyHdz8d8hzRTrOMbjpYtu8uqj8nrwbpHGyw4yertv0wC00gLwnG5CQyqAvlBoGFRbT9_hZeF/s1600/tricksteacher.png) no-repeat;

        -webkit-transition: ease-in 0.15s all; 

        -moz-transition: ease-in 0.15s all; 

        -o-transition: ease-in 0.15s all; 

        -ms-transition: ease-in 0.15s all; 

        transition: ease-in 0.15s all;

        cursor:pointer;

        }


        .flipper a.googleplus {

        background-position: 0px -348px;

        }

        .flipper a.googleplus:hover {

        background-position: 0px -406px;

        }


        .flipper a.pinterest {

        background-position: 0px -464px;

        }

        .flipper a.pinterest:hover {

        background-position: 0px -522px;

        }


        .flipper a.delicious {

        background-position: 0px 0px;

        }

        .flipper a.delicious:hover {

        background-position: 0px -58px;

        }

        .flipper a.digg {

        background-position: 0px -116px;

        }

        .flipper a.digg:hover {

        background-position: 0px -174px;

        }

        .flipper a.stumbleupon {

        background-position: 0px -812px;

        }

        .flipper a.stumbleupon:hover {

        background-position: 0px -870px;

        }

        .flipper a.technorati {

        background-position: 0px -928px;

        }

        .flipper a.technorati:hover {

        background-position: 0px -406px;

        }

        .flipper a.twitter {

        background-position: 0px -928px;

        }

        .flipper a.twitter:hover {

        background-position: 0px -986px;

        }

        .flipper a.facebook {

        background-position: 0px -232px;

        }

        .flipper a.facebook:hover {

        background-position: 0px -290px;

        }

        .flipper a.reddit {

        background-position: 0px -580px;

        }

        .flipper a.reddit:hover {

        background-position: 0px -638px;

        }

        .flipper a.rss {

        background-position: 0px -696px;

        }

        .flipper a.rss:hover {

        background-position: 0px -754px;

        }


        .Pleaseshare{

        margin:10px 0px;

        color:#333333;

        font-weight:bold;

        font-size:20px;

        font-family:sans-serif;

        }

        </style>


        <div class='flipper'>

        <b:if cond='data:blog.pageType == &quot;item&quot;'>

        <div class="Pleaseshare">

        Please Share it! :) </div>


        <!--Google Plus-->

        <a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>


        <!--Facebook-->

        <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>


        <!-- Twitter -->

        <a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>


        <!-- Pinterest -->

        <a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>


        <!-- Delicious -->

        <a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>


        <!--DIGG-->

        <a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>

        <!--Stumble-->

        <a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>


        <!-- Reddit -->

        <a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>

        <!--RSS -->

        <a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/>

        </b:if></div>

        <div style="clear:both"/>

Then save it and enjoy :)

Read More

Add A Horizontal Ribbon Menu With Hover Effect

Hello Friends. Today we are going to publish about a horizontal ribbon menu with hover effect.
Horizontal menu are the most necessary part of our blog.Now a days every bloggers are wanting to make his blog looks professional and for those bloggers this menu is better. This horizontal ribbon menu is created by fully CSS3 without using JavaScript and no any images uses so this menu is not effecting in your blog speed.It's hover effect is cool.


Add It On Your Blog


    Log In To Blogger.com
    Select To Layout And Add A Gadget
    Select HTML/JavaScript And Paste It Inside The Box.

Live Demo

<style>

.TricksTeacher-ribmenu span {
    background:#A81B6A;
    display:inline-block;
    font-family:verdana;

    line-height:3em;
    padding:0 1em;
    margin-top:0.5em;
    position:relative;
      -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
    -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
    transition: background-color 0.2s, margin-top 0.2s;
}
.TricksTeacher-ribmenu a:hover span {
    background:#FFD204;
    margin-top:0;

}
.TechBlogGuide-ribmenu span:before {
    content: "";
    position:absolute;
    top:3em;
    left:0;
    border-right:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}

.TricksTeacher-ribmenu span:after {
    content: "";
    position:absolute;
    top:3em;
    right:0;
    border-left:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}
.TricksTeacher-ribmenu a:link, .TricksTeacher-ribmenu a:visited {
    color:#000;
    text-decoration:none;
    float:left;
    height:3.5em;
    overflow:hidden;
}
.TricksTeacher-ribmenu:after, .TricksTeacher-ribmenu:before {
    margin-top:0.5em;
    content: "";
    float:left;
   border: 1.5em solid #A81B6A;
}
.TricksTeacher-ribmenu:after {
    border-right-color:transparent;
}

.TricksTeacher-ribmenu:before {
    border-left-color:transparent;
}
</style>

<div class='TricksTeacher-ribmenu'>
    <a href='#'><span>Home</span></a>
    <a href='#'><span>TricksTeacher</span></a>
    <a href='#'><span>Tricks</span></a>
    <a href='#'><span>jQuery</span></a>
    <a href='#'><span>CSS</span></a>
  
</div>

    Replace All The "#" With Your Own Blog Link.
    Now Save It And Enjoy

Read More

Add 8 Cool Dancing Twitter Bird On Your Blog And Website

Today i am going to share about adding  cool dancing twitter bird on your blog and 8 different style. twitter widgets which help to increase your blog traffic via twitter

�Go To Blogger Dashboard
�Select Layouts
�Add A Gadget
�Select HTML/JAVASCRIPT

 And Past The Below Code 

<object type="application/x-shockwave-flash" data="http://www.twpics.com/BUTTON3/twitbutton.swf" width="100" height="100"><param name="movie" value="http://www.twpics.com/BUTTON3/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=asadtariq77"></param><a href="http://tricksteacher.blogspot.com" title="http://tricksteacher.blogspot.com">http://tricksteacher.blogspot.com</a><embed src="http://www.twpics.com/BUTTON3/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="100" height="100" menu="false" wmode="transparent" flashvars="username=asadtariq77"></embed></object> 

<object data="http://www.twpics.com/BUTTON6/twitbutton.swf" height="80" type="application/x-shockwave-flash" width="180"><param name="movie" value="http://www.twpics.com/BUTTON6/twitbutton.swf"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="menu" value="false"></param>
<param name="wmode" value="transparent"></param>
<param name="flashvars" value="username=asadtariq77"></param>
<a href="http://tricksteacher.blogspot.com/" title="tricks teacher">online slots</a><embed src="http://www.twpics.com/BUTTON6/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="180" height="80" menu="false" wmode="transparent" flashvars="username=asadtariq77"></embed></object>

<object type="application/x-shockwave-flash" data="http://www.twpics.com/BUTTON0/twitbutton.swf" width="100" height="80"><param name="movie" value="http://www.twpics.com/BUTTON0/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=asadtariq77"></param><a href="http://tricksteacher.blogspot.com/" title="tricksreacher">mobile casino</a><embed src="http://www.twpics.com/BUTTON0/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="100" height="80" menu="false" wmode="transparent" flashvars="username=asadtariq77"></embed></object>

<object type="application/x-shockwave-flash" data="http://www.twpics.com/BUTTON7/twitbutton.swf" width="180" height="200"><param name="movie" value="http://www.twpics.com/BUTTON7/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=asadtariq77"></param><a href="http://tricksteacher.blogspot.com/" title="ts=tricks">tricks</a><embed src="http://www.twpics.com/BUTTON7/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="180" height="200" menu="false" wmode="transparent" flashvars="username=asadtariq77"></embed></object>

<object type="application/x-shockwave-flash" data="http://www.twpics.com/BUTTON8/twitbutton.swf" width="200" height="200"><param name="movie" value="http://www.twpics.com/BUTTON8/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=asadtariq77"></param><a href="http://tricksteacher.blogspot.com" title="tricks">mobile gambling</a><embed src="http://www.twpics.com/BUTTON8/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="200" height="200" menu="false" wmode="transparent" flashvars="username=asadtariq77"></embed></object>

<object type="application/x-shockwave-flash" data="http://www.twpics.com/BUTTON12/twitbutton.swf" width="182" height="202"><param name="movie" value="http://www.twpics.com/BUTTON12/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=asadtariq77"></param><a href="http://tricksteacher.blogspot.com" title="tricks">online casino Canada</a><embed src="http://www.twpics.com/BUTTON12/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="182" height="202" menu="false" wmode="transparent" flashvars="username=asadtariq77"></embed></object>

<object type="application/x-shockwave-flash" data="http://www.twpics.com/BUTTON13/twitbutton.swf" width="109" height="102"><param name="movie" value="http://www.twpics.com/BUTTON13/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=asadtariq77"></param><a href=http://tricksteacher.blogspot.com" title="tricks">tricks</a><embed src="http://www.twpics.com/BUTTON13/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="109" height="102" menu="false" wmode="transparent" flashvars="username=asadtariq77"></embed></object>

<object data="http://www.twpics.com/BUTTON2/twitbutton.swf" height="90" type="application/x-shockwave-flash" width="180"><param name="movie" value="http://www.twpics.com/BUTTON2/twitbutton.swf"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="menu" value="false"></param>
<param name="wmode" value="transparent"></param>
<param name="flashvars" value="username=asadtariq77"></param>
<a href="http://tricksteacher.blogspot.com/" title="tricksteacher">tricksteacher</a><embed src="http://www.twpics.com/BUTTON2/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="180" height="90" menu="false" wmode="transparent" flashvars="username=asadtariq77"></embed></object>

Replace Asadtariq77 with your twitter username.

Read More

Complete List Of Facebook Shortcuts

Today i am going to tell  you some tips and tricks about Facebook which made it more interesting. Some shortcuts and tips are posted below

Alt+ mOrShift+ Alt+ m New Message

Alt+ 0Or Shift+ Alt+ 0 Help Center

Alt+ 1OrShift+ Alt+ 1 Home Page

Alt+ 2 Or Shift+ Alt+ 2 Profile Page

Alt+ 3 Or Shift+ Alt+ 3 Manage Friend List

Alt+ 4 Or Shift+ Alt+ 4 Message List

Alt+ 5 Or Shift+ Alt+ 5 Notification Page

Alt+ 6 Or Shift+ Alt+ 6 Account Settings

Alt+ 7 Or Shift+ Alt+ 7 Privacy Settings

Alt+ 8 Or Shift+ Alt+ 8 Facebook Fan Page

Alt+ 9 Or Shift+ Alt+ 9 Facebook Terms

Alt+ ? Or Shift+ Alt+ ? Search Box

 

 

Read More

Add YouTube Subscribe Widget On Your Blog And website

Hello friends today i am going to post about youtube subscribe widget on your blog and website. If you will use this widget then you can increase your youtube subscriber easily.



 Add YouTube Subscribe Widget


    Go To Your Blogger Dashboard
    Select Layouts
    Add A Gadget
    Select HTML/JAVASCRIPT And Paste The Following Code In It.

<center><!--YouTube Subscribe Widget www.tricksteacher.blogspot.com--><iframe src=http://www.youtube.com/subscribe_widget?p=tricksteacher1 style="overflow: hidden; height: 130px; width: 260px; border: 0;" scrolling="no" frameborder="0"></iframe></center>

    Replace tricksteacher1 with your youtube channel name.
    All Done save widget and enjoy :)

Read More

How To Add Animated Google Plus Follower Box Widget In Blogger

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

Read More