Right now, thesis is most search optimized and user friendly theme in blog world. Many of you even using it and I am sure that you love it. Today I will give you tutorial on How to change Recent post and Random Post widget color in thesis theme?. You can see live example on blog in sidebar. I hope you love it and want to show on you blog too.

Before we start we need to install some plugins. Here is list.
Popular Post by Rob Marsh – Click here.
Recent Post by Rob Marsh – Click here.

Install this two pluings and then go to next step.

After installing you need to go to custom file editor in your wordpress admin page or access to ftp file. Open cutom.css file.

Add bottom cod in your custom.css file.
Recent post:

#recent-posts h3 {background: #90040b; height:30px; font-size:1.4em; color:#fff; padding-top: 0.1em; padding-bottom: 0em; -moz-border-radius: 3px; -webkit-border-radius: 3px; text-align:center;
}
#recent-posts a {color:#2E2F2F;}

Popular Post:

#popular-posts h3 {background: #F17022; height:30px; font-size:1.4em; color:#fff; padding-top: 0.1em; padding-bottom: 0.1em; -moz-border-radius: 3px; -webkit-border-radius: 3px; text-align:center;
}
#popular-posts a {color:#2E2F2F;}

This is my customixation for recent post and popular post. You can change color and size according to your choice.

Save file and see change on your blog. This will look exactly like my blog. If you want to change background color and more, here is code.

Recent post:

#recent-posts li {
	background: #fff;
	border: 0px solid #000;
	line-height: 1.4em;
	-moz-border-radius: 5px;
	padding: 0.2em;
	-webkit-border-radius: 5px;
        text-align: left;
}

Popular post:

#popular-posts li {
	background: #fff;
	border: 0px solid #000;
	line-height: 1.4em;
	-moz-border-radius: 5px;
	padding: 0.2em;
	-webkit-border-radius: 5px;
        text-align: left;
}

Change background color according to your choice.

border: 0px solid #000;

This code will show line around each link in widget. If you don’t want to see just remove it.

If any thing goes wrong or need help, you can contact me using contact form.

Related posts:

1. Add recent post widget with thumbnail
2. Add Recent Post widget in Blogger
3. Show related post widget in blogger

As, you have seen i have just made lot of change in my thesis theme to make it more attractive than before. I think that you also want to do it and need some tutorial. For those, who are not using thesis theme, should start to use. It is more way better than regular wordpress theme. If, you are planning to move to wordpress, please refer to my post Step by Step Guild to Install Self Hosted Wordpress.

In this tutorial, I will explain you customize for thesis theme which are highly request up to now. If don’t own thesis theme, then, I will recommend you to buy one. You can buy one by clicking on thesis banner on sidebar.

You can either add color to background or image. I have added image. Here I will explain you both.
First if you want to add color, go to custom.css file using ftp. Add below line in it. This is only for thesis version older than 1.6

