Blog Supporter

Offer Blogger Blog, WordPress Website Development
Tutorials, and Simple Search Engine Optimisation Tip With Love
Sign up here to get the latest news, updates and special offers delivered directly your inbox.

Website SEO Audit Tips

Website Development Services

Website, Blog Design
Website, Blog Design
Website Development
Website, Blog Development
SEO Audit
Website SEO Audit

April 21, 2018

How to Enable HTTPS on Blogger
In the previous article, I explained about How to change HTTP to HTTPS in Blogger domain, therefore, in this earlier article I will explain and show you the incredible trip, it is how to enable HTTPS on Blogger with the Custom domain. the default domain name host with the HTTP extension or insecurity extension so most of the website and blog hosted within this security level. It does not a matter if you don't what to protect the integrity and confidentiality of your users' date. But if you are using the Blogger CMS, I suggest you activate or enable the HTTPS function on your blog dashboard which offers by Blogger. Before you start it, you should learn what it is about and why it is necessary for your blog.

These letters are standing for;
  • HTTP: Hypertext Transfer Protocol
  • HTTPS: Hypertext Transfer Protocol Secure
  • SSL Certificate: Secure Sockets Layer Certificate.

What is the Hypertext Transfer Protocol Secure (HTTPS)?

Well, the HTTPS stands for Hypertext Transfer Protocol Secure or HTTP Secure. It is a specific application that implementation and combination of the Hypertext Transfer Protocol (HTTP) with the SSL/TLS that can make your website or blog to be secured from the hacker. HTTPS is an application-specific implementation that is a combination of the Hypertext Transfer Protocol (HTTP) with the SSL/TLS. HTTPS is used to provide encrypted communication with and secure identification of a Web server.

HTTP vs HTTPS
HTTP vs HTTPS

Where can you buy SSL Certificate?

If you are using the Blogger CMS, it offers SSL Certificate by free of charge but if you use other Custom Mangement Systems, then you need to buy it from those domain registrar companies.

Now I can wait to show you how to activate HTTPS on Blogger with your custom domain. Before you start it, please make sure you connect your Blogger with a custom domain. Let's go through this instruction below step by step.

Step 1: Login to your Blogger Dashboard
Step 2: Enable HTTPS and Enable HTTPS Redirect
In this step, your custom domain must be done or if you are not yet ready, then add a custom domain now by following this instruction. After that following this actions.
  • Action #1: Click on Setting then Basic
  • Action #2: Select YES on HTTPS Availability
  • Action #3: Select YES on HTTPS Redirect

Enable HTTPS on Blogger with Custom Domain
Enable HTTPS

Step 3: You have to wait 30 minutes to 1 hour
Now before you start the Action #3, you have to wait about 30 minutes to 1 hour after you enable HTTPS because of the HTTPS Redirect does not able to active yet.

Step 4: Change HTTP to HTTPS on Blogger template code sources
Editing your theme so it mixes HTTP and HTTPS may affect the security and user experience of your blog when it is viewed over HTTPS. So you need to change all HTTP to HTTPS in your Blogger template code sources. To edit the theme, just click on Theme > Edit HTML button.

After you complete all these 4 steps, soon you will see the green mark on your blog address (URL). If you have any question just leave a comment below, I will answer all your question soon I received them.

March 31, 2018

Change Message Template
We all love the feeling of having new comments below our blog posts and to increase the chances of having more comments, we install many other third-party commenting systems like as Facebook comment system, Google+ comment system, and Disqus comment system.

But still, the majority of bloggers who blog on Blogger platform prefer using blogger's default system of commenting. Even this blog also uses only blogger's default commenting system. Although we have changed a few things to make it look better and meet the theme design.

The most annoying thing we need to change is those text strings appear before the comment box like as "0 Comments" when there is no comment, "2+ comments:" and "Post your comment". This is what we are going to deal with thoroughly in this post. We will change them to whatever Message we want to appear in whatever style using CSS. We can use the images too.

Here is How You Can Change These Default Text Strings

First of all be ready and just login to your blogger account >> select your blog >> go to Template section >> click on Edit HTML >> . Now click anywhere inside the template code box and save a backup of your template to your desktop. Now press Ctr+F on Windows OS or Cmd+F on Mac OS to open up a search box inside the template code box (Click inside code box first to open search box inside it).

Note: Please, have patience and read carefully otherwise you'll face problems of not working. I am providing a solution for both templates. I mean third party custom template or blogger's default template.

Demo of the Final Result we will achieve with this blog comment

Note: You can change these messages to your own, this is just a demo to show you as a proof. Scroll down to the end of the post and see ours' too :)

Customize Blogger Comment

Disabling "0 Comments" Message When There is No Comment

This message appears along with another message "Post a Comment" so, first of all, we will disable "0 Comments" text string when there is no comment. Then the only left message is "Post a Comment" and it disappears when there are some comments. Will change it too, just take baby steps

Find this HTML code in your blog template given below:

(Tip: type <h4> in search box, hit enter until you find this code)

   <h4>
        <b:if cond='data:post.numComments == 1'>
          1 <data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
  </h4>
This above code is liable to generate 0 Comments message. You will find this whole code two times so you have to take care of it that you do change as given below to both codes. Now we will wrap it up with a conditional tag so that this message only appears if there is one comment or two and disappears when there is no comment. Please read editing step carefully given just below the code.

<b:if cond='data:post.numComments != 0'>
<h4><span>
<b:if cond='data:post.numComments == 1'>
1 Reply so far - Add your comment
<b:else/>
<data:post.numComments/> Replies so far - Add your comment
</b:if>
</span></h4>
</b:if>

