Showing posts with label HTML And CSS Tricks. Show all posts
Showing posts with label HTML And CSS Tricks. Show all posts

Wednesday, 12 June 2019

Setting Up 404 Error Page, Redirects and Meta Tags


Its big, its exciting and its worth an applause! Blogger finally introduced the most awaited SEO features for Google hosted Blog Spot blogs. Blogger Team is trying every possible effort to get closer to its biggest competitor Word press in terms of development. Its believed that Blog Spot blogs are not well optimized due to limited Search Engine optimization features but with the introduction of Meta Description for individual posts, custom redirection for broken links, no-follow attribute, 404 error pages, custom robots.txt and robot header tags features, blogger surprised almost everyone today. The problem of wrong post description appearing in social networks like Facebook and Google+ will all be solved thanks to Meta Tags for posts and pages. We will look into each feature one by one so that you may understand clearly the importance of these technical SEO terms.
                                      

What are the new Search Features?

Six important SEO options have been added to Blogger in draft which are: 

  1. Meta Tags for Homepage and Sub-pages 
  2. 404 Error Page 
  3. Custom Redirects for broken links 
  4. Custom Robots.txt For Advanced users 
  5. Custom robots header tags For Advanced users 
  6. Nofollow attribute for post Editor links 
Caution: Out of six new features only two which relate to crawling and indexing of search robots are restricted for Advanced users. I would therefore recommend not to play with them because wrong settings can terribly effect search credibility of your blog therefore keep them as default.

To set the new SEO settings do this:

  1. Go To draft.blogger.com
  2. Then Go to Settings > Search preferences
                                               

Now here you will see three important sub-sections which we will discuss one by one.

Meta Tags

The word meta here refers to Meta Description. It tells visitors what your blog is all about. In search engine results page it looks like this         


Previously we would manually set meta description for blog homepage but now you can set it using this page. So what's new? The new addition is that by enabling this feature, meta description for Posts will activate and you can then configure Description for posts using the blog post editor. To activate this option do this: 

  1. Click the Edit link 
  2. Choose "Enable Search Description?" 
  3. In box define your blog in no more than 150 characters. 

Note: You must write the same description here that you have written manually inside your templates.
                        


4. Click Save changes

5. Since the above description wont work correctly in custom templates therefore we need to insert some code inside the template. Please go to Design > Edit HTML and just below <head> paste the following code for meta description:


<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

 6. Save your template and all done!

Meta Description For Posts

Now open Blogger post editor and you will see a new option for post description:
                             

Now make it your hobby to write a one line description for every post that you publish. Write no more than 150 characters or 15 keyword phrases. By doing this every new post that you publish will have a separate clean description that will attract more visitors by providing precise description of what you post is all about instead of a chopped random snippet of text chosen by search robot. This will help both robots in better indexing your posts and also Facebook and Google+ to display correct description for your posts.

Errors and re-directions

Most of you know that Google webmasters give you several links which are either broken or no more exits. Broken links refer to Pages that no more exits on your blog because for some reason you may have deleted them. Now if some website is linking one of your posts that you deleted then you wont get the reward of the Page Rank juice from that website to yours instead if people click that link they will land no where in your blog and will see a 404 Page not found error. There was no concept of a 404 error page before instead this page would appear:

              

But now you can create your own custom 404 error page. Check ours by writing anything illogical at the end of our blog URL in your address bar or simply click here

                              

Therefore in order to redirect deleted post links to new links and create a custom 404 Error page do this:



404 Error Page 

  1. Click the Edit link next to Custom Page Not Found 
  2. Inside the box write a message that you want to display when readers land on a missing page (404 page)


You can write any message inside this box using simple HTML but once you click save changes and see how your error page looks, you will see that it looks dull and grey and appear inside an ugly box. In order to give it a good designed look with custom CSS styles just like ours then kindly wait for my next post.



Broken Link Redirection
                    

  1. Click the edit link next to Custom Redirects 
  2. Click the check box to simplify the options 
  3. Now you get a From and To input options 
  4. Insert the link of your deleted Post inside From box and insert the link of your new post inside To box. 
  5. Click Save changes 
You can create several redirects by clicking the New redirect button. If you are confused where to redirect a deleted page or post then you can simply redirect all broken links to your Homepage in order to flow all Page Rank juice there.

Crawlers and indexing


Do not worry, its not that advanced and horrifying! :)


This section includes two options which are robots.txt and robot header tags. You may not touch the robots.txt option however you can manage settings for robot header tags severed to search engines. All our long techy SEO tutorials that provided solution for optimizing Blogger pages, posts, homepage, archive and search pages can now be implemented with a simple click of a mouse.

