All-in-One Social Widget for below posts on Blogger

The importance of transportation quality traffic from Social Media to your journal can’t be underestimated. we've developed a stimulating new all-in-one social gadget which might be put in to look below posts on a Blogger.

Personally, I feel that adding a social subscription/sharing gadget below the post is more practical than one on the sidebar because it falls within the flow of reading. once a scaner reads your journal post and is interested enough to read it through the top, it's quite liekly that he can use the one-click sharing buttons gift within the final AIO Social gadget we tend to square measure introducing. Also, this may assist you with our goals of meeting this 9 purpose listing – by creating it a hassle-free method for your readers to share your content.

I case you're curious why i'm not exploitation this gadget on Bloggeriser, I’m already testing its performance on Droidiser and can create a move to final AIO Social gadget pretty presently.



Before you choose whether or not to put in or to not install this gadget on your journal, cross-check this screenshot and also the live demo of the gadget.

Live Demo

The various options of this convenience, as ought to be evident from the Demo and also the screenshot:
•Light weight Social follow icons
•Large email subscription box
•Facebook Like box
•Google and Follow box
•Five one-click social sharing buttons


Let’s begin with the installation half. Follow the below guide step by step to induce this stunning convenience up and running on your diaryger blog.

1. Sign in to your Blogger account and click the Template button.
2. Then select Edit HTML and click anywhere in the code editor that appears. Now, press Ctrl. + F and look for the <data:post.body> tag.
   