Editing: Conditional tag is highlighted in YELLOW color which will not let the message "0 Comment" appear when there is no comment. The code highlighted in RED color is the very important step to edit. This is the message you want to appear when there is 1 comment or more than one. First Highlighted message is singular means for one comment and the second message is for plural means when there are more 2 or more comments. So change them as you like it to replace the code above with this one.

Wait, Did you find the code above or Not?

If you're using a third party template code then you must find out this code. Just type <h4> in search box and hit enter. Did you find this code now? If not then just search for another code given below and replace it with the code given above. This time you can't really miss it.
<h4><data:post.commentLabelFull/>:</h4>
Replace this whole code if found with the code given above it. You may find this code twice so do the same for two times.

Changing "Post a Comment" Message in Blogger

Now this message will appear when there is no comment on your blog post, right? You can change it too with whatever text you like or even you can use an image instead. You need to find out the HTML code given below.

Tip: Press Ctrl+F and paste this code <h4 id='comment-post-message'>into the search box to find this long piece of code easily.

<h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
Editing: Now just delete the highlighted Code in Red and write your message in normal text like as "Leave a comment", excluding quotes. Did you get it? Cool, so now we are almost done with it and you just move on to next step which is adding CSS style to make these messages appear in the eye-catchy way rather boring and dull. Do you like it? Else-wise you're done if you like to read boring messages

Add These CSS Styles to Comment Messages

This is simple step compared to above steps. You need to find this class of CSS in your template's CSS code >> .comments h4 then delete it and paste the code given below or just replace it. Make sure that this class is alone/separate before deleting it or replacing it. There may be the case that this class is used with other classes together to apply a common style to them. If this is the case then just remove this class from other class and then paste the code separately. If you did not get it then I am waiting in the comment section.

/*---Comment Box Message CSS Style by Blogsupporter.com---*/
.comments h4 {
  background-color: #05A0FF; /*--- Change Background color Code ---*/
  font-weight: normal;
  color: #ffffff;                         /*--- Change Text Color Code ---*/
  padding: 0px;
  text-align: center;
  line-height: 2em;
  border-radius: 2px;
  font-size: 17px;                 /*--- Change Font Size ---*/
  font-family: sans-serif;     /*--- Change Font Family ---*/
  width: 100%;
  position: relative;
}

Editing: To make changes, just follow the comments I have added to CSS style code in front of every line which says itself what you can change there.

Final Step: Do not forget to save the template and please Do Reply whether it worked for you or not. I wait eagerly to help you as soon as you post in comments.

March 17, 2018

Elegant Popular Posts Widget for Blogger
Show off your golden posts with this new elegant style popular posts widget which is designed for blogger users.

I have shared my Sidebar Subscription Box Widget to which I am using on this blog (you can see it live hanging into the sidebar) previously in few different versions.

But in this totutorial I have designed another cool professional looking popular posts widget with lovely hover effect and counter box.

Some Features of New Elegant Style Popular Posts Widget

  1. Default Thumbnails used (no JavaScript)
  2. Cool Counter Box Hanging Left Side
  3. Simple Neat and Clean Design
  4. Easy Customization
  5. Cool Hover Effect
  6. The whole List item is clickable, that means it will be clickable when the mouse is hovered on the list item area and not only by hovering the mouse over the title link or thumbnail like as other widgets
  7. Using Google fonts (This is optional).

So Where is Demo Screenshot?

Here it is!

Elegant Popular Posts Widget

Installing New Elegant Style Popular Posts Widget to Blogger

Ready to add? I have used Google font family Oswald (Lovely Font) which gives this widget an elegant look so I recommend you to use this font family. In case you're already using then you can skip this step of adding Google font family to your template.

Add Popular Posts Widget to Your Template Sidebar First

First of all you need to install it from blogger gadgets library.

Go to Blogger - Layout - click on Add a Gadget link into sidebar then add a popular posts widget. In case you have installed it already then skip this step.

Change Configuration Settings

Now just change the configuration settings of newly added popular posts widget where you have to uncheck snippet. See the screenshot below.

Configure Popular Post on Blogger

Adding Google Font Family "Oswald" (Optional)

1) Got to Blogger - Template - Edit HTML (Save a backup copy of your template code first)
2) Find out this code <head> and paste the Google font family link just below this code (Use Ctrl+F or Cmd+F after clicking inside the template code box to open up a search box for searching your code)

<link href='http://fonts.googleapis.com/css?family=Oswald|Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>

Adding CSS Code to Your Template

Now all you need to do is add the CSS code of popular posts widget into your template code.
I have made it for using in the sidebar by adding .sidebar class to it, but you can make it work in the footer too. Just change the .sidebar class with your footer id or class name.

Note: If you are using any other popular posts widget already for sidebar then you need to remove that CSS code first otherwise it will not work and you will mess up everything.

If you need my help then leave your message in the comment section with your blog URL.

3) Find out this code ]]:</b:skin> and just before that paste the whole CSS code given below as it is.

