Friday, May 6, 2016

How to customize WordPress Theme Twenty-Ten for Blogger - II

We have guided you through the basic tips on customizing Blogger version of the WordPress theme-Twenty Ten in our Part-I. We have actually completed on how to customize its: 
  1. blog description statement
  2. navigation tabs
In this tutorial, we'll guide you through customizing the remaining 3 areas. We may also touch on adding the customized second level links in its footer.

You can change the default header banner. But the image should be rectangular with size more than 940X198. Otherwise, the image you gonna use as the banner will get stretched becoming distorted, blur and unprofessional.
If you love the default banner image, you can keep as it is. You don't have to locate its CSS code and then change the image. If you don't and like to try other images, follow the given steps:

Step-1
Right click on the header banner of your blog

Step-2
Click on Copy Image Location

Step-3
Click on Template>Edit Template

Step-4
Find (Ctrl+F), paste (Ctrl+V) of step-2 & press ENTER

Step-5
Keep that highlighted code note. It's your current banner's URL 

If you want to change that banner, you just have to replace that link with URL of other banner photo. If you at all don't want the banner, just remove that link and save the template.  
   
   
I think it's quite cool and standard as far as appearances of post title font, color and font-size are concerned. I recommend you better keep it unedited. But for bloggers, who like this to be stylish, Read this tutorial for some beautiful customization.

Customize Footer Area/links
The blog should have legal ownership notice in the footer. But according to this template, instead of this, the template name is given on left and template designers' link on the right. This means, the owner of the blog cannot claim the ownership over the contents therein. This isn't fair. We have to add copyright notice.

Step-1
In the edit template tab, find (Ctrl+F):  <div id='site-info'> and its closing </div><!-- #site-info -->

Step-2
Delete all the CSS codes between this two and add the given CSS code:

Copyright &#169; 2015 <a href='Your Blog URL' rel='designer'>Your Blog Name</a>. 

In above, give URL and name of your blog as indicated. When you click Save Template, it's done. You can see the legal ownership notice. Read: 5 methods to show copyright notice in blogger.

We have completed customizing the left-hand side footer. Now towards right, there are also links. The designers request to keep this link to respect their works. But this appears less necessary when details of designers and their links can be known from clicking page source.

Read: How to change the default post thumbnail from blogger template Iconic One?
       
It would be better we add some second level links of our blog. In the template, find opening CSS code:  <div id='site-generator'> and closing CSS code: </div><!-- #site-generator -->. Delete all these codes (including opening CSS as well as closing) and paste the given CSS:

<a href='#'>Privacy Policy</a> &#8226; <a href='#' rel='disclaimer'>Disclaimer</a>&#8226; <a href='#' rel='contact'>Contact</a>
You can also add more links if you need. You just have to paste one from above. In every link's href='#' replace # with their respective URL. Click Save Template and you're done.

No comments:

Read our comment Policy to know your rights & responsibilities before actually leaving a comment for this article.

Related Posts Plugin for WordPress, Blogger...