Add Floating Social Media Buttons to Blogger

Posted by M Qasim A Siddiqui

Social Media buttons play a great role to share your web content by the visitors quicklyon Facebook, Twitter, Google+  and many other platforms. If you have sharing widget you can increase your blog traffic also. There are several ways to add these buttons such below post title or at footer area, as I shared in my previous posts. Now, in this post we will discover how to add floating Social Media Buttons. Forget about the some share widgets based on J-query scripts, because they increase blog loading time and still some browsers like Internet Explorer does not support J-query scripts function properly. This social button set is based on CSS and does not increase blog's loading time. 

Follow some simple steps to add this quick share tool to communicate with your visitors/ audiences. 

1. Go to Blogger > >Template.
2. Backup your template.
3. Click Edit HTML.
4. Click Proceed.
5. Then Click Expand Widget Templates.
6. Search following line (Use Ctrl+F ).

<b:includable id='post' var='post'>

7. Just below it paste the following codes-

<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><style>.mbt_social_floating{position:fixed; bottom:10%; margin-left:-60px; float:left;width:60px;background-color:#FFFFFF;padding: 5px 0 0px 0px;border-top:1px solid #ddd;border-left:1px solid #ddd;border-bottom:1px solid #ddd;z-index:9999px !important;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}.mbt_social_floating .mbt_side_social_button{margin-bottom:5px;float:none;height:auto;width:60px;}.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{margin-left:5px;}.mbt_social_floating .st_fblike_vcount{margin-left:5px;}.mbt_social_floating .stButton_gradient{background:none !important;height:21px !important;padding-left:0 !important;}.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD6QnEKhKzxIOSCBVzAHyo5_ShCU8-u93AqX7-u42CLDj9zCi8pzgcMe2SC47RzV-6SOQU1PX6WmQX_zBJoFEnyHdAXh8mt_u9CMVx1YNnhqYwVUqu2ov82Rtmlo5G8PF43Ir18u8td08c/s400/gc_social_sprite.gif&#39;) no-repeat !important;height:19px !important;width:45px !important;padding:0 !important;}.st_email .chicklets{background-position:0 -77px !important;background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD6QnEKhKzxIOSCBVzAHyo5_ShCU8-u93AqX7-u42CLDj9zCi8pzgcMe2SC47RzV-6SOQU1PX6WmQX_zBJoFEnyHdAXh8mt_u9CMVx1YNnhqYwVUqu2ov82Rtmlo5G8PF43Ir18u8td08c/s400/gc_social_sprite.gif&#39;) !important;}.mbt_social_floating .st_twitter_vcount .st-twitter-counter{background-position:0 -58px !important;}.mbt_social_floating .stButton_gradient{border:none !important;}.mbt_social_floating .stBubble_count{width:44px !important;font-size: 15px !important;font-weight: normal !important;padding-top:7px !important;height:23px !important;background:none !important;}.mbt_social_floating .st_twitter_vcount .stBubble_count{color:#00a6df;background-color:#f8fbfc !important;}.st_fblike_vcount{  margin-bottom: 0px;display: block;}.st_twitter_vcount{margin-bottom: 3px;display: block;}.st_email{  margin-bottom: 5px; margin-top: 3px;display: block;}.mbt_social_floating .stBubble{background-position: 21px 31px !important;height:35px !important;}</style><div class='mbt_social_floating'>  <script type='text/javascript'>var switchTo5x=true;</script><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({onhover:false});</script><span class='st_fblike_vcount' displaytext=''/><span class='st_twitter_vcount' displaytext='' st_via='arvindjangid'/><div style='margin:5px 0 0px 0;'><center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a><a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/><script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/><script type='text/javascript'>function run_pinmarklet() {var e=document.createElement(&#39;script&#39;);e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);document.body.appendChild(e);}</script> </center></div><div style='margin:0px 0 0 5px;'><span class='st_plusone_vcount' displaytext=''/></div><div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'><a class='addthis_counter'/></div><script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/><script type='text/javascript'>var addthis_config = {ui_cobrand: &quot;Mast Tips&quot;,ui_header_color: &quot;#ffffff&quot;,ui_header_background: &quot;#0080FF&quot;}</script></div> </b:if></b:if>

Variables:

Replace arvindjangid with your own twitter username. Save template and done. If you have any question please feel free to ask.

How to add Wikipedia Search Box Widget in Blogger

Posted by M Qasim A Siddiqui

Yesterday, Blogger added a new Wikipedia Search Box widget to their Gadgets inventory. This gadget is solely developed by Blogger officials, so it is rather obvious that it would not have any creepy bugs. Though, it is a precisely minimalistic gadget as it only provides you the ability to search Wikipedia within your site. However, to be able to view a certain topic you have to visit Wikipedia by clicking on the search results.  It works pretty much like Google custom search engine, and its appearance is also somewhat identical to it. Therefore, today in this article, we will show you How to add Wikipedia Search Box Widget in Blogger?

Apparently, you probably won’t get anything out of this widget, but it might grow user engagement because people can utilize this gadget to search the content in-depth. For example, you wrote an article about Google Panda, but users did not find it as useful or they wanted to know more comprehensive information on this topic. This tool can help users to search the same topic on Wikipedia so they can get comprehensive information on it. 

The process of adding this widget into your blog is a lot straightforward. There is no need to tussle up with coding because it would be installed in just few clicks. Firstly, go to Blogger.com >> Your site >> Layout >> Add a Gadget >> More Gadget. Now from the list of widgets, on the top you will see a widget named “Wikipedia” just select it and press the “Save” button. 

Whenever someone would use Wikipedia search box, it would populate the search results below the search bar and link out to the corresponding Wikipedia article (in a new browser tab). This would benefit both you and your users.  

According to the Blogger Officials, 

Our latest addition to the Gadget Gallery is the Wikipedia gadget. It allows you to add a Wikipedia search tool into your sidebar, under the header, or above the footer.  Do tell us, what you think about this latest addition in the inventory. 

We hope you enjoy this new gadget. However, this is not the limit, there are numerous ways through which you can increase the credibility of your website it entirely depends on a person how he use them. Please let us know what you think about it.

How to Create a Floating "Sticky" Sidebar Widget in Blogger

Elements that float along your screen are pretty cool and attention grabbing. They are more commonly known as the “Sticky” floating widgets that stick to your screen as you scroll and tend to have a higher click through rate. This is the reason why at MyBloggerLab, we are using a Floating subscription widget in the sidebar that has been quite useful for us. Many of our users kept on emailing us about how they can create a “Sticky” floating sidebar widget in Blogger. In the past, we have already shown you how to make a Sticky Floating Footer bar in Blogger. In this article, we will show you how to create a floating “sticky” Sidebar widget in Blogger?

Remember: This works pretty well with all kinds of widgets present in your sidebar. It is not necessary that a person can only use if for email subscription boxes. You can use it for promotion of your items, galleries, popular posts, Instagram photos, and basically everything that you wish for. 

Step#1: Adding a New Widget: 

The First thing you need to do is to add a new widget in your sidebar so that later on you can make it sticky. Go to Blogger.com >> Layout >> Add a Gadget >> Add HTML/JavaScript >> and name the widget as “My Sticky Gadget”. Now writing anything in the HTML body and once everything is down press “Save” button located at the end of the page.

Step#2: Installing a “Sticky” Plugin:

Now after properly adding a new widget in your blog, it’s time for some serious work. This time go to Template >> Edit HTML >> and search for the ending </body> tag and just above it paste the following JavaScript code.

<script>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Syed Faizan Ali
(function($) {
    var defaults = {
            topSpacing: 0,
            bottomSpacing: 0,
            className: 'is-sticky',
            center: false
        },
        $window = $(window),
        $document = $(document),
        sticked = [],
        windowHeight = $window.height(),
        scroller = function() {
            var scrollTop = $window.scrollTop(),
                documentHeight = $document.height(),
                dwh = documentHeight - windowHeight,
                extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
            for (var i = 0; i < sticked.length; i++) {
                var s = sticked[i],
                    elementTop = s.stickyWrapper.offset().top,
                    etse = elementTop - s.topSpacing - extra;
                if (scrollTop <= etse) {
                    if (s.currentTop !== null) {
                        s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
                        s.currentTop = null;
                    }
                }
                else {
                    var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
                    if (newTop < 0) {
                        newTop = newTop + s.topSpacing;
                    } else {
                        newTop = s.topSpacing;
                    }
                    if (s.currentTop != newTop) {
                        s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
                        s.currentTop = newTop;
                    }
                }
            }
        },
        resizer = function() {
            windowHeight = $window.height();
        };
    // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
    if (window.addEventListener) {
        window.addEventListener('scroll', scroller, false);
        window.addEventListener('resize', resizer, false);
    } else if (window.attachEvent) {
        window.attachEvent('onscroll', scroller);
        window.attachEvent('onresize', resizer);
    }
    $.fn.sticky = function(options) {
        var o = $.extend(defaults, options);
        return this.each(function() {
            var stickyElement = $(this);
            if (o.center)
                var centerElement = "margin-left:auto;margin-right:auto;";
            stickyId = stickyElement.attr('id');
            stickyElement
                .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
                .css('width', stickyElement.width());
            var elementHeight = stickyElement.outerHeight(),
                stickyWrapper = stickyElement.parent();
            stickyWrapper
                .css('width', stickyElement.outerWidth())
                .css('height', elementHeight)
                .css('clear', stickyElement.css('clear'));
            sticked.push({
                topSpacing: o.topSpacing,
                bottomSpacing: o.bottomSpacing,
                stickyElement: stickyElement,
                currentTop: null,
                stickyWrapper: stickyWrapper,
                elementHeight: elementHeight,
                className: o.className
            });
        });
    };
})(jQuery);
/*]]>*/
</script>
<script type='text/javascript'>
   $(document).ready(function(){
    $("#mblfloater").sticky({topSpacing:0});
   });
</script>

Step#3: Creating a Widget “Sticky” in Blogger:

After adding the JavaScript code, you have to search for the name of your widget. Since, we have named it as "My Sticky Gadget". Therefore, in the template coding search for "My Sticky Gadget". To be able to search correctly it is essential that you must use the built-in search box provided by the Blogger template editor.

Note: To enable the search box click anywhere in the template editor and press"CTRL+F". Now on finding "My Sticky Gadget" you will able to see a code similar to the the following one.

<b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>
            <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
          </b:widget>

Now after finding the code as mentioned above, just replace it completely with the following coding.

<b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>
            <b:includable id='main'>
<div id='mblfloater'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>  </div>
</b:includable>
          </b:widget>

Remember: The ID of your widget should be unique. For example, if you are usingid='HTML32' in any of your widget then you cannot use the same ID for others.

All done: Once everything is done, press the "Save Template" button to finish the process.

Sticky floating sidebar widgets can bring a lot of growth in your sign ups. They help in increasing user engagement. You can also use multiple floating widgets in sidebar. However, this act might annoy your visitors. Make sure you have a balanced design, so that it don't annoy your users

We hope that this article have helped you in creating a Sticky floating sidebar widget in your Blogger website. This plugin is robust enough to be used in any element of your sites. Let us know what you think in the below comments.

How Can People Add Background Images In Blogger Posts

 

Now i'm gonna tell you how can people add background images in posts. To have background pictures in blogger posts looks very nice. As you're watching background picture in my post. Any size of image can be used.
I hope this tricks will benefit you for your blog posts.

Step by step method to add background images in your post: 

First of all: 
Step #1: 
Go to www.blogger.com and sign in to your account.

Step #2:
Click on create "New Post" and then Click on "Edit HTML". 

 

Step #3:
Copy the code given below and paste it in "Edit HTML". And after pasting it type your text content which you wanna write where "Your Text Here" is written.

                <div style="background:url(  Your Image
           URL Address  ) no-repeat;">
             <br>  Your Text Here  <br></div>

Step #4:
Copy the address of image which you wanna add and paste the address where "Your Image URL Address" is written.

Step #5:
Now you have done, Publish your post and see the changes you've done in your background.


 

Did You Like It ?
Please share your ideas about it and give your valuable feedback's let me know what you liked or didn't like and if you liked then don't forget to subscribe to my daily post updates
Also, give the post a social media share.