6 small tricks to 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: '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.

Get Latest Updates For Free!

Subscribe via Email

10 comments

July 20, 2011 at 4:55 PM

giv me your blogger template plz
send me the link
http://smahkin.blogspot.com/

July 20, 2011 at 8:16 PM

Well I can't do that.

September 9, 2011 at 4:39 AM

Step 6 doesn't work on my blog when I replaced the code I get this Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute "{1}" associated with an element type "class".
Error 500 what do I do?

September 9, 2011 at 8:51 AM

@AmyTry now , it will work.

September 19, 2011 at 11:40 AM

Okay Now I tried it (number 6 again) and there is no error message however. I just made a new post and it's still not allowing the same date on all my posts? Why? I checked my visibility settings and there is not conflict with that

September 19, 2011 at 12:21 PM

@AmySend me the template fix it.

January 11, 2012 at 8:48 PM

hi, im trying step 6, but the first version seems to be three times in my template. should i replace all of them with the new line?
if i replace just the first one, there are no changes :(
Greetings!

January 11, 2012 at 9:28 PM

@SilvaTry and replace the second one, then if it doesn't work the third one. And if it don't work send me the template.

Amanda
October 10, 2012 at 10:05 PM

I'm trying to successfully use the @font-face options on my blog, but it's not working. Ultimately I only want it used as a secondary font choice since my current font of choice is century gothic, but that doesn't show on ipads... so I found a font that is similar, avalon plain, and am trying to implement that font to show when people view it on their ipads. I'm following the steps, and have the font converted & hosted. I've placed the code before the correct spot in the template, and updated all of the font family areas where I would like it to be, but I still don't see the update. I do also use artisteer to create the basis of my template, if that helps any. What am I doing wrong?

October 20, 2012 at 9:08 PM

@AmandaI updated the tutorial and now it should work.

Click to Add a New Comment

Leave your comment

- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.

Read latest articles in your favorite news reader
Sign up for newsletter

Find us on Facebook

Followers