body.custom { background: #44443f; }

If you are using latest version of thesis theme, then you will find this option in your option page of thesis theme. You can refer to image.

If, you want to add image as background, then you can add below code in your custom.css file.

body.custom { background: url('/images/background.jpg') 50% 0  repeat-x; background-attachment:fixed}

You see fixed in above line. It won’t allow background to move.

I hope that you enjoyed this tutorial.

For more thesis theme customization, Subscribe with us.

Related posts:

1. Why do I love thesis theme?
2. How to change Recent post and Popular Post widget color in thesis theme?
3. How to install wordpress theme

Everyone want to setup their blog very easily. In my last post I talked little hard way to show favicon in wordpress, and even some of visitor complained that, it is not working. So, I decided to make post for Personal Favicon plugin, which help newbies to show favicon for their blog. (this is for wordpress user only..!)

Before I talk about this plugins let’s see screen shot of setting page.

If you can see image clear, just click on image.

You can see in setting area, you need to fill one field with your Favicon Icon URL and another you have to choose where do you want to show this favicon such as on blog, admin page or blog and admin page both.

This plugins is only for wordpress, so blogger user have to use my given tricks. Happy Blogging..!

Related posts:

1. Show favicon in blogger and Wordpress
2. Top 5 Useful Wordpress Plugins for Blogger
3. Step by Step Guild to Install Self Hosted Wordpress

Most people want to show small image before URL in address bar of browser. Small image is known as favicon. For blogger and wordpress, tricks is different. I will explain here tricks for both. Before that look how it looks.:

You can see small black icon. That is call favicon.

For Blogger:

For blogger, here is small code you need to add in HTML code of blogger theme.

First you need to find code:

<head>

Just copy and paste below code after <head> code:

<link href='http://www.iconj.com/ico/m/k/mk13dr2mta.ico' rel='shortcut icon'/>

Insted of “http://www.iconj.com/ico/m/k/mk13dr2mta.ico” change to your favicon URL.

Its done for blogger user.

For wordpress:

In wordpress, it is more simple than blogger. Just upload your favicon in /public_html/ with .ico extension.

Wordpress will get your favicon directly. If this trick won’t work then you can use same trick as blogger but in wordpress you need to add that code in public_html/index.php

Happy Blogging…!

Click here for wordpress!

Related posts:

1. Favicon before your url in address bar.
2. Personal Favicon – Wordpress Plugin
3. Show Commenter Photos in Blogger

Blogger user have seen author photo in comment box of wordpress blog, and I think you definitely want to add also in blogger. Here is tricks for it.

Log in to blogger account. Go to layout >> Edit html and click on small box next to Expand Widget Templates.

Step:1 Now Find code </head> and paste below code just before </head>

<script src=’‘http://www.thetricks.net/blogger/blogger_comment_photos.js“ type=’text/javascript’/>
<script type=’text/javascript’>
//<![CDATA[
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>

Step: 2 Find below code.

<dl id=’comments-block’>
<b:loop values=’data:post.comments’ var=’comment’>
<dt class=’comment-author’ expr:id=’”comment-” + data:comment.id’>
<a expr:name=’”comment-” + data:comment.id’/>
<b:if cond=’data:comment.authorUrl’>
<a expr:href=’data:comment.authorUrl’ rel=’nofollow’><data:comment.author/></a>
<b:else/>

Add this line <div class=’commentphoto’ style=’float:left;’/> after

<dt class=’comment-author’ expr:id=’”comment-” + data:comment.id’>

You can change float:left to float right according to your choice.

Step 3: Find below code: You can find this code, if you follow above 7 line code.

<dd class=’comment-footer’>
<span class=’comment-timestamp’>
<a expr:href=’”#comment-” + data:comment.id’ title=’comment permalink’>
<data:comment.timestamp/>
</a>
<b:include data=’comment’ name=’commentDeleteIcon’/>
</span>
</dd>
</b:loop>
</dl>

Add this line <div style=’clear:both;’/> after red code </dd>.

Regular image size is 75 x 75. If want to change than you have to upload external .js file on your server and change it. Here is line if you want to change.

BloggerProfiles.imageWidth = 75;
BloggerProfiles.imageHeight = 75;

For your purpose, I have uploaded some regular size.

For 100 x 100 use this link instead of http://www.thetricks.net/blogger/blogger_comment_photos.js

http://www.thetricks.net/blogger/blogger_comment_photos100.js

For 125 x 125 use this link

http://www.thetricks.net/blogger/blogger_comment_photos125.js

I hope this will work for you.

Credit: Singpolyma

Related posts:

1. Highlight author Comment in blogger
2. How to Modify Comment Form…?
3. Embed Comment Form below post in Blogger

Wordpress is SEO friendly version. Right now, most blogger choose wordpress as their blog platform because of Search Engine Optimization and Wordpress plugins . Wordpress-Plugins is one of the best feature of wordpress. There are thousans of plugins but not all plugins are really useful to you. Then, you might think that which plugins I should use to make my blog little advance than other. Here are top 5 out of thousand from my point of view:

1. All in One SEO:

Wordpress itself is friendly version of SEO but if we want to make it more search engine optimized than all blogger should have it. It give you many option to give particular shape to your blog such as Home title, Home description, Home keyword and other keyword apart form category and tags.Here is image of plugins setting of my SEO pack:

2. Tweetmeme:

One of the best plugin for twitter user. This plugins allow you and and visitors to twit any post. This plugin change regular url to shorten url. So, we don’t need to even short url. Here is image how its looks like when we activate it. It will looks like this:

3. Contact form 7:

Contact page is very important part of any blog user in either wordpress or blogger.com, because most user use contact form to contact the author of particular blog.

I tried many contact form before this one, but I found this one very easy and nice for newbies and professional blogger. Some features of this plugins are Spam prevention,Human verification with CAPTCHA, Multiple contact from, file upload and accept term. You can see live demo on my blog. Click here for Live Demo.

4. Commentluv:

Comment is most important part for blogger to get opinion and credit for his work. So comment form has to be advance than regular one. Commentluv plug in show the latest post from the commenter’s blog, so some of blog user will post comment so next commenter can see the latest post of his blog and may visit his blog and he will also get more traffic. Here is image of how it looks:

5. Add to Any: Share/Bookmark/Email Button:

This Plugins allow your visitors to submit that post to many social bookmarking site. This plugins also support email feature which will send email through Gmail, Yahoo, Hotmail, AOL. Here is image of how it looks..

Here are most important plugins @ my point of view.

If you are using other than this plugins and think that this plugin is useful for blog user than please post in comment.

Related posts:

1. Personal Favicon – Wordpress Plugin
2. Step by Step Guild to Install Self Hosted Wordpress
3. Why did I move to Wordpress?