/*----Sidebar Popular Posts Widget Style by Blogsupporter.com----*/
.widget .widget-item-control a img {
  border: none;
  width: 20px !important;
  height: 20px !important;
  padding: none;
  background: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -ie-box-shadow: none;
  box-shadow: none;
}
.sidebar .PopularPosts .widget-content ul li {
  padding: 0px 0px 0px;
  height: 73px !important;
  overflow: hidden !important;
  list-style-type: none !important;
  list-style: none;
}
.sidebar .popular-posts ul {
  padding-left:0px !important;
  list-style-type: none !important;
}
.sidebar .popular-posts ul {
  counter-reset: popcount;
  margin: 0; padding: 0;
}
/*---- Change Counter Box Style Here ----*/
.sidebar .popular-posts ul li:before {
  background: rgba(247, 247, 247, 1);
  color: #000000;
  content: counter(popcount,decimal);
  counter-increment: popcount;
  float: right;
  font-size: 15px;
  line-height: 20px;
  list-style-type: none;
  padding: 0px 6px 1px 5px;
  border-radius: 0px 0px 7px 7px;
  position: relative;
  display: inline-block;
  box-shadow: -2px 2px 10px rgba(187, 187, 187, 0.7);
  font-weight: normal;
  top: 0px;
  right: 1px;
  z-index: 999999999999;
  border: solid #B5B5B5;
  border-width: 0px 1px 1px 1px;
}
.sidebar .PopularPosts .item-thumbnail {
  float: left;
  margin: 0px!important;
}
.sidebar .PopularPosts img {
  padding-right: 0px !important;
  width: 72px;
  height: 72px;
  overflow: hidden !important;
  margin-right: 0px;
}
.sidebar .PopularPosts .item-title a:hover {
  background: #f6f6f6;
  color: #000;
}
/*-----Change Font Family - Background - Style - Size or Color Here-----*/
.sidebar .PopularPosts .item-title a {
  background: #EAEAEA;
  color: #6E6E6E;
  display: block;
  font-size: 14px;
  font-weight: normal;
  line-height: normal;
  font-family: "Oswald",sans-serif;   
  padding: 10px 30px 0px 78px;
  transition: all .4s ease-in-out;
  height: 62px;
  text-decoration: none;
  border-bottom: 1px solid #cccccc;
}

Save your template code now and you're done. Visit your blog to see your new popular posts widget hanging into the sidebar.

If you're not able to get it working then leave your message in the comment box with your blog URL and the problem you're currently facing. Even if you want some changes then you can ask me.

Editing: You can edit this widget the way you want like as changing the font family, font size, background color, hover color or color of the counter box. There is no complicated coding and I have highlighted the comments where you can change the code easily.

Did you like this widget? Do you prefer to use it? Do you want any changes? Your opinions are always welcome. Thanks for reading.

March 11, 2018

Add Custom Social Media Share Buttons to Blogger Below Post Title and Post Footer
Social Media Platforms (sites) play a major role in the overall success of our content because SEO takes time to drive targeted traffic from search engines.

Not to mention, social signals (how many times your content has been shared on different social media sites) has an impact on your overall SEO in many ways.

So I am not going to write an essay on Social Media strategy but, today I am going to share another version of Custom Horizontal Social Media Share Buttons for Blogger along with total shares count. You can add these buttons below the post titles or in the footer to increase the social shares of your well-written content.

These social media buttons are made purely with the help of HTML and CSS so they don't affect the Page load time speed at all.

Even by removing the Official Social Media Share Buttons from your blog, you can decrease your page load time by half of the total time.

Features:-

1) Fully Responsive Design
2) Made with Pure CSS and HTML
3) Shares Counter
4) Integration of FontAwesome Icons
5) 5 Social Media Share Buttons Included
6) Super Easy to Install (Copy and Paste).

Responsiveness: Check out the below Screenshot which shows the Responsiveness of these social media share buttons on different screen resolutions in one go.

Responsive Social Media Share Buttons for Blogger

Live Demo: If you want to see the live demo then just scroll down to the post footer and watch these buttons live.

Important Update and read Carefully:-

I use Free hosting provided by OpenShift.com for hosting PHP scripts which are liable to get the shares count of all the social media sites. There is monthly bandwidth limit and shares count script will stop working if the limit is crossed.

You can upload these PHP scripts yourself if you have premium hosting or else you can use OpenShift.com to get free hosting. Free hosting is enough for one blog.

If you can't manage it yourself then you can hire me. I'll upload these scripts for you and make it work without any issue.

Get PHP Scripts Here = https://github.com/abeMedia/shareCount

How to Add Custom Social Media Buttons to Blogger Posts

Step 1) As usual, login to your blogger account > Select your blog > go to Template section > click on Edit HTML and let the Template Editor load. Do not forget to save template backup before altering anything, be safe.

Step 2) As you know that we are using FontAwesome icons for it so you need to install them on your blog first otherwise icons would not appear. To find out this opening <head> tag (click inside template editor and press Ctrl+F on Windows or Cmd+F on Mac to open up a search box inside template editor) and just below that, paste the FontAwesome icons link given below (only if you're already not using them on your blog, avoid adding same codes twice).

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>
You also need to add Google JavaScript Libraries link to make the shares count API work. So add the link given below if you're already not using (rare case, please check before adding).

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
Step 3) So now you need to add the CSS code to your template so just find out this closing </head> tag and just before this tag, paste the whole CSS code given below as it is.

