How to Add Responsive Social Media Icons in Blogger
When you add responsive Social Media Icons to your blog you increase the chances of community engagement through your blog post. The Era is changed and having an online presence in this era is a must!
It is important that you have access to every location and get found by people… and that is done by social media. You can have a wider audience range through the add responsive Social Media icons on your site and that linking them to your social networks. The time has come were using Social Media Icons have become a must as this increases your blog engagement and spreads awareness about your online presence.
to know more about Top 10 Best Shopify Themes click here
How to Add Responsive Social Media Icons in Blogger?
Step 1- Firstly, install a responsive theme from any external source where you can easily find the add responsive social media icons.
This step is important as the blogger is not as attractive or good.
In blogger, you will find a social plugin option to add social icons but that will not allow you to choose your position.
If you go for a customized theme, you will find all the required settings.
Step 2- You will find the blogger dashboard- click on the labels section.
Step 3- You will find a blogger Social Media button widget at the Top in the header menu widget and also on the Right Sidebar of the blog or website.
Step 4- Now click on edit Social Top then edit existing or add new social links that you want to add as a social icon to your blog or website.
Step 5- Now you can Add, write names of the social media platform in the tab “New Site Name” and the URL in the tab “New Site URL” and click on add link.
How to add responsive Social Media icons to blogger sidebar?
Step 1- Firstly, install a responsive theme from any external source where you can easily find the add social media icons.
This step is important as the blogger is not as attractive or good.
In blogger, you will find a social plugin option to add social icons but that will not allow you to choose your position.
If you go for a customized theme, you will find all the required settings.
Step 2- You will find the blogger dashboard- click on the labels section.
Step 3- You will find a blogger responsive Social Media icons widget at the Top in the header menu widget and also on the Right Sidebar of the blog or website.
Step 4- Now click on edit Social Top then edit existing or add new social links that you want to add as a social icon to your blog or website.
Step 5- Now you can Add, write names of the social media platform in the tab “New Site Name” and the URL in the tab “New Site URL” and click on add link.
To adjust the position, or edit, or delete any social icon you can simply use the up and down arrow and edit or delete any image or icon.
Also read: Start Blog Basic To Advance
How to add responsive Social Media icons to blogger header
Step 1- Go to Blogger Theme and click on the HTML button.
Step 2- Anywhere in the code click and Press CTRL+F type “]]>>/b:skin>” press enter then Paste the first code above the “]]>>/b:skin>” tag.
Step 3- Press CNTRL+F and type “<b:section class=’header’>”or”<b:section class=’header’ “Paste second code before above “<b:section class=’header’>”line.
Step 4- Go to your Blogger Blog.
*Note- Replace RED URLs with your Social URLs
How to add responsive Social Media Icons to blogger posts?
Step 1- Go to blogger > Theme> Backup theme
Step 2- Click Edit HTML
Step 3- Search ]]></b:skin> and paste the CSS Code above ]]></b:skin>
/* ##### JumboShare Simplified ####### */
#MBTshares-wrap{margin:20px 0px;border-top: 1px dotted #eee;padding: 10px 0;border-bottom: 1px dotted #eee;overflow:hidden}
#MBTshares{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 #MBTshares{position:relative;top:-8px; padding-top:20px;}
#MBTshares a:hover{text-decoration:none!important;}
/***Facebook***/
.mbt-fb{background:transparent linear-gradient(#4C69BA,#3B55A0) repeat scroll 0 0;border:medium none;border-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;box-shadow:0 0 1px #607FD6 inset}
.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{box-shadow:0 1px 0 rgba(0,0,0,0.05);transition:background-color .218s ease 0s,border-color .218s ease 0s,box-shadow .218s ease 0;background-color:#FFF;background-image:none;border:medium none;border-radius:2px;border:1px solid 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;}
#MBTshares .pinit{background:#f9f9f9!important}
#MBTshares .stumb{background:#f0fafe!important;border:1px solid #cde3ea}
#MBTshares .stumb:hover{border:1px solid #b7d5df;box-shadow:0 1px 0 rgba(0,0,0,0.1)}
#MBTshares .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}
#MBTshares .bufferimg{width:15px; margin-top:2px; padding:0 1px 0 0; }
/***LinkedIn***/
.mbt-linkedin{transition:background-color .218s ease 0s,border-color .218s ease 0s,box-shadow .218s ease 0;background-color:#0077B5;text-shadow:0 -1px #005887;border:medium none;border-radius:2px;border: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{padding:0 5px 0 1px}
}
.mbt-linkedin:focus,.mbt-linkedin:hover,.mbt-linkedin:active{border:1px solid #0369A0;background-color:#0369A0}
.mbt-linkedin i{padding: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-weight:700;color:#FFF;cursor:pointer;background-color:#1B95E0;border-radius:3px;box-sizing:border-box}
.mbt-tw:focus,.mbt-tw:hover,.mbt-tw:active{background-color:#0C7ABF}
.mbt-tw i{padding:0 0 0 1px;font-size:14px;color:#fff;margin-right:2px;margin-top:0}
.mbt-o{max-width:100%}
.mbt-o,.mbtcount-o,.mbt-fb,.mbt-gp,.mbt-linkedin,.mbt-tw,.label,#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 solid #e7e7e7;border-radius:2px;display:none!important; }
#MBTshares .printme {background-color:#333;}
#MBTshares .printme:focus,#MBTshares .printme:hover,#MBTshares .printme:active{background-color:#000}
#MBTshares .whatsapp{background-color:#73D40B;}
#MBTshares .whatsapp i{font-size:15px!important;}
#MBTshares .whatsapp:focus,#MBTshares .whatsapp:hover,#MBTshares .whatsapp:active{background-color:#65BA09}
#MBTshares .viber{background-color:#7b519d;}
#MBTshares .viber:focus,#MBTshares .viber:hover,#MBTshares .viber:active{background-color:#8558aa}
#MBTshares .viberimg{width:13px; margin-top:0px; padding:0 3px 0 0; }
#mbtcount{color:#666;white-space:nowrap;text-decoration:none;padding:2px 0 0}
#mbtcount:hover{text-decoration:none}
#MBTshares .arrow{height:0;left:-10px;position:relative;top:-15px;width:5px;z-index:2}
#MBTshares .ext{min-height:18px!important}
#MBTshares .arrow s,#MBTshares .arrow i{border-color:transparent #e7e7e7;border-style:solid;border-width:4px 5px 4px 0;display:block;position:relative;top:19px}
#MBTshares .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}
/*#########Horizontal Switch###########*/
.switchoff2{display:inline-block;}
.mbtswitch2{padding: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:'f067';position:relative;left:7px;top:2px;font-style:normal}
.mbtswitch2 i.inactive:after{content:'f068';position:relative;left:7px;top:2px;font-style:normal}
@media only screen and (max-width:230px) {
.tcount{border-bottom: 2px solid #74D50C; border-right:none; min-width:100%;}
#horiz #MBTshares {width: 100%;}
Step 4- Paste the following Code above </head> inside your template
Step 5- Now add jQuery script above </body> tag
<script type='text/javascript'>
//<![CDATA[
/* ##### 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(){$(".switchoff").slideToggle();if($(".mbtswitch i").attr("class")==="active"){$(".mbtswitch i").removeClass("active").addClass('inactive')}else if($(".mbtswitch i").attr("class")==="inactive"){$(".mbtswitch i").removeClass("inactive").addClass('active')}});
$(".mbtswitch2").click(function(){$(".switchoff2").slideToggle();if($(".mbtswitch2 i").attr("class")==="active"){$(".mbtswitch2 i").removeClass("active").addClass('inactive')}else if($(".mbtswitch2 i").attr("class")==="inactive"){$(".mbtswitch2 i").removeClass("inactive").addClass('active')}});
});
//]]></script>
Step 6- Save the Template
FAQs
What are share buttons?
Share buttons are floating buttons in the shape of a square or rectangle that allows one to click on social media. Through these buttons, one can easily share the content through code if it has links.
How do I add an Instagram button to my Blogger Blog?
Step 1- Click on “Get Widget” button
Step 2-Click on “Copy to Clipboard” button
Step 3- In blogger dashboard click “Layout” in the Sidebar area
Step 4- Click “Add a gadget”
Step 5- Select “HTML/JavaScript” title to your gadget
Step 6- In the min box, right click and select “Paste”
How do I put a link to my blog on Instagram?
Upload your image to your Instagram and use the filter you wish. In the description or link in the profile and click on Post.
How to manage the finance of your blog, check out amazing article here..!
Wrap UP:
Social Media Icons help in increasing blog traffic and knowing how to add Responsive Social Media Icons in Bloggers helps one to do drive more traffic to the blog or website. The article provides all the information that are required to add the icons.
