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

March 31, 2018

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 :)


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.


February 8, 2018

Make Embedded Videos Responsive on Blogger
Videos are used widely along with text content in blog posts and today's article is all about how to make those embedded videos responsive plus display them inside elegant frames of your choice.

Making videos responsive is the easy task to accomplish but along with that, displaying those videos inside beautiful frames was little tedious for me.

I am going to share two different frames where the first one is an image frame of blank MacBook so it appears as if the video is playing inside it.

The second frame is what I have designed with pure CSS and added some cool shadows effect in the bottom using pseudo elements. I hope you'll like it.

So what will you get in this post?

1. Making Embedded Videos Responsive without adding any frame.
2. Display Video Inside Responsive Frame Made of Pure CSS.
3. Display Video Inside Responsive Image Frame of a Blank MacBook.

So the choice is yours, they all are responsive.

Recommend: Create a New YouTube Channel For Beginners

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.

1. Make Embedded YouTube Videos or Vimeo Videos Responsive

When you get the code to Embed your video from the YouTube Channel or any other video hosting site, your code will contain a fixed height and width properties. So when someone visits your site from small resolution devices like as mobile or a tablet, then your embedded video will not re-size itself according to the screen size.

It will always contain its height and width to the original values despite the screen size. So it will either make a scrolling bar on small screen sizes or else it will hide the video part which is overflowing (If overflow: hidden; property is used for the content wrapper). You can not make them responsive to the way you can do with images.

If the scrolling bar is appearing then that particular page will also show an error in your webmaster tools account if you will check it for responsive design (Bad for SEO?).

I wrote that all just because I wanted to tell you about how important is it to make your embedded videos responsive.

So how to do it?

It is simple enough to do with the help of CSS. So follow the steps given below and be responsive.

CSS Part

<style>
.video_outer_wrap {
    width: 100%;
    max-width: 560px;
    margin: 15px auto;
}
.video_wrap {
    position: relative;
    padding-bottom: 56%;
    padding-top: 0px;
    height: 0;
    background-color: #000 !important;
}
.video_wrap iframe,
.video_wrap object,
.video_wrap embed {
    position:absolute;
    top:0;
    width:100%;
    height:100%;
}
</style>

HTML Part

<div class="video_outer_wrap">
 <div class="video_wrap bottomshadows">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/x3et7xQyAAI" frameborder="0" allowfullscreen></iframe> </div>
</div>

How to use it?

CSS: Copy the above CSS Part first then switch to HTML Mode of your blogger post editor and paste the whole CSS code as it is  (Will work for WordPress too).

Note: You can also paste the CSS code into your blogger template skin so that you don't have to paste the CSS code every time in any of your blogger posts. If you want to paste the code into your template then copy the CSS code without the <style> tag and paste it just before ]]></b:skin> and save your blogger template.

HTML: Copy the HTML code and Paste into your post editor after switching to HTML mode. You have to paste the HTML where you want your video to appear in your content. Now for adding your video, just replace the code highlighted in yellow color with the embed code you got from your YouTube or Vimeo video.

Note: To get the embed code for your video on YouTube, just right click on the video player and select Get embed code. You will get your code in the middle of your video screen so copy it from there.

If you followed all the steps correctly then you will have your video which is fully responsive. You can check it live by re-sizing your browser window easily.

Now I am going to share those two other ways along with living demo for adding cool frames and the process of using the code will be same as explained above so I am not going to re-write it again (except few changes).

2. Add a Beautiful Frame to Embedded Videos Using Pure CSS

I love this one because it is made with pure CSS and loads as fast as you know. :) It has got a really cool design and shadows effect at the bottom.

I have also disabled the Video title Info which appears on the top of it and the related videos which appear at the end of the video.

Watch the live demo given below.



CSS Part for it

<style>
.tbn_css_frame_wrap {
    width: 100%;
    max-width: 560px;
    margin: 30px auto;
}
.tbn_css_frame_wrap_inner {
    position: relative;
    padding-bottom: 53%;
    height: 0;
    background-color: #000 !important;
    border: 15px solid #CACACA;
}
.tbn_css_frame_wrap_inner iframe,
.tbn_css_frame_wrap_inner object,
.tbn_css_frame_wrap_inner embed {
    position:absolute;
    top:0;
    width:100%;
    height:100%;
}
.bottomshadows {
  position: relative;
}
.bottomshadows:before, .bottomshadows:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 0px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  transform: rotate(-4deg);
}
.bottomshadows:after {
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  transform: rotate(4deg);
  right: 10px;
  left: auto;
}
@media all and (max-width: 400px) {
.tbn_css_frame_wrap_inner {
    border: 7px solid #CACACA !important;
}
.bottomshadows:before, .bottomshadows:after {
    bottom: 9px !important;
} }
</style>

