6 small tricks to add a little bit of style to your blog

6 small tricks to add a little bit of style to your blog

Sunday, July 17, 2011 | Posted by ArtisTutor | Edit Post

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: 'MyWebFont';
 src: url('webfont.eot'); /* IE9 Compat Modes */
 src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('webfont.woff') format('woff'), /* Modern Browsers */
      url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
      url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
 }

Replace :

•  'MyWebFont'  with the name of your font

You will notice that for the font are 4 url. There are 4 because you will need 4 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+
• .svg - for iOS

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

| | | |

Save on Delicious

Get Latest Updates For Free!

Subscribe via Email