How To Customize Blockquotes In Blogger ?

We use blockquotes to show some quote, a specific sentence, phrases etc. So blockquote has its own importance in blogging and if you are a blogger who likes to present the content in an effective and attractive manner then all features of a template must be working good to ensure the attractiveness of the blog. Some templates have very good blockquotes presentation while some other only shows the simple quotes, some just shifts the quoted text a little bit without changing anything in it. So if you are not happy with the block quotes of your blog and want to customize them according to your choice then this tutorial is for you.

Recently i have created a testing blog where i was trying to resolve all the problems related with the blogger templates, so i chosen a template that is provided by blogger and while customizing it i found that its blockquotes are not looking attractive so i decided to make them look attractive by using the CSS code. So there is nothing to worry if your template is not showing an attractive quoted text, you can customize it to according to your needs as i have customized it in this template. Previously blockquotes in this template doesn't have any border so i added a small css code and now you can see the block quotes in this template is looking quite good if not very attractive.

You can customize your templates block quotes easily by using CSS.

So below are the easy steps that you can follow to customize your blogs blockquotes :

• First select any one of the style from the given styles.
• Then Copy the code of that style.
• Now log in to your Blogger Account.
• Then go to Dashboard >>Template >>Edit HTML.
• Now press CTRL+F and search ]]></b:skin>
• Now paste the copied code just above ]]></b:skin>
• Then Save your template and you are done.

Note: After the styles i have given the customizations tips that you can use to make these blockquote styles more suitable for your blog, so don't forget to read them.

Style 1: Blockquote With Border

Code:

blockquote {
margin:1em 20px;
border: 1px solid #619644;
padding: 10px;
font-family: Vollkorn, serif;
font-style: normal;
background: #ffffff
}

Style 2: Blockquote With Vertical Line On Left

Code:

blockquote {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #619644;
font-family: Vollkorn, serif;
font-style: normal;
background: #ffffff;
}

Style 3: Blockquote With Two Parallel Dotted Lines

* To Enlarge The Images Please Click On Them.

Code:

blockquote {
margin:.75em 0;
border:1px dotted #619644;
border-width:1px 0;
padding:5px 15px;
color: #000
font-family: Vollkorn, serif;
font-style: normal;
background: #ffffff;
}

Style 4: Blockquote With Changed Background Color

Code:

blockquote {
margin: 1em 3em;
padding: .5em 1em;
background: #58FAF4;
font-family: Vollkorn, serif;
font-style: normal;
}

Customizations:

•   To change the background color of blockquote replace the HTML color code shown in blue.
•   To change the font family simply change the font name shown in red.
•   To change the border color replace the HTML color codes shown in green.
•   To change the font style from normal to italic, simply replace the text 'normal' with 'italic' shown in orange.

Read More

How To Customize Credit Links In Blogger Template ?

Blogger provides us some free templates that lacks some features and again one of the major issue is credit links. In blogger templates blogger gives a credit link that shows powered by Blogger, copyright year of blog and name of the template but if want to add some other links like privacy policy, disclaimer, sitemap etc. then you can not directly do it. So for doing this we need to do some editing in our blog's template editor section. Basically in this tutorial i will show you how to add your credit links at the footer of the blog and then i will also describe how to remove the blogger attribution. We do not recommend to remove the attribution but you can add powered by Blogger attribution in the footer link that you create. So if you want to customize the credit links then you can follow this tutorial.

Steps to add your customized credit links:

• Log in to your Blogger Account.
• Then go to Dashboard >> Template >> Edit HTML.
• Now press CTRL +F and search the following code:

]]></b:skin>

• Paste the below code just above ]]></b:skin>

#credit{font-size:13px;color:#777;text-align:center;text-transform:capitalize;}
.content-wrapper{position:relative;width:100%;margin:0 auto}

• Now again search the following line of code:

<b:section class='foot' id='footer-3' showaddelement='no'>

• Then paste the below code just above  <b:section class='foot' id='footer-3' showaddelement='no'>

<!-- credit link start-->
<div id='credit'>
<div class='content-wrapper'>
  &#169; Copyright 2014 <a class='site_name' expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> - All Rights Reserved | Powered by <a href='http://blogger.com/'>Blogger</a> | <a href="#">Privacy policy</a> | <a href="#">Disclaimer</a> | <a href="#">Sitemap</a>
  </div>
</div>
<!-- credit link ends-->

• Now Save your template.

Customizations: 

• Replace # with your URL's of required pages.

Now you have successfully added your customized footer link so the next step is to remove the Blogger Attribution from template's footer section. To do this simply follow the below link:

• How To Remove Attribution From Blogger ?

Also Read:

• All Problems related to Blogger Templates Resolved ! (Recommended)
• Earn Money With Adf.ly (Adf.ly Complete Review)

Read More