3. In most templates, the number of the tags you searched above will be more than one. Repeat the steps below for every <data:post.body> tag that you encounter till the widget works as expected.
4. Just below the <data:post.body> tag, add the code below:

   <!--Ultimate All-in-one Social Widget Blogger by Ajaxsurf--> <;style> .dsgbox { background: #fff; border: 1px solid #ddd; height: 355px; margin: 10px auto; padding: 10px; width: 650px; -webkit-border-radius: 10px; border-radius: 10px; } .dsgsubscribe { border: 1px solid #D3D3D3; padding: 8px; width: 340px; height:172px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .dsgsubscribe:hover { -moz-box-shadow: inset 1px 1px 20px 1px rgbaundefined91,148,253, 1); -webkit-box-shadow: inset 1px 1px 20px 1px rgbaundefined91,148,253, 1); box-shadow: inset 1px 1px 10px 1px rgbaundefined91,148,253, 1, 1); } .dsgmailbox { border: 1px solid #D3D3D3; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 1px 1px 1px 1px rgbaundefined255, 172, 84, 0.4) inset; -webkit-box-shadow: 1px 1px 1px 1px rgbaundefined0, 0, 0, 0.4) inset; box-shadow: 1px 1px 1px 1px rgbaundefined0, 0, 0, 0.4) inset; color: #666; font: 14px &quot;trebuchet ms&quot;, sans-serif; padding: 7px 15px; width: 160px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .dsgmailbox:hover { -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .dsgsubmit { font: bold 18px Segoe UI,RobotoTahoma, Geneva, sans-serif; font-style: normal; color: #ffffff; background: #5b94fd; border: 1px dashed #ffffff; border-radius: 10px 10px 10px 10px; padding: 4px 15px; cursor: pointer; margin: 0 auto; } .dsgsubmit:active, .dsgsubmit:hover { cursor: pointer; color:#5b94fd; border: 1px dashed #fff; background:#000; position: relative; top: 1px; } .dsgsubmit::-moz-focus-inner { border: 0; padding: 0; margin: 0; } .dsgsharebox { border: 1px solid #D3D3D3; margin: -157px 0 0 350px; padding: 8px; height:130px; width: 273px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .gplusholder { margin: -157px 0 0 350px; } .dsgsharebox:hover { -moz-box-shadow: 1px 1px 2px #CCC inset; -webkit-box-shadow: inset 1px 1px 20px 1px rgbaundefined91,148,253, 1); box-shadow: inset 1px 1px 20px 1px rgbaundefined91,148,253, 1); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } </style> <div class="dsgbox"> <div class="dsgsubscribe"> <div style="color: #666666; font-weight: bold; font: 22px Segoe UI, Roboto, cursive; margin: 0px 0px 10px 15px;"> Loved our tip/guide? Get more of them in your Inbox! </div> <div style="margin: 10px 0 0 6px;"> <form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=YOUR_ACCOUNT', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow"> <input name="uri" type="hidden" value="YOUR_ACCOUNT"/> <input name="loc" type="hidden" value="en_US"/> <input class="dsgmailbox" name="email" onblur="if undefinedthis.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if undefinedthis.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..."/> <input alt="" class="dsgsubmit" title="" type="submit" value="Subscribe"/> </form> </div> <div style="border: none; color: #666666; font: 19px Segoe UI, Roboto; margin: 25px 0 0 5px;"> Follow us on: </div> <div style="margin: -32px 0 0 120px;"> <a href="https://www.facebook.com/YOUR_ACCOUNT" target="_blank" title="Join us on Facebook"><img alt="facebook" src="https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbp5p6bS0h3HOmWLXP-4-2G_66lPG9t7Y2lGY4vQqtf55g4wMMYb7QkN1Y4zGVVSNpKyITY1pL17qj3gdQmpghDnPenBwEmxRsBpBC_Nisi_ijCmiK1RToywNTVr9Jpl_nubgzC4t-KmA/s32/facebook500.png style=&quot;border: 0px; padding:2px;&quot;"/></a> <a href="https://www.twitter.com/YOUR_ACCOUNT" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYyspDkkexoUasP9IlOLnqVF4kWw-6JyVZEmh5W9WmFtWiqIGaYNUmtfyz-NKyz0NiYd7PhAQk1kt0gfnaDEyQRQ7Bkdiw-ue9baqp5UNrhp-Nx40KSckveJOExFuvg_oYNzP45_bQC-s/s32/twitter.png" style="border: 0px; padding: 2px;"/></a> <a href="https://plus.google.com/+YOUR_ACCOUNT" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-TuyFf149ZzzJKywbV7CEAf3bC3KLU57PAsDuwAaOHzsIy5WcTio-oozp2k3qH_mQ91SvM-N1qTtM9mZrejm2Q-vlZlf8F_xhLj0nigjzJgG7Ud0j90DrfxA4-WjXuuuQIGm9etJ1W0/s32/googleplus-revised.png" style="border: 0px; padding: 2px;"/></a> <a href="http://pinterest.com/YOUR_ACCOUNT" rel="nofollow" target="_blank" title="Follow us on Pinterest"><img alt="pinterest" src="https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjWQCUn5IKQ7TGHArq3JRrNwwv76s8QueU29CCcecvxJdOF3Q50zayzeDDg4Bceon_i3WYktYUHjYCpEzJDQyeFNn4_GHloQeVrdTGYdV1aFvMUsh22XoauCXFhxLFUnNhSBgp0en4SIY/s32/pinterest.png" style="border: 0px; padding: 2px;"/></a> <a href="http://www.YOUR_ACCOUNT.com/feeds/posts/default?alt=rss" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQo6dwOW2xGAha2HbGKqQWOQNqWhybrWRzSGK0JoCkCSWYJqFpfxFESE6Fze0EvzAx6LN3CRvj6KFA0RsSBeqXnPVf1c5hMBw9jRaZRZBCuiLjQk0B8AlWnJ3KxpziqWqaphkqivPDHfc/s32/rss.png" style="border: 0px; padding: 2px;"/></a> </div> </div> <div class="dsgsharebox"> <script type="text/javascript"> var switchTo5x = true; </script> <script src="//s7.addthis.com/js/300/addthis_widget.js" type="text/javascript"></script> <br/> <div style="margin: -15px 5px;"> <a class="addthis_button_facebook_like" fb:like:layout="button_count"> </a> </div> <div style="float: right; margin: -15px -5px 0 0;"> <a class="addthis_button_stumbleupon_badge"> </a> </div> <div class="addthis_toolbox addthis_default_style " style="margin: 16px 0 10px 98px;"> <a class="addthis_button_google_plusone" g:plusone:size="inline"> </a> </div> <div style="margin: 5px 5px;"> <a class="addthis_button_tweet"> </a> </div> <div style="float: right; margin: -30px -60px 0 0;"> <a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a> </div> </div> <div style="margin-top: 35px;"> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FYOUR_ACCOUNT&amp;width=340&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=170" style="border: none; height: 160px; overflow: hidden; width: 340px;"> </iframe> </div> <div class='gplusholder'> <div class='g-person' data-href='https://plus.google.com/YOUR_ACCOUNT' data-layout='landscape' data-showcoverphoto='false' data-showtagline='false' data-width='225'> </div> </div> </div> <!--Ultimate All-in-one Social Widget Blogger by Ajaxsurf-->

5. In the code that you {just} just affixed, search for each instance of YOUR_ACCOUNT and replace it along with your social media accounts/blog computer address/ url feed. If you have got confusion regarding any of them, let American state apprehend within the comments section.
6. Press Save template and go to any single post page of yours.
7. If the widget doesn’t appear, delete all the code you pasted (it starts and ends with an HTML comment to help you remove it later on) and try steps 4-6 till you find the right <data:post.body> tag.

I have adjusted the margins within the sharing buttons on dsgsharebox category to regulate to my web log. If the 5 buttons don’t seem aligned just like the method they're meant to, attempt being silly with the margin values. things like this inspire Maine to advocate you to travel ahead and learn the fundamental markup language and CSS languages, so you'll edit and perceive basic codes.



If you choose to share this convenience together with your readers, please provides a link to the current original article. Also, be happy to share this text together with your blogger friends victimisation the social sharing buttons gift on this page.