Over 40 Awesome Twitter Icon Packs For Your Blog

I've rounded up some of the best icon sets for Twitter I could find. A nice range of icons, birds and buttons you can use in your next design project for your blog.

- Twitter Icons Pack by ~Reawake on deviantART

- Twitter Icons TweetMyWeb 7 PNG by *LazyCrazy on deviantART

- Twitter Icons .PSD by ~JuliusX on deviantART

Create Attractive CSS Text Effects | CSS For Bloggers: Part 5

Why do we use CSS for our blog? To make things look cool of course. One way to spruce up your posts is to make your blog post tile and header text stand out a bit. This will make your blog appear to have the finishing touches and fit your particular style. Afterall, that's what CSS is all about.

Today we're going to be checking out some really great effects we can apply to text anywhere using either a custom class selector or editing our header tags directly on the style sheet to make broad changes to all our posts.

How to Align Images in Blog Posts Using Float | CSS For Bloggers: Part 4.

One of the most simple and effective ways to add some flavor to your blog posts is adding images. Almost everyone uses at least one image in each blog post to create some visual interest. It also provides a nice thumbnail for when it gets shared on Facebook or a related posts section.

So how do we easily add these images and align them so that they can quickly be placed either on the right or left and wrap around your text? We can do this with CSS of course! As you can see my lovely header image to the left fits in nice and snug with this text wrapping around it. In fact this is so easy you'll be able to start using it immediately and want to fill your posts up with all kinds of nice stock photos.

How to Create Simple Box Content Using CSS | CSS For Bloggers: Part 3

In our last lesson we talked about ID Selectors and how you can use them to make unique blocks of content. These "blocks" have several applications. Maybe you want to create a welcome box that starts at the beginning of your posts to welcome new visitors to your blog?

You may want to create a box at the end of your posts to put more information on how users can subscribe to your RSS feed. In fact the possibilities are endless and with CSS. You've never had this much control on adding elements like this to your blog, that is, if you know how.

Having a few custom-made boxes to fill content into on hand can be very useful and I use them heavily on my blog. Creating one is simpler than you might think once you know the basics.

How to Make Your Jump Link Stand Out in Blogger

Here's another quick little tweak to help make your Jump-link stand out a bit more while adding a bit of style. I recently decided mine needed to be more visable so I sat down to figure out how to do so. This is what I came up with and I wanted to share it with you because that's what this site is about!

What is a Jump-Link?
A jump-link is where you can break off your posts on your main page and continue reading it on the actual post's page. It's crucial to use them in order to keep the main blog page clean and fast loading.

How to Add Custom Social Media Buttons to Blogger Posts Easily

Social media is a wonderful way to promote your blog, and adding the option to share your blog posts is important.

If a visitor thinks your post is interesting they will want to share it fast and easily.

You don't want to miss the opportunity of your post being spread throughout the internet on some of the world's most popular sites.

You may also want to get a bit stylish while doing so, this guide will show you how to add whatever share buttons you want to the bottom of your posts.

This tutorial works well so take your time and go through the steps one by one and I'm also here to help so comment below if you have any questions.

If you're leary about doing DIY template tweaks make a dummy blog to test it out first before you add them to your main blog. And always make a backup of your template's file before attempting any editing.

How to change your font in Blogger without any CSS knowledge

If you have Blogger you may be wondering how can I change my font to something other then the few they offer me? I like Veranda just as much as the next guy but you might be looking for something a bit more spiffy. Luckily it's pretty simple to change your font, the hard part is more than likely finding what font you want to use.

How can I change my font for Blogger?
It's as easy as copy and pasting some CSS into the template designer. That way you can preview it and see if it works and if you like it and make any size changes if needed. Since it's a CSS override your exsisting CSS styling stays in place if you decide to remove this new code. So have no fear and do some experimenting.

Let's get started

Step #1 Goto your Blogger Dashboard (Link opens in new tab)

Step #2 Click on Design

Step #3 Click on Template Designer

Step #4 Click on Advanced > Add CSS

We're going to change your font to Lucida Console here as it's a rather browser friendly font.

Now once you're here add this code:

table, tr, td, li, div {font-family:"lucida console"; color:000000; font-size:15px;} .btext {font-family:"lucida console"; color:000000; font-size:15px;} .blacktext10 {font-family:"lucida console"; color:000000; font-size:15px;} .blacktext12 {font-family:"lucida console"; color:000000; font-size:15px;} .lightbluetext8 {font-family:"lucida console"; color:000000; font-size:15px;} .orangetext15 {font-family:"lucida console"; color:000000; font-size:15px;} .redtext {font-family:"lucida console"; color:000000; font-size:15px;} .redbtext {font-family:"lucida console"; color:000000; font-size:15px;} .text {font-family:"lucida console"; color:000000; font-size:15px;} .whitetext12 {font-family:"lucida console"; color:000000; font-size:15px;} a.navbar:active, a.navbar:visited, a.navbar:link {font-family:"lucida console"; color:000000; font-size:15px;} a.navbar:hover {font-family:"lucida console"; color:000000; font-size:15px;} a.redlink:active, a.redlink:visited, a.redlink:link {font-family:"lucida console"; color:000000; font-size:15px;} a.redlink:hover {font-family:"lucida console"; color:000000; font-size:15px;} .nametext {font-family:"lucida console"; color:000000; font-size:15px;} .title {font-family:"lucida console"; color:000000; font-size:15px;}

This code is to add Lucida Console as an example it looks like this.

How do I customise it?

To change it to whatever font you want simply replace all text that says Lucida Console with your font's name.
Since this is a CSS override your current template might make it look a bit screwy so to change the size just experiment until it looks right. It's defualt set to 15px you might have to make it larger or smaller to make it look right just add a higher or lower number than 15.

To do more CSS font size styling here are some more properties you can use.

Font Size

font-size: value;

• xx-large
• x-large
• larger
• large
• medium
• small
• smaller
• x-small
• xx-small
• length

What are some other cool "browser safe fonts" I can use?

Monospace
Century Gothic
Footlight mt light
Technic
Cursive

More Blogger Tricks and Tweaks

How to add a simple HTML navigation sidebar gadget to Blogger

Adding a simple HTML Navigation menu to your sidebar is one of the best ways to improve your overall Blogger site design. When visitors come to your site they need an easy to find navigation menu of some kind. Blogger by default uses Tabs, but this is only for listing your pages. What about your posts and other link you wish to add?

Here's how it will it will look:

Heres how to do it:

1. Goto your Blogger Dashboard (Link opens in new tab)

2. Click on Design

3. Click on Add Gadget where you want to place your side navigation menu (vertically)

4. Click the + for a new HTML/Javascript element

5. Copy this code

 <! -- Simple HTML Navigation Code -- >
<b>List of Site Links</b><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>

<b>Some More Links</b><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>
<a href="http://mysite.com/sample.html">My Pages</a><br>

6. Paste the code here

7. Customise the code to your links and you're done!

Tips:
To add a link to a category to one of your labels it's

http://www.myblogspotblog.blogspot.com/search/label/nameoflabel

More Blogger Tricks and Tweaks

Complete Favicon Guide - Add a Favicon to your blog

Favi-what?

Favicons (short for Favorites Icon) have become a standard in website design these days. It's one of those simple things you can do to improve your blog in just a few minutes. In this guide you will find out how to get yours.

Add a Favicon to Blogger

Adding a Favicon to Blogger is EASY


Assuming you already have your Favicon and it's uploaded. Proceed

For a complete guide on Favicons - How to create, design, and upload your Favicon click here.

1.  Head on over to your Blogger Dashboard.

2. Click on Design > Edit HTML

3.  Download your template so you can revert back to it in case there is a problem.

4. Check the Expand Widget Templates, this ensures all the code will be there, wait a few moments for it to load. If your computer is slow give it some time. Then proceed.

5. Click anywhere inside the HTML box and hit CTRL+F to find:

<title><data:blog.title/></title>

6. Immediately after that put this code:

<link href='http://yoursite.com/yourfavicon.png' rel='shortcut icon' type='image/x-icon'/>

7. Save and test it out. It may take some time to update.