How To Show Only Snippet/Post Excerpt/Some Description With Thumbnails On Homepage In Blogger?

Blogger offers some simple templates that look professional but they have few problems that don't let us use these templates. One of the major problem with these templates is when we post articles on our blog, it starts showing the entire articles on the homepage while other templates only shows some small description/snippet with thumbnails making the blog look more professional and attractive. So if you are the one who want to use the blogger templates but not using it because of this drawback then you can follow this tutorial. Basically there are two ways of doing it one method is given by blogger itself, which is not recommended by me and other is by using some code which will make your blog look professional and attractive. So in this tutorial i will show the two methods of doing this. Below are the two methods of doing this :

Method 1:

• Log in to your Blogger Account.
• Then create a new post or open a post that is already published or ready to publish in drafts.
• Then after few lines from the start add a Jump Break as shown in below screenshots.

• Basically Jump Break feature is used to show the selected content on the homepage not the entire post and it also adds the read more link after few lines like we see in other templates. So use a jump break after few lines to show only a small description of a post on the homepage not the entire article.
• However this feature is not recommended because of the following reasons:

1. You have to add jump break in each and every post.
2. It is difficult for you to add Jump break at equal post length in all posts.
3. It doesn't makes equal frames for images, so if some posts have larger images than others then it will not change their size and show it same as they are, hence makes your blog look unprofessional and less attractive.

Method 2:

This is another approach, here you can add the following code in your template to automatically generate the equal posts description and thumbnails.

• Log in to your Blogger Account.
• Go to Dashboard >> Template >>Edit HTML.
• Before doing any editing in your template please backup your template using Backup/Restore tab.
• In HTML Editor Section press CTRL+F and search </head>.
• Now paste the below code just above </head>

<!--Script for displaying snippet on home page starts here-->
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!--Script for displaying snippet on home page ends here-->  

• Now search <data:post.body/> and replace it with the below code.

Note: The above code <data:post.body/> appears three or four times in the code so remove the first,second and fourth one and replace the third one with below code.

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>

• Now Save your template and you are done.

Read More

Problem Of Related Posts Widget In Blogger Templates

As i already said the templates provided by blogger lags various features and this problem is among one of them. Today we get the related posts widget inbuilt in most blogger templates but if want to use the templates provided by Blogger then you have to add this widget manually. There are many websites available online that provides free Related posts widgets for your blogs or websites such as LinkwithIn, Nrelate etc.

But we have to be careful while selecting a related posts widget because it can affect your blog in many ways. So before selecting a related posts widget for our blogs we must check the following things:

• Check whether the related posts shown in the widgets are actually related or they are just showing the same posts all the time. This is an important step because if your visitors see the same posts all the time in related posts then they will get bored and will surely leave your site which will affect the bounce rate of your blog.
• The second thing that we need to check while selecting a related post widget is one of the most important thing to be considered. Check whether your related posts widget is soaking your blog's link juice or not. If it is soaking your blog's link juice then it is not good for your blog. You can check it by clicking on any related post shown in related posts widget, when you click a post in related posts check whether it is directly redirecting you to your blog post or it is redirecting you first to its website(that is related posts widget providers website) and then back to your related post. The process of redirection is very fast so keep your eyes open and look at the address bar for redirection. One of the most known widget that has this problem of soaking link juice is LinkWithIn Related Posts widget, this widget looks good and professional but with this negative point of the widget i would not recommend you to use it.
• Check whether your related posts widget widget provider site providing different styles of the widget or just a single style. This is not a very important thing to check but if a related posts widget doesn't fits in your sites design then it can make your site look unprofessional.

So i have discussed all the major things that you must need to consider before selecting a related posts widget for your blog. So now i will describe you which related posts widget to use for your blog.

After seeing the negative points of LinkWithIn's Related Posts widget i decided to search for a better alternative that not only show effective related post but also provide various styles and customizations. After a little search i have found a widget which is actually good for our blogs and it is provided by Nrelate. This widget not only shows effective related posts but also provide various customizations and style for which i was looking. Also they do not force you to show their name nearby or below the widget in any way, it is totally optional so you can choose whether to show their name or not. One more thing about this widget, Nrelate offer you to show the sponsors ads in your related posts widget so you both can earn some money through your widget, but again it is totally optional so if don't want to show sponsors posts then simply select no in the options. I think this is the widget of choice for Blogger Templates, so if want to add Nrelate's Related Posts Widget to your blog then follow the below link:

• How to add Nrelate Related Posts widget to Blogger ?

Read More

All Problems With Blogger Templates Resolved

As a blogger user we always keep looking for best blogger templates that suit our requirements because the templates provided by blogger are not very effective for today's blogs. Blogger templates lacks various features that other template provider provide with their templates for free. But today i have decided that i will resolve all the issues related to the templates provided by Blogger.

