Saturday, September 23, 2017

// // Leave a Comment

3 Ways To Hide/Remove Labels From Blogger Post

When you write a new post and publish it, but when you see your published post, you might have seen labels below post title or post footer. This label looks unnecessary, as they are already added in the sidebar. Many bloggers want to hide/ remove Labels From their blogger blog post. So, today I have come with top 3 ways to hide or remove labels from the blogger blog post.

remove+labels+from+blogger+post


3 Ways To Hide/Remove Labels From Blogger Blog Post


1) By Unchecking From The Setting

This method doesn't work for some custom blogger templates, so I have shared 2 other methods. Read them and understand.

1. Head up to your Blogger Dashboard and go to Layout and locate Blog Post there and click on Edit.

hide-labels-from-blogger-post


2. After that scroll down, then there you will see Labels, just click and Uncheck the box and that's it.


remove+labels+from+blogger+post


2) By Hiding With The Help Of CSS Code

1. From your Blogger Dashboard go to Theme and click on Edit HTML.

2. After that click Ctrl + F keys to open search box and search for the following code:

</head>

3. When you find the code just above </head> tag paste the code given below:

<style>.post-labels {display: none;}</style>

4. After that click on save the template and you're done.

3) Remove Labels Permanently

1. In your Blogger Dashboard go to Theme and click on Edit HTML.

2. Now search for the code given below:

<b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>

3. When you find the code, just delete the whole piece of code and you are done.

Over To You

So, this was a guide about hiding labels from blogger post. And I hope you liked the post. And don't forget to comment down your problems. Thanks for visiting and happy Blogging:-)

Read More

Friday, September 22, 2017

// // Leave a Comment

4 Ways To Hide/Remove Blogger Navbar

When you create a new blog on blogger, you might have seen a navbar above your blog title in your blog. This navbar is usually hidden in most of the blogger templates. But if you use default blogger template, you might notice it.

It has many advantages if you use it correctly. But if you want a good design blog, this navbar doesn't suit the blog. So, today  I will tell you how to hide/remove blogger navbar.

Remove-Hide-Blogger-Navbar


Advantages Of Blogger Navbar


  • The B icon in navbar will take you to Blogger.com if you have already signed in then it will take you to Blogger Dashboard.

  • Next Blog - Takes you to recently updated blogger blog.

  • Search Field - Can be used for searching anything in the entire blog.

  • New Post - Takes you to the new Post window.

  • Design - Takes you to the theme window.

  • Flag - If you find any content objectionable, you can flag it.

  • Share - Can be used for sharing the content on social media platforms like Facebook, Twitter etc.


4 Ways To Hide/Remove Blogger Blog Navbar


1) By Turning Off From The Blogger Dashboard

1. Head up to your Blogger Dashboard.

2. Go to Layout and locate Navbar and click on Edit link.

Remove-Hide-Blogger-Navbar


3. Then click on Off Button.

Remove-Hide-Blogger-Navbar


2) By CSS

1. From your Blogger Dashboard go to Theme and click on Edit HTML.

2. Press Ctrl + F keys to open search box and search for the code given below:

3. When you find the code just below <b:skin> paste the code given below:

#navbar-iframe { display:none!important; height:0; visibility:hidden; }


4. Then click on Save Template and you are done.

3) By Removing Widget Code From The Template

1. From your Blogger Dashboard go to Theme and click on Edit HTML.

2. Press Ctrl + F keys to open the search box and search for Navbar1.

3. When you find Navbar1, then you will see the following lines:

<b:widget id=’Navbar1′ locked=’true’ title=’Navbar’ type=’Navbar’>

<b:includable id=’main’> </b:includable>

</b:widget>

 </b:section>


4. Just select all those lines and delete them.

5.Then click on Save Template and that's it.

4) Auto Hide Blogger Navbar

This is the code to hide blogger navbar but when you will drop mouse on the navbar, it will appear again. And it doesn't work for Internet Explorer.

1. Just copy below code and paste it just below <b: skin> tag in your blogger template.

