In this tutorial you learn to add social sharing buttons to each of your blogger posts . These responsive buttons for social sharing remain at the top or at the bottom of each blog post. It helps your blog visitors to share your content on social media networks without leaving your blog page.

 add social media buttons to blogger posts "src =" https://2.bp.blogspot.com/-MqwcEDrhBaU/WZ7VoAEx2KI/AAAAAAAARzQ/-8EPNM2m0x0kmKDcKHhg-ey8I1VKou9EwCLcBGAs/s1600/add-social-media -button -blogspot-blogs.jpg "/> </p>
<p> This gadget <a href= for 1945 blogs is a lightweight version of JumboShare Counter . I will call it that JumboShare Simplified . It loads faster and takes up negligible charging time. Loading time is an important SEO factor and Google only ranks higher in SERPs when your web page loads faster and offers a user-friendly interface.

I created this lightweight gadget for sharing by aligning all important social media buttons horizontally. Users can switch the gadget to expand or collapse the number of displayed buttons for sharing.

This gadget contains the following buttons for social media :

  1. Facebook
  2. GooglePlus +1
  3. Twitter
  4. LinkedIn
  5. Pinterest
  6. StumbleUpon
  7. Buffer
  8. Viber Will automatically appear on mobile devices
  9. Whatsapp Car displayed in mobile devices
  10. Print

These buttons have exactly the same appearance and style as their official counterparts. It uses the official stylesheet for Facebook, Google, Twitter and the rest.

 social sharing buttons for blogspot blogs "src =" https://1.bp.blogspot.com/-e38urJc9BdA/WZ7Vp0I4GhI/AAAAAAAARzU/QhQGnfhCrkA8_a7z0s4eUYtBwDoREFgFwCLcBGAs/s1600/jumboshare-sharing-buttons.jpg "/> </p>
<p> The buttons for <strong> viber </strong> and <strong> whatsapp </strong> are only displayed on mobile devices such as smartphones. Your visitors can now share your blog posts with their viber contacts and whatsapp friends. I am using <a href= IsMobileRequest condition to allow these buttons to display only smartphones instead of using CSS view: none.

You can choose to show this gadget for social sharing, just under blog post title or you can display it on the bottom of every blog post . Let's go straight to work.

Note: If you use the Jumboshare counters plug-in, you must delete it first.

Add social media buttons to blogger posts