So, i am writing here all the issues that we generally face with the templates provided by blogger and solve it one by one in separate posts specifically created for those problems. So lets first discuss all the issues that i found in a Blogger template, which are provided by blogger.

The Major Issues Found In A Blogger Template:

• The first issue you will find in all the templates which are provided by blogger is that they do not have menu bar or rather call it drop down menu because you can use tabs in place of drop down menu but not drop down menu itself.
• The second major issue that i have found in Blogger Templates is that Homepage shows full length posts instead of showing small description/snippet/post excerpt with images that almost all templates of today's shows effectively. This is also a negative point of blogger templates.
• The third major issue is same as Homepage issue, the labels and archive posts also show the entire article instead of showing the post snippets.
• The footer section's credit links also look awkward since they contain the templates name along with powered by blogger. And if you add copyright @ year and then blog name, in such case you cannot link your blog name with your blog's homepage. Also you cannot add more links in footer like privacy policy, sitemap etc. Overall it is not structured in Blogger templates so we have to correct it by removing Blogger Attribution.
• Block Quote in Blogger templates doesn't look like block quote so it also need some customization, although this is not a major issue but if you want to make your blog look professional then you have to customize it.
• One more major issue with Blogger templates is that on the header section they have huge empty space on the right side but you cannot use it to show advertisements because there is no option to add a gadget. So i will show you how to split a gadget into two so that you can use it show your advertisements. 
• Last but not the least since changing layout in templates provided by blogger is quiet easy as compared to other blogger templates, so adjusting our templates layout is also a thing to be kept in mind.

How to resolve these issues ?

I have created some specific post for these problems, so i am giving you the links that contains the solutions of these problems. You can follow them one by one and i think these posts will definitely sort out all your problems regarding with blogger templates.

• How to create a multilevel dropdown menu in Blogger Templates ?
• How to show only snippet/post excerpt/some description with thumbnails on Homepage in Blogger ? (This post will also solve the problem with label and archive posts)
• How to remove Blogger Attribution ?
• How to customize credit links in Blogger Templates ?
• How to customize the Blockquotes in Blogger ?
• How to split Blogger Header into two sections ?
• How to change the layout in Blogger Template?

I hope you will like all these posts.

Read More

How To Call Google Bots To Crawl Your Labeled Posts In Blogger?

By default Google bots only crawl the posts and pages of a blog. They do not crawl the other URLs of a blog such as URL of the labeled posts, Archived Posts and other search queries. Google does this to maintain the quality of a blog by not adding such URLs but if you are creating short posts that are not indexing on Google then you can try adding the labeled posts URLs on Google so that visitors can reach your blog through labeled URLs.

So if you want to index your labels URL on Google then you can do it easily through blogger settings. Many people do not know about this feature but blogger has provided this feature in blogger settings as search preferences mainly in crawling and indexing where you can fill different fields according to your requirements. For doing this you do not need to know much coding or anything, simply follow the step by step procedure given below.

• Log in to your Blogger Account.
• Then go to Settings >> Search preferences >> Crawling and Indexing.
• Then click on Edit tab given next to the robots.txt, ignore the warning and enter the following code in the box as shown in screenshots.

User-agent: Mediapartners-Google
Disallow:

User-agent: *
Allow: /search
Allow: /

Sitemap: http://www.bloggenes.com/feeds/posts/default?orderby=UPDATED

To enlarge the image please click on it.

Customization: Replace my blog URL with your blog URL.

Note: Here the main code that is calling the Google bots to index your labeled posts is "Allow: /search". This command actually tells the Google bots index the URLs that contain "/search" keyword just after the domain. For Example : http://www.bloggenes.com/search/label/Blogger Tips

To know more about the above code read this post "How to setup the search preferences in blogger ? "

• Now click on Save changes tab.
• Then come to the next field that is custom robots header tags.
• Again click on Edit tab given next to Custom robots header tags, ignore the warning and click on the various fields as shown in screenshot.

To enlarge the image please click on it.

• Then click on Save changes tab and you are done. 
• Now your labels URLs will also be indexed by Google.

Read More

How To Index The Labeled Posts Of Blogger On Google ?

We all know that for indexing a post on Google our posts require some content but sometimes we create very small posts basically of four to five lines. So we want them to be indexed as labeled posts but the problem is Google bots do not index the search and labeled posts. So what to do, today i have created a blog and when i tried to index my labeled post then it started showing error like "URLs restricted by robots.txt", then i decided to get rid of that problem. This problem is not that big as it looks like so don't worry.

So now first of all i would like to give you a rough idea about robots.txt file. Basically robots.txt file is created to tell the Google bots which URL's are to be crawled and which are not. I think you have got the rough idea about the problem i.e. the problem is robots.txt file. So the next thing is how we can tell the Google bots to crawl our labeled and archived posts. You can do it by editing the robots.txt file in blogger settings, which is quite simple and takes only few seconds. So if you want to index your labeled posts on Google then simply follow the below steps :

• Log in to your Blogger Account.
• Then go to Dashboard >> Settings >> Search Preferences.
• In search preferences go to Crawlers and indexing.
• Then click on Edit tab next to Custom robots.txt as shown in screenshot.

To enlarge the image please click on it.

• Ignore the warning and enter the following below code in the box and save it.

User-agent: Mediapartners-Google
Disallow:

User-agent: *
Allow: /search
Allow: /

Sitemap: http://www.bloggenes.com/feeds/posts/default?orderby=UPDATED

Customization: Replace my blog URL with your blog URL shown in red.

Note: Basically here the main code that calls the Google bots to crawl your labeled and archive posts is shown in blue. "Allow: /search" means this code is allowing the Google bots to crawl the URLs that contains "/search" keyword. For example : Google bots do not crawl the URLs that look like "http://www.bloggenes.com/search/label/Blogger Tips" but after you allow them to crawl the URLs that contain "/search" keyword the Google bots will start crawling such URLs.

To know more about above code read this post "How to set up the search preferences in blogger ?".

• Now click on Edit tab next to the Custom robots header tags.
• Again ignore the warning and fill the fields as shown in screenshots below.

 

To enlarge the screenshot please click on it.

• Then click on Save Changes Tab and you are done.
• From now Google bots will start indexing your labeled pages.

Read More

How To Change The Font Style Of Post Title In Blogger ?

In my previous tutorial i have described about how to change the font style/font family of your posts body using two different approaches. But today in this tutorial i am going to show you how you can change the font styles of your posts titles in blogger.

Posts titles always attracts visitors so writing an attractive heading is must for a blogger to get some additional visitors but in addition to the attractive heading if your post title look attractive then this would be like cherry on the cake. In my previous post i have described the two different approaches for changing the font style of posts body that is one is through template editor section and other is by editing your posts HTML section.

But in this tutorial i am gonna show you only one approach that is through template editor section which is quite simple and easy approach. So without wasting your much time lets start the tutorial.
Below are the simple steps that you can follow to change the font style of your posts title:

• Log in to your Blogger Account.
• Go to template and then click on Edit HTML tab.
• In HTML Editor search the following type of codes:

 .post-title {font-family: Arial,Helvetica,Sans-serif;font-size:22px}

 Or

.post h1,.post h2{font-family: Arial, sans-serif, Segoe UI,Arial,Tahoma;font-size:170%;line-height:1.2em;margin:8px 0 3px;padding:0;font-weight:normal;margin-bottom:15px;}

Note 1: For searching this code you can use CTRL+ F.
Note 2: These codes may not be the exact as given above so try to find the code that looks similar to any one of the above code.

• Now change the font family as per your requirement, as shown in screen shots below:

To enlarge the screenshot please click on it.

To enlarge the screenshot please click on it.

• Then save the template and you are done.

Read More

How To Change The Font Style Of Posts Body For Specific Posts In Blogger ?

In my previous tutorial "How to change the font style of posts body in blogger?", i have described the first method that is using the template editor, which is quite easy if you get the right code at once. But if are not getting the right code then don't worry this method will definitely work for you and this is much easier than previous one.

This method is quite easy but the problem is you have to enter the small code in each and every post to change the font style of all your posts. But if you want to change the font style for specific posts than this method is for you. So without wasting your much time lets start the tutorial. Below are the following simple steps describing the procedure of changing the font style of your posts using the second method:

Step 1: Log in to your Blogger Account.
Step 2: Open a post or create a new post.
Step 3: Now click on HTML section of your post as shown in screenshots.
Step 4: Just add the below code just after / below this Code "<div dir="ltr" style="text-align: left;" trbidi="on">" as shown in screenshot.
<div style="font-family: Gabriola; font-size: 19px;">

To enlarge the image please click on it.

Step 5: Now change or add the font style that you want for your blog.
Step 6: Then add the closing div tag at the end of the post that is </div> tag. 
Step 7: Then save and publish your post and you are done.

Read More

How To Change The Font Style Of Post Body In Blogger ?

We always try to make our blog look attractive and for this we always try different methods such as changing templates, background, adding attractive widgets etc. But a good font style can make your blog look more attractive and effective. As far as my blogs are concerned i heavily focus on font style of my blogs because it not only make your blog look attractive but make your blog different from others blogs on the internet.

So today in this tutorial i will show you how to change the font styles / font family of your blogs post body. Basically there are two ways of doing it, one is by editing the template code which is quite simple method and other is by changing the HTML code of each and every post. The second way looks a bit boring work because every time we have to add the code in posts HTML section but this method is good for those who want to change the font styles of only specific posts. In this tutorial i am going to show you only the first method to change the font style of your blogs body and the other method i will show you in my next post. So here is the first method:

