Thesis Theme Footer For Blogger/Blogspot Blogs

Hi friends!!! For the past few weeks, I keep receiving a lot of emails regarding the footer which I added on my blog. So, It's been a fascination around the blogosphere to have a footer similar to the one installed on my blog. The same could be found on shoutmeloud, techiemania, etc.. The customization is basically a paid one, when it comes to thesis theme where as, we blogspot users can enjoy it for free!!!

I do not want to take much of your time. It's already going to little tiring for you to install this footer on your blog. How ever, I would like to inform you that I'm working on the thesis theme exactly similar to Shoutmeloud. I will be launching it in a few weeks time once I fully complete the design work. I suggest you to subscribe to my blog so that you don't miss the first copy of such a customized thesis theme. Let's move to the footer customization now.

1. 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.

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

]]></b:skin>

3. Let's add the CSS part of the footer first. So, just add the code mentioned in this document - CSS For Thesis Theme Footer above the line mentioned in step 2. That is, you need to copy the entire code in the document and paste it just above the line mentioned in step 2. Save your template temporarily.

4. Next, search for the last closing div tag on your template page. That is, just scroll to the end of the page and see the last closing div tag.

5. Paste the code mentioned in this text document - Code For Thesis Theme Footer just above the last div tag. Else, you can place it just above </body> tag.

6. Just preview your template. If you find any errors, then contact me via email and I will help you with the installation. However, if you do not encounter any error, then have a look at the footer and close the tab. I recommend you to save the template again. 

7. The major customization work starts here. I have already mentioned very clearly in the text document what to be changed. So, if you are webmaster, I'm sure it should be self explanatory for you guys!!! If you are not an expert, well, here goes the customization procedure.

FOOTER CUSTOMIZATION

1. Just replace the following text - LABEL 1 with your blog labels. Next, find the following code in the footer - YOUR URL THAT LINKS TO THE LABELS. Replace this piece of text with the URL of 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 that, 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.

This procedure should be followed for all the instances, (I have provided 12 such instances in the text document) where you find the text "YOUR URL THAT LINKS TO THE LABELS".

2. Just replace the following text - Featured Article 1 with the title of your featured content. Next, find the following code in the footer - URL THAT LINKS TO A FEATURED CONTENT ON YOUR BLOG. Replace this piece of text with the URL of your featured content. I think it is pretty self explanatory. Repeat the same for all the instances where you find the above text. I have provided 6 such instances in the text document.

3. Just replace the following text - WEBSITE 1 with the title of site you wish to link to. Next, find the following code in the footer - BLOG ROLL LINK. Replace this piece of text with the URL of site which you wish to link to. The number of sites you may link on your blog according to the coding I provided is 3. How ever, you can extend the same to any number by just following the pattern of coding. That is, add the following piece of tags if you wish to add another site to your blog roll. 

4. Just replace the following text - POPULAR POST TITLE 1 with the title of your featured content. Next, find the following code in the footer - URL OF POPULAR POST ON YOUR BLOG. Replace this piece of text with the URL of your popular post. If you are not sure about the post which receives the maximum hits, then I suggest you to visit Google Analytics. So, just repeat the same for all the instances where you find the above texts. I have provided 7 such instances in the text document.

5. This step deals with the author. So, I suggest you to have a photo of yourself (Size:) and some text about yourself. That's it. Upload your photo  to PICASA and get the URL to the image. Replace the text "URL OF YOUR PROFILE PHOTO" with the URL you got from PICASA. Next, split the content which you have about yourself in three parts and replace the text which says "About Yourself" at three instances with the three parts you have about yourself. That's it! Should be simple, I believe!!! 

Find the following text - YOUR USERNAME, replace this text with your twitter user name. Next, replace the text "YOUR FACE BOOK FAN PAGE URL" with the URL of your facebook fan page URL.