CSS code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*------------------------------------------------------------
Horizontal Social Media Share Buttons for Blogger
Designed by:: http://www.blogsupporter.com
Shares Count Code by:: http://donreach.com/social-share-count
issued under GNU GPL Licence
Icons:: FontAwesome
******** Do Not Remove These Credits ********
------------------------------------------------------------*/
.tbn_horizontal_sharebar {
    position: relative;
    background: none;
    z-index: 2;
    width: 100%;
    padding: 10px 0;
    display: inline-block;
    font-family: sans-serif;
    margin: 5px 0px;
    border-top: 1px dotted rgba(0, 0, 0, 0.05);
    border-bottom: 1px dotted rgba(0, 0, 0, 0.05);
}
.tbn_horizontal_sharebar .Share_buttons {
 display: block;
}
.tbn_horizontal_sharebar .Share_buttons .wrap {
    text-align: center;
    margin: 0 auto;
    display: inline-block;
    min-width: 41px;
}
.tbn_horizontal_sharebar .Share_buttons .wrap1 {
    display: inline-block;
    width: 31px;
    float: left;
}
.tbn_horizontal_sharebar .Share_buttons ul {
    margin: 0;
    padding: 0;
}
.tbn_horizontal_sharebar .Share_buttons ul li a, .tbn_horizontal_sharebar .Share_buttons ul li a:hover {
    color: #FFF !important;
    cursor: pointer;
    line-height: 25px;
    height: 100%;
    display: block;
    text-decoration: none;
}
.tbn_horizontal_sharebar .Share_buttons ul li {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 1px;
    float: left;
    width: 16%;
    max-width: 115px;
    display: inline-block;
    font-size: 13px;
    overflow: hidden;
    text-align: left;
    height: 25px;
    line-height: 25px;
    color: #fff;
    border: 1px solid rgba(0,0,0,0.04);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.tbn_horizontal_sharebar .Share_buttons ul li .fa {
    color: #fff;
    font-size: 17px;
    font-weight: normal;
    font-family: FontAwesome;
    display: inline-block;
    text-align: center;
    padding: 0;
    height: 25px;
    line-height: inherit;
    width: 30px;
    background-color: rgba(0,0,0,0.1);
    border-right: 1px solid rgba(0,0,0,0.05);
}
/*--Facebook---*/
.tbn_horizontal_sharebar .Share_buttons .btn_fb {
    background: #3a579a;
}
.tbn_horizontal_sharebar .Share_buttons .btn_fb:hover {
    background: #314a83;
}
/*--Tweeter---*/
.tbn_horizontal_sharebar .Share_buttons .btn_twtr {
    background: #00abf0;
}
.tbn_horizontal_sharebar .Share_buttons .btn_twtr:hover {
    background: #0092cc;
}
/*--Google Plus---*/
.tbn_horizontal_sharebar .Share_buttons .btn_gplus {
    background: #df4a32;
}
.tbn_horizontal_sharebar .Share_buttons .btn_gplus:hover {
    background: #be3f2b;
}
/*--Pinterest---*/
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst {
    background: #cd1c1f;
}
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst:hover {
    background: #ae181a;
}
/*--linkedin---*/
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin {
    background: #2554BF;
}
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin:hover {
    background: #224EB4;
}
/*---Total Share----*/
.tbn_horizontal_sharebar .Share_buttons .share.h6 {
    font-size: 10px;
    font-weight: bold;
    text-shadow: none!important;
    text-decoration: none;
    text-align: center;
    color: #000000;
    border-top: 3px solid #FFF600 !important;
    border-bottom: 0;
    padding: 0px !important;
    padding-top: 5px!important;
    margin: 0 !important;
    line-height: 8px;
    border-radius: 75% 0;
}
.tbn_horizontal_sharebar .Share_buttons .share {
    border: none;
    margin: 0px 5px 0px 1px;
    overflow: visible !important;
    width: 95px !important;
}
.tbn_horizontal_sharebar .Share_buttons .share .count.h4 {
    font-size: 18px;
    font-weight: bold;
    text-shadow: none;
    text-decoration: none;
    font-family: sans-serif;
    text-align: center;
    color: #FF0000;
    line-height: 15px;
    margin-top: 0px;
    margin: -4px 0px 2px 0;
    min-height: 15px;
    padding: 0px;
    border: none;
}
.tbn_horizontal_sharebar .Share_buttons .btn_fb .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_twtr .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_gplus .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin .share-btn {
    position: relative;
    color: #C3C3C3;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
    float: right;
    min-width: 12px;
    font-family: sans-serif;
    padding: 0px 5px;
    background-color: rgba(0,0,0,0.28);
    border-radius: 0px 0px 0px 15px;
}
 @media only screen and (max-width: 979px) {
 .tbn_horizontal_sharebar .Share_buttons .btn_linkdin {
  width: 34px;
}
.tbn_horizontal_sharebar .Share_buttons .btn_fb .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_twtr .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_gplus .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst .share-btn
 {
 display: none !important;
}
}
 @media only screen and (max-width:768px) {
.tbn_horizontal_sharebar .Share_buttons ul li a, .tbn_horizontal_sharebar .Share_buttons ul li a:hover {
    color: #FFF !important;
    cursor: pointer;
    line-height: 25px;
    font-size: 11px;
    height: 100%;
    display: block;
    text-decoration: none;
}
.tbn_horizontal_sharebar .Share_buttons .wrap {
    min-width: 34px;
}
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin,
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst {
    width: 30px;
}
.tbn_horizontal_sharebar .Share_buttons ul li {
   margin: 1px 3px;
}
 @media only screen and (max-width:479px) {
 .tbn_horizontal_sharebar .Share_buttons .share {
    border: none;
    margin: 0px 5px 0px 1px;
    overflow: visible!important;
    width: 80px!important;
}
.tbn_horizontal_sharebar .Share_buttons ul li {
    width: 25px !important;
    margin: 2px;
    border-radius: 50px;
    border: 2px solid rgba(0, 0, 0, 0.14);
}
.tbn_horizontal_sharebar .Share_buttons .wrap {
    display: none !important;
}
.tbn_horizontal_sharebar .Share_buttons ul li .fa {
    width: 25px !important;
}
}
</style>
</b:if>

Now you are done with adding CSS part so moving on to next step.

Step 4) Now you need to add the HTML part to your template. Below I am going to provide both the ways to add these buttons either below posts titles or in the post footer so please carefully read the steps and follow accordingly (needs not to mention, I am always there to help you out if anything goes wrong).

Add Social Media Buttons Below Post Titles
Find out this HTML code line <div class='post-header-line-1'/> in your template and just below that, paste the whole HTML part as it is. You may find the above code line twice so in that case, just paste the code after the second appearance of the above code line.

Add Social Media Buttons to Post Footer
Find out this HTML code line <div class='post-footer'> and just below that code line, paste the whole HTML code as it is.

If you did not find the above code line then try finding <div class='post-footer-line post-footer-line-1'> and paste the HTML just below it. Again if the code line appears more than one time then paste the HTML after second appearance.

Just delete the JavaScript API code and only use the HTML part because the previous JavaScript code will work fine with it. If you did not get it then please let me know.

JavaScript Code is highlighted in the red color text.

HTML code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
  var shareUrl = $("link[rel=canonical]").attr("href");
    $.getJSON('https://count.donreach.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
        shares = data.shares;
        $(".count").each(function (index, el) {
            service = $(el).parents(".share-btn").attr("data-service");
            count = shares[service];
            if (count > 1000) {
                count = (count / 1000).toFixed(1);
                if (count > 1000) count = (count / 1000).toFixed(1) + "M";
                else count = count + "k";
            }
            $(el).html(count);
        });
    });
});
//]]></script>
<div class='tbn_horizontal_sharebar'>
<div class='Share_buttons'>
  <ul>
  <li class='share'>
    <div class='share-btn' data-service='total'>
        <div class='count h4'></div>
        <div class='share h6'>SHARES</div>
  </div>
  </li>
  <li class='btn_fb'><a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>