How to change the font style of your blogs body using Template Editor ?

For this you just need t follow some simple steps described below :
Step 1: Log in to your blogger account.
Step 2: Go to template.
Step 3: Then click on Edit HTML.
Step 4: After this you will see you HTML Editor page. Here first you click CTRL+F and then search the following type of codes: 

.post-body {font-family:Arial,Helvetica,Sans-serif;font-size:20px}

or

.post h1,.post h2{font-family: Arial;, sans-serif, Segoe UI,Arial,Tahoma;font-size:170%;line-height:1.2em;margin:8px 0 3px;padding:0;font-weight:normal;margin-bottom:15px;}

Screenshot 1, Please click on the image to enlarge it.

Screenshot 2, To enlarge the image please click on it.

Note 1: Search for similar type of codes, the codes may differ little bit.
Note 2: Do not change the css code that is given in blue, you are not required to change that code.
Step 5: Now just change or add the font style that you want to show on your blog.

.post-body {font-family: Gabriola,Arial,Helvetica,Sans-serif;font-size:20px}

or

.post h1,.post h2{font-family: Gabriola,Arial;, sans-serif, Segoe UI,Arial,Tahoma;font-size:170%;line-height:1.2em;margin:8px 0 3px;padding:0;font-weight:normal;margin-bottom:15px;}

Here in the above example i have added the font style "Gabriola" as a default font for my blog. You can change it to other font styles like Lucida Handwriting, Oswald, Lucida Fax etc.

Step 6: Then Save your template and you are done.

Note: May be your blog templates have some other predefined class so it may be difficult for you to change the font style in your blog. I have given the two example that is generally used in most of the templates but if you are not able to find them then search for "post body" keyword in template editor section and the try changing the font family.

So this is the end of our first method in our next tutorial i will show you how to change the font style of post body of specific posts in blogger that is our second method of changing the font style of your posts body. If the above method doesn't work for you then please try this second method, this will definitely sort out your problem.

Read More

Are You Using Image Alt Tag In Blogger For Better SEO ?

Its a good question because i have seen many bloggers who are not utilizing this awesome feature provided by Blogger. if you are not optimizing your blog's images then you are loosing a large quantity of traffic. We often use images in our blogs that are related to our content for making it more attractive but have you ever noticed that you are not optimizing your images to get additional traffic to your blog. As we all know today almost every search engine has an image searching tool where they show your blog images along with your blog URL and hence it is important for us to optimize our blogs for image search too. As i always use image search to search any widget because it saves my time and if we search through web search then we have to visit each and every blog to see that particular widget. In this tutorial i am going to show you how to optimize your blog's images in Blogger as well as in other platforms.

Why it is important to use image Alt tag ?

Using image alt tag is important because if you don't use an alt tag for a particular image then it may be difficult for search engine robots to categorize them. For example: Suppose you have uploaded an image in your blog post and not defined an alt tag for that image, even then search engine robots can easily crawl your image but it is difficult for them to categorize your images in best suitable category and hence it might be possible that they will not include your image in search results. But if you use an image alt tag for your images then it increases the possibility of your images to be categorized in best suitable category and hence as a result search engines will show your images in top positions whenever a query related to your image is inserted.

Using alt image tags is not a difficult task to do, it is as simple as saving a small file to your computer because it does not take much time or require much coding. So now without wasting time lets start the tutorial.

How to add an Alt tag to images in Blogger ?

• Log in to your Blogger Account.
• Then go to Dashboard >> Posts.
• Then select a post that you have already created or create a new post.
• Then upload an image or select a previously uploaded image.
• Now click on the image and then click on properties as shown in screenshot.

• Now in image properties you will see two fields : Title Text and Alt Text.

• Then enter your required title and alt text in Title and Alt text fields.
• Now click on OK tab and you are done.

Other important things for better SEO:

Rename your image: This is also an important step, before uploading your image make sure you have renamed it with the most suitable keywords.

Use dash instead of giving spaces while renaming images: If you are renaming an image with a sentence then always use dash for spacing words instead of giving spaces.

For example: Are-you-using-image-alt-tags.jpg

Use caption: Always use captions for your blog's images for better image SEO.

How to add image Alt tag on other platforms ?

You can use image alt tag for your images by using HTML as described below:

• In your HTML editor section just look for your blog's image URL which will look like: 

<img src="Your Image URL" /> (Before Adding Title and Alt Tags)

• Now with your image tag add Title and Alt tags as shown below:

<img src="Your Image URL" alt="Alt Text " title="Title Text" />  (After adding Title and Alt Tags)

• Then Save your page and you are done.

Also read:

• Add meta tags to Blogger for better SEO (Recommended)
• How to setup the search preferences in Blogger ?

Read More

How To Setup Search Preferences In Blogger ?

