Wednesday, 5 December 2018

 How to automatically redirect Blogger blog to another blog or website

A few posts back we made any article about Blogger custom redirects in which you can redirect within your blog. That is you can redirect your specific post URL to another post or page, all 301 or 302 redirection within your blog. That will be useful for redirecting 404 error pages and broken links; however with that you cannot redirect homepage to any particular URL. Here we will show you how to automatically redirect Blogger blog to another blog or website or any URL. So with this technique you can redirect your Blogger Homepage or any particular page to external websites.
Let’s say you want to redirect your complete Blogger blog to another page or URL. That is redirecting your homepage, posts page, archives page and all other URL in your blog to another specified external website. You have to use this if you just moved to new domain. To do this you are going to make changes to your template file. So before you mess up with the codes it’s recommended that you backup your template first.
  1. Login to your Blogger dashboard
  2. Go to template and click edit HTML
  3. Now you can see template codes. Press CTRL + f and then find <head>
Now add the following code below head tags.
<script type='text/javascript'>
  var d='<data:blog.url/>';
  d=d.replace(/.*\/\/[^\/]*/, '');
  location.href = 'https://vishesh.tk';
</script>
In the above code change https://Vishesh.tk which is the destination URL. Now all your pages from the blog will be redirected to destination URL.
Now we will see another piece of code that redirects particular blog URL to another blog or website. If you wish not to redirect the whole blog then you have to make use of this code. Also you can use this for redirecting user from a particular page to another external website for promotional purpose.
To do this just paste the following code below head tag and change the from URL that is http://yourblog.blogspot.com and destination URL that is https://Vishesh.tk
<script>
if(window.location.href == 'http://yourblog.blogspot.com ')
{
window.location="https://Vishesh.tk";
}
</script>
The above code just redirects user from the specified BlogSpot URL to another website or URL.

Hope this article guided you on how to automatically redirect Blogger blog to another blog / website or URL. Share this and if you found it useful then please leave your comments.

Tuesday, 13 November 2018

 Stylish Search  Widget  code Search Boxes For Blogger
Search Box is the basic but a necessary part of a website. They're user convenient and help you in increasing your website usability. They help your readers to navigate throughout your blog more efficiently. You would see that every blogspot blogger has different stylish custom search box widget matching their template design because, they were not only help users to find the solution of their problems more easily but also add a professional look to your blog.
So, Today I'm sharing HTML code for search widget for blogger.

Custom Search Boxes For Blogger

Just adding a Search Bar is not enough, it should always be ready to help customers and reliable according to the theme of your blog. Blogger also provides Officially Simple widget for it, but that doesn't provide the professional, stylish look to your blog, but you can use CSS to Style blogspot official search box widget. If your old Search box is not working properly and you want to replace it with beautiful one don't worry, just pick up one of the following and follow the steps by step instructions below. The look of the design is up to you, you can also edit the CSS according to your blog needs.
Benefits of Adding Custom Stylish Search Box
  • Add professional looks to your website.
  • Provide basic benefits to customers.
  • Save user time.
  • Can be applied anywhere like in header, sidebar, footer etc.
  • Stylish Active,hover and focus effects.
  • Pure CSS, no image.
  • Easy customization from CSS styles.Automatically adjust width.
Custom Beautiful Stylish Blue Grey Search box widget
<style type="text/css">
    #vk-searchbox {
        background-color: #F5F5F5;
        border: 1px solid #EDEDED;
        padding: 5px;
        border-radius: 10px;
        margin: 10px auto;
        min-width: 238px;
        max-width: 288px;
    }
   
    #vk-input {
        background-color: #FEFEFE;
        border: medium none;
        font: 12px/12px "HelveticaNeue", Helvetica, Arial, sans-serif;
        margin-right: 2%;
        padding: 4%;
        box-shadow: 2px 1px 4px #999999 inset;
        border-radius: 9px;
        width: 60.33%;
    }
   
    #vk-input:focus {
        outline: medium none;
        box-shadow: 1px 1px 4px #0D76BE inset;
    }
   
    #vk-submit {
        background: transparent linear-gradient(to bottom, #34ADEC 0%, #2691DC 100%) repeat;
        border-radius: 9px;
        border: medium none;
        color: #FFF;
        cursor: pointer;
        font: 13px/13px "HelveticaNeue", Helvetica, Arial, sans-serif;
        padding: 4%;
        width: 28%;
    }
   
    #vk-submit:hover {
        background: transparent linear-gradient(to bottom, #2691DC 0%, #34ADEC 100%) repeat;
    }
