BLOGGER: REPLACE OLDER POSTS, NEWER POSTS AND HOME LINKS WITH ANOTHER TEXT

To change the text in the links "Older Posts" "Newer Posts" and "Home" is probably the easiest thing you can do with them. You can change them to anything, like "Next" for the "Older Posts" and "Back" for the "Newer Posts."

So let's get started.

1. Go to Template and click Edit HTML.
2. Press Ctrl+F and paste the code below in the search box to change the "Newer Post" link. Delete it and replace with "Back" or whatever you like.

 <data:newerPageTitle/>  


3. Press Ctrl+F again and paste the code below. This time, it's to change the "Older Posts" link. Do the same as you did for the "Newer Posts" link.

 <data:olderPageTitle/>  

4. If you wish to change the "Home" link, find the code below and change it.

 <data:homeMsg/>  

After changing these links, your code should like this:

That's it! Got questions? Leave a comment :)

Read More...

BLOGGER: ADDING BACKGROUND COLOR TO OLDER AND NEWER POSTS LINKS

So you find the "Older post" and "Newer post" links at the bottom too plain and you want to beautify them so that they don't look left out by the rest of the elements of your blog? We often neglect them since we don't see them a lot. We tend to focus on what we see first-- the header. Of course, we want to make a good impression to our readers but let's be consistent and just be beautiful and from our header to our footer, okay? :D

So here's what you can do to beautify these links:

Add a background color to each link. You can style them differently from each other if you wish. 

To style the "Older post" link, go to Template Designer > Advanced > Add CSS. Add these lines below:

 .blog-pager-older-link {  
 display:block;  
 background-color: #a6a2a4;  
 padding: 10px;  
 -webkit-border-radius: 5px 5px 5px 5px;   
  -moz-border-radius: 5px 5px 5px 5px;   
 border-radius: 5px 5px 5px 5px;   
 cursor: pointer;   
 }  
 a.blog-pager-older-link {  
 color:#ffffff;  
 }  

Once done, you should be able to produce something like this:
 
So here's a list of properties whose values need to be changed if you want to style it according to your taste:

1. background-color: [the background color of the link, which now looks like a button]
2. padding [the space between the text and the border]
3. radius [roundness of the button, well, technically it's a background color]
4. color [the text color]

Now let's try to change the background color of the link on mouse over

Add the codes below

 a.blog-pager-older-link:hover {  
 text-decoration:none;  
 background: #f6139e;  
 color:#ffffff;  
 }  

On mouse hover its color should look like this:

Things you can change:

1. background [background color on mouse over]
2. color [text color on hover]

Now we're done styling the Older post link! Let's move on to Newer post link.
It's pretty much the same except that you have to change the selectors. So instead of
.blog-pager-older-link
a.blog-pager-older-link
a.blog-pager-older-link:hover

CHANGE THEM TO:
.blog-pager-newer-link
a.blog-pager-newer-link
a.blog-pager-newer-link:hover

That's for styling the "Newer Posts" link. Yep, easy! You just have to change everything that says older to newer and style it differently if you want.

Next post will be Changing The Older Posts and Newer Posts links to Images. Not much CSS styling this time! Most work will be done on your favorite photo editor, or you may also grab buttons from the web. Happy blogging y'all!

Read More...

BLOGGER TEMPLATE: EARTHY

A modified version of the Binary Template, now called Earthy

 It now looks girly with its very light floral background and earthy touch of color. I didn't change anything with the layout as it looks perfect as it is--neat and clean! I also wanted to change the social media icons and the search box to match the femininity of this template but I need a break, so I guess next time :D

Download
Downloads:

Read More...

BLOGGER: CENTER ALIGN THE BLOG TITLE OR HEADER

By default, the alignment of the Blog Title is in the left. But in some cases, having the blog's title on the center looks better. Many of us want this, but unfortunately, the customization of this section in the Template Designer is limited only to its font face, size and color. There's also the option to make it bold and italic. But that's it. So unless you Google about how to make your Blogger blog's title centered, your title will forever get stuck in the left, which looks less pretty. So let me provide you a quick fix. It's easy.

1. Go to Template Designer > Advanced > Add CSS








2. Copy and paste the codes below

 #header-inner img {  
 margin: 0 auto !important;  
 }   
 #header-inner {  
 text-align:center !important;  
 }  

3. Click Apply to blog and you're done!

Read More...