Blogging Tips Tricks & Hacks

An important part of a good SEO is the incorporation of meta tags, which are commonly located in the header of our website and which, in the same time, are invisible to users visiting the site. Well, to be more succinct, these tags have only one purpose: to include information about the page such as author name, date, key word, description, title, among others.

However, here we will only mention one, which is the meta description in Blogger, this description will appear as a fragment in the search results and as a description when sharing on Google+, Facebook and other social networks. A clear and precise description increases the chances of getting visits or clicks.

As we will work only on the Blogger platform, here I leave a little guide to easily add a meta description.

Meta Description in Blogger

The first thing we will do is going to our Blogger dashboard and go to Settings > Search preferences > Meta Tags > Description and click on Edit.

Then check the box "Yes" to enable search description and finally click on the "Save Changes" button.

Adding Meta Description To individual Posts

Now we will focus on adding the meta description to individual pages. Simply edit the page or post, look for the Search Description setting, where we enter the text and then save by clicking on the Done button.

You are ready, however it is best to test if it works and we will do so with the MetaChecker online tool, where we only have to introduce the url of a post or page, click Analyze and then it will show the results, including a complete analysis of keywords, on-page seo , meta tags, URLs, current server status and a rating bar that goes from Horror to Excellent.

If none of the meta descriptions appear (rarely fails), we will do the process manually, but it requires us to touch a bit of code. In this case, go to Template > Edit HTML and then insert before <b:skin><![CDATA[ the following code:

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

And, of course, we will use again the previously mentioned tool to ensure that the description is placed correctly and if all goes well, your blog would already be ready to face a good SEO.

Page Peel is a popular page flip effect that when your cursor is passing over it will show "what's behind" as if it would be a book.
There are many ways to do this, many of them use flash files which makes it less customizable, however, the one that we will see in this post is made with jQuery.

Regularly the content that is "behind" it is an image for subscribing to feed but you can put any image and link to any page.

Demo

You can see an example in this demo blog.

To add this page curl effect on your blog:

1. Go to Template > Edit HTML and before </head> paste the script:

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

<script>
//<![CDATA[
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
//]]>
</script>

2. Then before ]]></b:skin> paste these styles:

/* Page Flip
----------------------------------------------- */
#pageflip {
position: relative;
right: 0;
top: 0px; /* Change to 30px if you have the navbar (navigation bar) */
float: right;
z-index:9;
}
#pageflip img {
width: 50px;
height: 52px;
z-index: 99;
position: absolute;
right: 0;
top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px;
height: 50px;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
background: url(http://oi44.tinypic.com/2hheno6.jpg) no-repeat right top;
}
#pageflipMirror {
position: static;
right: 0;
top: 0;
float: right;
}

3. Finally, paste after <body> or:

<body expr:class='"loading" + data:blog.mobileClass'>

The following code:

<div id='pageflip'>
<a href='http://name-of_your_blog.blogspot.com/atom.xml'>
<img src='http://oi40.tinypic.com/10fqnav.jpg' style='width: 50px; height: 52px; overflow-x: hidden; overflow-y: hidden;'/></a>
<div class='msg_block' style='width: 50px; height: 50px; overflow-x: hidden; overflow-y: hidden; '/>
</div>

In blue you will see a URL - this is the URL of the image that, in this case, is an invitation to subscribe to the feed. You can change it later to another (should be of the same size) if you want.
In red you can see where the name of your blog should be added, that will be the link to the feed of your blog when the user is giving a click on the image behind, but you can put any URL in case you want to link to another page.

And that's it. Save the template.

Remember that uses jQuery, so you should only have one version of it, and if you use Scriptaculous or Mootools, you should apply some changes.

Blogging Tips Tricks & Hacks

Pages

Adding a Meta Description to Blogger

Meta Description in Blogger

Adding Meta Description To individual Posts

Page peel effect using jQuery

To add this page curl effect on your blog: