Blogger Tutorials, Templates and Resources - Bloggertuts

Free Premium Social Media Icon Set

2009-10-22T16:25:00.000-07:00

We often observe that authors of websites and blogs make constant use of icons to represent their profiles on various social networks, such as Facebook, Blogger, Twitter, among others. Thinking about it, I decided to create this elegant and exclusive pack of free icons for you to disseminate in high style where you are on the web.

Specifications

The pack contains 16 icons of the most popular social networks. The resolution is 48x48, I try to keep the “Letterpress” style on the logos. I hope you like it.

Terms of use

It’s very simple, like I said, these icons are free and exclusive for Bloggertuts, so you can use them anywhere and anyway, but the only thing I ask you is that you share these icons by linking to this page. It will make us really happy and will encourage us to continue providing high quality freebies to you guys.

Download

First make sure you subscribe and follow us on twitter, then download the icon pack from Here

Enjoy it!

10 Impressive Designs from Blogger Blogs

2009-10-12T20:03:00.000-07:00

From the very first day I started making Blogger templates I knew that this platform had a great flexibility when it comes to CSS design. This post is a little round-up with living examples on how powerful Blogger can be if you know how to deal with it.

1. Mike Matas Blog

2. Code-code-an

3. Iconerz

4. Extra Icing on the Cake

5. Packaging of the World

6. Quinto Elemento

7. Dante Araujo

8. Gisele Jaquenod

9. Joao Alvarenga

10. Rames Studios

Final Words

There are tons of examples of how Blogger can be beautifully designed around, I just picked the 10 ones that I really liked when I was searching around for this post. There are two great places where you can get inspiration on Blogger design, they are We Love Blogger and Blogger Showcase.

If you have more suggestions on really well designed Blogger blogs, don’t hesitate to talk about it on the comments below, also subscribe and follow us on twitter.

The Geometry of a Blogger Template: Columns and Widths

2009-10-11T12:23:00.000-07:00

One thing that you need to have in mind when designing a Blogger template is the general width of your template and how the columns inside of it will be arranged. Here is a quick explanation to help you understand how it work’s when it comes to setting columns and width in your template’s CSS.

The elements

There are a couple of elements that you should have in mind when it comes to columns and widths, and those are:

#outer-wrapper: This is the div that is wrapping all the blog and making it centered on the page, its width is the maximum area that your blog can occupy, (For example if your outer-wrapper have a width of 1000px, it is the maximum width of the whole blog, meaning that all the other widths added together should be less or equal to 1000px)
#main-wrapper: This is your main column, means the one that hold your posts, it is generally wider than your sidebar in order to hold larger content and text.
#sidebar-wrapper: This is your sidebar columns, the one that holds your widgets and stuff to the side, it is generally smaller than the main-wrapper, for obvious reasons.

How the columns are arranged

So as you can see the outer-wrapper will always set the maximum width of your template. The main-wrapper and the sidebar-wrapper are floating elements, so you have to be careful when setting valued for their widths because if they don’t fine enough space they will not behave as we want them to.

Let’s do the math, as you can see in the picture below, we have a little simple equation:

X + Y + Z + Y + X + W + K + W + X = outer-wrapper width

Be aware that you need to be careful for what are the real widths of your columns. For example: If you set to your main-wrapper a width of 400px and you having a 10px padding and a 10px margin, you need to add those values in order to get the real width. That would be 400 + 10 + 10 + 10 + 10 = 440px.

Final Words

So keep that in mind when you try to make changes in your templates. If you want to add another column remember to enlarge your outer wrapper or reduce the width of your existing column in order to get enough space to fit the new column.

This was a very basic explanation about the arrangement of columns in your templates. I hope that it will help beginners to understand the structure of Blogger templates. For this example I have used a basic 2 column layout, but if you get the main point of it, you will be able to understand all the other layout models.

If you have any questions about it, just drop me a comment below. There are a lot more stuff to come, so to don’t miss out, make sure you subscribe and follow us on twitter.

How to Add Beautiful Captions to Your Images Using jQuery

2009-10-10T18:26:00.000-07:00

Everyone know that Blogger is most used for personal blogs, And most of personal have tons of pictures. This will be a very quick tutorial on how to add captions to those pictures to improve your blog’s usability and help visitors identify the description of each photograph you have on your posts.

This tutorial is inspired in a very quick screencast made by @mads that can be watched here. I just found it very useful and decided to adapt it for Blogger users.

The final result

If you want to see it working please check the live demo.

Explaining the method

The little script we are going to use here is very simple, it will add captions all the images that have the addCaption class, and the text in your captions will be the “title” attribute of your image.

Step 1 – Installing jQuery Library

You only need to do this step if you don’t have jQuery installed yet, if you already have it, you can skip to step 2. To install jQuery just paste the following code just before your </head> tag:

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<!-- End of jQuery -->

Step 2 – Installing the Script

Now that you have made sure that you have jQuery installed, you need to install addCaption script, to do that just paste the following code just before your </head> tag:

<!-- addCaption -->
<script src='http://dl.getdropbox.com/u/1693834/javascript/addcaption.js' type='text/javascript'/>
<!-- End of addCaption –>

Step 3 - Adding some style

Let’s make it look beautiful, paste the code below right before your ]]></b:skin> line:

/* Image Captions
--------------------------------------------------- */
div.addCaption {
margin-bottom:1.5em;
padding:10px;
text-align:center;
background:#f0f0f0;
border:1px solid #ccc;
color:#565656;
display:inline-block;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

div.addCaption img {
display:block;
}

Using the Script

When you finish installing, just save your changes and you will be ready to go. To use the script, whenever you need to add captions to an image, just give it addCaption class and write your caption text in the title attribute. Please check the image shown above, on Explaining the method.

Adding captions to images uploaded by Blogger

To add your caption to images uploaded trough Blogger is the same thing:

Click to insert your image, and set it up as you usually do.

Now go to the Edit HTML mode, add the addCaption class and set the title that you want to be shown in the caption to the <img> tag.

Final Words

As you may know there are plenty of more ways to add captions to images around… Including some fancy and animated alternatives. I just found this one really simple but effective and decided to post it here. Maybe in the future I will make tutorials for more complex alternatives that may require more work, but I think this one will help beginners and those who like everything simple, like me.

If you have any question do not hesitate to leave a comment, or contact us. Don’t forget to subscribe and follow us on twitter.

The Easiest Way to Make Tabbed Sidebars on Blogger

2009-10-09T21:30:00.000-07:00

Tabs are well know for being very useful to everyone, specially for those who have a lot of content on their blogs and spend much time thinking where to place new stuff.

I know there are quite a few tutorials around about making tabs for blogger, but they all have one thing in common, are kind of difficult to implement, and may confuse some users.

The method I developed is inspired in a tutorial from Webitect, I just found it very useful and decided to adapt that technique to Blogger platform. This tutorial will bring you a very easy to implement way to make tabs out of your sidebar widgets, here are some features of my method:

Easy to install.
No need edit html in Sidebar part.
Automatically place your handpicked widgets inside tabs.
Freedom to set what widgets stay out of the tabs.
After implementing, Widgets are normally edited from Page Elements section.

The Final Result

If you want to see it working please check the live demo.

Step 1 - Placing the styles on your CSS

The style of the tabs can be easily changed anytime just using CSS, but this is not the main reason for this tutorial, It’s up to you to change or not, use your own CSS skills. We’ve made a general layout for it, to install it just place the following code right before the ]]></b:skin> line:

/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
    border:1px solid #494e52;
    background-color:#636d76;
    padding:8px;
}

.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}

.widget-tab  ul {
    margin:0px;
    padding:0px 20px 0px 20px;
}
.widget-tab  ul li {
    list-style:none;
    border-bottom:1px solid #d6dde0;
    padding-top:10px;
    padding-bottom:10px;
    font-size:13px;
}
.widget-tab  ul li:last-child {
    border-bottom:none;
}
.widget-tab  ul li a {
    text-decoration:none;
    color:#3e4346;
}
.widget-tab  ul li a small {
    color:#8b959c;
    font-size:9px;
    text-transform:uppercase;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position:relative;
    left:4px;
    top:0px;
}
.tab-content  ul li a:hover {
    color:#a59c83;
}
.tab-content  ul li a:hover small {
    color:#baae8e;
}

.active-tab{
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;        

}

ul.tab-wrapper {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}

Step 2 - Installing jQuery Library

This script needs the jQuery JavaScript library, if you already have it installed, you can skip this step, if you don’t just paste the code below right before your </head> line:

<!-- jQuery Call -->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

<!-- End of jQuery Call -->

Step 3 - Installing the Script

Ok now that you’ve made sure that you have jQuery installed, you need to install the script that will do all the magic for us, just place the following code right before your </head> line:

<script type="text/javascript"> 
var starttab=0; 
var endtab=2; 
var sidebarname="sidebar1"; 
</script> 
<script type="text/javascript" src="http://tab-for-blogger.googlecode.com/files/bloggertabv1.0-min.js"></script>

Customizing

As you have noted you’ll get a few lines that can be customized, those are:

var starttab=0;
var endtab=2;
var sidebarname="sidebar";

Very quickly: starttab is the starting number for your chosen widgets, it starts counting from 0. endtab is the number for your last included widget. sidebarname is your sidebar’s id, it is generally just “sidebar”, but just in case you have a different id, we’ll help you finding the right one to place here.

How to find your sidebar’s ID

Ok if you have installed the script and it is not working, you may have a different sidebar ID that is not only “sidebar”, use the following methods to find he right id of your sidebar.

Method 1 - Getting from the HTML

This one may be the fastest one, if you use Minima template, or any template derived from it, just go to Layout > Edit HTML > Search for “sidebar-wrapper” and you may get something like this:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

Just take a closer look and you will find it id='sidebar'.

Method 2 - Using Firebug

Firebug is the most wonderful Firefox extension for web developers, If you dont have it, just download it from here.

Method 3 - Using Web developer Firefox Plugin

This is another great extension, if you don't have it, get it here.

Ok now that you have installed the script on your blog, you should be able to normally edit your widgets on your page elements section.

What are the Gadget Numbers

Here is a simple explanation for those who haven’t understand the numbers yet. Let’s say that you want make tabs out of your first 3 widgets, so your starting number will be 0 and your finishing number will be 2:

var starttab=0;
var endtab=2;
var sidebarname="sidebar";

Check images below for better understanding:

In this case, Widget 3 and 4 will not get any tabs, because your finishing number was 2. Very easy huh?

Advices

This script works for only one sidebar per blog.
We have included a general styles for your tabs, however, you can use your CSS skills to customize them, but be aware that CSS related errors will not be supported here, make sure you do the right thing.
All the tabbed widgets need to have a title.

Final Words

This is a new script that I have develop specially for Bloggertuts, I hope it will help many people and will be easy for any person to install it, even the beginners. If you use this script, don’t hesitate to comment here to showcase your result, specially if you have created a new style to it. Also if you have any questions just drop a comment or contact us. Remember to subscribe and follow us on twitter.

Blogger Templates Cheat Sheet - #1 Wrappers

2009-10-08T19:27:00.000-07:00

This is the first time ever I make a visual cheat sheet, It was a little difficult for me, but I think it came out kind of good. I tried to put as much as details as I could. As Blogger templates have a lot of terms to go trough, I decided to make “Chapters” of it, and release them one by one, so you guys don’t have to wait a lot for the full one.

What you’ll get

This is a visual cheat sheet for Blogger templates XML, I will explain each important term that you need to have in mind in order to be a template designer. In this first “issue” I will go trough the Wrappers, means the structural parts of the template, the divs that keep your template together.

How to download

I have made two versions, which are a High Quality PDF and a Medium Quality JPEG file, you can choose any of it.

Step 1 (Very Important)

The first step is very easy and painless… You only need to subscribe to our feed, and follow us on twitter… Once you have done that, you are allowed to do the next step :)

Note: If you proceed to Step 2 without going trough Step 1, SHE will grab your feet in the middle of the night!!

Step 2

High Quality PDF (3.54 MB) - Download
Medium Quality JPEG (866 KB) – Download
Or just View Online

Final Words

I hope you guys enjoy it and I hope that helps you in the path of becoming a professional Blogger designer. Remember that this is only the first edition of my Blogger Templates Cheat Sheet, so make sure you subscribe in order to get the following ones. Aldo don’t forget to follow us on twitter.

Make a Navigation Bar with Automatic Highlighted Current Links

2009-10-07T17:16:00.000-07:00

Today we’re going to learn how to make a navigation bar for your blog using a very simple way to highlight current links automatically. This method is very easy and it uses only conditional tags from Blogger, so there is no need for JavaScript.

I will explain here the method and how to make a simple style for your navigation bar, I mean very simple. It’s up to you the way you want to style them, I will not go trough the basics of CSS, but if you follow this tutorial carefully you will get the idea and be able to do it in any blog.

What we are making

Check here the Live Demo of the result we are going to achieve, this is a very simple example using Blogger Minima Template, just so you understand the method.

Step 1 – Preparation

As I said, I am not going trough CSS basics and all that, What we are going to explain here is the method to get the result needed, if you understand it, you will be able to make on any blog.

We are going to apply the method on a general blog using Minima template, so quickly go to your Dashboard, create a new blog, choose Minima Template and Make 2 posts Called “About” and “Contact” with some Lorem Ipsum inside. You should get something similar to the live demo.

Step 2 – Tweaking The Cross Column Section

This step is not very important to the method, but as we are going to add the widget on our Crosscol section, we are going to tweak it so it becomes available to receive widgets.

Go to your Blog's Dashboard > Layout > Edit HTML > Hit CTRL + F > Find class='crosscol', and you should get this:

<div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol' showaddelement='no'/>
      </div>

As you can notice you have these two parts on your code: style='text-align:center' and showaddelement='no', the first one make our widgets align in the center, and the second make unavailable to add any widget on your Page Elements section. So to fix it we are going to replace the whole block of code for this one:

<div id='crosscol-wrapper'>
  <b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

Step 3 – Adding the Link List Widget

Now that we have tweaked the cross column section, we should be able to add a new widget to it, for this go to your Page Elements section, click to Add a Gadget in the section below your header.

Choose Link List from the panel, now add your links here, as you can see on the picture above, on New Site URL insert the link to your post, in the example I have used the link to my About post, and in New Site Name, the text you want on your menu. Just click Add Link to confirm. You can add as many links as wished.

Step 4 – Giving basic styles to the menu

As I said I will not go trough the basics of CSS here, so go to Layout > Edit HTML, and add the code below right before ]]></b:skin>.

/* Navigation
------------------------------------------------ */
.crosscol .LinkList ul {padding:0px;}

.crosscol .LinkList ul li {
float:left;
list-style-type:none;
margin-right:1px;
}

.crosscol .LinkList ul li a {
border:1px solid #CCCCCC;
padding:5px 10px;
}

.crosscol .LinkList ul li a:hover, .crosscol .LinkList ul li a.current {
background:#ccc;
}

Basically it will make your links align horizontally, give a nice gray border to them, and make the hover and current links have a gray background.

Step 5 – Tweaking the Link List widget

Now we need to make the Link List widget behave automatically on highlighting current links, to do this go to Layout > Edit HTML > Check Expand Widget Templates and search for the following code:

<div id='crosscol-wrapper'>
        <b:section class='crosscol' id='crosscol' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>
</b:section>
      </div>

and replace for the following:

<div id='crosscol-wrapper'>
        <b:section class='crosscol' id='crosscol' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <b:if cond='data:blog.url!=data:link.target'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
       <b:else/>
       <li><a class='current' expr:href='data:link.target'><data:link.name/></a></li>
       </b:if>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>
</b:section>
      </div>

Save it, and you are done.

Some Credits

I found the solution for this tutorial when I was going to make the code for Bloggertuts, I asked my friend Aneesh and he helped me with it, thanks a lot buddy.

Final Words

The is really a handy trick, specially when we get to use the static pages feature. This will help you improve your blog's usability and give the visitors a clue of what page are they looking at.

Don’t forget to subscribe to get our updates and follow us on twitter.

This link should appear only on my feed

10+ Awesome Tutorials to Help You Making Slick Blogger Templates

2009-10-06T14:46:00.000-07:00

As I have in mind to create a big tutorial to teach you guys how to create Blogger templates like I do, I need you to start training your xHTML/CSS skills. I do not have plans to go trough the basic stuff, so please read each of this tutorials and complete them if possible, They are highly recommended to improve your skills. They helped me a lot in the beginning, believe me, learning CSS is the key.

How to Design and Code a Flexible Website

Design and Code Your First Website in Easy to Understand Steps

Design and Code a Slick Website from Scratch – Part I

Design and Code a Slick Website From Scratch – Part II

30 HTML Best Practices for Beginners

Converting a Design From PSD to HTML

30+ Eye-Opening Web Development Screencasts

How to Convert a PSD to XHTML

From PSD to HTML, Building a Set of Website Designs Step by Step

How to Theme any CMS Using Firebug (and MediaWiki as an Example)

Build a Sleek Portfolio Site from Scratch

Interview With Deluxe Template's founder Klodian

2009-10-05T15:25:00.000-07:00

Klodian is from Albania. He is been making Blogger templates for a while now, One of the main features of his templates are the simplicity and ease of use. He has a story of success with his website because in just a couple of month he has become one of the main source for blogger templates around.

1. Can you please introduce yourself? What do you do? How did you start with Blogger?

My name is Klodian and I started with Blogger in 2004 when I bought a PC and decided to start a website. Blogger came in handy because I didn’t know anything about sites and I got so impressed when I saw those easy 3 steps to create a blog that I immediately started to fill them out. Since this day I’ve been creating many blogs but never really caring about the content, only for the design.

2. Your website is one of the most visited source for Blogger templates, how did you achieve that in so few time?

I actually started Deluxe Templates a couple of months ago, and now it’s one of the top sites for Blogger templates. I get this question a lot of times everyday on my email, people asking what is my “secret weapon”. I think there is no secret, I just listen to my visitors, I look at their opinions. I make exactly what they are looking for and get good success. Every time I make a new template I think about what my users are in need, that’s it.

3. You seem to convert wordpress themes to Blogger templates in a very short time, can you tell us how do you do that? How is your conversion process? What advice do you have for beginners?

He he, if you take a closer look on my templates, they are actually not converted. I prefer to base on them, get their images (I am not a designer) and make really simple templates for my users. The hard part is to find templates that really can be used by anyone in Blogger, that will be really easy for anyone to install and admin. I don’t look for magazine templates or other kinds of templates because most of the community uses Blogger for personal blogs, so most of my templates are for personal blogs. I generally spends much more time looking for a good template than coding it to Blogger.

6. Who are your favorite "Blogger gurus"? What makes you choose them? What are your favorite source for Blogger things?

To tell you the truth, I don’t really read online, I just check blogger designs. So who do the best designs are the real gurus for me. The first that come in mind is Amanda from Blogger Buster, She is quite old on this, and I remember that I visited her blog for a year, but now I think that she is not spending much time with her blog anymore. Second is Dante Araujo from dantearaujo.net, I like his designs, and He is a real designer. Third is Aneesh from Blogger Plugins, He is doing such a good work there. For me Blogger gurus are those who spend time with Blogger, those who give everything and are able to make any site on Blogger and never think about moving to wordpress.

7. You do a great job on converting Blogger templates, but don't you wish to do something different ? What other projects do you have?

I do this thing for fun, I don’t really take it seriously or as my main source of income. I can say that I feel good and sleep well when I make a good Blogger template, that should be enough for me. I recently start a new blog called Blogger Showcase and it’s for collecting really good blogs on our platform and categorize them. That’s it, I don’t think that I will have more projects on Blogger, I like to make Blogger templates, that’s all.

8. As you get a lot of comments, you might know what exactly Blogger users need. What are the most frequent requests? What do you think that Blogger platform should improve?

The most asked questions are “How to create pages on Blogger” and “How to install a Blogger Template”. I think the pages feature should be the next feature from Blogger staff. Note that the second question is really simple, most of our users does not have any knowledge in coding at all, so guys, if you make a new Blogger template, please make it as simple as you can, the users will love it.

9. Thanks for your answers, What do you have to say for Bloggertuts readers? What should they expect from you in the near future?

All I have to say is that I will never quit, I mean, I fell really good making Blogger templates and helping my users and I do not want to abandon it.

Where to find Klodian on the Web

Final Words

Guys, I hope you have enjoyed this interview, it is really good to hear from a successful blogger person. Please send me more interview suggestions, I am already making invitations for people around, but I want you guys to help me with suggestion, Who do you want me to interview here? Leave your suggestions on the comments below. Don’t forget to subscribe and follow us on twitter.

Is Pages Feature Coming to Blogger?

2009-10-04T21:50:00.000-07:00

I think one of the most expected feature that would really improve our blogging experience on Blogger platform would be the “Pages Feature”. I mean, having the possibility to insert multi level pages on our blogs would be great, specially for those who need to write “About” and “Contact” pages.

That feature would “free” us from using posts like pages in order to get the results needed. We will need no more to disable comments and set post dates to the past for making those pages. The best thing is that I just found a good reason that will make you guys excited about: Teasers!

I was just taking another look at the jump breaks announcement and found something very interesting on that post. Yes, I think Blogger team wants to tease us about a possible feature that may be coming to improve even more our beloved platform. Check the pictures below and see it at your own eyes, in case you haven’t noticed that yet:

This is the image posted at Blogger Buzz that may be a teaser about pages feature… Well I can be wrong about it, it may be just a coincidence or something… But I still believe that it would be too tricky to be a coincidence. So… let’s look forward to it!

