How to Flipper Social Sharing Widget on Blogger

When ever you create blog and write article and post,then next you want that people open your site and open your post but if you are not ge...

When ever you create blog and write article and post,then next you want that people open your site and open your post but if you are not getting Traffic for your site so there is many reasons for it. First will be able to friendly with SEO and its structure can be good too. Your Template have no error that is effective for you to get Traffic after that if you have no visitor their is only one reason that you are not sharing your blog/site on social networks. Its is very important to share your articles on social networks. When any visitor like your article he want to share this with others and if you are no add many social sharing widget so this is the big reason for that your Website is not popular so if you want to became popular so add share widget on blog/site. so in this article I gonna be represent you must popular Flipper Sharing widget. You can see below.

Its work very well and Flip when click by visitor. Its is very simple to add in blog.

How to Flipper Social Sharing Widget on Blogger?

I have simple step to add this widget on blogger.

Go to your blogger Dashboard and select a blog where you want to add widget.

Go to Template >Edit HTML.

Click anywhere in the HTML box and press (Ctrl+F)  a search bottom will appear. Search  the following codes in it.

<data:post.body/>

After search this code. Paste the following codes just below this tag.

<style>

/*--------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/AVvXsEjrSpQbjDnueHn3hjGthdk9Y1ROhZjpYXEShX8PGKlt_fVYTXXi3nKaVe6rrq-2oGg5KXiZNtlrG9rqtNEWR-gwQnFmpdxc-UXEIgZUzGzDMYg9-hSV0T8eGXwzfe6w7VvJUNZx4ZsNxhqe/s1600/flipper.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"/> 

How to customize Sharing text?
To change sharing text you want to search this code.

#333333

You can also remove and change image in sharing bottom. For example if you want to remove Reddit bottom so remove its code just so this code below.

 <!-- 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;'/>

Remove this code to remove Reddit share bottom.