Menu

Lovely Cute
  • More Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Dream Fun Product

    Drop Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Home
  • About
  • Contact
  • Sitemap
  • Others
    • Gambar Lucu
    • Infografis
    • Inspirasi
    • Motivasi
    • Photoshop
    • Teka-teki
    • Tips
    • Ucapan

Quicker BD

  • Menu
  • Home
  • Blogger
    • SEO
      • SEO 1
      • SEO 2
    • CSS
      • CSS 1
      • CSS 2
      • CSS 3
      • CSS 4
      • CSS 5
    • Jquery
      • Jquery 1
      • Jquery 2
  • Music
    • Product 1
      • Sub Item
      • Sub Item
    • Product 2
      • Sub Item
      • Sub Item
  • Flat UI
  • Features
Home » Blogger CSS » Blogger Tutorial » Blogger Widget » How-to » Flipper Social Sharing Widget for Blogger

Flipper Social Sharing Widget for Blogger

After creating blog and updating with different articles all we need is that traffic. Traffic / visitors to our blog is main thing. Without them our blog is nothing. and if it is your question that why your blog is not getting traffic, even a single visitors then there should be numbers of reason which you have to improve in your site in order to get visitors entered into your site/blog. after creating a new blog just writing articles isn't enough, you will have to select an SEO friendly template design and also your article should be in quality and helpful to your readers. if you are done with this then next thing will be come that you will have to do is adding social sharing buttons or widgets inside your blog. Yes, this also one of the important thing that your blog must have social sharing widgets so that you can get benefited by social circulation.

Flipper Social Sharing Widget for Blogger

Well, if you have done with everything correct on your blog and just looking for a best social sharing widget for your blog then we are here with an another social sharing widget for blogger called "Flipper social sharing widget". Widget has an animated flipping effects which works based on pure CSS and HTML. As you can see below animated image, it is about how actually this widget works. widget has covered almost social website icons to be shared your blog articles on the social networking sites. It contains : Google Plus, Facebook, Twitter, Pinterest, Delicious, Digg, Stumble upon, Reddit, RSS. After adding this widget to your blog if you want to remove any icons from the widget or any other changes into the widget, you will be enable to do it as well. So, follow the steps given below to add this widget to your blogger blog.

Also see : Adding CSS Sprite Animated Social Media Icons to Blogger / Blogspot

How to Add Flipper Social Sharing Widget to Blogger?

Go to blogger dashboard>template>edit HTML
Press CTRL + F to enable search box, then search for the following code :

<data:post.body/>

And now, just below it paste the following HTML code.

<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/AVvXsEg3MzkSUyVH3MKqpWqpQbb0PcoD_lyB5XFp9MREyBOkRXjM9i-w1jc3EpPO4k9bGybjtU6ZkKvqtvPsZcCfm-E00No_2fePNEHqTslIgJIOz3RBKhyphenhyphenZYqJSLTm5JfiEJikZwcN4JfRQVCJh/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"/>

Make these changes:

---To change the color of the text that appears on top of widget edit #333333
---If in case you wanted to remove some icons then just delete its code. For example if we wish to remove the Digg icon from the list then we just need to delete the code:

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

That's all !

Drop your questions and comments below :)
Add Comment
Blogger CSS Blogger Tutorial Blogger Widget How-to

Share

Like

G+

Tweet

Tweet
Related Posts

Show Conversion CodesHide Conversion Codes
Show EmoticonHide Emoticon
Newer Older Home
Powered by Blogger.

Weekly Posts

  • How to Add A Transparent Notification Bar To Blogger
    How to Add A Transparent Notification Bar To Blogger
  • Xmas "Flying Santa Claus" Widget for Blogger
    Xmas "Flying Santa Claus" Widget for Blogger
  • Supreme V2 ( Version 2) Responsive Blogger Template Download for free
    Supreme V2 ( Version 2) Responsive Blogger Template Download for free
  • How to Add Animated Flying Android Man Widget to Blogger
    How to Add Animated Flying Android Man Widget to Blogger
  • Create a Free Blog with Blogspot.com
    Create a Free Blog with Blogspot.com
  • How to Embed YouTube Videos In Blogger Posts
    How to Embed YouTube Videos In Blogger Posts
  • Use A Drop Cap Large First Letter In Posts On Blogger
    Use A Drop Cap Large First Letter In Posts On Blogger
  • Download Best and SEO Friendly Blogger Templates for your Blog
    Download Best and SEO Friendly Blogger Templates for your Blog
  • Flash SWF file Embed Code Generator
    Flash SWF file Embed Code Generator
  • Simple Recent Posts Widget for Blogger / Blogspot
    Simple Recent Posts Widget for Blogger / Blogspot

Blog Archive

  • ►  2017 (2)
    • ►  October (1)
    • ►  May (1)
  • ►  2016 (5)
    • ►  October (1)
    • ►  September (1)
    • ►  March (1)
    • ►  February (2)
  • ►  2015 (28)
    • ►  November (1)
    • ►  September (7)
    • ►  August (2)
    • ►  July (1)
    • ►  June (1)
    • ►  April (3)
    • ►  March (3)
    • ►  February (5)
    • ►  January (5)
  • ▼  2014 (105)
    • ►  December (4)
    • ▼  November (6)
      • Flipper Social Sharing Widget for Blogger
      • Add jQuery Link Nudging On Links Hover For Blogger...
      • Are you using SSL ? As Now It Is A Ranking Factor !
      • Featured images not showing up on blogger index/pa...
      • jQuery to Turn off or Turn on the lights while wat...
      • Add Facebook Like Button Below Post Titles (Blogger)
    • ►  October (1)
    • ►  September (8)
    • ►  August (12)
    • ►  July (14)
    • ►  June (5)
    • ►  May (11)
    • ►  April (5)
    • ►  March (15)
    • ►  February (24)

Labels

  • Facebook
  • twitter
  • googleplus
  • linkedin
  • youtube
  • flickr
  • vimeo
  • deviantart

Copyright Quicker BD 2018

Published By Gooyaabi Templates