How to Remove Label Message In Blogger.

How To Remove "Showing Post With Label" Message in Blogger

It is set a default for any Blogspot platform user, the message Showing post with label xx xx" appears when your readers search your blog via the label. It is pretty useless, unprofessional and annoying if you wish to remove this feature from your blog, follow the steps below.

Steps to Removing "Showing post with label ... show all posts."

==>log into blogger.com dashboard > Template >> Edit Html (save template if required)

==> Click any point in the template and Hit Ctrl+F keys in window, Cmd+F keys for Mac.

==> Search for the code below using the search box

<b:includable id='status-message'>

==> When found, click on the little black arrow sign by the left to expand it.
==> The below is what you will need to remove alongside the first one as well.

<b:includable id='status-message'>
      <b:if cond='data:navMessage'>
      <div class='status-msg-wrap'>
        <div class='status-msg-body'>
          <data:navMessage/>
        </div>
        <div class='status-msg-border'>
          <div class='status-msg-bg'>
            <div class='status-msg-hidden'><data:navMessage/></div>
          </div>
        </div>
      </div>
      <div style='clear: both;'/>
      </b:if>
    </b:includable>

==> Replace with this

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

==> Save your template, you done, visit your site, click on any label, the "Showing post with tag" message Should be gone.

Read More

How To Break Post In Multiple Pages In Blogger (Post Pagination)

You wish to divide post into different pages, this one is for you, you might have written a very long post and wish to divide the post into different page to make your readers more engaged and get less bored with your writing, using Post Pagination is what you need to this awesome styling.

Apart from having a very long post written, there may be lots of other reason you might want to use this pagination for blogger, like making it easier for google to crawl it, that's to say it's an SEO factor also to increase your readers interest.

Lets get to the  steps in Adding awesome Post Pagination For Blogger.

Steps To add Pagination in Blogger

==> Log on to blogger.com > Template >> Edit Html, save a copy of your template if required.
==> Make sure your template has jquery, if not kindly add it, the code is right below you.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Make sure its not double in your template, it can give negative effects.

==> For the next step search for

]]></b:skin

==> Add the CSS code below just above the ]]></b:skin tag

.post-pagination {
    margin: 40px auto;
    text-align: center;
    width: 100%;
 float:left;
}
.button_1, .button_2, .button_3 {
    border: 2px solid #f4655f;
    font-weight: 900;
    padding: 6px 36px;
    color:#f4655f;
    transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
    background: none repeat scroll 0 0 #f4655f;
    color: #fff;
    text-decoration: none;
}

==> Search

</head>

==> Paste the script below just about the </head> Tag

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>

==> Save your template,we are almost done.

==> Not go to Post > New post, click the Html button at the left corner around your post title to switch, past the code below there.

<div class="content_1">
Add Content Here
</div>
<div class="content_2" style="display: none;">
Add Content Here
</div>
<div class="content_3" style="display: none;">
Add Content Here
</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>

Replace " Add Content Here" with the body of the post you want in a particular page.

Click publish and go over to your post, you will see you post divided into pages. Post Pagination for blogger have been added to your content.

Read More

How To Create A Static Home Page In Blogger

Having a customized static home page give your readers an impression of professionalism, making them comfortable to practice what ever is being thrown out to them by you, creating a static home page in blogger is not as difficult as it sounds, it doesn't require you to edit template or go through risky tasks, the changes are easily reversible.

Steps to add static homepage in blogger

Below are the steps  making

Step 1: Create a page(this will be the static home page)

The very first thing to do is to create a page in your blog, this will serve as your static home page after we are done, to do that open the blog you want to make the change and select "Pages", then click on "New page" this will open a Page editor.

In the title box, enter the name you want for the page, this will be the name of the static homepage.
For better understanding , I named mine "Wox Menu", name yours and follow me.
Next is to design the page to your satisfaction either by adding texts, photos or even videos in the large text box depending on what your site is all about.

Click publish after you are done, locate the page the page, we need to copy its url and paste somewhere, we will need it later. To do so, right click on the 'view' link and select "copy link address" to save you the url.

Step 2: Redirect default home page to the new page(Wox Menu)

Go to blogger settings > Search Preferences, under Errors and redirections, click "edit" beside custom redirects, this is were you set you new redirect.

As the photo indicates, you add a forward slash "/" in the first box (from) and the page url in the second(To)
In the url copied, you have to remove your blog url before you add it in "To" Box.

