Optimized Social Share Buttons For Blogger

Social share buttons like Facebook, Twitter, and LinkedIn etc. has become one of the basic features of your blogger blog, and why not?

It improves your blog’s visibility and easily allows your readers to take part in your social media campaign. But it is also necessary to have a website, as well as mobile devices, optimized social share button.

Because if your share buttons are not visible on mobile devices than you will lose a huge amount of shares.

This also helps your website to get more traffic and ultimately helps you rank high in search engines.

So, if you let your visitors have stylish, customized social share buttons, it will be a positive front for your visitors and your visitors will like and share within seconds.

Just follow the steps carefully and you will be done in minutes.

Step 1. Click on Theme and Edit HTML

Step 2. Find end of the head tag /head (Ctrl + F)

Step 3. Copy the below code and paste the code right above the (/head) tag.

Step 4. Save

Before you make changes your template, kindly backup your template and it is a good practice to always backup your template because if editing does not work perfectly then you will be able to retrieve it later. So, let’s go.

Step 5. In your HTML template editing window, find “ (]]<>b:skin)”

Step 6. Paste the below code just above the “ (]]<>b:skin)” code and click Save

This will successfully add CSS to your template and now the real magic, the social share buttons.

/* CSS Share Button

----------------------------------------------- */

.tlp_post_sharebar {background:none;position:relative;z-index:2;width:100%;display:inline-block;margin:5px 0px;padding:10px 0;font-family:sans-serif;border-bottom:1px dotted rgba(0, 0, 0, 0.05);border-top:1px dotted rgba(0, 0, 0, 0.05);}

.tlp_post_sharebar .tlp_Share_buttons {display:block;}

.tlp_post_sharebar .tlp_Share_buttons .wrap {display:inline-block;text-align:center;min-width:41px;margin:0 auto;}

.tlp_post_sharebar .tlp_Share_buttons .wrap1 {float:left;display:inline-block;width:31px;}

.tlp_post_sharebar .tlp_Share_buttons ul {margin:0;padding:0;}

.tlp_post_sharebar .tlp_Share_buttons ul li a, .tlp_post_sharebar .tlp_Share_buttons ul li a:hover {display:block;text-decoration:none;color:#FFF !important;cursor:pointer;height:100%;line-height:25px;}

.tlp_post_sharebar .tlp_Share_buttons ul li {float:left;list-style:none;list-style-type:none;margin:1px;padding:0;width:16%;max-width:115px;display:inline-block;overflow:hidden;font-size:13px;line-height:25px;text-align:left;height:25px;color:#fff;border: 1px solid rgba(0,0,0,0.04);-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}

.tlp_post_sharebar .tlp_Share_buttons ul li .fa {font-family:FontAwesome;font-weight:normal;background-color:rgba(0,0,0,0.1);color:#fff;font-size:17px;display:inline-block;text-align:center;padding:0;width:30px;height:25px;line-height:inherit;border-right:1px solid rgba(0,0,0,0.05);}

.tlp_post_sharebar .tlp_Share_buttons .button_fb {background:#3a579a;}

.tlp_post_sharebar .tlp_Share_buttons .button_fb:hover {background:#314a83;}

.tlp_post_sharebar .tlp_Share_buttons .button_twtr {background:#00abf0;}

.tlp_post_sharebar .tlp_Share_buttons .button_twtr:hover {background:#0092cc;}

.tlp_post_sharebar .tlp_Share_buttons .button_gplus {background:#df4a32;}

.tlp_post_sharebar .tlp_Share_buttons .button_gplus:hover {background:#be3f2b;}

.tlp_post_sharebar .tlp_Share_buttons .button_pntrst {background:#cd1c1f;}

.tlp_post_sharebar .tlp_Share_buttons .button_pntrst:hover {background:#ae181a;}

.tlp_post_sharebar .tlp_Share_buttons .button_linkdin {background:#2554BF;}

.tlp_post_sharebar .tlp_Share_buttons .button_linkdin:hover {background:#224EB4;}

.tlp_post_sharebar .tlp_Share_buttons .share.h6 {font-size:14px;font-weight:bold;text-shadow:none!important;text-decoration:none;text-align:center;color:#333;margin-top:3px;}

.tlp_post_sharebar .tlp_Share_buttons .share {border:none;margin:0px 5px 0px 1px;overflow:visible !important;width:95px !important;}

.tlp_post_sharebar .tlp_Share_buttons .button_fb .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_twtr .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_gplus .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_pntrst .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_linkdin .share-buttons {position:relative;color:#C3C3C3;display:inline-block;text-align:center;font-weight:bold;font-size:11px;float:right;min-width:12px;font-family:sans-serif;padding:0px 5px;background-color:rgba(0,0,0,0.28);border-radius:0px 0px 0px 15px;}

@media only screen and (min-width:260px) and (max-width:989px){

.button_pntrst,.button_linkdin{display:none !important}}

Step 7. In your template search for (HTML mode) (div class=’post-footer) and copy the below codes and paste just below the (div class=’post-footer) code.

Save your template and view your blog and check your post. Your social share buttons are ready for sharing.

Note: If you do not find this line (div class=’post-footer)

then do not panic, instead search for (div class=’post-footer-line post-footer-line-1) code; and paste the above HTML code right before the line.

Save your template and change via Twitter ID code with your twitter address.

<b:if cond='data:blog.pageType == "item"'>

<ul>

</div>

</li>

</div>

</div>

</div>

</a>

</li>

</div>

</div>

</div>

</a>

</li>

</div>

</div>

</div>

</a>

</li>

</div>

Pin It

</div>

</div>

</a>

</li>

</div>

</div>

</div>

</a>

</li>

</ul>

</div>

</b:if>

I hope you have successfully added your social share button and if you have enjoyed, then do let me know in the comment below.

All Tutorials

Optimized Social Share Buttons For Blogger

Related Posts

Comments

Post a Comment

Popular

Label