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...

BLOGGER: FIX THE GREY BACKGROUND ON WHITE IMAGES

White or transparent background turning into grey when uploading an image to your header or anywhere else in your blog? A lot of newbie bloggers are experiencing this problem. I did, too, when I just started blogging and fortunately I figured ways to fix this problem easily. 

Option #1. This is for bloggers who don't have Photoshop. It gets rid of the grey background and changes it to white. Not ideal if you have a colored background.

1. Go to Google Plus settings
2. Scroll down until you see Photos and Videos and look for the auto enhance settings. Choose off.

Option #2. If you have Photoshop, get an untouched copy of the image and save it in PNG format. This way you will get rid of the grey background for good even with Auto Enhance Feature turned on. When it's uploaded into blogger, you won't even see a white box surrounding the image. This means that you can use ANY background image or color and not have to settle with white because it may look ugly when you choose a color for your background other than white. 

I hope this article helped you! :)

Read More...

FREEBIE: KLAUS SEARCH BOX

The Klaus search box is written in pure CSS so there's no need to download anything. And because it's purely CSS, this search box is fully customizable. You can change the size, the style and thickness of the border, the color and the text of the search button and everything else.
The codes for the first search box:

 <style>    
  #search-btn1 {   
  background:#3d3d3d;   
  color:#ffffff   ;   
  font: 'trebuchet ms', trebuchet;   
  padding:10px 20px;   
  border:0 none;   
  font-weight:bold;   
  }   
  #search-box1 {   
  background: #f3f3f3;   
  padding:10px;   
  border:0 none;   
  width:180px;   
  }   
  </style>   
  <form id="searchthis1" action="/search" style="display:inline;" method="get">   
  <input id="search-box1" name="q" size="40" type="text" placeholder=" Search Tweak Peek"/>   
  <input id="search-btn1" value="Search" type="submit"/>   
  </form>   

If you want it with rounded corners like in the second image, add these lines before each closing bracket.

 -webkit-border-radius: 20px;  
 -moz-border-radius: 15px;  
 border-radius: 7px;  

Happy coding!

Read More...

FREEBIE: LEXUS SEARCH BOX

Download

Downloads:

A simple search box with rounded corners. Size is 300x30 pixels. The width and height cannot be adjusted by editing the css codes as the entire search box is a PNG file. So if you find the image too big for your blog, you can use your favorite photo editor to shrink its size and change some of the css codes to make it look perfect. This pack contains 11 different colors of the Lexus Search Box.

Instructions:

1. Extract the images from the zip file.
2. Upload the png file in your preferred color to your favorite file host. (Tinyurl, Picasa, Photobucket, etc)
3. Get the link and replace the code highlighted in fuschia below.

CODE

 <style type="text/css">  
 #searchbox {  
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1YgqOhpLufH0ETJTWgqBdFFVUIocNhqUpC0P7kYON19BYAqx5KVqvgjeGFRqLkfhLB9QFE_7-fOV9Are3lCUtt0fuUvPvUGpMn_k77Sy6pXjigGIaY20bWMtd_N_yGQ_GhJ8RQzRuISZq/s300/red.png) no-repeat scroll center center transparent;  
 width:307px;  
 height:50px;  
 display:block;  
 }  
 form#searchform {  
 display: block;  
 padding: 12px;  
 margin:0;}  
 form#searchform #s {  
 padding: 6px 6px 6px 16px;  
 margin:0;  
 width: 257px;  
 font-size:14px;  
 vertical-align: top;  
 border:none;  
 background:transparent;  
 }  
 form#searchform #sbutton {  
 margin:0;  
 padding:0;  
 height:30px;  
 width:30px;  
 vertical-align: top;  
 border:none;  
 background:transparent;  
 }  
 </style>  
 <div id="searchbox">  
 <form id="searchform" action="/search/max-results=8" method="get">  
   <input type="text" id="s" name="q" value=""/>  
 </form>  
 </div>  

That's it! Having trouble? Leave a comment :D

Read More...

FREEBIE: SEARCH ICON IN DIFFERENT COLORS FOR EXPANDABLE SEARCH BOX

Lazy or don't know how to edit the search icon for your expandable search box?
I'm here to help :)

While other elements of the search box can be modified by making a few changes with the css codes, we can't do it to the search icon. So we're gonna have to replace the icon with a different one in a different color to match it with your blog's template. Below are the colored search icons you can choose from. To use them, simply right click on each image, and click COPY IMAGE URL. Paste it to your code where it says:

 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwqkslmDw9lQNl21Qv_ULNiLYTKuWO2VJeaKKskKx3PPTQqiG5gFHRdKtiSxZka4Ti1SjLBZXCHcC_rEE1OwWeX6gOfZG_YDPR4MbL1EPLtAmiyHkiuXk8twNrv9Khcp9oLqXbshCK0dRY/s20/black.png) no-repeat 8px 4px #ffffff;  

Replace the text in fuschia with your copied URL. Save it and you're done!

I hope you found the perfect shade. Happy blogging!

Read More...

BLOGGER: ADD A CUSTOM SEARCH BOX PART III

In this post I will teach how to make the corners of the expandable search boxes I posted in the second part of the tutorial. We just need to insert a few codes and when we're done they should look like these:

Codes needed to make the corners rounded

 -webkit-border-radius: 20px;  
 -moz-border-radius: 15px;  
 border-radius: 5px;  

SO WHERE TO INSERT THEM?
Insert them within the CSS code specifically before each curly bracket you see. For example:

 #search1 input{  
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwqkslmDw9lQNl21Qv_ULNiLYTKuWO2VJeaKKskKx3PPTQqiG5gFHRdKtiSxZka4Ti1SjLBZXCHcC_rEE1OwWeX6gOfZG_YDPR4MbL1EPLtAmiyHkiuXk8twNrv9Khcp9oLqXbshCK0dRY/s20/black.png) no-repeat 8px 4px #ffffff;  
 border: 2px solid #000000;  
 font: bold 12px calibri, serif;  
 color: #000000;  
 width: 160px;  
 padding: 5px 15px 5px 30px;  
 -webkit-transition: all 0.5s ease 0s;  
 -moz-transition: all 0.5s ease 0s;  
 -o-transition: all 0.5s ease 0s;  
 transition: all 0.5s ease 0s;  
 -webkit-border-radius: 20px;  
 -moz-border-radius: 15px;  
 border-radius: 5px;  
 }  
 #search1 input:focus {  
 width: 200px;  
 outline: none;  
 border: 2px solid #777777;  
 -webkit-border-radius: 20px;  
 -moz-border-radius: 15px;  
 border-radius: 5px;  
 }  
 </style>  
 <form action='/search' id='search1' method='get'>  
 <input name='q' placeholder='Search Tweak Peek' size='40' type='text'/>  
 </form>  

So that's all you need to do to make the corners of your search box rounded!

NEED SEARCH ICONS FOR THIS SEARCH BOX IN DIFFERENT COLORS? CLICK HERE!

Read More...