Blog Template 2.0: 1/6/08

BlogTemplate20 Free Download Blog Templates

Free Templates

Classic Skin (html)
New Skin (xml)

Read more | Download

Posted at 8:11 AM</a>. Add/view 0 comments.

BlogTemplate20 Search Result

Read more | Download

Posted at 7:57 AM</a>. Add/view 0 comments.

// Friday, January 11, 2008

2 Steps to insert Smilies to Blogger post

This tutorial is about how to add emoticons and/or smilies to a Blogger post. In fact, smiley is just other web images. It is still an image. So I think it is not difficult to insert images to Blogger post. But how can we get smilies, what about hosting it. Here I'll explain simple short (only) 2 steps how to insert smiley to your Blogger post. You can even do this while you're writing your article.

1. Free smilies
Get smilies you need, I think there are free smilies option out there that we could use. In this article I would like to use free smilies / emoticons from Emoticonizer. You should go there and choose your desired smiley. Just browse other pages to find the most suitable one that is reflecting your emo and mood. Every smiley comes with two option codes, HTML or BBCode. Because we'll use it at a Blogger blog, so choose HTML code. Click the code and Right-click it to copy the code.

2. Insert it
Now go to your Blogger post and paste the code at your desired area inside your post. Simply right-click and Paste.

Repeat above steps as you need it. When your article is ready to published, then just click Publish Post button.

Conclusion
Thus we don not need to host any smilies or emoticons and getting dizzy around with the code. All are provided instantly from free smilies provider. Noe just reload and view your republished blog page. Here it is result I've got.

It is simple enough to insert smiley, isn't it? You can spice up your blog post by this way.

Labels: tutorial

Read more | Download

Posted at 3:30 AM</a>. Add/view 20 comments.

Cute Blog Rolling Widget Tutorial

Blogger has included blog rolling widget that we can get it by adding new page element. But there are such other option to auto blogrolling other blog links in simple way. In this tutorial we'll try to use a free linker service from Linkme-up.com site. Linkime-up.com allows blog readers and owner to add some links without registration or even entering control panel. But the owner still can controlling links to show up and blocking some spamming ip's. Placing a link can never be easier than this. This blog linker is customisable, this means that you have freedom to make any changes on linker interface. You can change its fonts type, size, colour, and bullet image. You can test how this linker works by submitting your own blog link (url) at left side bar of this page. Please do not spam, I can still block your IP and url. Oke, now lets start the tutorial about how to insert automatic blog linker using Linkeme-up.com service.

1. Get Linker
Go to Linkme-up.com site and get your free account there.

The nice thing about this service is that you don't need to do activation from email address. Just register and sign in using username and password you used during registration procedure. Now log in.

2. Customize it
In the welcome page now click Customise Linker link, or select from left side menu.

Now make some changes as you need by setting Font type, size, text colours. Than click Save Font Settings button.

3. Getting Code
It is time to get linker code. In the left side menu there are some menus, click Linker HTML Code.

A textarea will appear whit the codes inside it. Just click Select Codes button than right click on the hightlighetd code, now copy it.

4. Classic skin
New xml Blogger skin user just jump to step 5. If you are using Blogger classic template, paste the code inside your HTML template. Paste it any where inside <body></body> tag at your template. Than click Save Template Changes button.

5. New Skin
For new Blogger skin user (xml), go to your Blogger dashboard and head directly to edit Layout area.

From edit layout area now click Add a Page Element link. You can choose where linker will appear.

A popup window should appear after you click. Now choose HTML/JavaScript element. Just click Add to Blog button below this option.

Type your blog roll title. (Right click) Paste the code inside Content area. And hit Save Changes button.

You are done now. So what's other benefits of using this widget? This widget can be customized easily. Beside, you can manage and blog links submitted, and your readers can also easily submit their links. But the code generated is only JavaScript that means all links is not hyperlinked directly from your blog page. The advantage here is that you don't need to worry about any broken links.

Labels: tutorial

Read more | Download

Posted at 3:28 AM</a>. Add/view 9 comments.

Web 2.0 3D icons pack download

Collection of downloadable free 3D icons to enhance your blog layout and design. This 3D icon pack consists of three icon formats, PNG, ICO, and ICNS (Mac). I'd rather forgot where I had downloaded this file. You might tell me if you know where it was originally located. Some of these icons are web 2.0 cool logo. Cool and trendy icons guaranteed. Download it below.

Labels: resource

Read more | Download

Posted at 3:04 AM</a>. Add/view 3 comments.

// Thursday, January 10, 2008