6. We have reached the last part of the customization. Just replace the text which says "ALEXA WIDGET FOR YOUR SITE" with the widget you receive from Alexa website. I feel it is pretty self explanatory. Last but not the least, replace all the instances of the text - "YOUR BLOG TITLE" and "YOUR BLOG URL" with title of your blog and URL of your blog respectively. That's it! Save your template!!!

I tried to keep the installation procedure as simple as possible. How ever, if you feel the post needs a little more elaboration, then share your views via comments. So, I will update the post and make things more clear. I hope you enjoy the thesis theme footer on your blogspot/blogger blog. 

If you've got any doubts or issues installing this footer on your blog, then contact me via email or just leave a comment below. I will reply to you as soon as possible. I forget to mention that the footer involves a logo. So, if you wish to have a customized logo for your blog and get it displayed at footer, then you may use our services to get one. See you soon in another interesting tutorial.

Click4more... 43 Comments

Simple Rules To Make CSS More Readable

It's been a week or so since I started designing a website for one of my client. I got a lot of exposure to various parameters in CSS. So, I just wanted to share the knowledge which I gained in CSS. during the design process. Basically, this post will provide you tips to make the CSS structure of your template look more organized which in turn, leads to better readability and easy debugging.

1. ALPHABETICAL ORDER

I found on many blogger templates especially the free ones wherein, the properties of the elements are completely unordered meaning to say, they do not follow a regular pattern in which they are arranged. So, if you wish to make a change in the CSS structure, well, it will consume a lot of time than it should. I suggest you arrange the properties of each element alphabetically. Consider the following example for better understanding. 

#nav{
border: solid 1px #DEDEDE;
color: #000;
padding: 10px;
width: 650px;
}

2. INDENT CHILD ELEMENTS

I highly suggest you indent the related portions of the code. Consider the following example for better understanding.

#nav{
width:650px;
}
#nav ul li{
float:left;
}
#nav ul li a{
display:block;
}

3. GROUPING UP SIMILAR ELEMENTS

If you have a group of elements which share the similar properties and values, then it is highly recommended that you group them in a single declaration. For better understanding, just consider the following example.

#main{
width: 650px;
}
#main h1{
color: #000;
font-size: 22px;
font-weight: bold;
}
#main p{
color: #000;
font-size: 12px;
padding: 10px;
}

4. USE COMMENTS

I do not suggest using comments provided you are an expert with CSS. If not, it is better you place comments to separate the logical sections of code that is, the header, sidebar, main content and so on... The main reason why I said to avoid the comments for an expert is because, that will save you few bytes when you compress them, implies a faster loading time for your site. I recommend you to read the following article - Speed Up Your Blog (Tips And Tools). Consider the example below that separates various parts of the CSS structure.

/*-------------------
HEADER
------------------- */
#header{width:650px;}
#header a:link,
#header a:visited{
color:#0033CC;
}
/*-------------------
NAVIGATION BAR
------------------- */
#nav{width:650px;}
#nav ul li{
float:left;
padding:0 10px;
}

I hope these simple tips will help you design a better template for your blog. If you have got some interesting tip with you and would like to share it with us, well, our comments sections are always open. Just share your knowledge with us. Meet you in another interesting article!!!

Click4more... 6 Comments

How To Get Google Sitelinks For Your Blog?

Hi friends!!! It's been few weeks since we got sitelinks from Google. I did not post about this stuff because no one exactly knows what should be done to get sitelinks for a particular site or blog. However, I would like to share my knowledge about sitelinks. Also, I 'm  going to share few practices which may  fetch you sitelinks. Interested to know what they are???

So, what are Sitelinks? This is what Google defines about Sitelinks - "The links shown below some sites in our search results, called sitelinks, are meant to help users navigate your site." So, basically these links are aimed at improving a site's navigation. Still confused??? Then, have a look at the image below for better understanding.

METHODS TO GET SITELINKS
Although we do not know the exact algorithm that Google uses to create sitelinks, we can approximate and deduce few methods to yield these sitelinks. At least, if not for the sitelinks, I'm sure your website will rank better in the major search engines like Google, Yahoo, Bing, etc...