HTML Part for it

<div class="tbn_css_frame_wrap">
 <div class="tbn_css_frame_wrap_inner bottomshadows">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/x3et7xQyAAI?rel=0&theme=light&hd=1&showinfo=0" frameborder="0" allowfullscreen></iframe>
 </div>
</div>

Editing Step: Please take note that this time you need not paste your embedding code from YouTube as it is so instead just replace the Video id which is highlighted in the yellow color above. You can easily get this id from the address bar of your browser. See the example:

https://www.youtube.com/watch?v=LxuVerR2lFU

This is the web address of my intro video on YouTube I have uploaded so I have highlighted the unique video id in the yellow color. Copy it in the same way for your video and replace in the above HTML. Ask me in comments if you did not get it.

For Vimeo videos, just replace the whole code starting with  <iframe> code.

Common Problem - Shadows are not appearing as shown in the live demo? Just add this little CSS code to your template skin or inside your blog post with along with above CSS code given below:

.post-body {
    position: relative;
    z-index: 1;
 }

So did it work for you? Let me know if it worked or not. I will definitely help you. So moving on to the image frame.

3. Displaying Embedded Video Inside a Responsive Image Frame

This is the frame of a blank MacBook. I used the border-image:property to display the image frame instead of adding the image frame with background-image: property.

This is all because I wanted to make it fully responsive. When I used the image with the background-image: property then I could not make it fully responsive.

The video appeared to be overlapping the frame between different screen resolutions and I did not like it at all.

So I decided to go with border-image: property instead which makes it neat and clean. You can use any other image but you need to adjust the border width and border image values accordingly.

(Note:- No Browser support for IE10 and below, works well with others browsers, even with old versions with browser specific prefix. I just hate IE)

See the live demo given below.



CSS Part

<style>
.tb_outer_wrap {
    width: 100%;
    max-width: 650px;
    margin: 15px auto;
}
.tb_video_wrap_macbook {
    position: relative;
    padding-bottom: 43%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
    -webkit-border-image: url('http://codes.blogsupporter.com/images/macbook-laptop-frame.png') 50 233 112 228 stretch stretch;
    -moz-border-image: url('http://codes.blogsupporter.com/images/macbook-laptop-frame.png') 50 233 112 228 stretch stretch;
    -o-border-image: url('http://codes.blogsupporter.com/images/macbook-laptop-frame.png') 50 233 112 228 stretch stretch;
    border-image: url('http://codes.blogsupporter.com/images/macbook-laptop-frame.png') 50 233 112 228 stretch stretch;
    border-color: rgba(0, 0, 0, 0);
    border-width: 27px 76px 55px 76px;
    border-style: inset;
}
.tb_video_wrap_macbook iframe, .tb_video_wrap_macbook object, .tb_video_wrap_macbook embed {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ddd;
}
@media (max-width: 500px) {
.tb_video_wrap_macbook {
    border-width: 20px 62px 40px 62px;
}
@media all and (max-width: 400px) {
.tb_video_wrap_macbook {
    border: none !important;
}
}
</style>

HTML Part

<div class="tb_outer_wrap">
 <div class="tb_video_wrap_macbook">
<iframe width="560" height="315" src="https://www.youtube.com/embed/x3et7xQyAAI?rel=0&amp;theme=dark&amp;controls=1&amp;showinfo=0&amp;autohide=0" frameborder="0" allowfullscreen=""></iframe>
 </div>
</div>

Editing Step:-

Replace the highlighted part with your video ID for YouTube and for Vimeo videos, just replace the full <iframe> code.

So this is it for now and I hope you guys like it. Please let me know your feedback via comments whether you liked it or not.

Recommended: How to Create Landing Pages or Squeeze Pages on Blogger

If you're facing any kind of problem or I could not make things clear then please let me know. I will try my best to help you out.

You can help me too by sharing this post or connecting with me on social networks. Thanks and stay blessed!