</style>

<form id="vk-searchbox" action="/search" method="get">
    <input type="text" id="vk-input" name="q" placeholder="Type Here..." />
    <input type="hidden" name="max-results" value="8" />
    <input id="vk-submit" type="submit" value="Search" />
</form>
Custom Stylish Search box widget with hover effect
<style type="text/css">
    #vk-searchbox {
        height: 40px;
        position: relative;
        min-width: 250px;
        max-width: 300px;
        margin: 10px auto;
    }
   
    .vk-buttonwrap {
        border: none;
        width: 14%;
        height: 35px;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        background: #009bff;
        cursor: pointer;
        border-bottom: 5px solid #0276c1;
    }
   
    .vk-buttonwrap:hover {
        border-bottom: 5px solid #bc490a;
        background: #d75813;
    }
   
    .vk-submit {
        width: 35px;
        height: 35px;
        background: transparent;
        cursor: pointer;
        position: absolute;
        right: 50%;
        top: 50%;
        margin-top: -17.5px;
        margin-right: -17.5px;
        border: none;
    }
   
    .vk-submit:after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        border: 2px solid white;
        border-radius: 50%;
        left: 10px;
        top: 9px;
        box-sizing: content-box;
    }
   
    .vk-submit:before {
        content: '';
        position: absolute;
        height: 8px;
        width: 2px;
        background: white;
        transform: rotate(-35deg);
        top: 19px;
        left: 21px;
    }
   
    #vk-input {
        height: 32px;
        width: 82%;
        position: absolute;
        padding-left: 4%;
        border: none;
        outline: none;
        right: 14%;
        border-bottom: 5px solid #bbb;
        border-left: 1px solid #eaeaea;
        background-color: #fbfbfb;
        border-top: 1px solid #eaeaea;
        box-shadow: 1px 1px 2px #e9e4e4 inset;
    }
   
    #vk-input:focus,
    #vk-input:active {
        background-color: #fff;
    }
</style>

<form action="/search" id="vk-searchbox" method="get">
    <span class="vk-buttonwrap"><button class="vk-submit" value="" type="submit"></button></span>
    <input type="text" name="q" id="vk-input" placeholder="Type here ..." />
    <input type="hidden" name="max-results" value="8" />
</form>
beautiful Smooth Stylish Search box widget
<style type="text/css">
    #vk-searchbox {
        height: 35px;
        margin: 10px auto;
        position: relative;
        min-width: 250px;
        max-width: 300px;
    }
   
    .vk-buttonwrap {
        border: none;
        width: 14%;
        height: 35px;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        background: #444;
        cursor: pointer;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }
   
    .vk-buttonwrap:hover {
        background: #1a1a1a;
    }
   
    .vk-submit {
        width: 35px;
        height: 35px;
        background: transparent;
        cursor: pointer;
        position: absolute;
        right: 50%;
        top: 50%;
        margin-top: -17.5px;
        margin-right: -17.5px;
        border: none;
    }
   
    .vk-submit:after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        border: 2px solid white;
        border-radius: 50%;
        left: 10px;
        top: 9px;
        box-sizing: content-box;
    }
   
    .vk-submit:before {
        content: '';
        position: absolute;
        height: 8px;
        width: 2px;
        background: white;
        transform: rotate(-35deg);
        top: 19px;
        left: 21px;
    }
   
    #vk-input {
        height: 35px;
        width: 82%;
        padding: 0px;
        padding-left: 4%;
        border: none;
        outline: none;
        position: absolute;
        right: 14%;
        box-shadow: inset 0 2px 2px #080808;
        background-color: #444444;
        color: #fff;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        transition: all 0.5s;
    }
   
    #vk-input:hover,
    #vk-input:focus {
        box-shadow: inset 1px 1px 10px #000;
    }
