Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

Using sIFR 2.0 in Blogger Templates

sIFR in blogger templates

sIFR is one of the alternative way to change font type to beautify typography, especially in the heading (H1, H2, etc.), like Cufón. This time I’ll share how to use sIFR 2.0 in blogger templates.

The Steps

  1. Download sIFR 2.0
  2. Upload the javascript files from the downloaded zip file, those are sifr-addons.js and sifr.js.
    If you busy to upload those files, copy below code and paste before </head>

    <script src=’http://mbahrizh.googlecode.com/files/sifr.js’ type=’text/javascript’></script>
    <script src=’http://mbahrizh.googlecode.com/files/sifr-addons.js’ type=’text/javascript’></script>

  3. Put the CSS code from the zip file, those are sIFR-screen.css and sIFR-print.css. If you busy to do that, copy below code and paste before </head>
    I’ve compress these codes.

    <style media=’print’ type=’text/css’>
    /* This is the print stylesheet to hide the Flash headlines from the browser… regular browser text headlines will now print as normal */
    .sIFR-flash, .sIFR-flash object, .sIFR-flash embed{display:none !important; height:0; width:0; position:absolute; overflow:hidden}
    span.sIFR-alternate{visibility:visible !important; display:block !important; position:static !important; left:auto !important; top:auto !important}</style>

    <style media=’screen’ type=’text/css’>
    /* These are standard sIFR styles… do not modify */
    .sIFR-flash{visibility:visible !important; margin:0}
    .sIFR-replaced{visibility:visible !important}
    span.sIFR-alternate{position:absolute; left:0; top:0; width:0; height:0; display:block; overflow:hidden}

    /* Hide Adblock Object tab:the text should show up just fine, not poorly with a tab laid over it. */
    .sIFR-flash+div[adblocktab=true]{display:none !important}

    /* These “decoy”styles are used to hide the browser text before it is replaced… the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower… your own settings may vary… any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */
    .sIFR-hasFlash h1{visibility:hidden; font-size:16px; letter-spacing:40px}
    .sIFR-hasFlash h2{visibility:hidden; letter-spacing:-9px; font-size:14px}
    .sIFR-hasFlash h3{visibility:hidden; letter-spacing:-6px; font-size:20px}
    .sIFR-hasFlash h4{visibility:hidden; letter-spacing:-5px; font-size:21px}
    .sIFR-hasFlash h5{letter-spacing:-4px; visibility:hidden; font-size:14px}
    .sIFR-hasFlash h6{letter-spacing:-4px; visibility:hidden; font-size:12px}
    </style>

  4. This is the most importance to use your desire font type.
    Actually when we download sIFR 2.0, it already bundled with flash file to make a font, but there is easier way:
    • Choose your desired font and save in desktop (because if it still in WINDOWS/font, it can be uploaded)
    • Generate your chose font to be a swf file at sIFR Generator. Upload your font, then next and next until finish and download it. In step 2, choose sIFR version 2 because we use this version.
    • Upload the downloaded file to image shack, because image shack can store swf file. After uploaded, take the link, e.g. .
    • Then the last, put javascript below to activate your chose font. Change the URL to your uploaded font link.

      <script type=’text/javascript’>
      //<![CDATA[
      /* Replacement calls. Please see documentation for more information. */

      if(typeof sIFR == “function”){

      // This is the preferred “named argument” syntax

      sIFR.replaceElement(named({sSelector:”h1″, sFlashSrc:”http://img291.imageshack.us/img291/2028/hotelcoralessexregular.swf“, sColor:”#AD3C00”, sWmode:’transparent’}));

      sIFR.replaceElement(named({sSelector:”h2, h4, h6″, sFlashSrc:”http://img199.imageshack.us/img199/2368/motorway.swf“, sColor:”#2F1F00”, sWmode:’transparent’}));

      sIFR.replaceElement(named({sSelector:”h5″, sFlashSrc:”http://img508.imageshack.us/img508/6843/jamesfajardo.swf“, sWmode:’transparent’}));

      };

      //]]>
      </script>

      You must change the red code to your uploaded font URL.

  5. it’s done! You can edit above code to adjust with your template character, either font size or color.

Note:
The weakness of this sIFR 2.0 is the link text become inactive. So, don’t use heading tag (H1, H2, etc.) for text link.

Subscribe via Email

Share this:

  • Twitter
  • Facebook
  • Pocket
  • Print
  • WhatsApp
  • Email

Related

June 14, 2010 Ritesh Sanap Blogger Tutorials Blog Design Series, Font embedding

Comments

  1. Nobody says

    June 14, 2010 at 6:52 pm

    nice tutorial.. thankyou very much

    Reply
  2. Ritesh Sanap says

    June 14, 2010 at 10:35 pm

    you are most welcome my friend we always try to give you the best.

    Reply
  3. Itsolusenz says

    June 16, 2010 at 4:43 pm

    Awesome! Nice article. Flash Templates at easy to download.

    Reply

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Post navigation

Previous Previous post: Alternative Ways to Change Blog’s Font Type
Next Next post: AnimeStar – Blogger Template

Currently Trending

  • How to download Specific parts of YouTube videos
  • Windows Vista CD key
  • How to Change the Welcome/Login Screen in Windows XP ?
  • List Of All 255 Keyboard All Alt Key Codes
  • Automatically add Google Plus (+) to your Post
  • Clean Your Messy Desktop & Organize Your Stuff !
  • From Netbook to Jetbook- Make your notebook super fast
  • MS-DOS and command line overview
  • How to retrieve my Demonoid username
  • HTTP2 Server Push for W3 Total Cache Minify plugin

Get Latest post in your Inbox

Random Posts

How to RIP A MOVIE

May 7, 2010 By Ritesh Sanap Leave a Comment

You might also like this Widget for blogger or Related post widget

April 20, 2010 By Ritesh Sanap 126 Comments

WebHosting Comparison

December 15, 2010 By Ritesh Sanap Leave a Comment

How to send content summary only for my feedburner subscribers via email?

May 11, 2009 By Ritesh Sanap 2 Comments

Google +1 button

June 2, 2011 By Ritesh Sanap 1 Comment

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2023 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean