Shoutmeloud Thesis Theme Customization - Part 1

I'm happy with the feed-backs for the shoutmeloud thesis theme. If you had missed the template, then I highly recommend you to check out this article - Shoutmeloud Thesis Theme For Blogger. Though I received a lesser number of comments for the article, the response via email was tremendous. Many people raised questions about the footer. So, this issue has been addressed in this article.

If you wish to have an exact thesis footer (non-widgetized version) then, you can check out this article - Thesis Theme Footer For Blogger/Blogspot Blogs. (Note: I use the non-widgetized version because it looks exactly the same as found on shoutmeloud blog.) If you want the widgetized version which comes by default with the template, just add the widgets of your choice by hitting the "Add a Gadget" button on the "Design>>Page Elements" page.

However, when it comes to the "Blog Categories" section, you need to manually alter the footer section. This article will provide you a step by step guide for doing the same. If you are not clear about what section of the footer I'm talking about, just check the following picture.

So, follow these instructions to have a "Blog Categories" Section of your choice.

01. Go to "Design->Edit HTML. Make a backup of your template before modifying the HTML by clicking on the "Download full template" link at the top of the page.

02. Once the backup is made, search for the following line in your template. Use "CTRL+F" to fasten your search results.

<a href='http://www.newbloggingtipz.com/search/label/Blogger%20Tutorials' shape='rect' target='_blank' title='Blogger Tutorials'>Blogger Tutorials</a>
</li>

03. You will find the links that point to my labels. So, it is pretty clear that these labels (categories) should point to your blog labels. To do so, first remove all the links that point to my blog.
04. To remove the links that point to my blog, you need to remove the following codes highlighted in GREEN.

<li class='cat-item cat-item-68'><a href='http://www.newbloggingtipz.com/search/label/Blogger%20Tutorials' shape='rect' target='_blank' title='Blogger Tutorials'>Blogger Tutorials</a>
</li>
<li class='cat-item cat-item-387'><a href='http://www.newbloggingtipz.com/search/label/Blogger%20Widgets' shape='rect' target='_blank' title='Blogger Widgets'>Blogger Widgets</a>
</li>
<li class='cat-item cat-item-874'><a href='http://www.newbloggingtipz.com/search/label/Blogging' shape='rect' target='_blank' title='Blogging'>Blogging</a>
</li>
<li class='cat-item cat-item-34'><a href='http://www.newbloggingtipz.com/search/label/Blogging%20Tips' shape='rect' target='_blank' title='Blogging Tips'>Blogging Tips</a>
</li>
<li class='cat-item cat-item-307'><a href='http://www.newbloggingtipz.com/search/label/Design%20Tips' shape='rect' target='_blank' title='Design Tips'>Design Tips</a>
</li>
<li class='cat-item cat-item-2555'><a href='http://www.newbloggingtipz.com/search/label/Free%20Premium%20Blogger%20Templates' shape='rect' target='_blank' title='Free Premium Blogger Templates'>Premium Templates</a>
</li>
<li class='cat-item cat-item-215'><a href='http://www.newbloggingtipz.com/search/label/Make%20Money%20By%20Blogging' shape='rect' target='_blank' title='Make Money By Blogging'>Money By Blogging</a>
</li>
<li class='cat-item cat-item-77'><a href='http://www.newbloggingtipz.com/search/label/Make%20Money%20Online' shape='rect' target='_blank' title='Make Money Online'>Make Money Online</a>
</li>
<li class='cat-item cat-item-64'><a href='http://www.newbloggingtipz.com/search/label/Most%20Downloaded' shape='rect' target='_blank' title='Most Downloaded Templates'>Most Downloaded</a>
</li>
<li class='cat-item cat-item-196'><a href='http://www.newbloggingtipz.com/search/label/Our%20Reviews' shape='rect' target='_blank' title='Our Reviews'>Our Reviews</a>
</li>
<li class='cat-item cat-item-39'><a href='http://www.newbloggingtipz.com/search/label/SEO' shape='rect' target='_blank' title='SEO'>SEO</a>
</li>
<li class='cat-item cat-item-9'><a href='http://www.newbloggingtipz.com/search/label/Tips%20and%20Tricks' shape='rect' target='_blank' title='Tips and Tricks'>Tips and Tricks</a>
</li>

