Hello again!

This is the finale part of the last post. I’m going show you how I’m going to tweak the bloggingpro theme. I think this theme is very good! That’s why I recommend it to my friend, Pearl!

If you like this type of theme, you can always refer to the footer of the blog that use this theme to find the author and theme download link.

Hmm… Let begin from how to install on you server and activating theme:

1. Use this link to download bloggingpro widget-ready theme to your local computer
2. Extract the theme if it’s compressed.
3. Use your FTP Client Software (CuteFTP is the best) to connect to your web host server.
4. Copy the extracted folder (blogginpro_wr) to your server directory at: /wp-content/themes/
5. Enter to your Wordpress admin panel and go to the presentation tab
6. Click on the “blogging pro Theme - Widget Ready 1.2″ or the image below the link to activate it.
7. Done!

In this post, I will show you my usual ways to tweak my themes on:

1. Adding custom images to the header
2. add google analytics code
3. changing color of link

Warning!
Before begin tweaking, make sure to backup all your theme data inside bloggingpro_wr folder properly. I’m not responsible for any data loss for this tweaking guide. Tweak at your own risk!

Changing Title Header to Image Header

Let’s begin with changing the header image of Bloggingpro. From the default setting, Bloggingpro will have no Header image for you to add. Bloggingpro only showing your Weblog Title on the upper site of your blog in a text format. See this picture:

Here is the steps to change the text header to a custom image that I made for my blog. I’m going to use CSS style to make the title switching to a image:

• Upload your custom image (I titled it: bloggingpro-header.jpg) to the directory: wp-contents/themes/bloggingpro_wr/images/
• Open up your presentation tab, click on the “theme editor”
• Point to “stylesheet” file on the right of your screen.
• Delete this line of codes:

• Add this line of code to switch the text header to an custom image header:

Update the code by pressing the “Update File >>” button on your lower right corner. Below picture is the result of adding my custom header image:

Taa Daaaa! Finish!

Oke, Next is to add google analytics code to your blog so Google can start analyzing your blog statistic.

Adding Goo-Analytics Code

The simplest way is using “Theme Editor” again! Here is the steps:

• Open your wordpress panel again, and point to the presentation tab.
• Click on the theme editor and find the “Footer” file to your right (there is a list of files there)
• Refer to the end of the line that have a code “</body></html>“
• Do you see a blank space between </div> and </body> ? Place your cursor there and press “enter” button several time to make some space.
• Done? Now, go to your Google Analytics Account. Copy the tracking code that google gave you then Paste it into the empty space between </div> and </body>
• Click on the “Update file >>” Button
• Done!

This steps apply to Kontera, Auction ads and other service that need you to add tracking code to your blog. They’ll usually asking you to add their code before the </body>.

Next!

Changing Link Color

Again, and Again! Open up your “Theme Editor” Window! This is the easiest method, anyway…!

This time, We will going to change the stylesheet again. So The steps are:

• Click on the “Stylesheet” File
• Refer to this part of code:

• The highlighted code is the color code of the the bloggingpro H1 or Headline title. Do you see the “h1 a { color: ” before the color code? That’s the tag that form up h1 link color. To change it, you we Gimp or Photoshop to get the Hex code of color.

• For example, my favorite color is green. So, my color code will be #018811. replace the highlighted code with #018811, and press the “update file >>” button.

• Below is the result:

• Ta daaa! Finish!

Tweaking can be fun and can be stressful. The only way to feeling fun on tweaking is when you know several language like PHP, CSS and HTML. These language is crucial for you to support your tweaking needs. If you can’t understand them, make sure there is a techie people beside you when you want to do your tweaking. At least, he/she can fix your mistake and restore your error!

Of course, this guide only cover very small part of theme tweaking capability. You can actually tweak your sidebar, add up new button, create custom adsense at the header, etc. etc. which I can’t cover it up in this post. Well, depend on request, I’ll may be make more guide on this tweaking later.

I hope this guide will be helpful for you, Pearl! And will be useful for you too, my reader!

Have nice tweaking moment and see you again in the next post!

Related Post

• Social Bookmarking Button
• Life Updates
• Insert Adsense in the Middle of Your Homepage Manually
• 18 Essential Photoshop Tutorials for Blogger
• How to Setup Advance Reading Options with Script.Aculo.Us
• Different Sidebar in Single Post
• My Top 5 Wordpress Themes
• Using AdesClrPicker As Your Color Picker