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/AVvXsEiTZx5it26iyRlA9BHucWElk0lmr_wDhWZK3tR-UcMVomIdRfgSy2b0InGYuaFRpJhIEr06azz015OVt07OoDcHD5EQX8Clc21eNXSwPdWB-hHr6HXz_F1nPJw5wQADv4HNaQg7zOYK-XqQ/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/AVvXsEiTZx5it26iyRlA9BHucWElk0lmr_wDhWZK3tR-UcMVomIdRfgSy2b0InGYuaFRpJhIEr06azz015OVt07OoDcHD5EQX8Clc21eNXSwPdWB-hHr6HXz_F1nPJw5wQADv4HNaQg7zOYK-XqQ/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.

Read More

How to Customize Your Blogger Template using CodeLobster

Posted by M Qasim A Siddiqui

Creating Blogger templates has always been a difficult task especially for those who are not familiar with HTML language. There is no recognized software that could help you in creating a flawless Blogger template neither from Google, nor from any third-party developer. However, Codelobster is a versatile tool that would not only assists you in constructing templates for your site, but will also help you in learning different languages like HTML, CSS, XML, PHP and etc. Therefore, today in this article, we will discuss how you can use Codelobster, how does it works, how you can create blogger templates using Codelobster. 

What is Codelobster PHP Edition? 

Getting your hands dirty with coding is perhaps a nightmare for someone who is not familiar with coding.  It could take years to learn if a person is not provided with the accurate guidance. Sometimes conventional software could be the solution of your all problems. Codelobster is a multipurpose tool that supports almost all foremost coding languages including, PHP, HTML, CSS, XML, jQuery etc. There is no need to remember the conditions of the coding and vice versa.  There is no need of Dreamweaver because it provides a complete package for designs and developers. Following is the list of features that is supports. 

1. PHP, HTML, JavaScript, CSS code highlighting: Writing codes were never so easy before.


2. HTML autocomplete: It automatically applies closing tags to your attributes.


3. HTML/CSS code inspector: It helps you to find the in-depth coding within seconds. 


4. JavaScript Support: Perhaps the best tool to write spotless JavaScript coding. 


5. CSS autocomplete: It automatically adds the opening and closing curly brackets to your CSS coding. 


6. PHP debugger: It is a package of tools that helps you in developing applications based on PHP. 


7. Read, Write and Preview: You can write codes, read them and can also preview them in your browser.


8. Universal Tool: It has all standard features that are required for work with a code.

How to Edit Your Blogger Templates using Codelobster: 

Though, there are several HTML editors that could assist you in customizing your templates, but Codelobster stands above all of them. It has user-friendly HTML Editor that enables you to develop new themes or customize an existing one. It also supports XML language, so you can easily open an XML template and can edit them to a certain degree. This software is not developed for Blogger, but it is flexible enough to support few of its features. 

The First thing you need to do is to purchase a Premium version of Codelobster. The price of this software is no more than 120$, which is impressive for a tool that is jam-packed with thousands of quality features. However, it also has a FREE version, but that does not support plugins and lots of other fascinating features.  Everything depends on your needs, if you only want to use it as an HTML editor then the free version is decent enough to assist you, but if you want to become a professional web developer then you have to go for Paid version. 

Final Words:

It is fantastic software for geeks. It has all those options which a standard designing tool demands. We are also using this tool to develop Blogger Templates for our sister blog@templateism. We hope this useful software would help you in learning different types of coding languages. What are your thoughts about this tool? If anyone has a better recommendation for our users, then feel free to leave it in comments. We want to transform this article into a never-ending resource for users. 

Read More

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.

Read More

How to Create a Professional Blogger Template using Artisteer

Blogger has a remarkable Template designer that helps you in customizing your themes and templates. The designer tool helps you to change the background, fonts, color etc, but it does not allow you to change its appearance. Often we get emails from users that how we can design a custom Blogger template without learning HTML or CSS coding?  In most cases, people prefer to hire some developers but a person who is new to blogging, perhaps he is a beginner cannot pay thousands of dollars to a professional web developer. Using Artisteer you can create your very-own custom blogger template within few minutes. Today in this article, we will discuss How to Create a Professional Blogger Template using Artisteer.

What is Artisteer – Web Design Software?