05. You may save your template temporarily. Next, you need to find the links for your labels. To obtain the URL of the various labels in your blog, just hover your mouse over a published post which has got some labels. Check out the following picture for better understanding.

Alternate method : To get the URL of your labels, just paste your blog URL followed by a '/search/label/' and write down the blog label as such. Note: If you have a space in the name of your labels, then each space should be replaced by %20. For example, let us assume that your blog label is BLOGGER TUTORIAL - has got a space between the word BLOGGER and TUTORIAL. So, the URL of your label should be as follows.

http://www.yourblogname.com/search/label/BLOGGER%20TUTORIAL

06. Now, replace these links with the links you removed in step 4. Add a suitable name to your label as well (Replace those names highlighted in blue in step 4 with your label name). If you are not clear with the instructions I said, just take a look at the example below - your coding should be as follows.

<a href='http://www.newbloggingtipz.com/search/label/Blogger%20Tutorials' shape='rect' target='_blank' title='Blogger Tutorials'>Blogger Tutorials</a>

07. Well, save your template now. Next, you need to design a footer logo with the following dimensions - 166x120 pixels. (Note: The logo should have a transparent background or should match the background color of the footer.) You can contact me via email or hit the services page if you need a footer logo - design charges ($5.00).
08. Upload your logo to a website such as PICASA and get the URL for the logo you uploaded. Now, find the following link in your template (found in the CSS part of your template).

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJxxScWMHQdn07yrfxp-lHhqzoOGnx-3Y7Tz6ptGcqrOx4o1tOG9kZXWc_UpsAV6a7_QcsKmzrcNeF6siaSgxEU9a8Fj6FQS3sShdyp4u9YIX4cVI1xeLVhN3zMhCgigPB1iw8iyXLHWI/s800/EAB+Footer+Logo+2.gif

09. Replace this link with the URL of your logo (obtained after uploading your logo).
10. That's it!!! Save your template and have a look the footer.

I hope you enjoyed this customization. I will be posting more and more customizations for the shoutmeloud thesis theme in the upcoming weeks. I recommend you to subscribe to my blog so that you don't miss out any article. You can share your views about the post via comments. Your comments are always welcome!!!

Enjoyed the article?

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Other Recommended Posts

Sahil said on April 24, 2011 at 2:21 AM :

hey mukund, I hv been a regular visitor of your blog since you launched the Smack template. I hv recently added the widgetized version of thesis footer to my blog which i ripped off from the shoutmeloud template. No doubt you hv done a wonderful job.

Now i have one query regarding the footer. When i add the alexa stats widget, the same CSS style is applied to the alexa widget too. Similar to the link hovering. Is there any way that i can hide the CSS styling to certain widgets using HTML/Javascript??? widgets like labels and recent comments...

Mukund said on April 24, 2011 at 7:36 AM :

@Sahil Yes Sahil! I have seen you quite a lot of times in the comments section. Let me thank you for your continued support and your comments!

Well, as far as removing the CSS styling for a specific widget is concerned - YES!!! YOU CAN DO IT! You need to create a new style say,
.example
{
font-size:12px;
}
.example a:hover {
display:none;
}
and use this style in your widget by declaring the div tags say div class="example"

So, by specifying the hover attribute, you can apply new styles or remove the styles for a specific widget. Hope you understood what I meant. Else, contact me via email and I will help you out!

Sahil said on April 24, 2011 at 9:24 AM :

Hope it does works. Will share your widgetized footer with my blog readers and add your blog to my blog roll. Thanks for the huge helping hand...! :)

Sahil said on April 24, 2011 at 7:39 PM :

