Facebook Popup Like Box Widget For Blogger

Facebook has become the leading social media service on the Internet playing host to over 1.3 billion users; of those, 800 million login to their dashboard feeds at least once a day. Thanks to the vast number of active users on services like Facebook, acquiring new readers as a blogger or content provider has become easier than ever.<br /><br />In order to produce an effective digital campaign, you absolutely must take advantage of social media by doing things like integrating <a href="http://helplogger.blogspot.com/2016/09/how-to-share-blogger-post-to-facebook.html">Facebook on Blogger</a>. Email marketing can be useful, but it comes with restrictions that could limit your blog's potential. Perhaps the most significant problem is that emails don't come with a face or personality like Facebook does.<br /><br />Think of a time when you received an email in you inbox from someone you didn't know. Where you inclined to open it or did you send it right to the junk folder? If it's your first introduction to new consumer, they simply don't know who you are, what you want, and how you got their email. This sets off an initial breakdown of any type of trust that might have developed. The reputation of email marketing is further deteriorated with a study done by Kaspersky Lab, an Internet research firm. They estimate that around 70% of all the emails sent in the world are spam.<br /><br />Sharing site content using a <a href="http://helplogger.blogspot.com/2012/03/how-to-add-facebook-likefan-box-to.html">Facebook Like Box</a> is just one of many strategies that can generate a regular flow of traffic from a diverse demographic that might have been previously inaccessible. <a href="http://helplogger.blogspot.com/2012/04/add-static-facebook-pop-out-like-box.html">Adding a Facebook Like Box</a> to your site helps to reduces your individual workload, and instead distributes that ability equally among your readers.<br /><br />When someone reads your content and appreciates the kind of work that you produce, they'll be willing to share that information to their followers and fans, setting off a viral reaction. The first step necessary to making this a reality is to make this change to your site. These next few steps will provide you with a quick and easy guide on how to add a 'Like Box' to your Blogger site so that you can began taking advantage of these great opportunities.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO9-XkemHwkzv3k6yqyvd204Gw5jKli5wj7j3bfu09rgvaOwzXBcM8WS9a7jHN_KbhXwQnXqhxzlwTZck35HOT1xo3eVFppMSUT1e804fiNxq1-C9Xay9Dps6w8_z5c1IPQx5G9FmIQ-1g/s1600/facebook-popup-like-box-widget-for-blogger.png" width="320" /></div><br /><center><a class="demo-link" href="http://popular-posts-blogger-widget.blogspot.com/" rel="nofollow" target="_blank">Click here for a DEMO</a></center><br /><br /><h2>How to Add the Facebook Popup Like Box Widget</h2>1. Log into your Blogger account and select your blog > go to 'Layout' & click the 'Add a Gadget' link on the right side.<br />2. Once the popup window is open, select the HTML/JavaScript gadget from the list:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjtHlyl4H7W1gfzXF32owW1d-tardgMd2s0OF5H2t8Z5HDZC5PnQgnJgDfBVtyyOIJ0XQdGUdTS6-hdKra7rwAHCcEE9OaB-ZNEgm7EivNYmPwMDxrcTk_fcqt2S6IORbAkyISfgZ7ViIR/s1600/add-html-javascript-gadget-blogger.png" width="400" /></div><br />3. Copy and paste the following code inside the empty box:<br /><blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script><br /><style type="text/css"><br />#fbox-background{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#fbox-close{width:100%;height:100%}#fbox-display{background:#eaeaea;border:5px solid #828282;width:340px;height:230px;position:absolute;top:32%;left:37%;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#fbox-button{float:right;cursor:pointer;position:absolute;right:0;top:0}#fbox-button:before{content:"CLOSE";padding:5px 8px;background:#828282;color:#eaeaea;font-weight:700;font-size:10px;font-family:Tahoma}#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:5px}<br /></style><br /><script type='text/javascript'><br />//<![CDATA[<br />jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null};<br />//]]><br /></script><br /><script type='text/javascript'><br />jQuery(document).ready(function($){<br />if($.cookie('popup_facebook_box') != 'yes'){<br />$('#fbox-background')<span style="color: red;">.delay(5000)</span>.fadeIn('medium');<br />$('#fbox-button, #fbox-close').click(function(){<br />$('#fbox-background').stop().fadeOut('medium');<br />});<br />}<br /><span style="color: #6aa84f;">$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });</span><br />});<br /></script><br /><div id='fbox-background'><br /><div id='fbox-close'><br /></div><br /><div id='fbox-display'><br /><div id='fbox-button'><br /></div><br /><iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?<br />href=<span style="color: blue;">https://www.facebook.com/pages/Helplogger/120574614736021</span>&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'<br />style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe><br /><div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://helplogger.blogspot.com/2014/12/facebook-popup-like-box-blogger-widget.html" rel="nofollow">Helplogger</a></div><br /></div><br /></div></blockquote>4. Press the 'Save' button to add the widget to your blog. That's it!<br /><br /><h3>Facebook Popup Like Box Customization</h3>After adding the code, replace the address in blue <span style="color: blue;">https://www.facebook.com/pages/Helplogger/120574614736021</span> with your site's facebook page URL.<br /><br />The widget will appear 5 seconds after the page finishes loading. If you want to change this delay, change the number 5000 to a greater or lesser number in this part:<br /><blockquote class="tr_bq"><span style="color: red;">.delay(5000)</span></blockquote>By default, the like box only shows up the first time the user visits your page.  If you would like the Facebook box to popup every time the page loads, then remove this line of code:<br /><blockquote class="tr_bq"><span style="color: #6aa84f;">$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });</span></blockquote>If you want to display only when user visits your homepage, go to 'Template' > hit the 'Edit HTML' button on the right side and search by clicking anywhere inside the code area and pressing the CTRL + F keys for this tag:<br /><blockquote class="tr_bq"></body></blockquote>Paste the facebook popup widget right above the body tag and make sure to include the conditional tags below:<br /><blockquote class="tr_bq"><b:if cond='data:page.type == "index"'><span style="color: #3d85c6;">ADD THE FACEBOOK WIDGET CODE HERE </span></b:if></blockquote>After saving this widget, you can test it out by returning to one of your old posts which should bring up a little popup widget asking if you'd like to join the site's Facebook page.<br /><br />If you don't see the Facebook Like Box on the page, you may need to delete your cookies or check out the 'Customization' section above in order to display the widget every time a user visits your site. Once this widget is added to your site, all your hard work should start to translate into an increase in web traffic and number of <a href="http://helplogger.blogspot.com/2012/03/how-to-create-facebook-fan-page-for.html">Facebook fans</a>.