Honestly, the combination of CSS with HTML is incredible, but guys who don’t want to get their hands dirty with some confusing coding could always prefer Artisteer. It is the first web based automotive web design software that supports almost all foremost blogging platforms like Blogger, WordPress, Jhoomla and Drupal.  It instantly creates themes and templates for your website through just drag and drop there is no need of HTML or CSS coding. Following are few prominent features of this software. 

• Allow you to design incredible web templates not in minutes, in seconds. 
• Create different pages for your website using drag and drop options. 
• Allows you to either edit an existing theme or create a new one. 
• There is no need to learn Photoshop, CSS, HTML or any other web designing language.

How To Create Blogger Templates Through Artisteer:

The First thing you need to do is to Download and install Artisteer. Just like Codelobster this software is also not a freeware. However, its trial version still allows you to create, export or import web templates so if you want to buy a premium version then it’s your choice because trial version works as good as the paid one. 

The installation wizard is quite straightforward, just follow the instructions as it guides through the installation. Once installations finishes open the software either from your start menu, or from your desktop.  

Step#1: Creating a New Blogger Template:

After opening Artisteer, the next thing is to create a new template document so go to File >> New. Now a new wizard will appear asking you to select a CMS (Content management system). It supports four most popular CMS system i.e. Blogger, Drupal, WordPress, DukeNetNuke and Jhoomla. Since, you are trying to create a blogger template, so you would select the “Blogger” icon. However, you can also work on other CMS themes.  Once done proceed to the next step.

Step#2:  Designing the Header:

Now you would be able to see a Simple blog theme, using the custom functions you would convert it into a professional theme. To start off you have to design your header area. On the tool bar there is an option known as “Header” just select it as shown in the screenshot below. 

It will provide you numberless option through which you can change the width, height, background, position and lots of other things in your header. In fact, you can also use ready-to-use Flash and gradient background effects. Doesn’t that sound interesting? You can also use “Suggest Header” tool that assists your design and automatically applies a design that matches your color scheme and style. 

Step#3: Designing a Perfect Sidebar:

Every blog has a sidebar that usually appears either on the left or right side of a website. On selecting “Sidebar” from the toolbar, it would provide you a few options. You can change the layout, add two sidebars, and can even customize it appearance. 

If you wish to add two sidebars in your website select “Layout” from the sidebar menu which would provide you a couple of options such as one column, two columns and three columns. You can select it according to your needs. 

There are lots of other options like styling and coloring your sidebar. You can experiment all the functions and can create a new thing every time you play with them. However, if you have no idea how to style the sidebar, then you can try the “Suggest Sidebar” tool and this software would advise a few modifications. 

Step#4: Designing an Impressive Post Page:

Post pages are the basic need of a website. Without having a proper post design your blogs remain empty or incomplete. To design impressive post pages select “Article” button present on the toolbar. It would take you to a list of options that can help you in creating an ideal post pages for your site. You can Change the Heading style, fonts, color, Blockquote and appearance of your post area. 

All tools are there to help you, you can experiment each of them and can convert your theme into a masterpiece. 

Step#4: Designing Other Core Elements of your Template:

Footer: You can also create a unique footer area for your site using the “Footer” button located on the tool bar. It doesn’t have lots of options for customization, but they are enough to create a decent footer. 

Menu: By default, you get multi-drop down menus, so you do not code them from scratch. However, you can customize theme accordingly from the “Menu” button. It has a lot of options for customization.

Background: Using the background tool, you can either upload image backgrounds or can use the custom gradient color backgrounds. You can also add texture to your background using the same tool. 

Layout: You can either use full-width layout or can select a certain width using the “Layout” option located at the toolbar. You can add border to your layout, texture, and other fascinating stuff to play. 

Step#5: Exporting Your Blogger Template:

Once your template is ready, it is time to export so that you can upload it on your blog. Go to File >> Export >> Export Template >> save the file. Remember: The file would be saved in .zip extension, so you need WinRAR to unzip it. The package would consist of two files i.e. the main blogger template in .xml format and a folder of pattern images. 

We hope this article answered all the related questions like how to create a blogger template without having any CSS or HTML knowledge. If we have left something uncovered, or you know some better method of creating themes then please leave a comment below.

Read More

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.

Read More

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.

Read More