1. PROPER HIERARCHY AND TEXT LINKS: Make sure your site has a clear hierarchy and text links. That is, create a site with proper CSS which utilizes the <ul> and <li> tags primarily. Add background images and other styles using the the same. This is one main reason why Thesis Theme has been outstanding when it comes to SEO.

2. SIMPLE AND CLEAN NAVIGATION BAR: Have a simple and clear navigation bar. Do not provide too many options for the readers. Get to know what the readers visit most frequently on your blog and put those labels/categories on the navigation bar. If your blog covers a variety of topics, then provide the reader with a second level menu.

3. UNIQUE TITLE: Get an unique title for your blog. If you have a unique name, the click through rate for your blog will increase. If you have it common, then no matter what you do, the click through rates will not high. So, make sure your blog has gotta unique title.

4. USEFUL CONTENT: Provide content that interests the reader. Content is King. So, it's very important that you keep providing content that interests your reader and I suggest you to choose titles that are comment provoking. This will fetch you more comments and improve your blog's reputation, as well.

5. PROPER META TAGS: Make sure you have proper META tags and titles that best fits the post. Although blogger does not support individual meta tags for each post, we can partially achieve it with a little bit of coding. Check out this article - Add META Tags To Each Blogger Posts. It is very important that the META tag on the home page is perfect. I recommend you to read this article - Create An Effective META Title For Your Blog.

I just wanted to share my knowledge about sitelinks. May be if you have an idea about getting sitelinks in a much easier way, then let us know via comments. Your thoughts are always welcome. See you soon in another interesting article.

Click4more... 23 Comments

How To Use Google Custom Fonts On Blogger?

I'm sure many users are fed up with old simple fonts. Especially, web designers and web masters are completely stuck with the default fonts. But, we have got a solution to this problem. Google has launched a service called Google Web Fonts. It's completely free to use for both commercial and private purpose. Go check out their directory and grab the font of your style.

Once you have chosen your font style. Just make sure you back up your template. Login to your dashboard. Navigate to "Layout>>Edit HTML" from your dashboard. Hit the download template button and your done. Now, follow these steps.

1. Just click on the font of your choice from the Google Font Directory. Later, hit the tab that says "Use This Font" and you will find a code something like the one shown below.

<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>

(Note: I have chosen Dancing Script as the font. The coding may vary depending upon the font you choose)

2. Copy and paste the code just below the following line.

<head>

(Note: You need to add a forward slash - / at the end of the coding on step 1.  Only then, you can save your template.)

3. That's it. Save your template. You have added the font on your blog. To make them really working, you need to specify it in the CSS as follows.

3.1. If you wish to have the fonts displayed for your POST TITLES, then declare them as follows.

.post-title {font-family: 'YOUR FONT NAME';
}

3.2. If you wish to have them displayed on the body section of your posts, then you need to edit your CSS for post body as follows.

.post-body {font-family: 'YOUR FONT NAME';
}

(Note: Replace YOUR FONT NAME with the font name you have chosen. In my case, it is Dancing Script. You have to remove the previous font style that existed on your template.)

4. Save your template and see your fonts in action!!!

The coding may vary depending upon the template. If you have some unique custom templates, then I'm sure the coding will be different. So, don't worry. You can contact me via email or leave a comment below and I will help you with the customization. Don't forget to share your views about this post. See you soon in another interesting blogger hack.

Click4more... 9 Comments

Designing A Perfect Sidebar On Blogger

I just wanted to share some information about sidebar which I think would benefit both the newbies, as well as the webmasters, who are striving hard to make money via blogging - to design a perfect sidebar for your blog. To start off, sidebar is basically a section on your blog that comes either to the left or to the right of the main section & includes information related to the blog posts.

