Oct 1, 2015

Ultimate All in One Social Media Widget for Blogger

data:blog.title

Ultimate All in One Social Media Widget for Blogger

Complete Guide for How To Add All in One Social Media Widget to Blogger
All in One Social Media Widget
There is no question about how important is a social subscription/follow widget in a blog or website. Using Social subscription widgets is a very tricky way to let your visitors easily bookmark your pages and get connected with your blog forever. Once you get some followers/subscribers, you will definitely get some regular visitors from them whenever you will post any article on your blog. this type of visitors are also be considered as loyal visitor.


Importance of All in One Social Media Widget

Social media is a very important via source to reach your blog content to it your readers. A Social media widget is the basic need of a blog because it connects the individuals to the blog from their favorite social media and they can get in touch with your blog and notified while staying on social networks. Social media is the best and quickest way to get a lot of traffic to your blog and since every blogger and webmaster promotes their posts on social media. For driving high social media traffic we wants people to follow and subscribe us on social media because if they subscribe us then they will become our regular readers and visit our blog regularly. So today I'm going to share Ultimate All in One Social Media Widget for Blogger Blog. By using this widget you can link to your Facebook, Twitter, Pinterest, Feedburner and Google Plus. In this All in One Social Media widget we have added Facebook like button, and Google Plus recommendation buttons with counter. So lets start add this all in one social widget to blogger blog.

How To Add All in One Social Media Widget to Blogger

Step 1: Go to your blogger Dashboard > Layout.

Step 2: Click on “Add A Widget” link from your sidebar widget section.

Step 3: Select “HTML/Java Script” widget from the list.

Step 4: Now Copy and Paste the entire codes given bellow.
<style> #socialnetworking { border: 1px solid #ebebeb; width: 280px; } .fb-likebox { padding: 10px 10px 0 10px; border-bottom: 1px solid #ebebeb; } .googleplus { background: #eef9fd; border-top: 1px solid white; border-bottom: 1px solid #ebebeb; font-size: 12px; color: #000; padding: 9px 11px; line-height: 1px; font-family: Verdana, Geneva, sans-serif; } .googleplus span { color: #000; font-size: 11px; position: absolute; margin: 9px 70px; width: 280px; } #widgetbox { background: #EBEBEB; padding: 2px 8px 2px 3px; text-align: right; border-image: initial; } #widgetbox .author-credit a { font-size: 10px; font-weight: bold; text-shadow: 1px 1px white; color: #1E598E; text-decoration: none; } .g-plusone { float: left; } .twitter { background: #eef9fd; border-top: 1px solid #fff; padding: 10px; } .fb { background: #eef9fd; border-top: 1px solid white; border-bottom: 1px solid #ebebeb; font-size: 12px; color: #000; padding: 9px 11px; line-height: 1px; font-family: Verdana, Geneva, sans-serif; } .fb span { color: #000; font-size: 11px; position: absolute; margin: -12px 100px; width: 280px; } .pterest { background: #EFF5FB; border-bottom: 1px solid #ebebeb; font-size: 12px; color: #000; padding: 9px 11px; line-height: 1px; font-family: Verdana, Geneva, sans-serif; border-top: 1px solid #ddd; } #email-news-subscribe .email-box { padding: 5px 10px; font-family: "Arial","Helvetica",sans-serif; border-top: 0; border-image: initial; height: 35px; background: #EFF8FB; width: 260px; } #email-news-subscribe .email-box input.email { background: #FFFFFF; border: 1px solid #dedede; color: #999; padding: 7px 10px 8px 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; border-image: initial; font-family: "Arial","Helvetica",sans-serif; } #email-news-subscribe .email-box input.email:focus { color: #333 } #email-news-subscribe .email-box input.subscribe { background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00)); background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); -pie-background: linear-gradient(270deg,#ffca00,#ff9b00); font-family: "Arial","Helvetica",sans-serif; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #cc7c00; color: white; text-shadow: #d08d00 1px 1px 0; padding: 7px 14px; margin-left: 3px; font-weight: bold; font-size: 12px; cursor: pointer; border-image: initial; } #email-news-subscribe .email-box input.subscribe:hover { background: #ff9b00; background-image: -moz-linear-gradient(top,#ffda4d,#ff9b00); background-image: -webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00)); filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb); outline: 0; -moz-box-shadow: 0 0 3px #999; -webkit-box-shadow: 0 0 3px #999; box-shadow: 0 0 3px #999 background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00)); background: -moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%); -pie-background: linear-gradient(270deg,#ffda4d,#ff9b00); border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #cc7c00; color: #FFFFFF; text-shadow: #d08d00 1px 1px 0 } </style> <div id="socialnetworking"> <!-- Begin Widget --> <div class="fb-likebox"> <!-- Facebook --> <center> <a style="margin-right: 10px;" rel="me" href="https://plus.google.com/101764650472908876418" target="_blank"> <img src="http://2.bp.blogspot.com/-9KrXKpRJeWY/UwWe2Wzv6HI/AAAAAAAAB3U/G75iAnP7ljQ/s1600/GooglePlus.png" /></a> <a style="margin-right: 10px;" href="http://www.facebook.com/MyBloggerGuides" target="_blank" rel="nofollow"> <img src="http://2.bp.blogspot.com/_rLYhkzmU7RY/TED5ihk9m6I/AAAAAAAAABI/v_2rKVhRE0g/s320/1oaxc4.jpg.png" /></a> <a style="margin-right: 10px;" href="http://feeds2.feedburner.com/MyBloggerGuides" target="_blank" rel="nofollow"> <img src="http://3.bp.blogspot.com/_rLYhkzmU7RY/TED5SYSjFII/AAAAAAAAABA/xcmxc456JgQ/s1600/2d7itk9.jpg.png" /></a> <a style="margin-right: 10px;" href="http://feedburner.google.com/fb/a/mailverify?uri=MyBloggerGuides&amp;loc=en_US" target="_blank" rel="nofollow"> <img src="http://1.bp.blogspot.com/_rLYhkzmU7RY/TED5LW-dTrI/AAAAAAAAAAw/mozQRQcCttU/s320/j5krgl.jpg.png" /></a> <a style="margin-right: 10px;" href="http://twitter.com/#!/MyBloggerGuides" target="_blank" rel="nofollow"> <img src="http://3.bp.blogspot.com/_rLYhkzmU7RY/TED5Omxmx_I/AAAAAAAAAA4/iU6SVPqEQWI/s1600/3312cmr.jpg.png" /></a> </center> </div> <div class="googleplus"> <span><font><font>Recommend Us On Google </font></font></span> <!-- GooglePlus --> <!-- Place this tag where you want the 1 button to render --> <g:plusone size="medium"></g:plusone> <!-- Place this render call where appropriate --> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <script type="text/javascript"> gapi.plusone.render ( 'plusone-div', { "size": "medium", "count": "true" } ); </script> </div> <div class="fb"> <!-- Twitter --> <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2FMyBloggerGuides&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowtransparency="true"> </iframe> <span>Like Us On Facebook</span> </div> <div class="twitter"> <!-- Twitter --> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=MyBloggerGuides&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button"> </iframe> <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> </div> <div class="pterest"> <a href="http://pinterest.com/MyBloggerGuides/"><img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest"/></a> </div> <div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=MyBloggerGuides', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" style="width: 120px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;"/> <input type="hidden" value="MyBloggerGuides" name="uri"/> <input type="hidden" name="loc" value="en_US"/> <input class="subscribe" name="commit" type="submit" value="Subscribe"/> </form> </div> </div> <div id="widgetbox" style="background: #FBEFEF;border-top: 1px solid #ddd;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:8px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.mybloggerguides.com/2015/10/all-in-one-social-media-widget.html" target="_blank">Get This Widget &#187;</a></span> </div> <!-- End Widget --> </div>
</div>
Step 5: Replace all highlighted texts using your own information.

      Your Google+ Profile/Page ID

      Your Facebook Username

      Your Feedburner Username

      Your Twitter Username

      Your Pinterest Username 

Step 6 : Click “Save” to save this widget and preview your blog to see the changes.
Step 7 : That's it. :-) Now open your Blog and enjoy this Widget.

Conclusion:
So above guide is about How To Add Ultimate All in One Social Media Widget to Blogger? I hope by this tutorial you can easily add this widget to your Blogger Blog. If you are still facing problems then don't worry just drop a comment below. We will get back to you as soon as possible. Hope this all in one social widget increase your followers and also page views. Don't forget to share on Blogging Communities.

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.