How to change Read more link style in blogger

You are bored with default Read more>> link in blogger, that’s why you are here. Don’t worry ! After reading this whole article you’ll feel happy. Here we’ll see How to change the Default Read more>> text, change the Default style of that link, Set alignment to that link, Use fancy Read more picture instead of Text etc. Here you’ll learn more on CSS and Template Editing. As usual, Go to the Blogger Dashboard 😉 and follow the Required steps to spice up your blog.

Change Read more>> text in blogger:

Inside blogger Dashboard click on Layout on the Left side panel, move inside that and here you’ll find Large Rectangle named ‘Blog Posts’. Edit on that which allows you to Edit the Default Read more Text. Name it ‘Continue Reading>>’ or anything you want. Save it and You are done with Name change.

Change the Read more Style:

You can change the size and style of the Read more Text by customizing the css. Inside dashboard, click on Template> Customize> Advanced> Add CSS. Here add the style code for which you want. Let’s See how to add the Style code for Read more Link. Read more is named as jump link in our template code. So we’ll add style with that name.

.jump-link {font-size: 130%; color: #274e13; font-weight:bold; font-family:verdana; }

In the Above line I’ve used the Text color as Green and Font-weight as bold and font style as verdana. which looks as Read More>> . You can add more styles to Text.

If you want to add Text With Background, Use below code.

.jump-link a {background: #33aaff; color: #ffffff; padding: 2px;}

I’ve used the Blue background and white text to link, which looks as Read More>>

You can Set Alignment to Read more Text.

Add Below code to move your text to ‘Right’ and ‘center’ respectively.

.jump-link {text-align: right;}
.jump-link {text-align: center;}

You can change color of link on Mouse Hover.
Add color on Hover to the Read more>> link. On mouse hover to the Read more link, changes the color of text and background also.

.jump-link a:hover {background: #999999; color: #ffffff; padding: 2px;}

Here I’ve used Gray background and white Text color on hover. You can use any desired color.

Use Read More Image instead of Plain text Link:

For adding the Read More image or button to blog for more fancy look, we need to customize the Template. Before doing any changes to HTML code, Backup Template First. After that click on Edit HTML. Inside the HTML code Press ctrl+f to find the following jump link code.

<data:post.jumpText/>

Replace the above code with the Image Tag as mentioned below

<img border=”0″ src=”URL Of The Image” />

Where “URL of the Image” is the Full URL of image which you have uploaded anywhere on the web.

Click on the Preview to see the changes. Save template and you’re Done.

Thanks and state your views by comment !

Customize the Older Post, Newer Post, Home links in Blogger

To spice up the blogger blog or to get the better look and feel we need to Edit some HTML and CSS. Blogger by default gives you the pager links as Older post, Newer Post and Home which allows to navigate through the blog. But you can customize it in your own way. You can add some style to change the looks of links. Change the link texts, add image instead of Text links, switch sides between newer and older posts, Adding background color or image to text, Removing the Blog Pager from the Blog. Let’s start one-by-one to customize pager.

Before doing any changes to the HTML Backup the Template. Then After follow your favorite customize option from below.

Blogger-older-newer-home-links

1. Changing the Pager Link Texts:

Blogger by default provides the older posts, newer posts as the Text links. You can change the text according to your choice.
Here <data:newerPageTitle/> is for Newer Post, <data:olderPageTitle/> for older post, <data:homeMsg/> for Home. Inside the template editor search for the any of the above data tag by pressing ctrl+f. Replace it with the Text you want. Ex: If you wish to replace the Older post with the Old Stuffs then Replace <data:olderPageTitle/> with Old Stuffs. Do changes as you required for all links.

2. Add image instead of Text links:

You can add image instead of the pager links. To add it, search for the above data tags and replace it with the image tags. Suppose you want to add the Image to the Home link then search for the data tag <data:homeMsg/> inside the Template editor. Replace <data:homeMsg/> with <img src=”Full Image URL” />. Here Full Image URL is the path of the Image which is uploaded on the web. You can change the Older post and newer post with Image as well by replacing data tags with image or image arrows.

3. Switch sides between newer and older posts:

If you wish to switch sides of link text, you can do it by adding css code to the blogger template Designer. Move to Blogger> Template> Customize> Advanced> Add css. Here on the right side box you can add the custom css code to style your blog.
Add the below code to perform switching of the pager links
#blog-pager-newer-link {
    float: right;
    }
#blog-pager-older-link {
    float: left;
    }
Apply and view the blog to see the changes. You can also choose font-family and font-size for those links.

4. Adding background color or image to pager text link:

To add the Background color, add the css code attached to the older link, newer link and home link as below.

.blog-pager-older-link -> For Older Link
.blog-pager-newer-link -> For Newer Link
.home-link -> For Home Link

Suppose i am adding the Background color to the homepage link then my css code would be .home-link{background: #999999;}
Add it and apply it to view the changes. Here the background color is gray. You can also do same for the newer and older pager links.

To add the background image add the below css code.
.home-link {background: url(Full Image URL) no-repeat;}
Here the full image url is the image path uploaded on the web.

5. Remove Pager (Older post, Newer Post, Home links) from the page:

You can also hide or remove the pager links from your blogger blog. You can remove the entire HTML element <b:includable id=’nextprev’></b:includable> from the Template. It removes the entire HTML element and you can’t undo it. It’s better to hide the element instead of deleting it from html. Suppose you want hide the home link to be displayed. add the below css code.
.home-link {display:none}
If you want to hide the entire pager (all three links) at once then add the below css code
#blog-pager {display:none}
You can undo the changes by removing the code from css Editor.

Hope you enjoyed the guide ! Happy Customization 🙂

Better website SEO requirements to rank better

If you want your site to be indexed better and improve possibility to be clicked by the users more frequently then you have to consider the recommended steps.

1. Create Page title unique and accurate:

Give the title tag <title>Your title goes here..</title> in well form such that it will available in the organic search results by search engines. Give the title meaningful to the page contents because when user type in the search engine for the specific search, search engine crawls the data and search for the title which best fits the search keywords. so it is important to set the small best page title.

2. Crating the Search description or snippet:

Search description is the small snippet which appears next to the title in the search result. You can use the title word inside the search engine snippet and describe it related to contents in 200-300 characters. search engines also matches for the search description words and which include all the words and the site which updated more frequently, get indexed first.

3. Give better URL structure:

Your site Permalink URL must be meaningful and must not contains the crappy stuffs like “dhfjd/32f.html” It must be Well Formatted Like “Posts/Get Indexed by Google.html”. The better the URL parameters the more chances to be indexed. Choose the url which is easy for the search engines and the users to be understand.

4. Maintain Proper Directory structure and navigation:

It is important to arrange the contents of the site in more meaningful way from root directory. Root contains all the pages like our tabs in the blog How-To, Security, Linux, Windows, About, Contact and all those are further divided into sub categories. Limiting No. of Posts in label pages is also important to minimize the page load time.

5.Create the sitemap for the website and remove unnecessary pages:

Several website provides the sitemap creation facility. create your own site map for the site and use the Google webmaster Tools to add the sitemap and link it.
Remove the pages from search results which shows 404- not found error on the webmaster tools after linking.

6. upload and name the image:

After uploading the image on the website name it with properly and also use the alt-text, which is the text shown on the image which display the image description if image is not fully loaded if the internet connection is slow. Search engine also crawls the web based on the text on the image and index better. Better the image description having the more chances to be indexed in Image search.

7. Use Robots.txt to  allow or deny the crawling:

If you are some of the site pages which you do not want to be crawled by the crawlers then you can deny it using the Disallows tag. Allow all the other stuffs. Robots.txt file is next to the domain name
Ex: www.yourdomain.com/robots.txt
which shows the following information

User-agent: *
Disallow: /Private/

8. Use Google Webmaster toots to highlight the data:

It is important to highlight the data such that  it becomes easier for the search engine to understand the content in more meaningful way. Web Data Highlight gives you the more guide how data highlighting works and how to do it.

Follow the above mentioned steps and you will find your site better indexed and it’ll get organic search traffic in few days.

Hope you enjoyed. comment bellow if you found this article helpful.

Google Webmaster Data Highlighter for SEO

Highlighting your website data in the meaningful way such that the Google crawlers can easily understand what your site is about and what are the importance of contents. Google Webmasters Tools allows you to organize the data in the structured manner.

Go to the Webmaster Tools. Add your site or blog to it. You can choose www or non www version of the website. Add both if possible for differentiating both the results.

Now go to the Search Appearances – Data Highlighter.

You’ll find the button Start Highlighting. Click on it.
Add the any URL of your blog post. Select the type of the information which you want to highlight. You can select it according to the category of your website.

Select option if you want to Tag only single page or page others related to that.

Now highlighter allows you to Highlight the contents of your site.

On the Right panel you’ll find the Article options like Title, Author, Date, Image, Category, Rating etc.

Now on the left side on your article page start selecting the content and it’ll allows you to Tag.

As you select and tag the contents, it’ll be available on the right side panel.

Note : Highlight the contents in the relevant and more meaningful manner such that it becomes easy for the Google crawlers to understand the contents for better indexing otherwise your site might not get better indexing in search result.

Select Title, Image, Author, Rating and Date Properly. As you organize the contents in meaningful way the more chances to be quickly indexed by Google.

After completion of highlighting process the webmaster tools creates the related page sets and you can verify the page sets for rest of the highlight process.

Highlight each URL correctly and remove errors if any. Publish the Page set and you are done.

Google crawling the site more frequently and as it re-crawls your site, the contents will be available in search results.

Along with adding sitemap to the Webmasters Tools, it is important to organize the data in the format understandable to the Web Spider for better SEO.

Also see Recommendation for better website SEO for newbie blogger.

Happy Highlighting 🙂

Important HTML tags for Better SEO

For bloggers who are posting important and valuable contents to their blogs need to consider some important tags which will helps their site or blog for better index by search engines. search engines crawling the web periodically for the latest and the updated contents and if your site is one of them which provides the updates daily articles then you have to make sure whether the proper HTML tags implemented correctly on your blog or not. HTML tags helps the search engines to identify the better website among the web and based on that it will rank the site to display it on the Top search results.

Title Tag:

<title>Page Title</title> tag used for the better short description of your site which displays on the title area of your site or on the Tab of your website. You can give your site title as the  page title for better description.

Meta Description Tag:

<meta name=’description’ content=’Your Text Here‘/>
Meta Description is the description of your site which appears on the search engine results. So if you want the users click on your link among others by reading short description which you have provided then its recommended to place the Meta Description Tag with strong description on what your site is about or what your page is about.

Meta Keywords Tag:

<meta name=’Keywords’ content=’Your Keywords goes  here‘/>

Keywords are the best option which you need to place into your site for search engines to be able to find your site based on the keywords So it is recommended to place the keywords which describes your site best. So if google or any search engine find any searched keyword on your site then it will index your site at the better position and it will becomes easier for search engines to explore the better contents from your site. Use keywords separated by commas.

Meta Robots Tag:

<meta name=’Robots’ content=’INDEX, FOLLOW‘ />

Robot tag is for the search engine robot crawler. If you want your site to be indexed by the Google or any other search engine then place the robot tag inside your html and let search engine crawls your site periodically for latest contents and index your site. If you want your specific page should not displayed on the search engine results then you can use this tag by specifying ‘noindex, nofollow’ contents on Tag or you can also use the robot.txt file to block the specific URL of your site by Disallowing for crawling and index.

Thanks for your valuable time and state your comment bellow 🙂