Follow these simple steps:

  1. Go to Blogger> Theme> Back up your theme
  2. Click Edit HTML
  3. Search for ]]> and paste the following CSS code just above ]]>


    / * ##### JumboShare Simplified ####### * /

    # MBT shares-wrap {margin: 20px 0px; border-top: 1px dotted #eee; fill: 10px 0; border-bottom: 1px dotted #eee; overflow: hidden}

    #MBT shares {display: inline-block; overflow: hidden; text-align: left; white-space: nowrap; font-family: arial; font-size: 11px; margin: 0px 5px 0; line height: 1,4em;}

    #horiz {position: relative; padding: 0; margin: 0;}

    #horiz #MBT shares {position: relative; top: -8px; padding top: 20px;}

    #MBT shares a: hover {text-decoration: none! Important;}

    / *** Facebook *** /

    .mbt-fb {background: transparent linear gradient (# 4C69BA, # 3B55A0) repeat scroll 0 0; edge: medium no; edge radius: 2px; color: #FFF; cursor: pointer; font weight: 700; height: 20px; line-height: 20px; padding: 0 6px; text-shadow: 0 -1px 0 # 354C8C; white-space: nowrap; text-shadow: 0 -1px 0 # 354C8C}

    .mbt-fb: focus, .mbt-fb: hover, .mbt-fb: active {background: transparent linear gradient (# 5B7BD5, # 4864B1) repeat scroll 0 0; border color: # 5874C3 # 4961A8 # 41599F; subject shadow: 0 0 1px # 607FD6 bet}

    .mbt-fb i {padding: 2px 2px 0 4px; font size: 11px; color: # 3B5998; background: #fff; margin-right: 4px; margin-top: 3px}

    .mbt-fb: hover, .mbt-fb: visited, .mbt-tw: hover, .mbt-tw: visited, .mbt-linkedin: hover, .mbt-linkedin: visited {color: #fff! important;}

    / *** Gplus, Pinit, Stumbleupon *** /

    .mbt-gp {subject shadow: 0 1px 0 rgba (0,0,0,0.05); transition: background color .218s ease 0s, edge color .218s convenience 0s, box shadow .218s convenience 0; background color: #FFF; background image: none; edge: medium no; edge radius: 2px; edge: 1px fixed rgba (0,0,0,0,17); color: # 262626; cursor: pointer; font weight: 700; height: 20px; line-height: 20px; padding: 0 6px 0 4px; white-space: nowrap}

    .mbt-gp: hover, .mbt-gp: visited {color: # 262626! Important;}

    #MBT shares .pinit {background: # f9f9f9! Important}

    #MBT is sharing .stumb {background: # f0fafe! Important; border: 1px solid # cde3ea}

    #MBT shares .stumb: hover {border: 1px solid # b7d5df; box-shadow: 0 1px 0 rgba (0,0,0,0.1)}

    #MBT is sharing .stumb i {color: # eb4823! Important; font-size: 13px! Important; margin-top: 1px! Important}

    .mbt-gp: focus, .mbt-gp: hover, .mbt-gp: active {border: 1px solid rgba (0,0,0,0.25); box-shadow: 0 1px 0 rgba (0, 0,0,0.1)}

    .mbt-gp i {padding: 2px 2px 0 0; font size: 11px; color: # DB4437; margin-right: 2px; margin-top: 3px}

    .mbt-gp .fa-pinterest {padding: 0 2px 0 0; font-size: 14px}

    #MBT shares .bufferimg {width: 15px; margin-top: 2px; fill: 0 1px 0 0; }

    / *** LinkedIn *** /

    .mbt-linkedin {transition: background color .218s convenience 0s, randkleur .218s convenience 0s, vakschaduw .218s convenience 0; background color: # 0077B5; text shadow: 0 -1px # 005887; border: medium no; edge radius: 2px; edge: 1px solid # 066094; color: #fff; cursor: pointer; font weight: 700; height: 20px; line-height: 20px; padding: 0 2px 0 1px; white-space: nowrap}

    @ media screen and (-webkit-min-device-pixel-ratio: 0) {

    .mbt-linkedin {fill: 0 5px 0 1px}

    }

    .mbt-linkedin: focus, .mbt-linkedin: hover, .mbt-linkedin: active {border: 1px solid # 0369A0; background color: # 0369A0}

    .mbt-linkedin i {fill: 0; font size: 17px; color: #FFF; margin: right: 0; position: relative; left: 1px}

    .mbt-linkedin .ibg {background: # 0369A0 none repeat scroll 0 0; width: 17px; display: inline-block; border-right: 1px solid # 006095; border radius: 2px; height: 20px; padding: 0 2px 0 1px; margin: 0 2px 0 -1px}

    / ** Twtter, Print, WhatsApp, Viber ** /

    .mbt-tw {position: relative; height: 22px; padding: 4px 8px 1px 4px; font: 700; color: #FFF; cursor: pointer; background color: # 1B95E0; edge radius: 3 px; box-sizing: border-box}

    .mbt-tw: focus, .mbt-tw: hover, .mbt-tw: active {background-color: # 0C7ABF}

    .mbt-tw i {fill: 0 0 0 1px; font size: 14px; color: #fff; margin-right: 2px; margin-top: 0}

    .mbt-o {max-width: 100%}

    .mbt-o, o-.mbtcount, .mbt-fb, .mbt-gp, .mbt-linkedin, .mbt-tw, .label called, # mbtcount {display: inline-block, vertical-align: top}

    .mbtcount-o {position: relative; min-width: 15px; height: 17px; text-align: center; padding: 1px 5px; margin-left: 2px; background: #FFF none repeat scroll 0 0; border: 1px fixed # e7e7e7; edge radius: 2px; view: none! Important; }

    #MBT shares .printme {background color: # 333;}

    #MBT shares .printme: focus, # MBTshares .printme: hover, # MBTshares .printme: active {background-color: # 000}

    #MBT shares .whatsapp {background-color: # 73D40B;}

    #MBT shares .whatsapp i {font-size: 15px! Important;}

    #MBT is sharing .whatsapp: focus, # MBT is sharing .whatsapp: hover, # MBTshares .whatsapp: active {background-color: # 65BA09}

    #MBT shares .viber {background color: # 7b519d;}

    #MBT shares .viber: focus, # MBTshares .viber: hover, # MBTshares .viber: active {background-color: # 8558aa}

    #MBT shares .viberimg {width: 13px; margin-top: 0px; fill: 0 3px 0 0; }

    #mbtcount {color: # 666; white-space: nowrap; text-decoration: none; padding: 2px 0 0}

    #mbtcount: hover {text-decoration: none}

    #MBT shares .arrow {height: 0; left: -10px; position: relative; top: -15px; width: 5px; z-index: 2}

    #MBT shares .ext {min-height: 18px! Important}

    #MBT shares .arrow s, # MBTshares .arrow i {border-color: transparent # e7e7e7; border-style: solid; border-width: 4px 5px 4px 0; display: block; position: relative; top: 19px}

    #MBT shares .arrow i {border-right-color: #FFF; left: 2px; top: 11px}

    .Share-btn {position: relative; display: inline block; -display: none important;}

    .share-btn .h2 {font-size: 30px; font weight: 700; font-family: arial; color: # 73D40B; height: 31px; line height: 1,4em;}

    .share-btn .h4 {font-size: 12px; font-family: arial}


    / * ######### Switching horizontally ########### * /

    .switchoff2 {display: inline-block;}

    .mbtswitch2 {fill: 0 15px 0 3px; position: relative; top: -15px; margin: 20px 0 0 3px; display: inline block; max-width: 30px; height: 20px; cursor: pointer; background -color: #fff; border: 1px solid #eee; border radius: 2px; outline: 0 none; font: 16px fontawesome; color: #ddd}

    .mbtswitch2: hover {color: # 73D40B}

    .mbtswitch2 i.active:after{content:&#39;f067&#39;;position:relative;left:7px;top:2px;font-style:normal}

    .mbtswitch2 i.inactive: after {content: & # 39; f068 & # 39 ;; position: relative; left: 7px; top: 2px; font-style: normal}

    @media only screen and (max-width: 230px) {

    .tount {border-bottom: 2px solid # 74D50C; border-right: none; min-width: 100%;}

    #horiz #MBTshares {width: 100%;}

  4. Paste the following code just above in your template:
    OPTIONAL STEP ) Skip this step if you have already added JQuery and FontAwesome libraries to your templates.

    https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

  5. Then add the following jQuery script just above tag


    // / * ##### FREE JUMBOSHARE SIMPLIFIED #######

    Developed by: www.MyBloggerTricks.com

    Dual licensed under the MIT license and GPL license.

    Copyright (c) 2015-2016 STCnetwork.org

    * /

    $ (document) .ready (function () {

    $ (".mbtswitch"). Click (function () {$ ("Disable") SlideToggle (); if ($ (". Mbtswitch i"). Attr ("class") === "active") {$ (". Mbtswitch i" ) removeClass ("active"). addClass (& # 39; inactive & # 39;)} else if ($ (".mbtswitch i"). attr ("class") === "inactive") {$ (" .adtswitch i ") removeClass (" inactive "). addClass (& # 39; active & # 39;)}});

    $ (".mbtswitch2"). Click (function () {$ (". Switchoff2") SlideToggle (); if ($ (". Mbtswitch2 i"). Attr ("class") === "active") {$ (". Mbtswitch2 i" ) removeClass ("active"). addClass (& # 39; inactive & # 39;)} else if ($ (". mbtswitch2 i"). attr ("class") === "inactive") {$ (" .adtswitch2 i ") removeClass (" inactive "). addClass (& # 39; active & # 39;)}});

    });

    //]]>

  6. Save your template.

Add social media buttons to the top / bottom of each blog post

 Add sharing buttons in blogger "src =" https://2.bp.blogspot.com/-8T6mIB3zOkQ/WZ7VoFvHVYI/AAAAAAAARzM/G54W7pvIII8M_Nrd93rkbz051XAIqcj2QCLcBGAs/s1600/blogger-social-sharing-buttons.jpg "/ > </p>
<p> Follow these simple steps to add share buttons, just below each blog post title or footer of the post: </p>
<p> Search in your theme <code> <data:post.body/> </code>. This code is located twice, once for mobile viewing and once for desktop viewing. Therefore, only consider the second appearance of <code> <data:post.body/> </code>. </p>
<p><strong> <strong> <u> Comment </u> </strong>: If you want to display this horizontal dividing bar <em> below the message titles, </em> then paste the following HTML code correctly <strong> above </strong> <code> <data:post.body/> </code> but if you want to display the subbar at <em> at the bottom of each blog post </em> then simply paste the following HTML code <strong> under </strong> <code> <data:post.body/> </code> </p>
<p> If you want to display the share buttons above and below each blog post, paste the following HTML code once <code> <data:post.body/> </code> and once under <code> <data:post.body/> </code>. </p>
<blockquote>
<p> <b:if cond='data:blog.pageType ==

Customized guide:

  • All button locations are labeled for easy readability. You can easily change / swap the locations of the buttons in the widget.
  • Replace stc_network with your buffer handle or profile user name or just your blog title without spaces.
  • To view a social media button on mobile devices only, paste the code in the yellow tags tagged.
  • All buttons in the purple tags are hidden when the page is loaded and are only displayed when the user clicks the +/- button. Buttons are displayed with this toggle button, which we have called the switch .
  • If you want to add more buttons in the switch, simply copy the code and paste it into the purple switch labels.
  • If you want to remove buttons on the inside of the switch, copy the code of the button and paste it above the switch tag, ie

Save your template and you're done!

Need help getting some buttons for sharing in Blogger?

Let me know if you have any questions. I would be happy to answer all your questions. More interesting tutorials on the go because I am a blog again. Peace buddies! =)

Leave a Reply

Your email address will not be published. Required fields are marked *