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/AVvXsEi5HtE-ri47oRFVt64ne9zhOALP80nWW9gQJa9DjdXhgPg-jWmkmbUBSTGh5LvpUiLpjXVJxBV-tL0jgfyZSS64v3QAbNam5wglYMkAklDC3469MTxGLuuPQTaNG0Vcdtqrn85dXwN61JzD/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=primalgoyal"></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=primalgoyal"></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=primalgoyal"></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=primalgoyal"></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=primalgoyal"></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=primalgoyal"></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=primalgoyal"></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=primalgoyal"></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=primalgoyal"></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=primalgoyal"></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=primalgoyal"></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=primalgoyal"></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=primalgoyal"></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=primalgoyal"></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=primalgoyal"></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=primalgoyal"></embed></object>

Replace primalgoyal 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=tricksteaching1 style="overflow: hidden; height: 130px; width: 260px; border: 0;" scrolling="no" frameborder="0"></iframe></center>

    Replace tricksteaching1 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 ...

Floating Social Media Slide out Widget For Blogger

Floating social media slide out stick to right site of your blogger. When you mouse over then you will see a slide out option. This widget has created completely with CSS and when you scroll down then the widget will also scroll down up to edge of your footer bar.


 Go to Blogger.com

Select your Layout.

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

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



Live Demo

<style type='text/css'>
.tricksteacherFSS a, .slider-tooltip p{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.slideshow-chunk>div{-webkit-transition:all .8s ease-in-out;-moz-transition:all .8s ease-in-out;transition:all .8s ease-in-out}
.tricksteacherFSS {height:150px;left:50%;position:fixed;top:200px;width:18px;z-index:5;margin-left:495px}
.tricksteacherFSS a{display:block;margin-left:133px;width:19px;height:20px;position:absolute;top:0;right:0;color:#fff!important;text-decoration:none;text-transform:uppercase;font-size:10px;font-weight:700;line-height:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuud6izRif_f4WisEgk1ReIlCyvzq3-PO5omb03Nh3pO5vn_GTqCc5PkHFGE_bpYn9ws29D2jNAG7zO4n4qIZnoqzBA-8w6K4-DddcWrT7CZRnSEPTnAlgiyiuNueOy2Fq0DpNx16_V8dj/s320/BS+FSS.png) no-repeat;overflow:hidden}
.tricksteacherFSS a span{min-width: 152px;padding: 2px;display:block;visibility:hidden;min-width:152px}
.tricksteacherFSS a:hover{min-width:133px;padding-left:25px;-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}
.tricksteacherFSS a:hover span{visibility:visible;position:absolute;top:0;left:25px}
.tricksteacherFSS a.BSfacebook{background-position:3px -15px;top:20px;background-color:#526ca5}
.tricksteacherFSS a.BStwitter{background-position:3px -36px;top:40px;background-color:#75ddfe}
.tricksteacherFSS a.BSrss{background-position:3px -55px;top:60px;background-color:#f6a858}
.tricksteacherFSS a.BSmail{background-position:3px -75px;top:80px;background-color:#c1c1c2}
.tricksteacherFSS a.BSfacebook:hover{background-color:#526ca5;background-position:5px -15px}
.tricksteacherFSS a.BStwitter:hover{background-color:#75ddfe;background-position:5px -36px}
.tricksteacherFSS a.BSmail:hover{background-color:#c1c1c2;background-position:5px -75px}
.tricksteacherFSS a.BSrss:hover{background-color:#f6a858;background-position:5px -55px}
.tricksteacherFSS a.BSfacebook:active{background-color:#294a90}
.tricksteacherFSS a.BStwitter:active{background-color:#40b5fe}
.tricksteacherFSS a.BSmail:active{background-color:#909090}.tricksteacherFSS a.BSrss:active{background-color:#f37526}                                                                                                                                  /*widget by www.tricksteacher.blogspot.com */
</style>
<div class='tricksteacherFSS'> <a class='BSfacebook' href='https://www.facebook.com/asadtariq786' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;Facebook&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;exnav-soc&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='Facebook'><span>Join Us on Facebook</span></a> <a class='BStwitter' href='https://twitter.com/asadtariq77' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;Twitter&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;exnav-soc&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='Twitter'><span>Tweet Us On Twitter</span></a> <a class='BSrss' href='/feeds/posts/default' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;RSS&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;invite-follow&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='RSS Feed'><span>Visit Our rss feed</span></a> <a class='BSmail' href='mailto:asadtariq77@gmail.com' onclick='dcsSetVar(&apos;WT.z_iLinks&apos;,&apos;Email&apos;,&apos;WT.z_iLinks_actionoffer&apos;,&apos;invite-email&apos;,&apos;WT.z_iLinks_targetcampaign&apos;,&apos;src-gs&apos;);' target='_blank' title='Email'><span>Newsletter</span></a></div>

    Replace  asadtariq786 with your Facebook name.
    Replace  asadtariq77 with your twitter name.
    Replace asadtariq77@gmail.com with your email address.

Read more ...