<div class="wrap1"><i class="fa fa-facebook"></i> </div>
  <div class="wrap">Share</div>
  <div class='share-btn' data-service='facebook'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_twtr'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @sopherthkeo - &quot;' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>
  <div class="wrap1"><i class='fa fa-twitter'></i></div>
  <div class="wrap">Tweet</div>
  <div class='share-btn' data-service='twitter'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_gplus'><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow'>
  <div class="wrap1"><i class='fa fa-google-plus'></i></div>
  <div class="wrap">Share</div>
  <div class='share-btn' data-service='google'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_pntrst'><a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'>
  <div class="wrap1"><i class='fa fa-pinterest'></i></div>
  <div class="wrap">Pin</div>
  <div class='share-btn' data-service='pinterest'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_linkdin'><a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'>
  <div class="wrap1"><i class='fa fa-linkedin'></i></div>
  <div class="wrap">Share</div>
  <div class='share-btn' data-service='linkedin'>
        <div class='count'/></div>
  </a>
  </li>
  </ul>
  </div>
  </div>
</b:if>
</b:if>

Editing Part:- All you need to edit in the above HTML part is my twitter username @keosopherth so just replace it with your own Twitter username and you're good to go. Now just save your template code and visit any of your blog post to see it live.

If it did not appear on your blog even after following all the steps correctly then please let me know, I'll personally help you out for sure.

Also please let me know your feedback on the design and responsiveness. Does it work correctly? Appearing same as on this blog? Your feedback will help me to make it better if there are any bugs.

So this is all in this article and I hope you guys have liked it. If you liked it then surely your buddies would also like it if they using blogger platform. Let them know by sharing it on at least one social site you actively use.

March 5, 2018

Floating Sharing Bar
Releasing the second version of the floating social media buttons bar for the blogger with the total shares count and custom buttons. This version is totally different from the previous version because this time I did not use the official buttons of social networks and instead I used own custom social buttons.

Along with Total shares count box, every button shows the number of total shares on that particular social media platform.

Please Read This Note Carefully Given Below!

Important Update (Must Read:
I am using FREE hosting provided by OpenShift.com for hosting my PHP scripts which are liable to fetch the total shares count on different social media platforms.

So there is monthly bandwidth limit on free packages and whenever it will cross the limit of free bandwidth, it will stop working. I can not upgrade from free hosting package to premium because I earn nothing from this blog. That is all to it.
One more thing. Free package is enough for one blog and you can upload these PHP files yourself on their server but it works on Git and Ruby. You have to install them on your computer then use the command mode to create your PHP application and upload those files. Please for more info create your account on OpenShift.com and learn from there.

If you need my services then you can contact me using contact form page. I'll create a separate domain name for you and upload these scripts so they will not stop working.

Features with Demo Screenshot

I tried my best to give it the look of other leading free and premium share buttons like as SumoMe. I have disabled it on mobile devices with CSS, but you can make it appear on mobile too simply by deleting the little CSS code.

However, this is not recommended because there is really little space on mobile screens and users will not be able to read your content properly as buttons bar will be covering around 50px space on the left side of the screen.

Of course, it includes a show hide button but it's always good to be on the safe side rather than losing visitors.

I could have made it mobile compatible like as SumoMe too, but this is really too much work for a man army. ;) I wish I had someone to do it, but still, I got no one lol.

Overall I am happy with it because it includes no forced button for branding, only what we need. All other major industry-leading plugins like SumoMe are really great and packed with amazing features, but you have to go with pro version otherwise there will always be one button of their own in the end for branding.

Note: You do NOT have Permission to copy and share my code on your blog or changing the class names and bragging about you did it. I have not included any backlink, but you're required to keep the credits given to developers in CSS comments as it is. They do not harm in any case. Respect the copyrights and hard work of developers.

Its Live demo is on this blog itself so are you impressed? Want to use it?

Add Floating Social Media Share Buttons Widget For Blogger

Adding Floating Social Share Buttons Bar to Blogger

Step 1: As always, login to your blogger account - Select your blog - go to Template area and download your template backup first. You'll find a Backup/Restore link on the top right side in Template area.

Step 2: Now click on Edit HTML and wait for your template code box to load.

Step 3: For icons, I have used FontAwesome 4.2.0 so just find out the opening <head> tag and just after it, paste the FontAwesome icons Link given below.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css' rel='stylesheet'/>
Please note that this is the latest version of FontAwesome icons CSS link and you need to update if you are using old version because the old versions StumbleUpon icon is not included.

