Blogger Tuts

Hello world!

admin — Tue, 05 Jul 2011 06:13:20 +0000

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

Google Font API – The Easiest Way to Use Custom Fonts Ever

admin — Thu, 27 May 2010 13:45:49 +0000

Google just introduced us its new Font API. I have played around a with it and I can assure you It’s the best and simplest way to use custom fonts I’ve ever seen.

It takes less than 10 seconds to install and use a new font, and gives you full control over the fonts even with CSS 3. One of the best features is that it’s pretty fast on time loading and supports Internet Explorer 6 (aka Lost Cause).

So here’s a quick tutorial on how to use the new Google Font API on your Blogger Blog.

1 – Choosing the Font

Just go to the Google Font Directory and pick the desired font. There is a quite nice collection already, but I am pretty sure they will keep expanding it while the new API gets popular.

Once you have picked the one you want, just click it and it will take to a new page with further details about the font, how it looks, a couple of variants, etc.

2 – Get the Code!

Now just click “Get the Code”.

And copy the font code:

3 – Installing the Font

As you can see, it gives you a link to a external stylesheet, just copy it and paste between your and tags. Like this:

view plainprint?

Note: In order to get parsed, Blogger asks you to close the link tag, just add a little “/” in the end like this:

view plainprint?

4 – Using the Font

Now all you have to do is to use it normally the font name in your CSS, like when you are using a general web font like Arial, but make sure you wrap the font name with ‘ and ‘. Like this example given by google:

view plainprint?

h1 { font-family: ’Cantarell’, arial, serif; }

5 – Final Words

I would love to see how you have used this tutorial to improve your blog, just post your examples in the comments below and share your ideas with our community! Also if you have any questions or suggestions on how this tutorial could be improved, don’t hesitate to comment.

Make a Navigation Bar with Automatic Highlighted Current Links

admin — Sat, 17 Oct 2009 02:15:44 +0000

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:

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:

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

/* 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:

and replace for the following:

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.

Tabbed Sidebar for Blogger

admin — Thu, 15 Oct 2009 10:00:59 +0000

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 ]]> line:

Blogger Templates Cheat Sheet #1

admin — Fri, 02 Oct 2009 23:02:41 +0000

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.

Blogger Resources Link Feed

admin — Tue, 08 Sep 2009 23:15:47 +0000

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.

Google search goes social
Yesterday, Google announced the introduction of Google Social Search. This service is available as part of a new experiment on Google Labs and getting started is pretty simple and straightforward.
The Blog Templates
TheBlogTemplates is the place to download free Blogger Templates and WordPress Themes.
5 Useful Tutorials for Newbie Blogger-users
The best way to learn CSS is to create a Blogger blog. It is a well-known fact that most bloggers and designers detest Blogger, but Blogger is actually the best free blogging platform ever.
Top 40+ Blogger Tutorials Roundup
Yup a one stop for all important blogger tutorials here. So bookmark it for further use and don’t forget to drop a comment if you have a good tutorial i will be glad to add it in my next list. Cheers!
Top 25 Magazine Style Blogger Templates
The 25 Newest Magazine Style Blogger Templates.
50 Surprisingly Amazing Themes for Blogger
Great collection of the newest amaing Blogger templates. It’s worth a click, many good people featured there.
New Google Translator widget
Translate your Blogger Blog automatically into 51 languages with this incredible translator powered by Google Translate.
Blogger theme tutorials
WordPress certainlly isn’t the only blogging platform available. Thousands of people are tusing blogger for its simplicity and most importantly it is completely free. Here I found some very useful links for you.
BloggerTuts Community Link Feed
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.