#navbar-iframe { opacity:0.0; filter:alpha(Opacity=0); } #navbar-iframe:hover { opacity:1.0; filter:alpha(Opacity=100,FinishedOpacity=100); }


2. Then click save the template and you're done.

Over To You

So, this was a guide about removing blogger blog navbar. And if you have any problem related to this content, comment down and don't forget to share it.


Read More
// // Leave a Comment

How To Cloak Affiliate Links In Blogger

Every blogger wants to earn money from their blog. Some blogger earns money from affiliate marketing. This post is dedicated to those newbies who don't know to Cloak affiliate links in blogger.

Link cloaking is a process through which you can hide your original affiliate link by URL masking. And link cloaking is very important for any blogger. Because if we will not cloak affiliate links our blog might get penalized by Google.

Some bloggers think that they can cloak affiliate link in blogger but they are wrong. Now we have a jquery plugin to help in cloaking affiliate link on blogger.


Cloak-affiliate-links-in-blogger


Can We Cloak Affiliate Links In Blogger
As we know that in WordPress there are many plugins available to Cloak affiliate link. But in blogger, there is no such plugin. So, some blogger experts developed blogger affiliate link cloaking plugin to Cloak affiliate links in blogger.


Why Cloak Affiliate Links In Blogger


You are wondering that why should we cloak affiliate links in blogger? Your answer is here, affiliate links include the number, letter, special characters and search engines don't like affiliate links. If you will original affiliate link in your post, your blog might get penalized by Google. So, it is important to Cloak affiliate links in blogger.

How To Cloak Affiliate Links In Blogger Blogs


1. Login to your blogger Blog Dashboard

2. Then go to Theme >> Edit HTML.

3. Now in code area click anywhere and

press Ctrl + F keys to open the search box.

4. Now search for </head> tag.

5. When you find this tag, just above this paste the jquery code given below:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'></script>

Note:- If you have already added jquery in your template, then skip this step and follow next step.

6. Now just above </head> tag paste the code given below:

<script>
var aff = new Array();

/* define your links here */

aff['Your affiliate Link1'] = 'Your regular Link1';

aff['Your affiliate Link2'] = 'Your regular Link2';

aff['Your affiliate Link3'] = 'Your regular Link3';

/* do not edit below this point */

/* reverse the key/value pairs so we can lookup based on value */

var aff_reverse = new Array();
for (k in aff) {
    aff_reverse[aff[k]] = k;
}

/* scan all links when the document loads */

$(document).ready(function(){
  $('a').attr('href',function(){
 
    /* if the link isn't listed above, do nothing */
    if (!aff[$(this).attr('href')]) {return $(this).attr('href');}
 
/* ok, the link is in our list */
    $(this).click(function(){
     
 /* when the link is clicked on, revert it back to the affiliate link */
   
  //$(this).attr('href', aff_reverse[$(this).attr('href')]);
        return true;
    });
    $(this).mouseup(function(){
     
/* Firefox ignores onclick event when the link is opened via middle mouse (new tab) */
        $(this).attr('href', aff_reverse[$(this).attr('href')]);
        return true;
    });
    $(this).mouseout(function(){
     
/* revert back to non-aff link in case they opened in new tab */
     
$(this).attr('href', aff[$(this).attr('href')]);
        return true;
    });
 
 /* change the affiliate link to a non-affiliate link */
 
return aff[$(this).attr('href')];
  });
});
</script>

 Customization:-

On the above code replace Affiliate Link1 with your original affiliate link like http://hostgator.com/id=Alfaaz

Replace Regular Link1 which affiliate link you want like:

https://techincraze.blogspot.com/go/hostgator

Replace all links according to your need

7. Now when you add http://hostgator.com/id=Alfaaz then it will be automatically converted to https://techincraze.blogspot.com/go/hostgator

Note:- You can add unlimited affiliate links. Just repeat the same affiliate link code multiple times.

Over To You

So, this was one of the easiest ways of cloaking affiliate link in blogger. And if you have any problem related to this content comment down and don't forget to share.