Facebook Popup Like Box Widget For Blogger

Facebook has become the leading social media service on the Internet playing host to over 1.3 billion users; of those, 800 million login to ...

Read more »

Share Blog Posts in Social Media using AddThis

AddThis is the most complete social sharing service allowing you to share your posts in more than 270 different social networks. If you want to use the AddThis widget and get the AddThis sharing buttons, this tutorial will show you how to register and add this feature on your blog. Plus, you will get to know some of the customization options of these buttons. So let's get started!<br /><br /><div class="ssmainhide" style="clear: both; text-align: center;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNLuG9PcLz17z7QeBR3CwIxcRrlC12UD8-iT9zOzc_HNkOy5h3ZBIS95JLQSxcH-sJZ8a6-8kFsgIm3T5seT2IQmBITFsgEjn0bHTorJOPcsD6Qy8TecjrX7x8ciEtzP_EaAcea3zcd5Sd/s1600/addthis-share-buttons-for-blogger.png" width="320" /></div><h3>Getting the AddThis share buttons code</h3>Step 1. Visit the <a href="https://www.addthis.com/get/sharing" rel="nofollow" target="_blank">https://www.addthis.com/get/sharing</a> page.<br /><br />Step 2. To get the sharing buttons and to access the AddThis sharing stats to find out how many people shared your post by using the AddThis feature, click on the "<b>Create account</b>" button.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="create addthis account" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw3xkO7Hdwef-2k4C1FZfCZCprRv8K-ZjtZMwXBjhQx3oGUbQYwigsSz30P2KuldXAWuTekRIaZ__natrDHTTx-pOb6mMKPuNFjD2bD0qdD2SgkLSS4qSClnD1Ulf2VC9P611s7T396-g9/s1600/how-to-create-addthis-account.png" title="share blog posts in social media using AddThis" width="600" /></div><br />The site will ask you to make a small registration. Fill out the information to register. It's quick, simple and it's free. To finish the registration, click on the <b>Register</b> button.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="register addthis" border="0" height="523" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguiblvLq-_-cvyZUfiFOuEDqzvLAH5wyTE-aftu5GYl1EgGPIZa6kXL57D-tg6CUZHSgE8oDswI4Mhf4K7Wrfq-QXdfCs19W3L3a-NI6AvoNZ3AYKsDqIDFAPL2CSTYC5wthmj4uVoNdux/s1600/register-addthis-for-sharing-buttons.png" title="share blog posts in social medias using AddThis" width="600" /></div><br />Step 3. After you've been logged in, right below the "<b>Get sharing buttons for</b>", choose the "<b>A website</b>" option.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="addthis share buttons" border="0" height="610" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs2lUPWEyWTIXG4Sm527W1H-xntyquthH2AjSUaGUC-GXN7E0AGvftR4rEn5uJMb0dZ5IKeqc8UjhPTU0nAlPxY_eGWgNitVSKE-Fk6FxJ5I8ZgQSW6jG9eAlUbv4nYoVCQ0jkHJvcA7Ba/s1600/sharing-buttons-blogger-style-addthis.png" title="Share blog posts in social medias using AddThis" width="400" /></div><br />Step 4. In the "<b>Select style</b>" section, choose the buttons style that you think would look the best on your site/blog. Please note that on the right side you can see a preview of these buttons.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="addthis sharing buttons " border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia7gAssASWDciwudJB86GBNjOlU6lWq3sU11onPQonMW3jsHq0fqzu9hcD4lZtuwq12NmzF6cQ_ZsifGm2yNAInGLy2rooZXOEoVQO1xUkf_Jlssic0VZ2K8a4Yt7Vt3cF9iLbUGzVe0r3/s1600/addthis-social-buttons-preview.png" title="share blog posts in social medias using AddThis" width="600" /></div><br />Step 5. After you have chosen the style, the site will provide a code - click on the "<b>Grab it</b>" button to copy it.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="addthis code" border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu9aAKNcbq_H7NaUrGU77sXkjaOB-Y_qBUiModVB6E2o6aRcRxo32bw9QAPFvhOlrI5XRSO9UVv-Qf9p400HZvs64zCUgxDWBYVrOI7G4NLl9gdHzthiudAHSJMcc_OynnVfZGjsQak85t/s1600/grab-it-addthis-social-sharing-buttons-for-blogger.png" title="Share blog posts in social medias using AddThis" width="600" /></div><br />The code provided will look like this:<br /><blockquote class="tr_bq"><!-- AddThis Button BEGIN --><br /><div class="addthis_toolbox addthis_default_style "><br /><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><br /><a class="addthis_button_tweet"></a><br /><a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a><br /><a class="addthis_counter addthis_pill_style"></a><br /><span style="background-color: yellow;"></div></span><br /><script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script><br /><script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-XXXXXXXXXXX"></script><br /><!-- AddThis Button END --></blockquote>Now that you have selected and set up your AddThis sharing buttons, let's add them in the footer of the posts.<br /><br /><h3>Adding the AddThis sharing buttons on Blogger</h3>Step 1. Access your <a href="http://blogger.com/" rel="nofollow" target="_blank">Blogger Dashboard</a> and go to "Template", then click on the "Edit HTML" button on the right side:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger template" border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBZxuDSF74SaIvFbOkJzwuk_GViqVsU-Jg3BPH6yPAhXfgzrbv10D6i7zzU46ihrvYGMllL20NFDIgMzwjdZ71SwABN7A9C2v3HCRQ_qzBXzNbo1n_sR5TfHWU5l4Bgd96593RVV3lqTS-/s1600/blogger_blogspot_template_edit_html_tutorial.png" title="Share blog posts in social medias using AddThis" width="320" /></div><br />Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box.<br /><br />Step 3. Type the following line inside the search box and try to find the second occurrence of it - hit Enter:<br /><blockquote class="tr_bq"><div class='post-footer'></blockquote>Step 4. Just above this line, add the code for the AddThis social sharing buttons. <br /><br />Note: If you want to add at the beginning of your posts, add the code below the second:<br /><blockquote class="tr_bq"><div class='post-header'></blockquote><br /><h3>How to add more AddThis buttons</h3>To add more buttons, simply choose the button for that social network and add the code just before the <span style="background-color: yellow;"></div></span> tag (refer to the step 5 from above).<br /><br />Some examples:<br /><blockquote class="tr_bq"><a class="addthis_button_linkedin"></a> <span style="color: #6aa84f;">/* linkedin button */</span><br /><a class="addthis_button_google_plusone" g:plusone:size="medium"></a> <span style="color: #6aa84f;">/*gplus button */</span><br /><a class="addthis_button_digg"></a> <span style="color: #6aa84f;">/* digg button */</span><br /><a class="addthis_button_stumbleupon"></a><span style="color: #6aa84f;"> /* stumbleupon button */ </span><br /><a class="addthis_button_print"></a> <span style="color: #6aa84f;">/* print button */</span></blockquote><br /><h3>CSS3 AddThis Share Buttons</h3>You can add just a single button, so that when the reader hovers over it, a menu will open with the options of social networks to share the post.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="css3 share buttons, addthis" border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_vXQj8GEizyCBBznmf7jtbY0cF44YlfFG9PeDb3Uw29Ora79-IsjcLz2_lgyD5ywXgfTcNEx3bX56JR7DrTVUAyLMoEvUEWUiK-CrSqER92mMe87051g0PgkipXSy_xChlIfIENZjchwP/s1600/css3-addthis-share-buttons.png" title="CSS3 AddThis Share Buttons " width="600" /></div><br />Visit <a href="http://www.addthis.com/pages/gallery-demo-css3-buttons" rel="nofollow" target="_blank">this page</a> for a demo.<br /><br />Step 1. Go to "Template" > click on the "Edit HTML" button > press the CTRL + F keys and search:<br /><blockquote class="tr_bq"><div class='post-footer'></blockquote>Just above this line, paste the following code: <br /><blockquote class="tr_bq"><style type='text/css'><br />.addthis_share_btn a, .addthis_share_btn a:visited {<br />background: <b><span style="color: #cc0000;">#FF5C00</span></b>; <span style="color: #6aa84f;">/* background color of the button */</span><br />display: inline-block;<br />padding: 6px 12px;<br />font-family: arial,helvetica,lucida,verdana,sans-serif;<br />font-size: 12px;<br />line-height: 1em;<br />color: #fff;<br />text-decoration: none;<br />-moz-border-radius: 5px;<br />-webkit-border-radius: 5px;<br />-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br />-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br />border-radius: 5px;<br />box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br />text-shadow: 0 -1px 1px rgba(0,0,0,0.25);<br />border-bottom: 1px solid rgba(0,0,0,0.25);<br />position: relative;<br />cursor: pointer;<br />}<br />.addthis_share_btn a:hover {<br />background: <b><span style="color: #cc0000;">#D45500</span></b>; <span style="color: #6aa84f;">/* background color on mouse hover */</span><br />color: #fff;<br />}<br />.addthis_share_btn a:active { top: 1px; }<br /><br />.addthis_share_btn a span, .addthis_share_btn:visited a span {<br />background: url(http://www.addthis.com/cms-content/images/gallery/icon-addthis.gif) no-repeat left;<br />padding: 1px 0 1px 18px;<br />}<br /></style><br /><!-- AddThis Share Button --><br /><div class='addthis_toolbox addthis_share_btn'><br /><a class='addthis_button_compact' href='http://addthis.com/bookmark.php'><br /><span><span style="color: blue;"><b>Share</b></span></span></a><br /></div><br /><script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/><br /><!-- End AddThis Share Button --></blockquote><br /><h4>Customization</h4><ul><li>To change the color of the button according to the colors of your template, modify the color value in red.</li><li>If you want to change the "Share" text, replace the text in blue.</li></ul>Step 2. Save the changes by clicking on the "Save template" button and you're done!

