A Real Drop Shadow Effect for Images

Last year I posted a tutorial on how to add borders in your post images which kinda gives a drop shadow effect. I used that technique before but now I'm using the real deal. As you can see, my images have a real drop shadow effect. Adding this effect plus your blog's cool design can attract potential readers. It's the new CSS3 feature

The only problem with this is that not all browsers support it, like Internet Explorer 6,7,8 and Opera. Mozilla Firefox, Google Chrome and Safari as far as I know supports the drop shadow effect.

Adding Marquee tag

Marquee tag "<marquee>" is used to make a moving text, image, links and etc. Usually you can see this in the news section of other websites. In my this blog I used this in my featured articles as you can see. The use of marquee tag "<marquee>" can be either good or bad to blog and your design, so I suggest use this tag properly.

Why do I use marquee tag?

Since marquee tag can make something move, it is easier for your readers to notice it and with a proper design it can surely add spice to your blog.

Adding Borders to your Images

A great way to spice up your images is to add borders in it with the use of CSS. You can use borders to make different effects like drop shadow and framed effect. This can help you bring life to your blogs. Here in my blog I used drop shadow border effect to the images in my posts to make it look floating and that is what I'm going to show you..

To do this first log in to your account -> Layout -> Edit HTML -> Under the Edit Template Box, Find .post img this class refers to all images in all your post.

Next is to add this code:

Styling your blogspot blog (Part5) - Make Round Borders Review

Last week I've done major blog enhancement to make it more functional and user-friendly. Now that I'm 90% done I want to get back to my writing and share a very nice tip on how to make your borders round.

Having a round borders somehow add style to your blog and when used properly it can take your blog design to the next level. Round borders are most likely applied to links to give more impression that it is a button.

Styling your blogspot blog (Part4) - Making Blog Wider Review

Making blog wider is very simple if your using blogger as your blogging tool. It only takes a very simple CSS to use. Most of the blogger I know only rely in the free templates blogspot has, so what if your template doesn't fulfill your blog's need or maybe you just want to maximize the space of your blog. Now I'll be teaching you how to make your blog wider but before I start I want you as always to make a back-up of your template which I discuss in the previous post I had styling your blogspot blog part 1. So if anythings goes wrong you can always restore it back to your original template.

Styling your blogspot blog (Part 3) - Navigation Bar Review

To make blog more professional looking, bloggers should only put things that the blog needs. Blogspot always put navigation bar automatically when you create a blog,



So what if you don't need it? or the design of the navigation bar contradict your blog's design?

Styling your blogspot blog (Part 2) - LinkWithin Review

LinkWithin is blog widget that make 3-5 links to your related posts from your blog. It puts a thumbnail picture under your posts or just plain text links. So by putting LinkWithin in your blog, you force your reader to see some of your blog posts which is by the way a SEO (Search Engine Optimization) tactic because you interlink your posts. I personally like this blog widget because of the following:

1. It's Free.
2. No Sign-up required.
3. No Advertisement Included.
4. Fast to install (less than 5 minutes)
   
5. Good SEO tactic.
6. Simple and Elegant Design.

Styling your blogspot blog (Part 1) - Floating Review

Today I will start sharing what I know to modify and create your own blogger theme. There are a lot of free blogger theme out there but as a web designer I don't use them, I want to create my own design for my own blog. Before anything else I want you to backup your existing template, just click on "Layout" and go to "Edit HTML" tab and click the "Download Full Template" link and then save to your desire location. Or you can simply copy all the code you see in the code frame and paste it to your word processing application, make sure you check the "Expand Widget Template" before doing copy and paste.