Example, this is my blog url http://liumestys.blogspot.com, this is the page url http://liumestys.blogspot.com/p/wox-menu.html, you remove http://liumestys.blogspot.com and use /p/wox-menu.html. in the "To" box.

Check Permanent, click on "save" link and save changes. open your blog, to this it worked.
That[s how to create a static homepage in blogger

If you wish to return it to its previous look(default homepage), go to setting > search preferences, under Errors and Redirections, click "Edit" link beside Custom redirects, check/select the created homepage redirect,hit delete and save changes. It will be restored to the original home page.

Read More

How To Fix Comment Box Not Showing in Mobile | Blogger

Fix Missing Comment Box In Mobile For Blogger

Sometimes, the comment box goes hidden in the mobile view for no reason, lots of blogger platform users have that problem, it doesn't mean it's unsolvable.

There are three I know that causes to the problem which

• You have the custom mobile view checked
• You are using a third-party template
• You edit your templates a lot and get things messed up

Well not to worry, I will help you fix this issue in a while, all you have to do is to follow the simple instructions below.

To fix this comment box issue, you are required to go into your blog template, if you have never gone in there, cause it's a blog brain box, you are required to save a copy of your template somewhere, so you can easily restore in case it get messed up

Steps to fix missing comment box

Step 1: Sign in blogger.com > Select blog

Step 2: Open Template > Edit Template (make sure its backed up)

Step 3: Click anywhere inside the template and hit Ctrl+F keys(window), Cmd+F(Mac)

Copy this ]]></b:skin> and paste in the search box on the top right corner and hit enter key to take you right to the code's position(with yellow shade)

Step 4 Paste the CSS code below just above the ]]></b:skin>

code

.mobile .blogger-iframe-colorize {
display: block !important;
}
.blogger-iframe-colorize {
display: block !important;
}

Step 5: Then save your template.

Visit your blog with a mobile device, you will find your comment box already waiting up for you.

And that's how to fix comment box not showing in mobile for blogger. 

Friendly Tip

Try and avoid more of this issues by always saving up a copy of your template before going into your blogger brain box(Template), I call it the brain-box so the word can scare me and make me save a copy before I venture into it.

Steps to save a blogger template

Before you hit the Edit Html button, at the top right corner of that page, you will see backup/restore button, click on it, will show a download template button, you know what to do.

Read More

Blogger SEO Tips and Tricks (Golden Tips)

Tips To Improve SEO In Blogger

Seo Tips!! We are here again, this is a battling issue for blog owners especially the newbies, we do lots of search on Google, Bing, Yahoo and more on tips on how to improve Search search ranks(SEO) and get tips like content writing, regular updating, promotions on social media, guest posting and more.. they are all great tips which should not be ignored at all.

Right here am going to give you some other categories to improve blog SEO,