Share Blog Posts in Social Media using AddThis

AddThis is the most complete social sharing service allowing you to share your posts in more than 270 different social networks. If you want...

Read more »

Add floating social media sharing buttons below Blogger post titles

It is becoming increasingly important to make our posts appreciated and shared on social networks and one of the best ways to get traffic to our blog or site and boost sharing stats is to add <b>social sharing buttons</b>.<br /><br />In this tutorial we will see <b>how to add a floating social media sharing bar</b> below the title of Blogger posts, so when a reader scrolls down the page, he will still be able to see the sharing buttons without having to scroll back to the top.<br /><div class="ssmainhide" style="clear: both; text-align: center;"><img border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_p5p89WOkPDGiAs6XqOFLUY8km-3luhEnVj-GNaGmy_GnlYkofl1wpA_kc9-sw6-Q865gNYHaMXPFdQwAfh_mHeTnf72uM_eKV6MVAiVZibZLZDsuK2U6VUQoKDiOwdeuZ7_ymS7l6qst/s1600/floating-social-media-sharing-bar-for-blogger.png" width="320" /></div><br />Adding the below jQuery script will make the buttons float in a fixed position as soon as they reach "the top" of the page. By scrolling back, the buttons will return to their initial position.<br /><br />The <b>social sharing bar</b> includes buttons for <b>Facebook</b>, <b>Twitter</b>, <b>Google+</b>, and <b>Pinterest</b>.<br /><br /><h3>Social Media Sharing Buttons below Blogger Post Title</h3>Step 1. From the <a href="http://blogger.com/" rel="nofollow" target="_blank">Blogger Dashboard</a>, go to "Template" and click on the "Edit HTML" button:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBZxuDSF74SaIvFbOkJzwuk_GViqVsU-Jg3BPH6yPAhXfgzrbv10D6i7zzU46ihrvYGMllL20NFDIgMzwjdZ71SwABN7A9C2v3HCRQ_qzBXzNbo1n_sR5TfHWU5l4Bgd96593RVV3lqTS-/s1600/blogger_blogspot_template_edit_html_tutorial.png" width="320" /></div><br />Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Once you see the search box, type the <span style="background-color: yellow;"></head></span> tag inside the search box and hit Enter to find it.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger search box, ctrl + f" border="0" height="265" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiucBK6jsoFGvgq1f7-O8Bdg8vpE4x8JhIN44axFxgDjql6raTN_rLBIuzZG3Fk3KbDKgVyei_EhJgyx409mdCVpQ334ADoAxLNxFbMXkcRVUOp8DOmQsg-GWuiIHvhxtt9zPGFDVeGN-Uw/s1600/open-blogger-search-box-ctrl%252Bf.png" title="Add floating social media sharing buttons below Blogger post titles" width="600" /></div><br />Step 3. Just above </head> add this script:<br /><blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><br /><br /><script type='text/javascript'><br />//<![CDATA[<br />$(function() {<br />var $movesbuttons = $("#floating-social-buttons"),<br />$window = $(window),<br />offset = $movesbuttons.offset();<br />$window.scroll(function() {<br />if ($window.scrollTop() > offset.top) {<br />$movesbuttons.css({'position' : 'fixed', 'width' : '<span style="color: #cc0000;"><b>550px</b></span>', 'top' : '0px'});<br />} else {<br />$movesbuttons.css({'position' : 'absolute', 'top' : 'auto'});<br />}<br />});<br />});<br />//]]><br /></script></blockquote>Step 4. Now before the <span style="background-color: yellow;">]]></b:skin></span> tag (press CTRL + F to find it) add the following CSS styles:<br /><blockquote class="tr_bq">#floating-social-buttons {<br />padding: 6px 0px 12px;<br />position: absolute;<br />background: #F6F6F6;<br />border-bottom: 1px solid #DEDEDE;<br />width: <span style="color: #cc0000;"><b>550px</b></span>;<br />height: 18px;<br />z-index: 99;<br />}<br />.floating-social-buttons {<br />margin-left: 5px !important; <br />}<br />.floating-social-buttons li {<br />float: left;<br />margin-left: 5px;<br />list-style:none;<br />}</blockquote>To change the width of the bar, modify the <span style="color: #cc0000;">550px</span> values in red. Note that this value also appears in the script which also needs to be modified. <br /><br />Step 5. Finally, just below the second <span style="background-color: yellow;"><div class='post-header'></span> (press CTRL + F and hit Enter twice to find the second one) add the following code:<br /><blockquote class="tr_bq"><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div style='padding:5px 0 <span style="color: blue;"><b>35px</b></span> 0;clear:both;'><br /><div id='floating-social-buttons'><br /><ul class='floating-social-buttons'><br /><br /><li><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=25&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:25px;'/></li><br /><br /><li><a class='twitter-share-button' data-lang='en' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></li><br /><br /><li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></li><br /><br /><li><a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' style='margin:0 10px 5px 0;'>Pin It</a> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/></li><br /><br /></ul><br /></div><br /></div><br /></b:if></blockquote><h3>Customizing the Floating Social Media Sharing buttons</h3>If you want the buttons to appear at the end of the post, paste this code before or after <span style="background-color: yellow;"><div class='post-footer'></span><br />If the bar overlaps with the post content, then change <span style="color: blue;">35px</span> to a higher value.<br /><br />Step 6. Click on the "Save template" button and you're done!<br /><br />So these were the steps for <b>adding the horizontal social buttons bar on Blogger</b>. Using this bar it is also useful as it could help you to get more social traffic for your blog.

