Monday, June 22, 2009

How To Add Read More To All Of Your Posts

From this tutorial, you will be able to add a read more link to all of your posts, old or new. Adding a read more link to your posts can and will save upload time of your blog for your readers. This will be convenient for your readers and definitely keep them happy from the long wait to get the information they need now. This tutorial will be useful for blogs that have long posts. As always, make sure you download your current existing template just in case it doesn’t turn out as expected.

Steps to follow:
1. Login to your Blogger dashboard.
2. Go to Layout > Edit HTML (click on “expand widgets” box)
3. Now search for this line of code: ]]></b:skin>
4. Now add the following code right after it:

<style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

5. Next, you will need to search for this line of code: <data:post.body/>
6. Once you have located the code, add all of the following section code right after it.

<!--READ-MORE-STARTS--><b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>Read More!</a>
</b:if><!--READ-MORE-STOPS—>

Note: You will be able to modify the text above in orange.

7. Preview the page, and if all is fine, Save Template.

Note: You will not be able to see the Read more link yet, or after step 7.

8. Once you have saved your template, go to Settings>Format. Scroll down to Post template and add the following section code inside of it, then click Save Settings.

<span class=”fullpost”>

</span>

Note: You should now be able to see a Read more link under all your posts.

Note: The way this code works: Everything between the <span class=”fullpost”> and </span> will be the hidden information until the reader clicks on read more, which will bring them directly to the post link. For example: The part in red will be shown, the part in blue will be hidden until readers click read more link.

This part will be shown <span class=”fullpost”> while this part here will be hidden until the reader clicks on the read more link. </span>

Sunday, June 21, 2009

Free Icons For Web Development

Here are some free web development icons by Rinoa. There are 48 icons that can be used in almost any website or applications. Also visit the author’s website to check out more of their work: http://www.c9-d.com/blog-category-16.html#nav.



Author: Rinoa
Amount of icons: 48
Icon Sizes: 24X24
File Types: .png
Color/Shape: Colored glossy icons.
Other Info: Universal icons.
download Download Here

Thursday, June 18, 2009

Free WebAppers Web Application Icons Set

Here are a free set of web application icons by WebAppers. These icons are nice for professional looking blogs. The 3D effect with a glossy style will make your blog more appealing to your readers. Although it is recommended that it be used more for a professional looking blog, it can also be used for personal blogs as well. Check it out!


Author
: WebAppers
Amount of icons: 20
Icon Sizes: 48X48, 32X32, 24X24
File Types: .png with transparent background
Colors/Shape: 3D effects with glossy style.
Other Info: Used for professional blogs.
download Download Here

Wednesday, June 17, 2009

How To Show The Post Date On Every Post

From this tutorial, you will be able to show the post date on every last one of your posts. As we all know, Blogger’s default templates only show a single date for every post that was posted that day. Some readers will find it convenient to have that quick glance at the date on each post, but some will not even notice. This tutorial is definitely handy if you plan to use a calendar icon as your post date, since the timestamp can be modified. As always, make sure you download your current existing template just in case it doesn’t turn out as expected.

Steps to follow:
1. Login to your Blogger dashboard.
2. Go to Layout > Edit HTML (click on “expand widgets” box)
3. Now search for the red line of code or similar code:

Note: If you can’t seem to find the line in red, try the second section code in blue.

<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2> </b:if>
<b:include data='post' name='post'/>

4. Next, replace the section code above in green with the section code below:

<div class='date-header'>
<data:post.timestamp/>
</div>

5. Preview, and if all looks good, Save Template.

Note: You can modify your timestamp by clicking on the settings tab > formatting. Change the setting under timestamp format to your desired option.

Free 345 RSS Icons

These free rss icons by Studiom6 are excellent for professional blogs, although they are universal as well. This set contains 345 icons of various colors and shapes for those diverse designers. This is definitely recommended to have just in case you might need to grab a quick rss icon for your blog. Check it out!



Author: Studiom6
Amount of icons: 345
Icon Sizes: 77 Icons RSS 128x128, 78 Icons RSS 64x64, 68 Icons RSS 48x48, 63 Icons RSS 32x32, 39 Icons RSS 16x16, 20 Icons RSS 12x12
File Types: .png
Color/Shape: Four different forms of icons such as the "Circular", "Marco", "Normal", "Grunge" (+ a folder extra) with variations in color and size.
Other Info:
download Download Here

Monday, June 15, 2009

Free Web Social Blog Icons

This free web social icons by NarjisNaqvi can be used for professional and personal blogs. Not all blogs should have matching icons, but it would go well together if your blog contains icons of circle shapes as well. Check it out for yourself!



Author
: NarjisNaqvi
Amount of icons: Full download contains 38 icons, each icon has 5 sizes.
Icon Sizes: 20X20, 40X40, 60X60, 128X128, 256X256
File Types: .png
Colors/Shape: White gradient circles with social icons on top layer.
Other Info: n/a
download Download Here

Sunday, June 14, 2009

