All You Need To Know About Earning First $100 from Google Adsense Visit Post

How To Add Custom Social Share Button To Blogger(Blogspot) Mobile Version

Posted By : Satyendra Maurya | Last Update : 4:51 PM | Category : |

This is a tutorial post about how you can add a better sharing button than default Blogger's share in mobile version of Blog. One benefit of using custom share button on your mobile version of blog is that it looks beautiful and it will increase your blog respect on other users because they might haven't seen mobile share button on any other blogspot blog.
Here is a snapshot of the buttons :


So Here are the steps to be followed:

There are two main steps 1st is to add css and 2nd step to add the code.

1: Adding CSS Code

Open your blogger dashboard and move to Template>Edit HTML>1 click anywhere in template
Press ctrl+f to open search box and search for following code: ]]></b:skin>  and paste the below code above the ]]></b:skin>

#share-this{overflow:hidden;margin:20px auto 0 auto;line-height:1.4em;display:table;text-align:center}
#share-this h4{position:relative;overflow:hidden;margin:0 0 10px;letter-spacing:1px;font-size:120%;font-weight:700;padding:0 8px;text-align:center;transition:all 0.5s ease-out}
#share-this h4:before,#share-this h4:after{position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:&#39;\a0&#39;;background-color:#ddd}#share-this h4:before{margin-left:-50%;text-align:right;}#share-this span{position:relative;display:inline-block;padding:0 10px;margin:auto;}
#share-this a{float:left;display:block;color:#fff;padding:10px 14px;text-align:center;margin:0 3px 3px;font-size:12px}#share-this a.this-fb{background:#395796;}#share-this a.this-tw{background:#4cb0ea;}#share-this a.this-gp{background:#de3425;text-align:center;overflow:hidden}#share-this a.this-gp i{text-align:center;padding:0}#share-this a.this-fb:hover,#share-this a.this-tw:hover,#share-this a.this-gp:hover {opacity:.9}#share-this i{display:inline-block;margin:-3px 10px 0 0}
.this-fb i,.this-tw i,.this-gp i{background:url(http://1.bp.blogspot.com/-P3DOmXqEiCM/VkOW8tkzxGI/AAAAAAAAMpE/cBX9b0xTPU8/s1600/sosmed2.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}
.this-fb i{background-position:0 -100px;margin-top:-4px}.this-tw i{background-position:0 -150px}.this-gp i{background-position:0 -200px}.notpay {font-size:13px;line-height: 22px;border:2px #df3f2a solid;padding:3px 15px;text-align:center;margin:0 0 25px;}.pay {font-size:13px;line-height: 22px;border:2px #5973b0 solid;padding:3px 15px;text-align:center;margin:0 0 25px;}

2: Adding the main Code 


Search again for this code <span class='post-comment-link'> and go to end of this div tag and paste below code. for example see above picture.

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='shr-btn-scl'>
<div align='center'>
<div id='share-this'>
<h4><span>Share this Post Via:</span></h4>
<a class='this-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Facebook'><i class='fb-1'/>Share on Facebook</a><a class='this-tw' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Twitter'><i class='tw-2'/>Tweet on Twitter</a><a class='this-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Google+'><i class='gp-2'/><span class='gp-del'>Plus on Google+</span></a></div></div></div>  </b:if>
Now You are done!!! Enjoy blogging if there is any problem then you can ask in comments. 

33 comments:

  1. tank you for this code http://www.ajakiz.com/

    ReplyDelete
    Replies
    1. Welcome Raaxada For Using Techno Geek Zone.

      Delete
  2. Satyendra bhai how to show whatsapp button plz share html

    ReplyDelete
    Replies
    1. @Dinesh I tried my best efforts to implement the code for whatsapp button but failed to do so...However there are many third party apps which provides whatsapp button for mobile blogs such as addthis.

      Delete
  3. AnonymousMay 04, 2016

    Thank you! Greetings from Greece :)

    ReplyDelete
  4. I tried.But didnt work.I couldnt see the sharing buttons in mobile version.PS-the buttons are available in desktop version.

    ReplyDelete
  5. Excellent! Thank you! It's working in my site mobile view. Keep it up!

    ReplyDelete
  6. Than you a lot this post has really helped me. i blog at wizprof.com

    ReplyDelete
  7. Excellent post
    https://videographybloginfo.wordpress.com/

    ReplyDelete
  8. Innovative idea.
    https://mdasdrne7.wixsite.com/mysite

    ReplyDelete
  9. It works perfect. Thank you so much! Do you know how to show Like button after each post on the mobile view? The iFrame code generated from https://developers.facebook.com/ only works on desktop view.

    ReplyDelete
  10. This codes actually works. Thanks for the awesome post.

    http://basketballhooplab.com/

    ReplyDelete
  11. This was very helpful. Thanks.

    www.healthostyle.blogspot.com

    ReplyDelete
  12. Thank you, nice updated.... http://globallords.blogspot.com

    ReplyDelete
  13. Thank you because you have been willing to share information with us. we will always appreciate all you have done here because I know you are very concerned with our. The Sims Mobile Cheats

    ReplyDelete
  14. Enjoyed every bit of your blog.Thanks Again. Cool. Custom Aquariums

    ReplyDelete
  15. Understanding this voyage will help you in figuring out what advertising strategies would work best in spreading your message. rtb ad network

    ReplyDelete
  16. Cool stuff you have and you keep overhaul every one of us parental control

    ReplyDelete
  17. Mindblowing. Thank you. I like your website. Wordpress shortcut keys

    ReplyDelete
  18. I haven’t any word to appreciate this post.....Really i am impressed from this post....the person who create this post it was a great human..thanks for shared this with us. smm panels list

    ReplyDelete
  19. This is a very interesting article to read. Thank you for giving very good information. Nice post.
    bigo live is Nice app. connect friends and relatives.

    Download the application
    BIGO LIVE APK
    BIGO LIVE LOGIN
    MESSENGER APP
    BIGO MOD APK
    DOWNLOAD FREE BIGO LIVE APK
    EARN MONEY ONLINE
    LIVE BROADCASTINGS

    ReplyDelete
  20. I wanted to thank you for this excellent read!! I definitely loved every little bit of it. I have you bookmarked your site to check out the new stuff you post. justanotherpanel.com

    ReplyDelete
  21. Positive site, where did u come up with the information on this posting?I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work. indiansmartpanel.com

    ReplyDelete
  22. Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info. indian smm panel

    ReplyDelete
  23. if you to search lover.you can visit this website.
    pof search login

    ReplyDelete
  24. When you target clients, you need to ensure that you do that dependent on specific things, for example, their areas, the substance of the apps that they will view and others.App Development Company

    ReplyDelete
  25. Me2call4u is random Video chat, and connect with anyone from the anywhere in the world with a single swipe.

    ReplyDelete
  26. It is the best portal to pay bills online within minutes without any complications. It avails maximum possible flexibility to users to complete their tasks in real quick time. Apart from bill payments it also avails most popular and reputed brands products to customers in affordable prices. PayTM came into existence in 2010. paypal smm panel

    ReplyDelete

Although every comment is appreciated, Keep in mind that any link or keyword in the comments may be the reason for deletion of your comment. Thanks for understanding!

#Techno Geek Network

#Proudly Hosted on Blogger


DMCA.com Protection Status

©2014-2019 Techno Geek Network | Technology and Science is What You Make It! | Designed by Satyendra