Add Google JavaScript Library Link also if not already added to your template.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Step 4: Click on the code box, press Ctrl+f or Cmd+f and find out this closing tag </head> then just before it paste the whole CSS code given below.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*------------------------------------------------------------
Floating Social Share Button Bar Version 2.0
Designed by:: http://www.blogsupporter.com
Shares Count Code by: http://donreach.com/social-share-count
issued under GNU GPL Licence
Icons:: FontAwesome 4.2.0
**************** Do Not Remove These Credits *****************
------------------------------------------------------------*/
.BlogSupporter_SocialBar {
  position: fixed;
  bottom: 30%;
  padding: 0;
  left:0;
  background: none;
  text-align: center;
  margin: 0 auto;
  z-index: 99999999;
}
.BlogSupporter_SocialBar label:hover {
  cursor: pointer;
  opacity:1;
}
.BlogSupporter_SocialBar label {
  text-align: center;
  opacity: 0.4;
  width: 50px;
  background: #3A3939;
  color: #FFF;
  border: 0;
  font-family: FontAwesome;
  display: block;
  font-size: 12px;
  padding: 0px 0px;
  border-radius: 0;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  position: absolute;
  line-height: 1.5em;
  margin-top: 346px;
}
input.ShowHide_Button:checked + label {
  transform-origin: 50% 0%!important;
  -webkit-transform-origin: 50% 0%!important;
  -moz-transform-origin: 50% 0%!important;
  -ms-transform-origin: 50% 0%!important;
  -o-transform-origin: 50% 0%!important;
  opacity: 1;
  -webkit-transform: translateX(0px) rotateY(-180deg);
  -moz-transform: translateX(0px) rotateY(-180deg);
  -ms-transform: translateX(0px) rotateY(-180deg);
  -o-transform: translateX(0px) rotateY(-180deg);
  transform: translateX(0px) rotateY(-180deg);
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
  border: 1px solid #3A3939;
  border-radius: 50px 0px 0px 50px;
  width: 30px;
  max-width: 30px;
}
input.ShowHide_Button ~ .ShowHideMe {
  -webkit-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -moz-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -ms-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -o-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
}
input.ShowHide_Button:checked ~ .ShowHideMe {
  margin-left: -75px !important;
}
input.ShowHide_Button {
  display: none;
}
.BlogSupporter_SocialBar .social_menu {
  display: inline-block;
  float: left;
  list-style:none;
  max-width:50px;
  margin: 0;
  padding: 0;
}
.BlogSupporter_SocialBar .social_menu .button_facebook {
  background: #3a579a;
}
.BlogSupporter_SocialBar .social_menu .button_facebook:hover {
  background: #314a83;
}
.BlogSupporter_SocialBar .social_menu .button_twitter {
  background: #00abf0;
}
.BlogSupporter_SocialBar .social_menu .button_twitter:hover {
  background: #0092cc;
}
.BlogSupporter_SocialBar .social_menu .button_googleplus {
  background: #df4a32;
}
.BlogSupporter_SocialBar .social_menu .button_googleplus:hover {
  background: #be3f2b;
}
.BlogSupporter_SocialBar .social_menu .button_pinterest {
  background: #cd1c1f;
}
.BlogSupporter_SocialBar .social_menu .button_pinterest:hover {
  background: #ae181a;
}
.BlogSupporter_SocialBar .social_menu .button_stumbleupon {
  background: #ea4b24;
}
.BlogSupporter_SocialBar .social_menu .button_stumbleupon:hover {
  background: #c7401f;
}
.BlogSupporter_SocialBar .social_menu .button_linkedin {
  background: #2554BF;
}
.BlogSupporter_SocialBar .social_menu .button_linkedin:hover {
  background: #224EB4;
}
.BlogSupporter_SocialBar .social_menu .button_facebook .count,
.BlogSupporter_SocialBar .social_menu .button_twitter .count,
.BlogSupporter_SocialBar .social_menu .button_googleplus .count,
.BlogSupporter_SocialBar .social_menu .button_pinterest .count,
.BlogSupporter_SocialBar .social_menu .button_stumbleupon .count,
.BlogSupporter_SocialBar .social_menu .button_linkedin .count {
  color: #fff!important;
  padding-top: 4px;
  font-size: 13px !important;
  line-height: 1.2em;
  font-family: sans-serif;
  font-weight: bold;
}
.BlogSupporter_SocialBar .social_menu > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.BlogSupporter_SocialBar .social_menu .share {
  background: #FFF;
  color: #807F7F;
  font-size: 11px;
  height: 45px !important;
}
.BlogSupporter_SocialBar .social_menu .share .count.h4 {
  font-size: 18px;
  font-family: sans-serif;
  color: #424242;
  height: 25px !important;
  line-height: 1.5em;
  font-weight: bold;
  margin: 0px !important;
}
.BlogSupporter_SocialBar .social_menu .share .h6 {
  padding-bottom: 3px;
  font-family: sans-serif;
  margin: 0px !important;
  line-height: 1.5em;
  font-size: 11px;
}
.BlogSupporter_SocialBar .social_menu > ul > li {
  margin: 0px 0px 0px 0px;
  position: relative;
  text-align: center;
  list-style: none;
  list-style-type: none;
  padding: 0px;
  border: 0px;
  border-left: 0 solid rgba( 0,0,0,.4);
  height: 50px;
  width: 50px;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
  background: none;
  box-sizing: content-box;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.BlogSupporter_SocialBar .social_menu > ul > li a {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 5px 0px;
  cursor: pointer;
  text-decoration: none;
}
.BlogSupporter_SocialBar .social_menu > ul > li:hover {
  border-left: 5px solid rgba( 0,0,0,.3);
  width: 40px;
}
.BlogSupporter_SocialBar .social_menu > ul > li i {
  color: #fff !important;
  font-family: FontAwesome;
  font-size: 20px;
  font-style: normal;
  font-weight: normal;
  line-height: 1em;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.BlogSupporter_SocialBar .social_menu > ul > li:hover i {
  opacity: 0.9;
}
@media only screen and (min-width:768px) and (max-width:979px) {
.BlogSupporter_SocialBar {
  bottom: 20% !important;
}
}
@media only screen and (min-width:480px) and (max-width:767px) {
.BlogSupporter_SocialBar {
  bottom: 15% !important;
}
}
 @media only screen and (max-width:479px) {
.BlogSupporter_SocialBar {
  bottom: 10% !important;
  display: none !important; /*---delete this code line to make it appear on mobile--*/
}
}
</style>
</b:if>

Editing: If you want to make appear on mobile devices too, then just delete this code line and display: none !important; you are done.

Step 5: Now you need to add the HTML  and JavaScript API part so find out this code line <div class='post-footer-line post-footer-line-3'> and just below that, paste the whole HTML code given below as it is.

Note: You will find the above code line two times in your template, but you have to paste the HTML code and JavaScript API of share counts just after the 2nd appearance of this code line.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='BlogSupporter_SocialBar'>
  <input class='ShowHide_Button' id='twiSter' type='checkbox'/>
  <label for='twiSter'><i class='fa fa-arrow-left'/></label>
  <div class='ShowHideMe'>
  <div class='social_menu'>
<div class='share'>
    <div class='share-btn' data-service='total'>
        <div class='count h4'/>
        <div class='h6'>SHARES</div>
  </div></div>
<ul>
<li class='button_facebook'>
<a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot;   + data:post.url + &quot;   &amp;   t=&quot;   + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-facebook'/>
<div class='share-btn' data-service='facebook'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_twitter'>
<a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @sopherthkeo - &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'><strong><i class='fa fa-twitter'/>
<div class='share-btn' data-service='twitter'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_googleplus'>
<a expr:href='&quot;   https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow'><strong><i class='fa fa-google-plus'/>
<div class='share-btn' data-service='google'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_pinterest'>
<a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-pinterest'/>
<div class='share-btn' data-service='pinterest'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_stumbleupon'>
<a expr:href='&quot;   http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;   &amp;   title=&quot;   + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-stumbleupon-circle'/>
<div class='share-btn' data-service='stumbleupon'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_linkedin'>
<a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-linkedin'/>
<div class='share-btn' data-service='linkedin'>
        <div class='count'/></div></strong>
</a>
</li>
</ul>
</div>
</div>
</div>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
  var shareUrl = $("link[rel=canonical]").attr("href");
    $.getJSON('https://count.donreach.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
        shares = data.shares;
        $(".count").each(function (index, el) {
            service = $(el).parents(".share-btn").attr("data-service");
            count = shares[service];
            if (count > 1000) {
                count = (count / 1000).toFixed(1);
                if (count > 1000) count = (count / 1000).toFixed(1) + "M";
                else count = count + "k";
            }
            $(el).html(count);
        });
    });
});
//]]></script>
</b:if>
</b:if>