Blogger provides various features for effective blogging and one of its feature is search preferences. With the help of this feature you can better optimize your blog for search engines. Blogger offers various options in search preferences such as:

• Meta tags
• Errors and re-directions
• Crawlers and indexing

In this post i am going to discuss about all these features, their functions and how to setup them for better search engine optimization. Although all these search preferences are easy to setup but wrong setup can make your blog disappear from the search engines, so read this post carefully. Now without wasting your time lets discuss about these features and how to use it.

Where to find Search preferences option ?

This is quiet easy thing, just go to your Blogger dashboard >> Settings >> Search preferences.

Now you are in search preferences section so start with the first option.

Meta Tags:

Meta tags are special HTML tags that provides information about a website to search engine robots. Although in this section you are not required to learn about meta tags because in Meta tags section it just asks for a small description about your blog. However if you want to learn more about Meta tags for better SEO then you can read my other post "Add meta tags to Blogger for better SEO".

How to setup Meta tags ?

So now, in meta tags section you will find a field called Description as shown in screenshot. In this field you just need to check the yes button and enter a short 30 - 40 words description about your blog and then save it. That's it, you are done with this field.

Now we are moving to second field which is Errors and Redirections.

Errors and redirections:

This field has two separate sections:

Custom Page Not Found:

This field is generally for setting up a page that shows 404 error if somebody hits a bad link such as the pages or posts that you have deleted from your blog or for any other page that doesn't exist in your blog.

How to setup a Custom Page Not Found ?

You can fill this field by just entering the text like 404 error, page not found or you can make it interesting by entering the text like:

Whoops! It appears you hit a bad link. My bad luck! Please click the Back arrow on your browser to return to the previous page.

 Also in this field you can use HTML tags, so if you want to attract your visitors by showing some best articles on your blog then you can make it more interesting by using HTML for example:

<h2><b>Whoops!</b></h2>It appears you hit a bad link. My bad luck! Please click the Back arrow on your browser to return to the previous page
<br/>
<h3>or </h3>
<br>
Read some best articles that i have picked from my site, just for you :
<p>&#160;</p>
<ol>
<li> <a href="Your Post Link Here">Post Title 1</a></li>
  <li><a href="Your Post Link Here" >Post Title 2</a></li>
<li> <a href="Your Post Link Here">Post Title 3</a></li>
<li> <a href="Your Post Link Here">Post Title 4</a></li>
<li> <a href="Your Post Link Here">Post Title 5</a></li>
</ol>

Now after entering the text of your choice, click on Save changes tab and you are done.

Custom Redirects:

This is a field which you can use to redirect a visitor from one link to another link automatically.

For example:

Suppose you have created a post and then you have deleted it and created another post that is an update of that post and because your deleted post is still indexed on search engines, so with this feature you can redirect the traffic of deleted post to your newly created post.

How to setup Custom Redirects?

In custom redirects field, just click on Edit as shown in screenshot and enter your old post's link in "From" section and new post's link in "To" section. Then check the Permanent box and click on save changes and you are done with custom redirects.

Note: you don't need to enter your entire post address in To or From section, just enter the address that appears after .com.

Crawlers and Indexing:

This is the third and most important field that you are required to fill up carefully. This also includes two separate sections:

Custom robots.txt:

Before setting up this field lets understand the meaning of Robots.txt file.

What is Robots.txt file ?

A robots.txt is a simple text file that website owners use to give instructions to the search engine robots that which part of their website or blogs are to be indexed or not.

How to setup Custom robots.txt file ?

In Custom robots.txt field just click on Edit and copy and paste the below code in it, as shown in screenshot.

Code:

User-agent: Mediapartners-Google
Disallow:

User-agent: *
Disallow: /search
Allow: /

Sitemap: http://www.YourBlogURL.com/feeds/posts/default?orderby=UPDATED

Customizations:

Replace YourBlogURL with your own Blog URL.

Now lets understand the meaning of above code.

User-agent: Mediapartners-Google : This command is specifically for the blogs that are showing Google Adsense ads. However if you are not using Google Adsense then you can remove this field. This command generally tells the Adsense separate robots to crawl all the pages which are having AdSense Ads.

Disallow: : This command is again for Adsense robots to allow them to crawl the entire blog.

User-agent: * : This command is used to call all the search engine robots like Google, Yahoo, Bing etc to index the pages of a blog.

Disallow: /search : This command tells the search engine crawlers not to index the search pages. In other words this command tells the search engine crawlers to not to index the URLs that contain the keyword search after the domain.

For example:

http://www.bloggenes.com/search?q=blogger&x=0&y=0

Search engine crawlers will not include such URLs to index on search engine.

Allow: / : This command allows the crawlers to index the homepage of your blog.

Sitemap: This command tells the search engine crawlers to index the every new or updated post of your blog.

How to check your blog's robots.txt file ?