Add floating social media sharing buttons below Blogger post titles

It is becoming increasingly important to make our posts appreciated and shared on social networks and one of the best ways to get traffic to...

Read more »

How To Add Social Media Icons to Blogger Header

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizjGi0Bgx7c6CLm6zrwUkCO1pqMiZ6q8_4Rz1CtOxkSfx5QJ1dxQddEkk1ntTB3zmHxVohJFFndWrpqaLZyZfBc16GzfXuAJTXP788xD8_D2YHUwELCqy3ePw0hAz9XjS1Kw7id47fA0Em/s1600/social-media-icons-to-blogger-blogspot-header.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="social media icons, facebook icons, social media icons for blogger" border="0" height="162" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizjGi0Bgx7c6CLm6zrwUkCO1pqMiZ6q8_4Rz1CtOxkSfx5QJ1dxQddEkk1ntTB3zmHxVohJFFndWrpqaLZyZfBc16GzfXuAJTXP788xD8_D2YHUwELCqy3ePw0hAz9XjS1Kw7id47fA0Em/s1600/social-media-icons-to-blogger-blogspot-header.png" title="social media icons to blogger header" width="200" /></a>This tutorial will help you to add social media icons in the top right corner of the page which could increases the likelihood that readers can follow through the various social networks. There are several ways to do this, like <a href="http://helplogger.blogspot.ro/2012/03/how-to-add-gadgetwidget-inside-your.html" style="color: #0b5394; font-weight: bold; text-decoration: none;">adding a new widget section to the blog header</a> but now, we'll do it using an unordered list that uses icons of Facebook, Twitter, Google+ and blog feed, and as a bonus, the icons will rotate when you hover over them.<br /><br />You can see a demo in this <a href="http://helploggerdemo.blogspot.ro/2013/05/the-imaginarium-of-doctor-parnassus.html" style="color: #0b5394; font-weight: bold; text-decoration: none;">test blog.</a><br /><br /><br /><h2><span style="color: #f16d0a;">Adding Social Media Icons to Blogger Header</span></h2><span style="color: #87ad57;"><b>Step 1.</b></span> From your Blogger dashboard, go to <b>Template</b> and click on the <b>Edit HTML</b> button:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBZxuDSF74SaIvFbOkJzwuk_GViqVsU-Jg3BPH6yPAhXfgzrbv10D6i7zzU46ihrvYGMllL20NFDIgMzwjdZ71SwABN7A9C2v3HCRQ_qzBXzNbo1n_sR5TfHWU5l4Bgd96593RVV3lqTS-/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger blogspot, blogger template, blogger gadgets" border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBZxuDSF74SaIvFbOkJzwuk_GViqVsU-Jg3BPH6yPAhXfgzrbv10D6i7zzU46ihrvYGMllL20NFDIgMzwjdZ71SwABN7A9C2v3HCRQ_qzBXzNbo1n_sR5TfHWU5l4Bgd96593RVV3lqTS-/s1600/blogger_blogspot_template_edit_html_tutorial.png" title="how to edit blogger template" width="320" /></a></div><br /><span style="color: #87ad57;"><b>Step 2.</b></span> To expand the style, click on the small arrow on the left of <b><b:skin>...</b:skin></b> (<i>screenshot 1</i>), then click anywhere inside the code area to search (using CTRL + F) for the <b>]]></b:skin></b> tag (<i>screenshot 2</i>) and add this code just above it:<br /><br /><blockquote class="tr_bq"> /* Social icons for Blogger<br />----------------------------------------------- */<br /><br />#social-icons {<br />margin-bottom:-30px;<br />height:50px;<br />width:100%;<br />clear:both;<br />z-index: 2;<br />position: relative;<br />}<br />.social-media-icons {<br />display:table<br />}<br />.social-media-icons ul {<br />text-align:right;<br />padding:5px 5px 0 0<br />list-style-image:none;<br />list-style-position:outside;<br />list-style-type:none;<br />}<br />.social-media-icons ul {<br />margin-bottom:0;<br />padding:0;<br />float:right;<br />}<br />.social-media-icons li.media_icon {<br />margin-left:6px;<br />padding-left:0 !important;<br />background:none !important;<br />display:inline;<br />float:left;<br />}<br />.social-media-icons li:hover {<br />-moz-transform: rotate(360deg);<br />-webkit-transform: rotate(360deg);<br />-o-transform: rotate(360deg);<br />transform: rotate(-360deg);<br />-moz-transition: all 0.5s ease-in-out;<br />-webkit-transition: all 0.5s ease-in-out;<br />-o-transition: all 0.5s ease-in-out;<br />-ms-transition: all 0.5s ease-in-out;<br />transition: all 0.5s ease-in-out;<br />}</blockquote><div style="text-align: center;"><br /><i>Screenshot 1:</i></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXgOCt2kbz2oWaII4Zzhj14Xfe2OE54mwfrAuG8D1KMan5h0lshjqWDiVnREYSgTf-JTQqwis0tT64y8VyPcGS_HlaGr4P-AgR4BXtd2lndu5yQwv8DrhyphenhyphenYqx0HblddVZ1Cgl695xRuukq/s1600/blogger-template-editor-css-styles.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXgOCt2kbz2oWaII4Zzhj14Xfe2OE54mwfrAuG8D1KMan5h0lshjqWDiVnREYSgTf-JTQqwis0tT64y8VyPcGS_HlaGr4P-AgR4BXtd2lndu5yQwv8DrhyphenhyphenYqx0HblddVZ1Cgl695xRuukq/s1600/blogger-template-editor-css-styles.png" /></a></div><br /><div style="text-align: center;"><i>Screenshot 2:</i></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6nS9iRaKglHSvyHlqrCKK6MNXuN-7kZVQohB47y-Uu3ONp41uZxzBWbIb0Ca0Y2WJkSHP2N1f2EFBgFSn7UnOXoZV5kKtTeXdBWhPyYBRkEuxQNIE9MB0io19QX6XNJIwn75MEixbBNZM/s1600/how_to_search_in_blogger_template_editor.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6nS9iRaKglHSvyHlqrCKK6MNXuN-7kZVQohB47y-Uu3ONp41uZxzBWbIb0Ca0Y2WJkSHP2N1f2EFBgFSn7UnOXoZV5kKtTeXdBWhPyYBRkEuxQNIE9MB0io19QX6XNJIwn75MEixbBNZM/s1600/how_to_search_in_blogger_template_editor.png" width="400" /></a></div><br /><span style="color: #87ad57;"><b>Step 3.</b></span> Now search for this line<br /><br /><blockquote><b:section class='header' id='header' maxwidgets='1' showaddelement='no'></blockquote><br /><span style="color: #87ad57;"><b>Step 4. </b></span>And just above it, add this code:<br /><br /><blockquote class="tr_bq"><div class='social-media-icons' id='social-icons'><br /><ul><br /><br /><li class='media_icon'><a href='http://facebook.com/<span style="color: #cc0000;">username</span>'><img border='0' src='<span style="color: blue;"><i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR6jneDYh2pne03ZrT_FhesjOmCc_GyVRVHelPGGwpfvAwo7-mk3M6g2sA2eW34S55Jx3BG4p_uUFAOWLUNT6S4VuMuiLIdvpLf5r3G64MmVf7sX_sBMLvSL5sEmuqxyJW5ywf3PtjK9A/s1600/Facebook.png</i></span>'/></a></li><br /><br /><li class='media_icon'><a href='http://twitter.com/#!/<span style="color: #cc0000;">username</span>'><img border='0' src='<span style="color: blue;"><i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmH8s3JPqI2EMb0tKKG87isi0xiQCbh_FNEcU110AWqdglrBsRyRPF1p2NJfl5YmvkcoyTVN4K5j-bczcdjfNaZYtgpR449OBL5cu69grHNlMB5Vau0ifB2R8mPjIyXhCZz4xS3W-hBKw/s1600/Twitter.png</i></span>'/></a></li><br /><br /><li class='media_icon'><a href='https://plus.google.com/<span style="color: #cc0000;">XXXXXXXXXXXXXXXXXX</span>/about'><img border='0' src='<span style="color: blue;"><i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXak_ipEfS7KCIBBG3QUIuFArir2BXFnFVUdNq3TMcZuA4YlmzwMWZ2PQ0WawBuRtzonAIUmLKubEWf-2LtR84QPUkZG9raMJtIM01XUUyoOcBC3g25Jp_1Zk8Bb0-cXMa8o0YnJDHK_4/s1600/googleplus.png</i></span>'/></a></li><br /><br /><li class='media_icon'><a href='<span style="color: #cc0000;">http://name-of-your-blog.com</span>/feeds/posts/default'><img border='0' src='<span style="color: blue;"><i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigf3OENZq0BeMv5jgHRwnojkNpssM4OamVJ_Q-bvPZgedYytGjhlekqHg1L2V2PfJKNVakMzBYrW3wGJcHwokMNF0Jks000O9qGampFot17T-MWyebGW-Xlqux83dowCJesAVmtCKrwVI/s1600/RSS.png</i></span>'/></a></li><br /><br /><b></ul></div></b></blockquote><br /><span style="color: #3d85c6;"><span style="font-size: large;"><b>Customization</b></span></span><br /><br />- Change what's in red with your usernames and id: the first is your Facebook username, the second is that of Twitter, in the third you should change the X by the ID of your Google+ profile and in the fourth you will put the name of your blog.<br />- To change the icons, just replace the urls in blue with the ones of your images.<br />- You can add more icons if you want, you just have to add before <b></ul></div></b> a line like this for each extra icon you want:<br /><br /><blockquote><li class='media_icon'><a href='Link URL'><img border='0' src='Image URL'/></a></li></blockquote><br /><span style="color: #87ad57;"><b>Step 5.</b></span> Finally, Save the Template to apply the changes.<br /><!-- adsense -->The effect is done with CSS3, so this effect will not work in older browsers.

How To Add Social Media Icons to Blogger Header

This tutorial will help you to add social media icons in the top right corner of the page which could increases the likelihood that readers ...

Read more »