Free Set of Social Icons

This free set of social icons, by Tydlinka, is universal, for both professional and personal blogging. This set of social icons includes the following social services: bookmarky, delicious, digg, facebook, flickr, fungu, jagg, linkuj, reddit, stumpleupon, technorati, topclanky, topodkazy, twitter, and vybralisme. Check it out!


Author
: Tydlinka
Amount of icons: 16
Icon Sizes: 16X16, 32X32, 64X64
File Types: .png
Colors/Shape: Square
Other Info: Good for professional and personal blogs.
download Download Here

Saturday, June 13, 2009

How To Add Share This Widget To Your Posts

From this tutorial, you will be able to add social icons under your posts for readers to have easy access while trying to share information with others. Having a share this widget for your blog posts is almost crucial if you want to drive traffic to your website. This widget is definitely recommended to have on your blog because the more people that shares, the more traffic you will attain. As always, make sure you download your current existing template just in case it doesn’t turn out as expected.

You will need these files for this tutorial:
1. Set of social icons no.2 by ~Tydlinka

Note: You will need to upload these files to your host and replace the links with yours.

Steps to follow:
1. Login to your Blogger dashboard.
2. Go to Layout > Edit HTML (click on “expand widgets” box)
3. Next, you will need to locate this section code: <div class='post-footer'>
4. Add ALL of the following section code right after it.

<p class='feedburnerFlareBlock'>Share this: <img src='http://www.yourlinkhere.com/16x16/rss.png'/><a href='flare2url'>RSS</a> <span>&#8226;</span> <img src='http://www.yourlinkhere.com/16x16/twitter.png'/><a href='flare3url'>Twitter</a> <span>&#8226;</span> <img src='http://http://www.yourlinkhere.com/16x16/digg.png'/><a href='flare4url'>Digg This!</a> <span>&#8226;</span> <img src='http://www.yourlinkhere.com/16x16/facebook.png'/><a href='flare5url'>Share on Facebook</a> <span>&#8226;</span> <img src='http://www.yourlinkhere.com/16x16/delicious.png'/><a href='flare5url'>Add to del.icio.us</a></p>

Note: Replace the links in orange with the links you uploaded your images to, and replace the links in blue with your social accounts.

5. Preview, and if all looks fine, Save Template.

Extra information on post:

Note: If you want to add more social icons, simply add this section code right after any of the section code: </a>. Replace the link in orange with your desired social icon image link and replace the blue link with your desired social account.

<span>&#8226;</span> <img src='http://www.yourlinkhere.com/16x16/delicious.png'/><a href='flare5url'>Add to del.icio.us</a>

Note: The section code in green represents the dot separating the social icons, if you do not want to have that, simply remove the entire section code in green.

Tuesday, June 9, 2009

Free Developer’s Icons

The Free Developer’s Icons made by Sekkyumu is very nice. A blend of cartoon with professionalism makes these icons universal for both professional and personal blog. Check it out!


Author:
Sekkyumu
Amount of icons: 105
Icon Sizes: 32X32
File Types: .png, .ico, .icns, .icontainer
download Download Here

How to add related posts underneath your posts

related_posts From this tutorial, you will be able to add a related posts widget right under your posts. Having a related posts section for your blog can really be user friendly for your readers and definitely boost the average time on site. Most of the time, readers who find your post interesting will dig in for more, and what’s more user-friendly then a related posts section right under that post.

You will need these file(s) for this tutorial:

js_file related_posts.js
 Made on a Mac!

exclusive for Smashing Magazine rss.png
 Made on a Mac!

exclusive for Smashing Magazine relatedposts.zip

To add related posts underneath your posts:

1. From your Blogger dashboard, navigate to Layouts and then Edit HTML.

2. Add the following javascript link below right after the opening head tag of your blog: <script src='../related_posts.js' type='text/javascript'/>

3. Next, you will need to search for this section code: <data:post.body/> and copy and paste the section code below right after it.

Add style with CSS:

4. Next, you will need to add the CSS section code the footer. To do this, copy and paste the following section code below right before: ]]></b:skin>

Note: Remember to change “../rss.png” to your link location.

5. You should preview your blog first to see if all codes have been implemented correctly. If so, save your template and you’re finished.

Saturday, June 6, 2009

How to add a three column footer to your blog

three_column_footer

From this tutorial, you will be able to add a  three column footer to your blog. Having a three column footer for your blog is not mandatory but, in having one, it can save space in your sidebar and also reduce page lag for your viewers.

To add a three column footer:

1. From your Blogger dashboard, navigate to Layouts and then Edit HTML.

2. Now search for this HTML section code:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

3. Replace this entire section code: <b:section class='footer' id='footer'/> with the one below.

Add style with CSS:

4. Next, you will need to add the CSS section code the footer. To do this, copy and paste the following section code below right before: ]]></b:skin>

Note: You can add more style to this code.

5. You should preview your blog first to see if all codes have been implemented correctly. If so, save your template and you’re finished.