Cute Orange Blogger skin

Original Publisher: JackBook.com and designdesease.com
Score : 9/10
Type : New Blogger Template (.xml)
Review :
Extremely excellent web 2.0 blogger layout. Originally designed well by Designdesease.com and ported correctly by JackBook.com site. This Wow template is the coolest trendy blogger skin ever. The template will make you Wow surprisingly . Come with simply trendy orange and cute design. Devided into three coloumns layout. Very artistic and very elegant.

This Hottest orange blogger template is available for download. But included in the zip file some needed files. You have to upload these files at first to your Googlepages (You need to create account there if you don't have one). Than edit some variable in original template xml code. Detailed simple instruction about how using this template was explained inside xml code. Just download and use it.

Alternatively you can download here.

Labels: new

Read more | Download

Posted at 8:02 AM</a>. Add/view 44 comments.

Fresh Blue blogger skin

Original Publisher: JackBook.com
Score : 7/10
Type : New Blogger Template (.xml)
Review :
Excellent web 2.0 design totally inside this blogger skin. Infact, this cool template can give users and readers fresh blue aura. Just like it's name. But honestly I said that black and white background bars behind it is too noisy. May be it will be great if added some gradients. But any way this template is deserved to be labeled as web 2.0 skin. So you also have right to download it.

What more can I say but download this template and use it if you like it. It is you on your own choices. Added BlogSocializer widget by us.

Mirror here.

Labels: new

Read more | Download

Posted at 8:01 AM</a>. Add/view 0 comments.

Rounded Tab menu dark layout

Original Publisher: JackBook.com
Score : 8/10
Type : New Blogger Template (.xml)
Review :
Excellent design and simple interface, this dark dfTheme 2.0d blogger skin is available for download free. Ported and published under JackBook.com this cool template made your blog simple. Simplify your blog and simplify your design.

May be you need to edit some logo or you can just use it. Everything works fine. Added socializer widget by us.

Mirror here.

Labels: new

Read more | Download

Posted at 8:00 AM</a>. Add/view 2 comments.

Web 2.0 more coloumns layout

Original Publisher: JackBook.com
Score : 7/10
Type : New Blogger Template (.xml)
Review :
Named as Buy iPod Blogger template, released from JackBook.com site. This blogger skin is totally good design and has more colomns to use. Users can place any ads or banner in just editing original xml code and set up their ads code, including Google ads. More breathing areaa can be found easily as it is simple detected character from web 2.0 layout. Coloumns are rounded corners. Nice a bit dark template.

Included editable psd file to change blog logo, and also other images used by this template. If you need than you can host it else where you want. Very simple and neat to modify. You have to download it trust me. Added some widget by us too.

Miror here.

Labels: new

Read more | Download

Posted at 7:56 AM</a>. Add/view 0 comments.

6 Most wanted web 2.0 fonts Free

What font to be used for your blog web 2.0 logo is? Perhaps you'll choose some elegant fonts. But not all elegant fonts are distributed freely. It is suggested to use simple, cool, and elegant fonts for your logo to make it more simplified web 2.0 ready. Some of them are Arial, Georgia, Verdana, Trebuchet MS & Co. as well as Calibri, Cambria, Candara, Constantia and Corbel, they are automatically - almost - included in your system. Of course they are other fonts out there you can download free. Below are picked up 6 selected free web 2.0 fonts with extremely cool, trendy, excellent design and typography. Those are most wanted web 2.0 free to use fonts.

Delicious Exotic Font

This exotic font is available for download at this location. Named Delicious, better to be used with more character spacing. The Delicious italic is not a slanted roman, but a true italic. Serif, Mac / PC. It makes your logo more slight creative in shape, simplicity in your blog soul. Download this Delicious cool font from our linked mirror in the bottom of this post.

Diavlo Stable Font

Very simple but elegance. That is way this font really be most wanted by font hunters. You can download it or visit the information and documentation here.

Fertigo Smooth Font

Create a bit creamy and juicy logo with this Fertigo font. Best of all its is free to download and to use.

Gentium basic font

Basically this font is very capable to conquare your blog contents. Simplicity roman and slightly elegant typing. Not so suggested for blog logo, but it is fine to use inside your main contents.

Pigiarniq Font

You can taste the feel of web 2.0 font in using logo made by this Pigiarniq font. In such strange way, this font could be like sans-serif family. But it is not, and it is standing still as another web 2.0 free font.

Qlassik Web 2.0 font

Using Qlassik doesn't mean to be classically layout. Qlassik is not a classic font. It has brand new kind of webish 2.0 when you use it correctly. More square and sharp a bit. Designed with excellent typography and wonderful art.

Above are some picked up free web 2.0 fonts. They give more precisly web 2.0 soul inside your blog design. As it is said to be free, than it is really free to download below. Just don't hesitate to click it.

Here for Delicious, Fertigo, and Diavlo. As requested by its owner.

Labels: resource

Read more | Download

Posted at 7:54 AM</a>. Add/view 2 comments.

// Tuesday, January 8, 2008

Designing web 2.0 comments badges Tutorial

Again, this tutorial will try how to make a web 2.0 stylish comment badges using Adobe Photoshop CS2 in 11 easy steps. All steps explained so simple and clear enough to understand. Blogs include many elements that the user and readers can interact with. One of the most popular elements are comments shout button. They get readers to interact with the blog and give feedback. Now you can make your own comment badge and add it to your comments list. Of course the main idea of adding web 2.0 comment badges that is to make our blog more attractive. Here it is the final result of this tutoial should be. You can make it more better with your own creativity.

The way it made is very simple but it comes with trendy cool result. Oke so lets begin our tutorial. Please make sure you are ready with your Photoshop open.

1. New Document
Make a new PSD document. Hit Ctrl+N on keyboard or by selecting File menu than click New. A dialogue box should appear. You can use any width and height value but it'd be better to use 400x400px than crop it later as we need.

2. Set the Base
Change your foreground and background colours. I use #99ff00 at Foreground and #00cc00 at background. Later on you can plan any color scheme for your web 2.0 comment badges from this step. Here I would like to make it green. In web 2.0 green is the new gery. Green is the unofficial color of web 2.0. As the new grey, green looked like more simply natural.

3. Rounded Shape
Time to create the basic shape. Bring Rounded Rectangle Tool and make sure to match this setting. There is no defined size of your rectangle should be. Just improve and match it to fit your blog layout.

4. Custom Shape
Now change your rectangle tool to Custom Shape Tool. Look for the shape like this one below. If you can find it, try to reset displyaed items to All. Just click small arrow of its right.

5. Draw & Rotate
Draw your new shape below your previously rounded rectangle. Than Rotate the shape to 180 degrees. Hit Ctrl+T on keyboard than set angle properties to match below.

6. Merged
You need to unify your two shape. Just move (nudge) it to be shaped as below. Now select the shape layers, hold Ctrl button than click the two layers of your shapes. After both layer selected, Right-click on it and select Merge Layers to merge them as one layer.

7. Web 2.0 effects.
It is time to manipulate your new comment badge to be more web 2.0 stylish. With the merged layer still selected, now open up Layer Blending Option. Select Layer menu, than Layer style, now click Blending option. Or simply right click on the merged layer and select Blending option. Blending effects we'll use here are Drop Shadow, Outer Glow, Inner Glow, and Gradient overlay. Set them as below illustration.

After clicking OK, you should find a result is like this one. Or almost be like this one below.
middle result

8. Texting
Give some text on it. As you'll use this badge for comments badge, so we'll type some words such "Comments Shout" or others. Use some simple fonts such Tahoma, Trebuchet MS, Segoe UI, or Calibri. Than aplly text effect like below illustration. Just bring up Blending option for text layer.

9. Cute Icon
Spicy up a bit your comments badge. In this case just look for cool flowered shape, or other cute shape from Custom Shape Tool.

Apply this blending effect to make it more cute. Use strong colour and combine it with basic shape colour. Here I use Pink and Yellow..

10. Crop Icon out.
CTrl+Click at merged badge shape. While your shape is selected, right-click on it than click Select Inverse.

Right click and Select Inverse

Now click on Icon layer to select it. And than hit Delete button on keyboard.

If you did it correctly you should find result as below.

11. Spice a bit
Make a new layer, hold Ctrl+Shift+N on keyboard. Use Eliptical Marquee Tool and draw a little on your new layer. Now fill it using white colour.

Last step, change the Layer Opacity to about 50%.

Done
Finally, creating comments shout button in web 2.0 design is quite easy as described above. But steps on tutorial above are note absolute state to do. You can improve your skills, idea, creativity, and will. Improve your mind to create design. Here some of my other results using this tutorial.

Here you can download the PSD file of this tutorial to make it easier for you to get practice. But after you'd finished making your own, why don't you post it here and let me know your cool badge works. I almost forgot, if you also like this designing tutorial, please digg us or submit us to your fave social bookmarker.

Labels: tutorial

Read more | Download