Wordpress Theme for Blogger - Part 3 (Final)

by
The last steps in building the Wordpress theme are mostly minor tweaks. There will be some template CSS changes, but, these will be some simple steps. What you see at the left is my completed Tw***yTe* theme for Blogger. If you click on the picture you'll see the template in action!

One thing to note - I cannot give this template away since Simple is copyrighted by Blogger and the artist who created it. You'll have to do the modifications yourself as noted in Part 1 and Part 2. If you're in the market to create Blogger templates then don't use an existing copyrighted one to sell online. You'll have to start from scratch or buy a template. However, you can always try to contact a template owner to see if they'll allow you to customize and resell an existing one.

Adding the Blogger Tab Menu

Ok, the next step is to enable the Blogger tabs just under the banner we added. The good news is that these will automatically be enabled in the right position for the Wordpress theme look-and-feel.

Go back into the Blogger main menu and choose 'Pages' to turn on the page tabs on the site. Just pick the dropdown called 'Show pages as' to select 'Top tabs' like this:

Blogger page tabs
This will turn on the Pages tabs at the bottom of the banner image. Let's add another page to make sure the tab menu works well. Choose the 'New page' dropdown and select 'Blank page':


Adding a new page to Blogger

Once selected you'll see the new page dialog box - simply enter a title at the top ('About' in this case) and some random page text. Press 'Publish' to add the new page:

Publish a page in Blogger

Be sure to save the new pages by pressing the 'Save arrangement' button on the upper right:

Save Blogger page arrangement


On the template now you should see the visible tabs with both the 'Home' and 'About' tabs like this:


With the tabs now visible the next step is to modify the fonts and colors to match our theme. Go back into the Blogger Template Designer as we did before to modify some of the Advanced settings.

Choose 'Advanced' / 'Tabs Text' to change the tab menu font to 'Arial' and size to '13px'. Be sure to set the font 'Text Color' to '#999999' and 'Selected Color' to '#ffffff':

Setting the tabs text

Don't save just yet. Go ahead and change the 'Tabs Background' as well so that the 'Background Color' is '#000000' and the 'Selected Color' is '#333333':

Setting the tabs background

If you noticed there's still a white border around the tabs - this change is located in the 'Accents' section. Change the 'Tabs Border Color' to '#000000':


Now we'll make a few tweaks to the CSS code to fix a couple of small things that can't be configured from the menus. If you've noticed there's still a small, white line between the tabs. Also, there's a dotted line at the bottom of the template just above the footer.  Finally, I noticed that I had made a mistake in Part 1 of this series on setting the Blog post title link colors to black. Its seems that for this template all link colors followed the same pattern making even links within posts the color black.

So, let's fix all three things in the 'Add CSS' section. WAIT!! The other CSS code we added earlier is missing! I've seen this before in Blogger and think it is a bug of some sort. (Note, though, the CSS code we added in the earlier parts is still in the template - just not visible. You might find it different - your CSS code may show up). Given that, just add the following code to your template anyway to set the .footer-outer, .tabs-inner and h3 settings (h3 tags the Post titles):


Now to fix the link colors for the entire template we'll have to go back undo what we did in Part 1. Let's change the link colors back to a standard blue and purple. Go to 'Advanced' / 'Links' and set the 'Link Color' to '#3333ee', the 'Visited Color' to '#8800aa' and the 'Hover Color' to '#ee3333':


After all of that work be sure to apply your changes now:


Completing the Theme Sidebar

At last, we're at the last steps! The final things to do are to add the Search box and alter the Archives look. First, just go to the Blogger main menu and select the 'Layout' to press the 'Edit' link on the 'Blog Archive' side bar like this:

Edit the Blogger layout

The archives dialog box should appear. Let's configure a few settings to make it more like the Wordpress Theme. Set the 'Title' to 'Archives', the 'Style' to 'Flat List', and the 'Date Format' to month / year. Once done go ahead and press the 'Save' button:

That's it for the Archives section. Now stay in the 'Layout' menu - just above the Archives sidebar item you should see 'Add a Gadget' link. Click on that to open the Gadget list. Scroll through the list to find the 'Search Box' gadget  and press the '+' button as shown to add the Search box:


You should now see it in your layout sidebar just about the Archives. Go ahead and click on the 'Edit' link within the layout to open the Search Box configuration. If you noticed on the theme, there is no title for the search. In Blogger you have to have a title - however, you can enter the HTML equivalent of a space ' ' in the 'Title' box. Uncheck 'The Web' search setting and scroll down to press the 'Save' button (you can't see it in the picture -- follow the arrow down):


Guess what!!?!  You are done! The Wordpress theme is ready to go!

I hope you learned how to modify your templates enough to continue to extend or create your own in the future. Here's the final result:


10 comments:
  1. Hi Don, excellent work!

    Do you have any tips on how to align navbar and blog title, something similar to what you have done.

    I would like to have them both at the top of page but I seem to be unable to either move the navbar up (PageList) or the title down.

    Many thanks!

    ReplyDelete
    Replies
    1. Hi eman,

      It really took some serious template work to move the navbar up to the top. I was going to post a how-to for that at some point but it is beyond the scope to try to tell you here. Your best bet for now is to either find a template out there or to look at the source of my page to see where I tweaked the template code. Sorry I can't help you now.

      - Don James

      Delete
  2. Hi Don, thanks for the effort. Perhaps I can help you out of your serious work. I made it by simply unlocking the header plus some margin and padding. It works like chum.

    ReplyDelete
    Replies
    1. Hey eman!

      That's exactly what I did - thanks!!!

      Don

      Delete
  3. Nice Tutorial.Thanx for sharing with us

    Regards
    softonal.blogspot.com

    ReplyDelete
  4. Hi.. Don james
    Really nice job. Come up with some more tutorials.
    thank you very much.
    Cheers ;)

    ReplyDelete
    Replies
    1. Thanks, Kamal!

      More tutorials coming soon!

      Don

      Delete
  5. Hi Don Great Work!!
    I'm really impressed by this tutorial..
    Please come up with more tutorials
    And Good Luck..

    ReplyDelete
  6. O very nice dear I was looking for these types of themes for my blog even I was going to hire a Wordpress Website Development

    ReplyDelete