You can see your blog's robots.txt file by adding /robots.txt just after your domain.

For example:

http://www.YourBlogURL.com/robots.txt

Custom Robots Header Tags:

Now this is the last field in search preferences section, it is almost similar to custom robots.txt field but here instead of writing any command you just have to tick mark certain check boxes for effective SEO. So, here i am providing the default configuration of this section that is used by most of the bloggers but if want it to configure it by yourself according to your needs then you can refer the terms related to this field to understand the meaning of each attribute of this field.

How to setup Custom Robots Header Tags ?

In Robots header tags section click on Edit and then check Yes the radio button.
Then tick mark the fields as shown in screenshots and then click on Save Changes tab and you are done with this field too.

Terms related to this field: 

Also read:

• How to increase your blog's pageviews ? (Recommended)
• How to improve Alexa ranking of your blog ?

Read More

Add Meta Tags To Blogger For Better SEO

What are Meta Tags?

Meta tags are special HTML tags that provide information about a website. Meta tags are different from the normal HTML tags in the sense that normal HTML tags are generally used for changing the appearance of a web page whereas meta tags describes the details of a website or web page such as the author of the web page, keywords of the web page, how often the website is updated etc.

Most of the search engines use this information while building their indices. Meta tags tell search engines and users what your site is about. There are various types of meta tags but the meta tags that are important for search engines are Keyword and description meta tag. A keyword meta tag is used to tell the search engine about the keywords that best describe your site. The description meta tag is used to show a small description about your website to both search engines and users. Both the keywords and the description are used by search engines in adding a page to their index, so if you have not already added these two tags in your website or blog then add it now.

How to create a meta tag ?

Creating a meta tag is quiet easy thing because there are many websites available online where you can automatically generate meta tags for your blogs or website.

You just need to follow the simple steps to add meta tags to your blog:

• Go to SubmitCorner 
• Then choose which meta tags you want to generate for your blog. By default there are three ticked options, they are description, keywords, robots, which are most important meta tags but if you want to add other meta tags then there are other options too like author, abstract, copyright,language etc.
• After selecting your required keywords, click on Proceed tab.

• Now you are taken to the meta tag generator page.
• Then enter your keywords and make them separated by commas, description, author name etc. 

• Now click on Generate my Meta tags tab and copy the generated meta tags.

Before adding these meta tags to your blog or website i would like to recommend you placing your meta tags in between these two codes.

Example:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Place Your META TAGS here
</b:if>

I am telling you to place your meta tags in between these codes because if you do not place your meta tags in between these two codes then search engine robots would start thinking that all your pages are having same description. So to avoid this situation put your Meta tags in between these two codes.

After placing your meta tags in between these codes, copy the entire code and now you are ready to add your meta tags to your blog.

How to add Meta Tags to Blogger ?

• log in to your Blogger Account.
• Go to Dashboard >> Template >> Edit HTML.
• In edit HTML section press Ctrl + F and search <head> code.
• Then paste your code just below <head>.
• Now save your template and you are done.

How to add meta tag to a website ?

• Search opening <head> tag and place the meta tags just below it. 

Also read:

•  How to increase your Blog's pageviews ? (Recommended)
• 8 Things to consider while selecting a template for your blog.

Read More

High Traffic Blogs Are Not Publishing My Guest Posts - What To Do ?

You are looking for guest posting on high traffic blogs but they are not publishing your guest posts then don't be disappointed, there's something is wrong that you can fix. Generally most of the high traffic blog is looking for quality and detailed content so if you need some guidelines regarding writing a guest post then you can read my other post- How to create an effective guest post ?

Basically in this post i will describe you some ways that can help you to get your guest post approved by high traffic blogs and also i will try to suggest the other blogs where you can submit your guest post for faster approval and they are also as effective as high traffic blogs. There are very few and basic things you need to consider before submitting your guest post:

Contact the high traffic blog owners:

Yes contact the high traffic blog owners before submitting your guest post, ask them you want to write a guest post for them and also provide some links to your other guest post so that they can judge you. Then ask them whether they like your writing style and also whether they need any further modifications. By doing this you will get some additional details about what type of content he or she is looking and this will also show them that you are desperate to write on their blogs. This will definitely increase the chances of your guest post to be published.

Ask high traffic blog owners that why they are not publishing your guest posts:

This is another important step, if you have tried once or twice and not getting success then directly ask the admins of high traffic blogs that why they are not publishing your guest posts. That will help you in getting additional details and also help you in improving your blog's content too.

Now from here i will discuss about the alternatives of high traffic blog where you can submit your blog and they are as effective as high traffic blogs.

Select the blogs which have low Google page rank:

If still high traffic blogs are not publishing your post then find the blogs which have low Google page rank that is 1 or 2. The blogs with Google page rank 1 or 2 are also quality blogs, their low ranks doesn't show that they are less popular but it shows that they are continuously working hard to make a good quality blogs. Always consider such blogs as a blog in beta phase because they will soon achieve high Google page rank, so submit your guest post on such blogs. These blogs will easily approve your guest post and after some time you will start seeing the results.

Select blogs which have Alexa rank under one million:

You can also select blogs which have Alexa rank under one million but be choosy and consider few things while selecting such blogs like see that whether they posts regularly or not, see their posts are quality posts or not, their posts length etc. By monitoring these things you can understand whether these blogs will grow up in future or not.

Find some new quality blogs:

Yes find some new but quality blogs for submitting your guest posts. As new blogs easily approve the guest posts and there are no hard and fast rules for guest bloggers. A quality blog does not take much time to attain a good Google as well as Alexa rank so keep looking for new but quality blogs.

Select medium traffic blogs:

As i already mentioned many times that high Alexa rank does not always mean that a blog is getting huge traffic because there are many fake ways of improving Alexa rank. So, if a high traffic blog is not publishing your content then you can look for medium traffic blogs for easy approval. You can monitor a blog's traffic by seeing the comment section and also there are many websites available online that review other websites and blogs, so you can use them to check their average traffic.

Also read:

• Best blogging communities to promote your blog.
• How to improve Alexa ranking of your blog or website ?

Read More

How To Reduce The Space Between Sidebar Widgets Or Gadgets In Blogger ?

You may have downloaded many templates that are very cool and attractive but it disappoints you when you see the large space between the sidebar widgets. This space in sidebar widgets makes your template look awkward and when it comes to ad placement then we don't need any space between sidebar widgets because if you place an ad without heading then the space between the widgets make it look ugly. Also when you place an script in sidebar such as back to top button then the script need to be hidden but this space is shown by the template which again makes your template look ugly.

So, i have found a proper solution for this problem, this single line code does not affect your other gadgets space. It only reduces the space between the gadgets or widgets in sidebar, however if you want to reduce the space between all the widgets present in your template then you can read my other post "how to reduce the space between widgets in blogger ?". So below are the steps describing the procedure of reducing the space between sidebar widgets:

• Log in to your Blogger Account.
• Go to Dashboard >> Template >> Customize.
• Then click on Advanced option and then select Add CSS from the list.
• Now copy and paste the below code in Add CSS box and click enter.

.sidebar .widget {margin: 5px 0;}  

• Now click on Apply to blog tab and you are done.

Customization:

•  To change the space between your sidebar widgets simply change the value highlighted in green color.

Also read:

• How to reduce the space between header widgets or gadgets in Blogger ?
• How to add a code box widget in Blogger ?

Read More

How To Change The Link Color In Wilderness Blogger Template?

Wilderness Blogger template is a professional Blogger template provided by Soratemplates. This template has various features such as it is ads ready, SEO friendly, professional looking, contains a featured slider etc. All these features make this template a perfect template for Blogger but this template also has a problem, which is its link color. In wilderness Blogger template the link color for posts section is dark grey which almost looks like black and that is a big problem because the links merges with other text color in the posts and it becomes difficult to find out the link out of other text.

We can try various solutions for that problem like we do in other templates but the problem is it changes the color of all the links in the template such as links of the header section, posts links on homepage of blog etc. So this tutorial is for those who only wanted to change the link colors in posts. In this tutorial i will show you two methods for this. The first method will solve this problem in one step but if in case it doesn't work for you then you can try the second method.

Also read: How to add a code box to Blogger ?

Below are the two methods describing how to change link color in wilderness Blogger template:

Method 1:

• Log in to your Blogger Account.
• Go to Dashboard >> Template >> Edit HTML.
• Now search for the following code:

<data:post.body/>

Note: This code appears three times in the code, so you have to search the third one. You can use CTRL+F for searching purpose.

• Now copy and paste the below code just after or below <data:post.body> code.

<!-- link color css start-->
<style type='text/css'>
.post-body a{
color: #B40404 !important;
}
.post-body a:hover{
color: red !important;
}
.post-body a:visited{
color: default !important;
}
.post-title a{
color: default !important;
text-decoration: none !important;
}
.post-title a:hover{
color: default !important;
}
</style>
<!--link color css end-->

• Then save your template and you are done.

Method 2:

• Go to Dashboard >> Posts.
• Then select post in which you want to change the color and paste the above CSS code just above the last </div> tag.
• Now save your post and you are done.

Note: If you use second method then you have to put the CSS code in all posts and pages.

Customizations:

• Change the color code in red with your desired HTML color code or default color name.
• Change the color name in green to change the color the of link on hover.
• Replace the text default shown in blue to change the visited link color.

Also read:

• Really smooth back to top button for Blogger ?
• Why improving Alexa ranking is so important ?
• How to create a guest post form in Blogger ?

Read More