The robots meta tag lets you control how an individual page should be indexed and served to users in search results. In order to keep things simple use the following settings as shown in the screenshot below:

                         

The above recommended settings will tell search engines to index your homepage and all its content, to index your posts and pages but must not index archives and should also not take description suggestions from Open Directory Project (noopd).


Normally, search engines use resources like the Open Directory Project (noopd) and the Yahoo! Directory (noydir) to find titles and descriptions for your content. Generally, you will not want them to do this. The noodp tag prevents them from doing so.

What does unavailable_after Meta tag does?


Though you wont need them but for understanding we would explain it. Most blogs promote seasonal products by writing posts. If you are promoting a new product offer on monthly basis which would expire the next month then you must tell search spiders to stop indexing the old product posts and index the latest one. This will help spiders to give more importance to your latest posts than old repeated posts.

rel nofollow

To understand what is a nofollow link attribute and when should you use it, then kindly read this tutorial:

Internal links should never be tagged as nofollow.


           

Now whenever you need to create a link in post editor you will see two options 

  1. Open this link in new window 
  2. Add rel="nofollow" attribute
                  

Choose to open the link in new tab only if the link is pointing to an external site and choose the nofollow option only for links that point to low quality sites or login pages. To understand what links should be attributed as nofollow, I would highly recommend that you read our article on nofollow as shared above.

Liked This latest Change

I am sure this would greatly improve the way your posts and blog is indexed and crawled by search robots and the way they appear on search results page. It is a great way to improve the quality of your blog and attract a better targeted traffic. Feel free to ask me as many questions as possible in order to throw away all confusions and misconceptions or myths related to SEO that may still be troubling you. I will publish the 404 error page tutorial tomorrow and will share several Designs to give your blogs a new stunning look. 


KEEP READING

Tuesday, 24 July 2018

Remove footer credit link from any template without redirecting


Many websites are available on the internet which provides very stylish blogger template at very low cost. If you purchase their template than that template will not contain any credit link. These websites also provide most of the free blogger template with Non-removable credit link. Means, what? If you’ll try to remove credit link from their template, then your blog will automatically redirect to their website (Homepage or a particular site). This is because they added some JavaScript into their free templates. In another hand, if you undo the changes and keep their original credit of template then it works perfectly.

Actually, these links are attached with some JavaScript or CSS. Finding JavaScript from the template and then removing is too boring and time-consuming also it requires lots of effort to do this. But in other hand, you can easily hide the credit/footer link via CSS. This method is very simple and takes only 2 minutes.


Steps to Remove Credit/Footer Link:

  • First of all, go to Blogger.com 
  • Just Login to Blogger and select your blog. 
  • Now go to Theme>HTML.


  • Go to the footer and find the credit/footer link which needs to remove/hide. You’ll find something like Copyright, credit or designed etc.
Add the following line with your original copyright ID. (As shown in picture below).
style=”visibility: hidden

  • Now, you need to Save your Template.
  • Enjoy:)
Need Help?

If you you need any help in removing your template's footer credit link then feel free to ask me in the comments section below. 

KEEP READING

How To Create Simple Drop Down Menu In Blogger



A drop down is really essential tool or widget for any blog or websites. It gives real feel or look of the template or blog. Drop down menu lets users easily navigate through different parts of the blog. In this tutorial i will teach you to add simple navigation menu or Drop down menu to your blog. The good thing about this widget is that it requires no jquery and is coded completely in Html and CSS. So it loads really fast. Lets get started!.

How To Add Drop Down Menu ?


1. Go to blogger Dashboard and click on Layout.

2. Then Click on Add Gadget (Below Header not on sidebar) and Choose Html/JavascriptWidget.

3. Now Paste below code into it.

<div id='mbtnavbar'>
<ul id='mbtnav'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
<li>
<a href='#'>Sitemap</a>
<ul>
<li><a href='#'>Sub Category #1</a></li>
<li><a href='#'>Sub Category#2</a></li>
</ul>
</li>
</ul>
</div>
4. Now Change the text in Bold with appropriate label and also replace the url highlighted in red color (#).

5. To add another tab to the drop down menu then add below code before </ul>. or delete that code from above code to remove any menu.

<li>
<a href='#'>Contact</a>
</li>
6. Now we will add CSS, Go to Blogger Dashboard and click on theme and click on Edit Html. Backup your template before doing this.

Also Check: Backup Your Template In 3 Simple Steps

7. Then Search for below code.

]]></b:skin>
8. Paste the below code above the code you searched in Step 7.
/**MBT Navgation bar**/
#mbtnavbar {
background: #464849;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #028490;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 140px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #028490;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #70b6bd;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
9. Save the template and you will have drop down menu added to your blog.