</style>

<form action="/search" id="vk-searchbox" method="get">
    <span class="vk-buttonwrap"><button class="vk-submit" value="" type="submit"></button></span>
    <input type="text" name="q" id="vk-input" placeholder="Search..." />
    <input type="hidden" name="max-results" value="8" />
</form>

Steps: How To Add Stylish Search Box Widget To Blogger

Note: Minimum sidebar width required - 250px
Step 1. Login to your Blogger account, then go to Layout > click on the 'Add a gadget' link on the left side.
Step 2. Choose HTML/JavaScript from the pop-up window > paste the code inside the empty box.
onhover image zoom iconAdd HTML/JavaScript widget
Step 3. Configuration:
- Change the value="8" for total numbers of posts per page. Eg value="12".
Note: Make sure max-results value matches with your post limit on homepage.
Step 4. Press Save.
If You Have any problem/question about this post, write a comment in commentbox.

Thursday, 26 July 2018

How To Add Custom Robots.txt File in Blogger?

What is Robots.txt?

Robots.txt is a text file which contains few lines of simple code.
It is saved on the website or blog's server which instruct the web crawlers on how to index and crawl your blog in the search results.
That means you can restrict any web page on your blog from web crawlers so that it can't get indexed in search engines like your blog labels page, your demo page or any other pages that are not as important to get indexed.
Always remember that search crawlers scan the robots.txt file before crawling any web page.
Each blog hosted on blogger has its default robots.txt file which is something look like this: 
User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Allow: /
Sitemap: http://example.blogspot.com/sitemap.xml

Explanation 

This code is divided into three sections. Let's first study each of them after that we will learn how to add custom robots.txt file in blogspot blogs.

User-agent: Mediapartners-Google 

This code is for Google Adsense robots which help them to serve better ads on your blog. Either you are using Google Adsense on your blog or not simply leave it as it is.

User-agent: * 

This is for all robots marked with asterisk (*). In default settings our blog's labels links are restricted to indexed by search crawlers that means the web crawlers will not index our labels page links because of below code.

Disallow: /search 

That means the links having keyword search just after the domain name will be ignored. See below example which is a link of label page named SEO.
https://www.bloggertipstricks.com/search/label/SEO 
And if we remove Disallow: /search from the above code then crawlers will access our entire blog to index and crawl all of its content and web pages.
Here Allow: / refers to the Homepage that means web crawlers can crawl and index our blog's homepage.

Disallow Particular Post

Now suppose if we want to exclude a particular post from indexing then we can add below lines in the code.
Disallow: /yyyy/mm/post-url.html
Here yyyy and mm refers to the publishing year and month of the post respectively. For example if we have published a post in year 2013 in month of March then we have to use below format.
Disallow: /2013/03/post-url.html
To make this task easy, you can simply copy the post URL and remove the blog name from the beginning.

Disallow Particular Page

If we need to disallow a particular page then we can use the same method as above. Simply copy the page URL and remove blog address from it which will something look like this:
Disallow: /p/page-url.html

Adding Custom Robots.Txt to Blogger 

Now the main part of this tutorial is how to add custom robots.txt in blogger. So below are steps to add it.
  1. Go to your blogger blog.
  2. Navigate to Settings >> Search Preferences ›› Crawlers and indexing ›› Custom robots.txt ›› Edit ›› Yes
  3. Now paste your robots.txt file code in the box.
  4. Click on Save Changes button.
  5. You are done! 
blogger custom robots txt

How to Check Your Robots.txt File? 

You can check this file on your blog by adding /robots.txt at the end of your blog URL in the web browser. For example: 
http://xyz.blogspot.com/robots.txt
Once you visit the robots.txt file URL you will see the entire code which you are using in your custom robots.txt file.