Read More

Thursday, September 14, 2017

// // Leave a Comment

How To Add Auto Alt Tag Generator For Images To Blogger

As I have already told you how to add code box in blogger? Now I will show you how to add auto alt tag generator for images to your blogger blog. Seo is very important for any webmaster to rank at good position in search engines. And for getting a good position in search engine, you have to follow all ranking factors. One of the major ranking factors is proper optimising of images for SEO. Many bloggers are lazy to add an alt tag to images. But if you add alt tags to your blog's images, then you might get tired.  But now you will not be tired. Yes, you have heard right. Because I have a code that will add t tag automatically in your blog Images. So, today I am showing you how to add auto alt tag generator for your images to blogger blog.

add-auto-alt-tag-generator-for-images-in-blogger

How This Script Works


This script can read the name of the image. Means whenever you upload an image in your blog post then this script read the name of the image and add that as an Alt tag. And this code can also add "+" if there is space in the name of the image. So, before uploading an image to your blog post, rename it properly.

How To Add Auto Alt Tag Generator For Images To Blogger


1. Login to your blogger blog Dashboard.

2. Then go to "Theme" > "Edit HTML".

add-auto-alt-tag-generator-for-images-in-blogger


3. Click anywhere inside the code area to open blogger search box.

4. Now search for <head> and just below it paste the code given below:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Note:- If you have already added jquery in your blogger Template, just leave this step and follow next step.

4. Copy or write </body> in search box and press Enter.

5. When you find the code just above
  </body>  tag and paste the code given below:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $('img').each(function(){
    var $img = $(this);
    var filename = $img.attr('src')
    $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
 
    $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
  });
});
//]]>
</script>
6. Now click on "Save Template" and you are done.

Wrapping Up

So, this was the easiest way of adding auto alt tag generator for images to blogger. I hope you liked the post. Comment down your problems related to this content and do not forget to share it.
Read More

Sunday, September 10, 2017

// // Leave a Comment

How To Add Code Box In Blogger Post

Thinking to add code box in your blogger blog post?

But don't know how to do it.

So, today I will tell you how to add or insert code box in your blogger blog post. Blogger is the best platform for newbies who want to start their blog without spending a cent. It gives you all options to make your blog beautiful and to make your blog look like a professional blog.

There are many professional blogs hosted on blogger like mybloggertricks, helplogger etc. And every blogger starts their Blogging journey from and then move to any other blog. It gives you an option to edit your blogger blog Template according to your choice. Just you need some basic knowledge of HTML and CSS.

When you write about the blogger on your blog you may have shared code to paste in Template. It's good to share that codes in a separate code box in a way that it looks stylish. And it's helpful for visitors because they can copy the code easily from code box. That's why I am sharing a trick for posting source code in your blogger blog.


add-code-box-in-blogger

How To Add Code Box In Blogger


1. Head up to your blogger blog Dashboard.

2. Then go to " Theme " > " Edit HTML ".



3. Click anywhere inside the code area and press Ctrl + F keys to open the search box.

4. Write or paste " ]]</b:skin>  "code in search box and press Enter.

5. Just above " ]]</b:skin> " paste the code box CSS code given below:

Code 1. For Style 1 Copy This Code [With Scroll]

.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; }
.code:hover { background-repeat:no-repeat; }


Code 2. For Style 2 Copy This Code [Without Scroll]

.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; }
.code:hover { background-repeat:no-repeat; }

6. Now click on " Save Template " and you are done.


How To Use This

To use this in your post just follow the following steps:

1. To use this just click on HTML tab in your blogger post editor.

2. Now write or paste the code given below in your blogger post editor as shown in image below:

add-code-box-in-blogger


                       <div class="code">
                        Your Code Here
                        </div>

3. Replace " Your Code Here " with your desired code.

4. Now click on " Publish Button " and see it live.


From The Editors Desk


So, this was a guide about adding code box in blogger blog. If you have any problem related to this article, comment below and do not forget to share this article.

Read More