Before we get to that, lets give some chance to those new with SEO to fully understand and follow the steps on how to improve SEO in blogger(SKIP TO  STEPS IF YOU AIN'T NEW IN THIS).
First of all, a warm welcome, as you might have noticed, we are all about SEO and how to improve them, before further writing, it's  wise to know what it really means.

You might have gone through series of steps on how to build a blog and came across the word 'SEO', left you wondering, what does it mean?.
In the simplest explanation, SEO Stands for Search Engine Optimization, it a process of getting free natural, editorial,organic and natural Traffic(blog visits) by showing up in search results in search engines like Google, Bing, Yahoo and more...

That tiny explanation should put you along, lets get to the steps to improve SEO in blogger

Steps To Improve SEO In Blogger (Golden Steps)

Backlinks

Yeah, I know the thoughts going through you mind right now, 'i seen that before, how is this golden?'.

Am not here to tell the same stories you read every time about backlinks, stories like its so important to have links redirected to your blog posts, which are damn important, also one of the most effective method to improve SEO blah blah, am sure you might have read that somewhere.

 Am here to widen that aspect. I have read complains online about backlinks, lots of people claiming they have lots of backlinks but still no improvement in SEO.
The big question is. What is the quality of those backlinks to your post??

None quality backlinks won't get you that far in google ranking, instead, might have negative effect on your blog. so getting not just backlinks but with quality is my golden tip for this one.

Tip: Read more on quality backlinks.

Keywords

This is another SEO brutal measure, keywords are extremely important in blogs especially in content writing, you might have read about adding keyword to different place in your blogs, am going to focus on Keywords for content, I will give you a quick run through of how you can use keywords in contents but before that, It will be Orthodox you keep this in mind.

I have read in many places where we are asked to use keywords in contents but forget to mention the right amount and where to actually use it, because of that reader tend to flood their contents with keywords and that so not healthy for blogs, you are require to add only 3% of keywords in our content and place them in the right places not just anywhere.

Now the quick run down on how and where to use/put keywords in content

• Place At Starting and Ending Paragraph of content
• Image name( Alt Tag And Title Tag) Blogger users
• In post tittles (important)
• Permalinks of posts also important
• Post comment and lastly
• Post Labels.

Meta Tags

This another important SEO rank method, use of meta tag tells bots what your site is all about means they are snippets of text describing the pages of contents.

There are lots of meta tags you can add to your blog, but not all are really important, I will give you the four most important meta tag to add in your blog

• Meta keyword
• Title Tag
• Meta Description
• Meta robot: This tells the search engine crawlers what to do with the page.

Note that all this are really effective if they are manually place/added in your blog template.

Apply this Golden SEO Tips and see you blog excel..

Read More

How To Restore Blogger Template (Easy Steps)

How To Reset Blogger Template

It's very annoying when your blog template de-arranged in way only getting back to default will make things right. there are several ways to get your templates back to default, that's what this post is all about.

Steps To Reset Blogger Template

Follow the steps how to reset blogger template

Step 1: Enter the blog you want to reset and open template >Edit html.

Step 2: When template is opened, Click the "Jump to widget" button in between "Save template" and "Edit template".

Step 3: Locate 'Blog1' in the drop down and click on it, to take you to its location, it should looking something like the code blow

  <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1' visible='true'>

Step 4: Change the 'Blog1' to 'Blog2', will look like this

 <b:widget id='Blog2' locked='true' title='Blog Posts' type='Blog' version='1' visible='true'> 

and save.
STep 5: Go to blog layout and remove all gadgets that were manually added, or remove everything.

Step 6: Go back to Templates, this time you hit the "Customize button".

Step 7: In the blogger template designer, under the template categories, you will see a "You've customized this template. Remove customization" text, click on remove customization

Step 8: You have successfully Restore your blogger template to default.

Read More

Widget: How to add Related post to blogger with Thumbnails

Add Related post widget to blogger blog

Nowadays, hardly can you see a blog without a related post widget displayed below their posts, unless, if or maybe the blog is new, that is to say you must have a new blog for you to be reading this post right now, if you ain't, then what the heck have you being doing?

Anyway, you are all welcome here whether you are new to blogging or you are a pro.

Related posts add certain benefits to your blog, as a matter of fact, lots of benefits, the most important is to increase your site pageviews and also make you blog fun for your readers, without much talks/write-ups, let get straight to steps to add this related post widget to your BLOGGER/BLOGSPOT blog.

Steps to add related post To Blogger

1. Open your blogger, locate template and click on Edit HTML button as indicated in the photo below.

Note: it very advisable to save a copy of your template in case you get it messed up in this process. please do so.

2. While the template is opened, click any point inside the code area and hit your CTRL+F Key in windows, CMD+F keys in Mac, this will pop out a search box.

Ctrl+F keys to pop out the search box

3. In the search box input this code </head> and hit your enter key
 this will take you to the tag position shaded with yellow. Looks like this </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxgcc1sMZxAsfzXQpTpsXgnYIEMFwqDST-A8g7mxUY77eKxLhW9hVJymXlfpPPVlSoSg0WNR2TGfE5HLy8WqUjvYfQLfKK89rrSfZaGvDW9B-Mzb_THiRM4q1i0TRGfdNltYekU1lU8cCD/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Copy the code below and paste right above the </head> Tag

5. Use the search box again input the code below. Note: you might find the code more than once in your template go for the second one, that what we will be making use of
<div class='post-footer'>
6. Copy the code below and paste right above the <div class='post-footer'> tag

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="https://blogwox.blogspot.com/2016/09/how-to-add-related-post-widget-blog-design.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

If you are unable to see this related post widget after saving template,  add the code (step 6) just above the </b:includable> tag which can be found above this line  <b:includable id='postQuickEdit' var='post'>  in your template.

Customization

You can change the number of post that appear in your related post by changing the 5 value, that Max results=5 to your preferred number, to easily locate this, use the search box in template and input this code
var maxresults=5;

To change the size of the thumbnails(width and Height) change the values which are 110px and 100px
input this in the search box
cover;width:110px;height:100px;

Read More