Customizing Above Widget

This part is completely optional. If the above provided plugin does not match the theme of your blog and want to customize to match template of your blog then change some Hex code listed below.

Change #464849 to change background color of navigation bar which is currently dark grey.
Change #028490 to change the color of tab on mouse hover.
Change #028490 to change the color of Drop down menu
Change #70b6bd to change the color of Drop down on mouse hover.

Any Question ?

If you like our post or have any suggestion or got stuck at any steps implementing the widget to your blog then leave a comment below i will be glad to help you out. Subscribe to our blog RSS Feed, Like us on Twitter, Facebook, +1 on Google+. Keep Blogging

KEEP READING

Sunday, 18 December 2016

How To Add Back To Top Button In Blogger


In this post i will teach you to add simple Button or Icon to your blog to make your readers easily go back to top of the page. If your readers are browsing through dozens of posts on your blog, this simple plugin will let them to jump directly to top of the page. This plugin is very simple to install on your blog and it will be placed on bottom right corner of your blog so readers can make use of this useful customizarion.

Adding Back To Top Button To Bloggers Blog

1. Go to Blogger>Dashboard>Layout.
2. Then Click on Add Gadget and choose Html/JavaScript from pop up window.
3. Now paste below code into it.

<!--BACK TO TOP STARTS-->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="URL OF BACK TO TOP"/></a>
<!--BACK TO ENDS-->

4. Now replace the Text in Green with URL of your image. I have provided some image at the bottom of this post which you can use on your blog.

5. Save the widget and you will have Back to top button on your blog.
Images For Back To Top Buttons

Right click on any of the below image and select Copy Image URL and paste in the provided code above or check Step 4 for more information.








Share Your Thoughts!

If you like our post or have any suggestion or got stuck at any steps implementing the widget to your blog then leave a comment below i will be glad to help you out. Subscribe to our blog RSS Feed, Like us on Facebook, . Keep Blogging!

KEEP READING

Monday, 19 May 2014

How To Add Recommended Post Slide Out Widget To Blogger


You know those popup messages that slide out from the bottom right corner once you've almost
reached the bottom of the page? Well, they used to be available only on WordPress but not anymore; now Blogger users can enjoy it too! The Recommended Post slide Out Widget is an invitation to the reader to read any other post once he has read one of your blog entries. It's both useful for you (can improve your Click Through Rate (CTR) ) and for your blog visitors too.


Don't Miss: How to add beautiful social subscription widget in blogger?

How to add the Recommended Post Slide out Widget

1. Log in into your Blogger account, then go to Layout
2. Click on Add a Gadget Link:



3. From the pop-up window, scroll down and choose "HTML/JavaScript" option:


4. Paste this code inside the empty box:
<div id="hlslidein" style="display:none;">
<div class="help">?</div> <div class="expand">+</div>
<div class="close">X</div> <p>Recommended for you</p> <div id="hlslidein_image">
</div> <div id="hlslidein_title">Loading..
</div> </div> <script>
if(document.location.href.split("/").
length==6&&document.location.href.indexOf(".html") !=-1)
{if(typeof hl_onload_queue=='undefined')var hl_onload_queue=[];
if(typeof hl_dom_loaded=='boolean')hl_dom_ loaded=false;
else var hl_dom_loaded=false;if(typeof hl_async_loader!='function'){function hl_async_loader(src,callback,id){var script=document.createElement('script');
script.type="text/javascript";
script.async=true;script.src=src;
script.id=id;var previous_script=document.getElementById(id) ;if(previous_script)if(previous_script.readyState= ="loaded"
||previous_script.readyState=="complete"){callback();return}
else{script=previous_script}if(scri pt.onload!=null)previous_callback=script.onload;
sc ript.onload=script.onreadystatechange=function()
{var newcallback;if(previous_script&&previous_callback) =function()
{previous_callback();callback()};else newcallback=callback;
if(hl_dom_loaded){newcallback()}else hl_onload_queue.push(newcallback);
script.onload =null;script.onreadystatechange=null};
var head=document.getElementsByTagName('head')[0];
if(!previous_script)head.appendChild(script)}
}
if(typeof hl_domLoaded!='function')function hl_domLoaded(callback)
{hl_dom_loaded=true;var len=hl_onload_queue.length;for(var i=0;i<len;i++)
{hl_onload_queue[i]()}}hl_domLoaded();hl_async_loader ("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){hl_async_loader("http://mybloggertutorials.blogspot.com/
2014/05/add-recommended-post-slide-out-widget.html",function(){},"hl-out-slide")}
,"jQueryjs")}
</script>
5. Now Save the widget:

6. Next, go to Template, and click on the Edit HTML button:



8. Search (using CTRL + F) for the following code :
<div class='post-footer-line post-footer-line-1'>
OR
<p class='post-footer-line post-footer-line-1'>
OR
<data:post.body/>
And add immediately below any of these lines, the following snippet:
<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'>
</div>
</b:if>
Now when the reader scrolls down to this div, the slide will open up.

Recommended For You: Where To place Adds in any site or blog?

9. Save your template. And that's it!

KEEP READING

Saturday, 4 May 2013

How To add Mp3 Music Player In Blogger

Isn't it be cool to have a tune played when someone visit your websites or blog. Specially if your blog is about songs, music, movies and videos then it would be cool to play music automatically when visitors visits your websites. In this tutorial i will show you how to add a HTML5mp3 music player to your blog. This mp3 player comes with features such as adjusting volume, play and pause button etc. It works on mostly all browsers except some lower version of internet explorer.

How to add HTML5 Mp3 Player ?

1. Go to blogger Dashboard > Layout
2. Then Click on Add Gadget
3. Select HTML/Javascript
4. Copy the below code, paste in the HTML/Javascript box and Save it. (Any one of 3)


  •  Code For Normal Mp3 Player:

<audio controls="controls"><source src="mybloggetutorials.blogspot.com" autoload="true" autoplay="true" hidden="true" type="audio/mp3" /></source></audio>

  • Code to play Automatically:

<audio controls autoplay="controls"><source src="mybloggertutorials.blogspot.com" autoload="true" autoplay="true" hidden="true" type="audio/mp3" /></source></audio>

  •  Code to play music again and again (Looping):

<audio controls loop="controls"><source src="mybloggertutorials.blogspot.com" autoload="true" autoplay="true" hidden="true" type="audio/mp3" /></source></audio>
Note: Replace mybloggertutorials.blogspot.com with url of mp3 file you want to play. The url will end with .mp3

Also Check: Five Awsome Websites For Facebook Timeline Covers 

5. Now you have working HTML5 Mp3 player on your blog.

6. Place this widget where you want it to appear on your blog.

Have any question ?

If you have any problem implementing HTML5 Mp3 player to your blog or have any other question or suggestion then leave a comment below. I will be glad to help you. Don't Forget to subscribe, +1 on google+ and like us on Facebook. Thank You.

Check this out:

KEEP READING

Wednesday, 1 May 2013

How To Add Stylish Popular Post Widget In Blogger


There are some useful and must have widgets which can help you to increase traffic to your blog and keep your visitors engaged on your blog. Facebook Like Box, Twitter Follow Button and Popular post widget are some of those widget. I had previously posted on Adding Label and Categories Cloud on your Blog, In this tutorial i will teach you to add and style popular post widget using CSS. After styling the widget it will look more stylish and more attractice as you can see on the left. You can even customize this further to match your blog template. So lets get started customizing blogger popular post widget.

Adding Popular Post Widget To Blog

1. Go to Blogger Dashboard > Layout > Add Gadget and choose Popular Post Widget.
2. Now set this setting as shown below.




3. You may change number of post to show upto 10 but dont make it below 

Styling Popular Post Widget With CSS

1. After Adding Popular Post widget to your blog. Go to Blogger Dashboard and choose Template.

2. Now Backup your Template to be safe if you mess something up. Check below tutorial if you dont know how to do that.


How To Backup Blogger Template ?

3. After Template been selected click on Edit HTML and search for below code.
]]></b:skin>
4. Now paste below code just above the code you search in Step 3.
/*--- Mybloggertutorials.blogspot.com Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #6BB5FF;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;}.popular-posts ul li:hover {
border:1px solid #009900;
}.popular-posts ul li a:hover {
text-decoration:none;
}
5. Now save this template and you are done.

Further Customizing The Widget

If you follow above steps correctly then you have install and style popular post widget on your blog.This part is completely optional. So if the border of the widget does not match your blog template or you want some different color then change the setting shown below. 

6BB5FF - Change this to change the border color at static mode.
009900 - Change this to change border color on hover effect.

Need Help?

If you have any question or suggestion or come across a problem while implementing this widget then leave a comment below i will be glad to help you out.
KEEP READING