I tried it, but it didn't worked... :((
Any idea?????

Mukund said on April 24, 2011 at 9:35 PM :

@Sahil: I just said an example CSS. Contact me via email and I will help you with the widget buddy!

Sahil said on April 25, 2011 at 9:51 PM :

This comment has been removed by the author.

Mukund said on April 28, 2011 at 7:51 AM :

@Sahil: I received your mail and I replied to it as well! Check out!! Please comment related to the article. If you need clarifications, please mail me! It looks ugly to see comments like the one you posted! I hope you don't take me wrong!

Amit said on April 29, 2011 at 6:19 PM :

Your blog is a nice blend of church revolution theme and thesis theme.

Mukund said on April 30, 2011 at 9:22 AM :

@Amit: Thanks for the comment buddy! You are right! The blend between the two looks good!!!

Hemanth Kumar said on May 21, 2011 at 9:59 AM :

Thanks for great post. Keep it up

Mukund said on May 21, 2011 at 10:04 AM :

@Hemanth Kumar: Yup! Thanks for the comment buddy! Hope you enjoy the upcoming articles on my blog as well!

ifhamkhan said on June 4, 2011 at 3:26 PM :

I want to add intensedebate in the theme but it is showing some xml error. When I use widget it is working properly but the comment was not be displaying in the add your opinion box. plzzzz help!!!!!!!!!!!!!1

Mukund said on June 4, 2011 at 6:44 PM :

@ifhamkhan: Yes! definitely! Contact me via email with intense debate coding and the template as well. I will let you know why the error pops up. Fix your issue!

kene said on June 26, 2011 at 12:41 AM :

hello mukund, my footer is misaligned when viewed with a mobile phone. any ideas in fixing this?

Mukund said on June 26, 2011 at 6:48 PM :

@kene: Well, I suggest you to try mobify.me to make your mobile view as you want. It's a free service. So, check them out!

shan said on July 6, 2011 at 1:36 AM :

Mukund plz help me out... i tried ur thesis theme in my blog www.satisfyingreviews.blogspot.com

Plz tell me how to write "about me" as you have written just below "MAN BEHIND THIS BLOG".

And i m also having one more problem:
there is no slider coming up....plz suggest me something. i m very worried about my blog.
thanks

Mukund said on July 6, 2011 at 11:23 AM :

@shan: Just use the "Page Elements" page on blogger dashboard to write about yourself. I haven't posted the slider tutorial on my blog. I will be posting it today. So, follow my tutorials and you will get the exact SML look. You can contact me via email if you need any help!

shan said on July 6, 2011 at 3:33 PM :

Thanx a ton for the effort. I have read almost half of ur blog in one go...each and every post is really interesting and unique.
Plz also tell how to the "find us on facebook " widget.
And in receive free updates - below subscribe button there is no twitter or facebook or technorati button.
Plz help me out. Thanx

Mukund said on July 6, 2011 at 5:18 PM :

@shan: Well, regarding the "Find Us On Facebook" widget, you need to create a fan page on Facebook and later use that URL to create your like box. The icons will appear beneath the subscribe button provided you installed the widget correctly. I recommend you to read "Part 3" of this customization series for the solution!

Abdulsalam said on July 11, 2011 at 11:38 AM :

Hey mukund plz tell me how to add red coloured sprites on side bar and in comment form plz share this

Mukund said on July 11, 2011 at 12:41 PM :

@Abdulsalam: May I know about what Sprites (Image) you are actually talking about?

Jobs2Results said on August 22, 2011 at 1:51 AM :

Nice one. i like thesis themes,,,,

Mukund said on August 22, 2011 at 11:44 AM :

@Jobs2Results: Yup! Thanks for the comment! I hope you enjoy the other themes and tricks as well!

Cancerian said on February 11, 2012 at 7:25 PM :

Why is this theme only so much customized for blogger only? We want same for wordpress also

Use the tab below to comment. No spam please!!!

POST YOUR COMMENT