add a little bit of style to your blog

Today I will show you 6 tricks for you to try on your blog. For some of you this tricks will give a little more style to your template. I will show you how to use Font Face for adding a custom font in your template, also how to remove the feed links bottom of the template , changing the text selection color, and removing the date from the posts.
Another trick will show you how to display the date for all the posts made in the same day.




1. Use Font Face for adding custom font to your blog?

Many of you want to use a custom font on the blog, but maybe the font you use cannot be view b\y all your visitors. This happens because they don't have the custom font you use installed on they'r computers. Font Face resolve this problem because it allow you to embed the font so all the visitors can see it.
So, how to use it? just follow the next steps.

1. Log in to your dashboard--> Design- -> Edit HTML 2. Search "Ctrl+F" and find ]]></b:skin> Right before it paste the code:

@font-face {
font-family: 'Agency FB';
src: url('http://descarca.googlecode.com/files/AGENCYB.eot?') format('eot'),
url('http://descarca.googlecode.com/files/AGENCYB.woff') format('woff'),
url('http://descarca.googlecode.com/files/AGENCYB.TTF') format('truetype');
}



Replace :

'Agency FB' with the name of your font

You will notice that for the font are 3 url. There are 3 because you will need 3 different type of the font to work on all browsers:

.eot - EOTs are only supported by Internet Explorer.
.ttf - Raw TrueType file, designed to look good on-screen.
.woff - Cross-browser, web-only font format that uses gzip compression. IE9+, FF3.6+, Chrome 5+

The .ttf fonts are easy to find. Then you can convert the ttf font to eot and woff using online converters. ( Font Converter)

After you have all 3 types of the font you need to host them , I recommend google code for the hosting. Then you can replace the url of the font in the code with your own url.

2. Removing Feed Link from the bottom of the template?


The feed link placed bottom of the article area can be very ugly for a blog. So if you want to remove him just find in your template the next code and delete it.

<!-- feed links -->
<b:include name='feedLinks'/>


3. How To Change Default Text Selection Colour?
You are tired with the default old text selection color? Well not a problem now because you can change it to a new color. See it with your own eyes. DEMO
All you have to do is to add this code:


::selection {
background:#f094b7;
color:#555;
}
::-moz-selection {
background:#f094b7;
color:#555;
}
::-webkit-selection {
background:#f094b7;
color:#555;
}


Change:

background color with the color of the selection
the value of color with the color of the text displayed when selected

4. Add push button effect to the links in your blog
Click on a link in my site. Can you see the effect? For obtaining this effect all you have to do is to add before ]]></b:skin> the next code:



a:active {
position: relative;
top: 1px;
}


5. Remove default date from posts

How to remove the default post date from your blog? just find and delete the next code (or similar):

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>


6. Changing the template code to accommodate the date for all posts
When you post multiples articles on a day the date is displayed only for the first one. Do you want to change that and tha date to appear on all articles? Make the next change.

Find:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>


and replace it with:

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


In some templates you will find the code to be replaced, with div tags and not with h2 tags, like this:

<b:if cond='data:post.dateHeader'>
<div class='date-header'><data:post.dateHeader/></div>
</b:if>


in this case you will replace the above code with the next one:

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


That's all for this tutorial. Hope you enjoy it.

Auto Read More Without Requiring JavaScript

Certainly you know the script read more automated isn’t it? So far, we make use of automatic readmore is equipped with a java script. So, the java script of course make a little influence on the loading page of your blog. Well now, there is a new blogger tricks for your blog design, how to make post summaries with thumbnails without java script. This trick I learned from the results of my surfing on the internet. Amazing, because this trick uses only pure one hundred percent hmtl code with a little touch of css. I will tell you how to use it below.

The first step, please go to the edit hmtl tab on your blog. Remember, you have to expand the widget. After that, look for the code <data:post.body> and replace with the following code :

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.snippet'>

<b:if cond='data:post.thumbnailUrl'>

<div class='Image thumb'>

<img expr:src='data:post.thumbnailUrl'/>

</div>

</b:if>

<data:post.snippet/>

<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>

</div>

</b:if>

<b:else/>

<data:post.body/>

</b:if>

<b:else/>

<data:post.body/>

</b:if>

The next step, you need to add some CSS code, which is placed on top or before </b:skin> code. The following code :

.thumb img { float: left; margin: 0 10px 10px 0; }

Complete, and please see the results. Hope you enjoyed.