It is very important to design this element, that is, put the right content on the right area to attract both the readers and advertisers. As far as I know, a well organized sidebar should include some of the most important widgets like subscription box, advertisements, recent or popular posts, search bar or any information related to the blog they are browsing. Many blogs like TechieMania, Shoutmeloud and my very own blog - EAB, includes optional widgets like Facebook Fan Page/ Twitter Updates or Google Friend Connect.

IMAGE CREDIT - www.woorkup.com

So, it's important to know what should come first and what should go at the last. The importance of each widget based on their function has been ordered as shown in the list below. The percentage for each widget in the picture depicts both the importance and the area it should occupy on a particular blog. So, just have a keen look at it!!!

SUBSCRIPTION OPTIONS:

This is a very common widget that could be found on most of the blogs. On an average, it should occupy 5% of the space provided for sidebar and I suggest you to include links to your RSS feed, Facebook and Twitter profile page. You can have a short and catchy description about your blog, as well.

ADVERTISEMENTS:

This is the most important element which every blog should possess. It's the ideal place for advertisements and should occupy, at the most 40% of the total space. It's very important that you don't place too many advertisements on your blog and make it look very ugly for the reader. Also, I suggest you have the width set to something more than 260px because you can have two advertisement blocks on the same row - just like the one on my blog. It's up to the individual to decide whether he wants to display ads related to the topic he is blogging about or just sell the ad space he has to run to meet his hosting/domain costs. 

RECENT OR MOST POPULAR POSTS:

This is another important widget that every blogger should place on the sidebar or at least, at the footer section because the maximum traffic your blog receives would be due to the posts you wrote earlier, that is people land on post pages and not on the home page of your blog. So, when you have a recent or most popular posts widget on the sidebar, there is a very high probability that the readers goes to check out another article on your blog. 

EXTERNAL WIDGETS:

This includes widget such as the Google Friend Connect, FaceBook Fan Page and so many other social bookmarking widgets. It's basically used to build better interaction with the readers. So, I suggest you can have these widgets though they are are not necessary. Make sure they don't occupy too much of your space. Limit the space allotment to not more than 10%.

OTHER ELEMENTS :

This additional space is basically for people to add miscellaneous widgets like job boards, tag cloud, etc... Limit the spacing for these elements to not more than 10%.

Basically, this post provides a quick summary about what should be present on your sidebar to make it more professional. So, I suggest you follow the same list especially if you are newbie. This schematic will definitely earn a better reputation rather than dumping a hell lot of widgets for no use. If you gotta share something, then just leave a comment. We love to hear from you!!!

Click4more... 21 Comments

Make Your Blog More Attractive - Tip 4

Hi guys! This the next tip in my series about making your blog more attractive. If you had missed the earlier versions, then click on the following links to read about them - Tip 1, Tip 2, Tip 3. This post basically deals with adding the text "Posted by" followed by the author name. If you wish to display the labels below the author name, well we have got the code that as well. Still confused? Check out the screen shot below!!!

The main advantage of adding tags/labels below your post title is that it will provide better navigation on your blog and your labels will get indexed by major search engines like Google. Interested to add this stuff on your blog??? Well, just follow these steps.

1. Login to your dashboard. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you make any changes in the template.

2. Expand your template. To do so, make sure you have a tick mark enabled to the left of this text "Expand Widget Templates".

3. Once expanded, just search for the following piece of code. Use "CTRL+F" to fasten your search results.

<div class='post-header-line-1'>

4. Paste the following piece of code just below the line mentioned in step 3.

<b:if cond='data:blog.pageType == "static_page"'>
<b:else/><span class='post-author vcard' style='no-repeat;'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
</b:if>
<br/>
<span class='post-labels'>
<b:if cond='data:post.labels'>
Tags :
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> | </b:if>
</b:loop>
</b:if>
</span>

5. That's it!!! Save your template!!!

Go check out your homepage or post page, I'm sure you should find the author name followed by the labels you tagged with your post. I hope you enjoyed this post. See you soon with another interesting and attractive tip on my next post. We love to hear from you, so please keep your comments coming!!!

Click4more... 18 Comments