Sunday, 15 January 2017

Flipper Social Share Widget /Share Button For Blogger/Blogspot

Flipper Social Share Widget /Share Button For Blogger/Blogspot


Flipper Social Share Widge
Social Share Widget is very important widget .Friends as you know that last days I was do a post in which I was explaining that how can you promote your blog Free .I was also tell that show your blog to people .what actually it is. But if you are showing your post one by one then you will need more time. And if you want to share your post on Facebook,twitter,google plus (Social Share Widget)
…..etc .then first you will copy your posts links then you must have go to social network site and there you will past you link .after doing this long process then you can able to share your post on face book or other social network .This is very long process .And never any user or visitor will do that . that’s way you can’t get more page views .and you are going back day by day. Now no need to be worry. I have carried for you the simplest solution for free sharing your post or website without leaving post page. Friends as you know that social network plays very important role in hitting of website/blog. If you want to take high traffic then you must need to share (Social Share Widget) your website/posts/blog .Million’s people use the social network. in this generation every one connect with social network .A lot of people using social network for his quires .the Google search engine will index your website/blog/posts. You can take page rank but after a long time .But in social network just share your post and the traffic will start .NO need to wait .that’s way I m telling that .That social network widget is very must for every blogger. Especially for new blogger .the widget will create you blogger most attractive and responsive. Anyone can share with leaving post. Just click on button the post will automatically will share.
I recommend to add Social Share Widget in your blogger

Don't forget to add these widgets because these widget will make you blogger more attractive as you add social share widget/share button.

Make Your Blogger More Responsive
If you want to add some more stylish and beautiful widget to your blogger to make him more attractive

If you want To change the color of the text which appear on top of social widget then you can.
Just find this color #660099
And replace any color which you chose .But if you want to choose your favorites color then click here for color chart .you can select any one color just copy your choose color code and replace with upper color code.

Now procedure how to Add Social Share Widget in Your Blogger template.

Now I m going to show you some easy steps to add this widget.
  • First Login your blogger dashboard
  • Go>to Template>click on Edit HTML
  • After click a page will open I mean the code area will open 
  • Now click under the code area and Press Ctrl + F form you keyboard a small search box will open upper in code area corner.
    Flipper Social Share Widge
Copy the below tag and find it in your template.

<data:post.body/>


Flipper Social Share Widge

But remember you will find up to 4 time this tag in your template .but select only the 2nd one tag in the template.
Now copy the Code which is given below and past below/after the tag and save the template .Open any one post in your blogger.

Social Share Widget code copy from here and past below the upper tag

Please don't edit the code if you edit then the code will not working.


<style> /*--------http://bloggerhints.com/ ------*/ .flipper a { display:block; height:48px; width:48px; padding:0 4px; float:left; background:transparent url(https://2.bp.blogspot.com/-OAUHLLiZSiY/WHsx5Cg6OGI/AAAAAAAACEk/4hYuPBb0qncq2_Rhwxnywsy5IEmetLU9wCLcB/s640/bloggerhintspng3.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:#660099; 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"> Don't Forget to 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"/>

Your social share widget will appear below(in the post footer).
Friends If you want to remove any social network
No need to add any username because this widget will help your user to share your post without leaving your post. I mean they can share your post automatically by pressing the any social button.

 Demo of social button blogger hints

If  you want to remove some icons from Social Share Widget then just remove its code from upper code. For example if you want to delete Digg icon from the list then just need to remove the next 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;'/>

Friends this is not too hard adding Social Share Widget .But a lot people couldn’t add this code .fresh blogger if you couldn’t add this widget then no need to worry just contact Us I will solve you problem.

Thank you.

For advertising please Contact us

You Might Also Read These Posts 

Previous Post
Next Post

1 comment:

  1. Wow sir superb Share buttons I have added this on my blog CodiWebDesign.com please check it

    ReplyDelete