Editing: One thing you need to change in above HTML code is my Twitter Username Sopherthkeo with your twitter username.

If you want to remove a button then just delete the HTML of that button including <li></li> plus you need to adjust the margin of show hide button accordingly otherwise show hide button will be 50px below the share buttons with every removal of one button. That means you need to decrease the margin of show hide button by 50px after you remove one social button.

Now save your template code and visit any post on your blog to see it live. If you found any bug or you could not make it work for you, just leave your comment or contact me via the contact us page.

Do you have any improvement suggestion? Your opinions are always welcome. Stay Blessed!


February 14, 2018

How to Get Google To Index New Website Blog Quickly
Does Google not index your blog or articles as fast as you publish them? Is your blog or website new? Do you think that articles you published are not being indexed even after hours or days of their publication? Then this is a way to get your blog articles or website indexed within seconds after you published them. Actually, this is the power to each and every blogger or website owner given by Google via Webmasters Tools. You may be using these tools already but did you know how to use it to index your new website/blog or articles within seconds? So this is what you are going to know step by step with examples below.

Login To Webmasters Tools

To use the Webmasters tools you need to login to Webmasters tools account with your Gmail account. If you logged in to your Gmail account then it will automatically be logged in.

Now if you are using blogger.com platform then you will see your blog already listed but in case there is no blog listed, just click on the Add A Sitered color button on the left side then a dialog box will appear where you need to add the URL of your blog or website in.