Improve Your Blog's Typography using Custom Fonts

2009-10-03T23:51:00.000-07:00

A really nice feature for improving even more your blog is to show custom fonts, that will not only make your website eye-candy, but will improve the typography of your webdesign.

I have found a really nice script for font replacement called Cufón. It allows us to use any font on our webdesign without worrying about whether the visitor will have that font on his computer or not. It is really fast, easy to use, and there is no flash or image required.

Step 1 – Preparation

To have cufón installed on your blog you’ll only need 3 things: jQuery Library , Cufón JavaScript and a free font. The reason why you need a free font file is to make sure that you’ll have permission to use that font for web embedding without worrying about license or copyright stuff. You can find a great selection of free fonts here, I recommend you to go for the “Sans Serif” ones, they look great, stay away from the fancy ones, they will only make your blog look terrible

Step 2 – Installing Cufon

Once you have your font file, you are ready to install cufón on your blog. To do that just paste the following code right before your </head> tag.

<!-- Cufon + jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://bloggertuts.googlecode.com/files/cufon-yui.js' type='text/javascript'/>
<!-- End of Cufon + jQuery -->

Step 4 – Generating your font

Now it’s time to generate the script for your custom font that will be used together with Cufón in order to replace the general fonts at your blog.

Just download your font (make sure it’s a free one) and head to the Cufón font generator, you will get something like this:

On Regular typeface, submit your font file, if you would like to use its bold and italic version just do the same on the boxes below it. Also make sure you check the The EULAs of these fonts allow Web Embedding (without Adobe Flash) option, otherwise it will not work

On this step, you can check the boxes as you wish, but I recommend you to leave it the same as the picture above in order to get a reasonable file size.

On Security, type your blog’s address, this is a great feature, and will keep your font files working only at your blog, what is a great feature to prevent copies.

Just leave the rest as it is, make sure you check the I acknowledge and accept these terms box, and click Let’s do This!

Step 5 – Using Cufon

Now that you have generated your font script, you’ll need to host it somewhere. There are many free file hosting services around, I recommend using Dropbox, it is pretty much the best I’ve ever seen for hosting JavaScript files for free.

Once you have your font hosted, get the public link to the file and save it somewhere. To replace the fonts you should paste the following code, right befor your </head> tag.

<script src="Vegur_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('.post h3');
</script>

Remember to replace Vegur_300.font.js for your font’s URL, and .post h3 for the element you want to be applied.

Step 6 – Internet Explorer Fix

To make sure everything goes well, place this code right before your </body> tag.

<script type="text/javascript">   Cufon.now(); 
</script>

Final Words

That’s it, now you have a nice way to implement custom fonts at your blogs, improve your typography and make it beautiful.

If you would like more information or help about Cufón, just head to its website. Feel free to contact us if you found problems using this tutorial, also don’t hesitate to show of your results on the comments below.

Note: There is a fix for Cufon flash of unstyled content here. Thanks Choen

Technorati Tags: typography,custom fonts,blogging,blogger tutorial,font embedding

del.icio.us Tags: typography,custom fonts,blogging,blogger tutorial,font embedding

Improve Your Blog's Loading Time Using jQuery

2009-09-29T17:47:00.001-07:00

Images are on of the most effective things when it comes to making your blog slow. What if you have a way that tells your images to load only when they are needed? I mean only when the users will really look at them, even after the whole page is loaded? That is called “Lazy Loading” and can be easily achieved using a great jQuery plugin.

In this tutorial we will use jQuery Lazyload, a wonderful plugin that delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them.

Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac. Demo page is available.

Step 1 – Installing jQuery Library

This plugin is based on jQuery, a wonderful and very useful JavaScript library that can improve any website in a lot of ways.

To have jQuery installed on your blog, just paste the following code right before the </head> tag:

 <!-- jQuery Call --><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/><!-- End of jQuery Call –>

Once installed, jQuery will allow you to use many kinds of plugins, most of them can improve your website in such a great way. We will have more jQuery tutorials in the future and all of them will need this step.

Step 2 – Installing Lazyload Plugin

The next thing we need to do is to install the Lazyload plugin on our blog, to do it, just paste the following code right before the </head> tag:

<!-- LazyLoad --><script src='http://dl.getdropbox.com/u/1693834/javascript/lazyload.js' type='text/javascript'/>         <script type='text/javascript'>    $(function() {      $(&quot;.post img&quot;).lazyload({        placeholder : &quot;http://i195.photobucket.com/albums/z105/dantearaujo/box.gif&quot;,        threshold : 200      });    });</script><!-- End of LazyLoad -->

Sensivity

You can set up how close to the edge image should come before it is loaded. To do this modify the threshold value. Default is 0 (when it is visible).

$("img").lazyload({ threshold : 200 });

Placeholder Image

You can also set a placeholder image that will take place before the real image is not fully loaded. This placeholder should be an URL to image.

$("img").lazyload({ placeholder : "http://i195.photobucket.com/albums/z105/dantearaujo/box.gif" });

Further Adjustments

The are many other ways to customize this template, I have only talked about the ones that would really be useful for improving the loading time of your blog. To get more information about how to adjust Lazyloader plugin to fit your needs, please head to its website.

Final Words

This article is very handy for those that have long blogs and need to load a lot of images. Having a fast loading webpage nowadays is a key to blogging success, user mostly hate slow pages and they will certainly get out of your blog when they see it’s taking forever to load.

If you have any suggestion or question regarding this tutorial, please drop a comment or contact us.

Technorati Tags: Blogger,Improving,Loading Time,jQuery,Lazyload

del.icio.us Tags: Blogger,Improving,Loading Time,jQuery,Lazyload

How to Set up a Test Blog That Looks Just Like Your Original one

2009-09-29T16:00:00.001-07:00

Today I will show you how to create a test blog that looks just like your original one, This is very useful for those that already have a blog, and want to change the template or even improve some features on it. Having a test blog will help you to see exactly how it will look like before installing the new changes on your real blog. This is also very useful for tracking eventual error that may come without expectation.

Step 1 – Exporting your original blog

The first thing you’ll need to do is have a file containing all your posts exactly how they were made on your original blog. To get it, just go to your Blogger Dashboard > Settings > Basic > Export Blog > Download Blog. You should get .XML file containing all your posts now. Save it in a easy to find place.

Step 2 – Saving your original template

Secondly, you will need to have a copy of your original template, so you can install it on your test blog to make it look exactly like it is. To save your template, just go to your Blogger Dashboard > Layout > Edit HTML > Download Full Template. You will have now another .XML file that is a copy of your original blog template, save it on the same place as you did for the posts.

Step 3 – Creating and setting up your test blog

Ok now we are ready to create the test blog, so go to your Blogger Dashboard > Create a Blog. Set a name and a URL to your test blog and click Continue. Choose any template from the next page page (It doesn’t matter which one, we are going to change it for your original blog’s) and you are done.

Now go to your Settings > Import Blog > Select your exported .XML file and check the “Automatically publish all imported posts” box and click Import Blog. Now you should have all your posts from the original blog nicely placed at this new one. Let’s install your original template.

Go to Layout > Edit HTML > Select your previously saved template and click Upload. We’re done.

Final Words

Keeping the habit of creating test blogs before making changes to your original blog is a very useful feature for those who don’t want to loose any content or anything related to their blog.

Please if you have any suggestion to improve this post, or even questions about it, just leave a comment below or contact us.

Technorati Tags: Blogger,Test Blog,Productivity

del.icio.us Tags: Blogger,Test Blog,Productivity

How to add inline mp3 players on your blog

2009-09-29T08:33:00.001-07:00

In this tutorial you will learn how to insert an mp3 file on your blog post using the simplest way possible. It is a great feature for musicians and podcasters that want to show off their work using Blogger.

Step 1 – Preparation

For this tutorial you will only need a hosted mp3 file (The hosting service is up to you, I recommend Archive.org for podcasters, but make sure you read their terms and conditions before uploading any file.).

Step 2 – Installing the script on your template

Go to your Blogger Dashboard > Layout > Edit HTML

First of all, make sure you have saved a copy of your template, it will keep you away from any kind of head ache related to your blog.

Now look for the line </head> and paste the following code right before it.

    <script type="text/javascript" src="http://flash.for.islam.googlepages.com/inlineflashplayercomp.js"></script>

    <script style="text/javascript">

        var paramplayerflash=2;

    </script>

Explaining the code above: note that this is a javascript call for this file:

http://flash.for.islam.googlepages.com/inlineflashplayercomp.js

It will be the one who will take care of including the mp3 players automatically whenever you paste a link referencing a .mp3 file.

Note one more detail: var paramplayerflash=1;

This line will be used to choose between 8 different players, the one that will fit better your website.

You can set numbers here from 1 to 8 and see what it looks like.

Now save your changes, and this step it done.

Step 3 – Using the script

Now that we have installed the script, it will works automatically whenever you paste a link to the mp3 file on your blog. It should look like below.

    <a href="http://dl.getdropbox.com/u/1693834/Files/samplefile.mp3">Sample File</a>

And should work like below:

Sample File

Using Different Players

If you would like to choose a different player for a single file, just ad the id=”player #” directly on your link, note that the number can be from 1 to 8, check the examples below:

Player #1
Player #1

<a id="1" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>

Player #2
Player #2

<a id="2" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>

Player #3
Player #3

<a id="3" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>

Player #4
Player #4

<a id="4" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>

Player #5
Player #5

<a id="5" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>

Player #6
Player #6

<a id="6" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>

Player #7
Player #7

<a id="7" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>

Player #8
Player #8

<a id="8" href="http://dl.getdropbox.com/u/1693834/bloggertuts/files/bloggertuts.mp3" id="1">Player #1</a>

Final Words

I think this is a great feature for musicians and podcasters that may need to include their audio files on blogs. I hope this will be useful for many Blogger users.

The script used in this tutorial as made by Abu Farhan and I have proper permission to use it in this tutorial.

If you have any question or suggestions about how this post can be improved, do not hesitate to drop a comment below. For further information please contact us.

Technorati Tags: Blogger,Tutorial,Widget,Musicians,Podcasts

del.icio.us Tags: Blogger,Tutorial,Widget,Musicians,Podcasts

Help Promoting BloggerTuts

2009-09-28T18:21:00.000-07:00

There are many ways that you can help promoting the launch of BloggerTuts, It would be great to have you helping us over to become the main source for premium blogger resources. This motivation will allow us to bring you even better tutorials and articles.

Banner Ads

Copy the code for displaying each banner on your website:

<div style="text-align:center; margin:10px 0;"><a href="http://www.bloggertuts.com/?utm_source=ads&utm_medium=banner&utm_term=blogger%2Btutorials&utm_content=250x250&utm_campaign=promote" title="Blogger Tutorials, Templates and Resources">
<img src="http://dl.getdropbox.com/u/1693834/bloggertuts/ads/bloggertuts_250x250.gif"/></a></div>

<div style="text-align:center; margin:10px 0;"><a href="http://www.bloggertuts.com/?utm_source=ads&utm_medium=banner&utm_term=blogger%2Btutorials&utm_content=250x250&utm_campaign=promote" title="Blogger Tutorials, Templates and Resources">
<img src="http://dl.getdropbox.com/u/1693834/bloggertuts/ads/bloggertuts_125x125.gif"/></a></div>

<div style="text-align:center; margin:10px 0;"><a href="http://www.bloggertuts.com/?utm_source=ads&utm_medium=banner&utm_term=blogger%2Btutorials&utm_content=250x250&utm_campaign=promote" title="Blogger Tutorials, Templates and Resources">
<img src="http://dl.getdropbox.com/u/1693834/bloggertuts/ads/bloggertuts_468x60.gif"/></a></div>

Text Link

Blogger Tutorials

<a href="http://www.bloggertuts.com/?utm_source=ads&utm_medium=banner&utm_term=blogger%2Btutorials&utm_content=250x250&utm_campaign=promote" title="Blogger Tutorials, Templates and Resources">
Blogger Tutorials</a>

About

2009-09-28T17:45:00.000-07:00

Bloggertuts is a place for all things Blogger related. Here you will find very useful stuff when it comes to creating, customizing and maintaning a website using Blogger platform. We will post the most useful tutorials to improve your skills and make you able to customize Blogger in a way you would never imagine!

If you are skilled on this platform, and want to join our team, please contact us with more information about you, and show us some examples of what you can do on Blogger platform.

In the future we'll give you the chance to submit your very own tutorials that will be reviewed and published depending on its quality. So exepct great news and let's make Blogger a better tool for everybody.

Blogger Resources Link Feed

2009-09-28T17:12:00.000-07:00

Let's make this feed the best resource for those looking for Blogger stuff. Use it to promote your articles to the Blogger community, get more visits and direct traffic to your websites. Let's share around what Blogger community is up to.

Use the form below to submit your links:

Contact

2009-09-28T12:35:00.000-07:00

If you have any kind of questions, suggestion or just want to send us feedback, please don't hesitate to use the form below. We'll read all the messages and try to reply to all of them in the shortest time possible. Thanks for visiting Bloggertuts.