I know it’s easy to get a code of button for your social media profiles to put on your blog. But the problem is, you will put only the codes of your different social media profiles in different widget. So I want to present one widget that already contains a subscription box and three social media profiles including Facebook page, Twitter and Google plus account. I already optimized every group of codes of this widget so that it will load faster on any browsers. You are free to put this widget on your blog, just follow the steps below on how to implement it.
Add Social Media Profiles Widget to Blogger
As always go to your
Blogger Dashboard->>
Layout->>
Add a Gadget->>
HTML/JavaScript and paste the following codes below.
<div style="text-align: center;">
<style type="text/css">
/*<!CDATA[*/
.itn-facebook {background:#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.itn-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white; padding: 9px 0 0 11px;line-height: 24px;height:30px;}
.itn-sociallinks {background-color: #d8e6eb;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 10px 11px;overflow: hidden;}
.itn-sociallinks .w2b-social li {border:0 none !important;float: left;line-height: 1;padding: 2px 0 4px 20px !important;margin-bottom: 3px;width: 70px;}
.itn-emailbox {background-color: #E3EDF4;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 1px 0 1px 10px;overflow: hidden; height: 45px;}
.itn-emailbox input.emailu {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTeFWtR8H52yindMN40vPbTHGeIY-APdmrBqLq5_d6MqxnqKQnr4TRmDXF2a3DbxBKoUskdZM_IVotEwhPaevMx3miEzQsRdZjhWt4eTks2OUVpigFh1wzJGNzHzsDfSBDPM7WW850hj8/s1600/email.png) no-repeat 5px 8px;float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 35px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.mail-buttons:hover {background: #DD5515;border: 1px solid #000;}
.mail-buttons {border: 1px solid #A0350E;text-shadow: #A0350E 1px 1px 0;
background: #ed7347;background: -webkit-linear-gradient(top, #ed7347 0%, #c63800 100%);
cursor: pointer;color: #FFF;border: 1px solid #000;
border-radius: 2px;font-size: 13px;padding: 5px 6px 6px 6px;}
.widgetcredit { font-size: 10px;text-align: right;background-color: #E5EEF1;
border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 1px 10px;}
.widgetcredit a{color: #007EAF; text-decoration:none;}
/*]]>*/
</style>
<div class="itn-facebook">
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FTechnology151page&width=300&layout=standard&action=like&show_faces=true&share=true&height=67px' style='border:none; overflow:hidden; width:300px; height:67px;'></iframe></div>
<div class="itn-gplusone">
<script src="https://apis.google.com/js/platform.js" async='async'></script>
<!-- Place this tag where you want the widget to render. -->
<div id="___follow_0" line-height: normal; vertical-align: baseline; display: inline-block; width: 131px; height: 24px; background: transparent;"><iframe style="position: static; width: 131px; visibility: visible; height: 24px;" tabindex="0" vspace="0" width="100%" class='g-follow' data-annotation='bubble' data-height='24' data-href='//plus.google.com/u/0/109996800387061110036' data-rel='author'></iframe></div><div class="g-plusone" data-href="http://www.internetsmash.com"></div></div>
<div class="itn-sociallinks"><a class="twitter-follow-button"
href="https://twitter.com/Intersmash"
data-show-count="true"
data-size="large"
data-lang="en">
Follow @Intersmash
</a>
<script type="text/javascript">
window.twttr = (function (d, s, id) {var t, js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.async=true;js.src= "https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js, fjs);return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script></div>
<div class="itn-emailbox"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Internetsmash', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table width="100%"><tbody><tr><td><input class="emailu" name="email" placeholder="Enter your email" type="text" /></td><td width="67px"><input class="mail-buttons" type="submit" value="Subscribe" /></td></tr></tbody></table><input name="uri" type="hidden" value="Internetsmash" /><input name="loc" type="hidden" value="en_US" /></form></div>
<div class="widgetcredit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.internetsmash.com/2014/12/all-social-media-profiles-with-subscription-box.html" target="_blank" rel="nofollow">Blogger Widget</a></div></div>
Customization
- Technology151page replace this text with your own Facebook Page username
- 109996800387061110036 replace this with your own Google plus ID
- Intersmash replace this text with your own Twitter username
- Internetsmash replace this text your own RSS feed address
- www.internetsmash.com replace this text with your own site's url.
Don't worry about the width of this widget, it will automatically fit whatever the width of your sidebar.