Example: www.blogsupporter.com (use HTTP:// and WWW). In case you are using a Subdomain like as example.blogspot.com or example.weebly.com then you need to enter your subdomain name without WWW as it is. In case you are not using Blogger.com blogging platform, you need to verify the ownership of your domain so open the Verify Ownership section then you will see two methods of verifying (Recommended and Alternate) but I suggest you use the Alternate method and an alternate method select the second option of HTML tag to verify in which you will get a Meta Tag to insert in HTML of your website/blog. Copy the Meta Tag code and paste it after the <head> section in the HTML of the blog/website and after that click on red Verify Now button and you will see a congratulation message saying that your site is verified and added. That is it, now you are ready to use the magical features of Google webmasters Tools.

Click on Your Added Site

After Adding your site successfully it will appear in homepage so click on it to use the inside features. On the left side, you will see a number of useful links and one of them is Crawl. Click on it to expand it then click on the Fetch as Google link. See the image to understand in a better way.

Fetch As Google

Enter Your Site URL and Click on Fetch Button

After clicking on Fetch as Google link you will get an option of entering the URL of your site to fetch as Google. If your site is new and not indexed then you need to enter any URL just click on Fetch button but if your site is indexed but you want to get your new article/web page indexed then enter the URL of that page.

Please Note: You have to enter the URL starts after http://www.yourdomain.com/ and not the full URL because your main Domain URL is already entered which is fixed up to http://www.yourdomain.com/ see the image below.

Index and Google

Now Click On Submit To Index

After Clicking on Fetch button, you will get the Fetched URL listed below with URL's fetch status. It the URL you entered is correct and found Fetch status will display success otherwise Link not found. If everything is ok then in front of fetch status you will see a link button Submit to index just click it then a Dialog Box will appear to choose URL type to index. If it is homepage then select the second option and if it is the article or any other webpage then select the second option.

Request Indexing on Google

Check The Indexed URL in Google

So finally you have successfully submitted the URL and it is real-time indexed. But how would you believe whether it is indexed or not? just copy the whole URL you submitted to index in Google search box (including http://www) and see live. You will see the timestamp like as 2 minutes ago, 20 seconds ago as the case may be. See image below.

Google Index New Blog Post Quickly

Conclusion: This is the fastest way to get your new articles, blog, webpages or new websites indexed by Google quickly. Within this way, you can do it manually if Google does not do it. It usually takes less than two minutes and results you know, are Great. I hope this way can help you but if anything goes wrong or does not work please let us know in comments and also share your views or experience with Google Webmaster Tools. Thank You!

February 9, 2018

Things To Do After Publishing a New Blog Post
We all love the feeling of having a new blog post ready to publish which needs only one click on Publish Button. Do you think your work is over? Yes? Let me tell you that this is the time where real task starts for you and everyone. Our article supposed to be seen/read by the people who need it. Mean that a right audience is what we need this time. Otherwise, why did we do so much hard work to write? No? So there are a numbers of things to do after publishing a new blog post to reach the right audience. Below are the things I came to know and now sharing with you.

Related: A Beginners Guide To Writing A New Blog

1. Share On Social Media

This is the first step we do but doing it in a right way is what matter. There are countless numbers of social media platforms available but only a few of them carries weight. So we will talk about two excluding Facebook :).

a) Google Plus+
Google plus is slightly different than other social media platforms. There is no limit of characters in your status update box compared to twitter and you can use it to your advantage by creating multiple useful teasers and leaving relevant links to your blog posts. Best way to reach the target audience is joining the communities on Google+ related to your blog niche. After joining them, do not try to promote your content for a few days and instead be active to help other members by contributing. The biggest benefit will be your Authority". More and more members will start recognizing you the way you do help and will follow whatever you share. So after being active for few days, you can start promoting your content in an appropriate manner. Then sit back and watch the "Targeted Audience" coming back to your blog.

b) Twitter
Twitter is one of those social networks which continue carrying weight after several years of their existence. The biggest downfall of its users like you and me is "140 Characters Limit". So we need to be creative while sharing our blog post on twitter. The first step we need to do is shorten our blog post URL so that we can increase the character limit (use free services like bit.ly or goo.gl for shortening URL). The second step is using #Hastags which are relevant and popular in our blog niche. If you do not know the Popular #Hastags for your niche, then simply use HashTagGify to find them for you. You might not be knowing that there is number of people who do care and monitor certain #tags they are interested in. So overall chances are more than your tweets will be seen by a larger number of the audience then your fans and re-tweeted. Another way to reach the targeted audience is doing this step by yourself. I mean the search for the tweets related to your blog post and then reply with a teaser link. Chances are more than a loyal follower will also be added to your follower list.

2. Social Bookmarking

Social bookmarking seems like no more useful to some people by now and I myself also feel like that but still, I am stuck with two major social bookmarking sites which are StumbleUpon.com And Reddit.com. So the very reason behind using these two sites is "Instant Traffic" to my blog post I do share. I would recommend you to use them regularly. Mostly Reddit is my favorite and sometimes I do receive up to 50+ visits within few hours of sharing it and it depends on the type of article plus choosing right Reddit (category) for it to share.

3. Moderating and Replying to Comments

Now people use crap software to build backlinks by comments. So everyone receives a lot of "SPAM" comments in blog posts and if you do not moderate your comments, you are losing your loyal audience. Because when your visitors would scroll down to comment, they will see a long list of spam comments talking about moon where your article is about honey. So they would not give it a try even if they have a question to ask, they will leave and instead feel good to ask Google. The second step is replying to your comments. Never miss this chance as it helps us to build relationships with our readers. Give them "Royal Treatment" because they deserve. You can choose this way to Remove Hyperlink From Blogger Comments.

Spam Comment

4. Commenting On Other Blogs

This time you need to get ready for reading other similar blogs' posts and leaving valuable comments with teaser link. Do not spam and if someone has asked a question to the author and to which admin has not replied, just feel lucky and reply to that comment nicely with a teaser link back to your post. Never forget to tell the blog author about that you have also written the same blog post.

5. Ping-o-matic

Most search engines will index your newly written article within few days (depends on the PR) but why do you wait when you can tell them that you have written a new blog post and get it indexed within no time? Use Ping-o-matic tool to do that with your new blog post URL or else you can use Google Webmaster Tools To Index Your Articles as soon as you publish them.

6. Sending Newsletter

Do you use Email Marketing? Then you might have already a huge list of email subscribers so add your article to your next newsletter. Use a brief summary of your article and then a teaser link back to your original article to read more.

7. Adding Links To Signatures

Do you use forums to build Backlinks? Then this might be a good idea to update your signature links with newly written blog post URL. Do it each time you publish a new blog post.

Final Words: Now it is your turn to remind me if I left any other point in "must do things after publishing a new blog post". If you are new to this, then these steps may seem too much for you but believe me, sooner you will get familiar with them. After all, our hard work on writing needs to be utilized by the right audience. Take Care.