A Simple Way To Use A Drop Cap Large First Letter On Your Blog

A very popular effect used in magazines and newspapers is a drop cap first letter to paragraphs.This effect can also be found on many blogs and websites.The effect is a large first letter stretching down three or four lines with the text wrapped around.The drop cap letter can also use a different font and can be a different color to the rest of the text.Almost two years ago i published a post showing how to add a Drop Cap to your blog, in this post i have an even easier more effective method.This method needs just a few lines of Css to be added to your template then the first letter of every post on your blog will automatically be a drop cap.You can then choose the color and font of the drop cap.Check out the Blogger screenshot, demo and tutorial below.Wordpress users can use the Wordpress Drop Cap Plugin.

Add The Drop Cap Large First Letter To Your Blogger

Click Here To View Full Post >>

How To Add Stacked Polaroid And Other Cool Effects To Images

There are hundreds of image editing and resizing services available online so finding a quick and easy option can be hard.One service i use regularly is Dr Pic as it has just a few quick editing options and a re size option with an instant preview.The stacked Polaroid effect is probably the one i use most and i have received a few Emails asking how it's done.So i have created a short video to show you how to use Dr Pic to edit and re size your images.
Click Here To View Full Post >>

A Neat Bold Red Drop Down Menu For Blogger Using Just Css

In the last post we had a tutorial for a very unique style of drop down navigation menu for Blogger.That menu used a horizontal bar as the drop down to display links on hover.This menu uses the more conventional style of a vertical drop down to display links.It has a large bold red on grey color scheme that stands out and looks great.As with the last menu it's built purely from Css using just two images.Below you can see the screenshot and a live demo to see it in action.





This menu is also courtesy of the awesome Free Css Menu, let's add it to your blog.

Add The Bold Red Drop Down Menu To Blogger

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In Your Blogger Dashboard Click Design > Edit Html



Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

]]></b:skin>

Step 3. Copy and paste the following code Directly Above / before ]]></b:skin>

Note - This is a scroll box make sure to get all the code.

/*Start Css Menu*/
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-U2FsQE7q0jNY17yrgcMVThfnVn5xBelXUpYTfMRB10tbda8Z16_3jFYMmOHV9QRl__RW6kKR8z78rvYOWRRhaxWkhD6kMO99LS_FcbZaOfn0M00IxSAVjGYQ_jx7Xi1pHTzMBN4jYc4/s1600/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #a80329;
border-right:2px solid #a80329;
border-bottom:2px solid #a80329;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0iYSaskXL0_umdaC91nEe9kRqXAsyWq9CHG1b8bjBhix04F3fF82vOGfquPaL18DFl79O1ihWu0EfI46HwJh6yKL7NrCdqWOa5Z5PRqT3eNzlSfRW0pILKZIQKsv_ti6aMhRpPdRge5q6/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}

/*End Css Menu from http://www.spiceupyourblog.com*/

Step 4. Save your template.

That's the Css added next is to add the html for your menu.

Now go to your blogs Design Page, we will be adding the menu across your blog below the header.This area is called Cross Column and can be seen in the image below.If your blog does not have this section available you can see how to enable it here - Add Full Width Cross Column Gadgets To Blogger.

Add The Menu Html

In your blogs Design Page click Add A Gadget > Choose Html/Javascript > Copy and paste the following code into the Html/Javascript gadget :

<div class="menu">

<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#" >Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>

This is the code that makes up the menu in the demo above.Replace the hash tags (#) with your links and the text with your text.If you take a few minutes to reference the demo and the code you should see how it works.If you want to add more links you can do so in the same way, once again take a few minutes to look at the layout of the code and you will see how its done.

Template Designer Tabs Fix

If you use a template from the Blogger Template Designer there is a section of Css that will effect this or any menu you place in the cross column section.This is called tabs and you will need to remove or over ride the tabs css.I have made a short video to show you how to remove it.You can see the video here - Remove Tabs Css.

That's it simple ! Make sure to check out more of our Css tutorials and Blogger gadgets.

Drop Your Comments And Questions Below.

How To Use Images For List Bullet Points On Your Blog

In this post i have a really cool Blog Design Tip to spice up the lists on your blog.When you create an ordered list, items in the list are numbered, and in an unordered list items have what is called a bullet point.What we will do in this post is replace the default bullet point with an image.We do this with just a small snippet of Css including the image URL.To make it as easy as possible i have 10 ready to use images for your bullet points but you can of course use your own image.I also have this set so you can just use the image bullet point on selected lists.If we set it to work on all lists on your blog it could mess up your sidebar and other sections.
Click Here To View Full Post >>

New Blogger Feature - Add A Favicon To Your Blog

One of the things that can give a blog more of an identity and a brand is a logo that people will come to associate with the blog.In the same way we become used to seeing the logo of a blog also used as the favicon.Favicons are an important part of how we see a blog and how we remember a blog.In a previous Blogger Tip i showed you how to add a favicon to blogs on Blogger but today Blogger have taken action and made it part of the options on your blogs design page.So from now on with just two clicks you can add a custom favicon to your blog.



What is a favicon ? A Favicon is the small image you see beside the address bar in your browser and depending on the browser you use it is also visible in the tab menu.If you look beside the address for this page at the top of your page you should see the same brush logo that is in the header.For more information here is a link to the wikipedia page on Favicons.

To see how to have a custom favicon on your blog check out the blogger in draft post here - Customize Your Favicon.

Drop Your Comments And Questions Below.

Beautiful jQuery Lavalamp Floating Bubble Menu For Blogger In 6 Styles

I recently realised i had not covered navigation menus too much in our Blogger Tips on Spice Up Your Blog.I Guess most custom templates already have a menu and templates from the template designer have tabs enabled which will turn a link list or page list into a menu.However i knew i wanted to cover the jQuery lava lamp or floating bubble menu as it is seriously cool, interactive and i have not seen it on any Blogger blog.The lava lamp menu has an effect you may have seen on other websites, a bubble is visible behind the first link title (Usually Home) on the menu and when you place your cursor over another link title the bubble slides up to that link.It looks awesome and as ever the use of jQuery makes it possible and smooth.As an extra bonus we have this effect added to 6 different color styles of menu you can quickly add to your blog !
Click Here To View Full Post >>

Beautiful jQuery Lavalamp Floating Bubble Menu For Blogger In 6 Styles

I recently realised i had not covered navigation menus too much in our Blogger Tips on Spice Up Your Blog.I Guess most custom templates already have a menu and templates from the template designer have tabs enabled which will turn a link list or page list into a menu.However i knew i wanted to cover the jQuery lava lamp or floating bubble menu as it is seriously cool, interactive and i have not seen it on any Blogger blog.The lava lamp menu has an effect you may have seen on other websites, a bubble is visible behind the first link title (Usually Home) on the menu and when you place your cursor over another link title the bubble slides up to that link.It looks awesome and as ever the use of jQuery makes it possible and smooth.As an extra bonus we have this effect added to 6 different color styles of menu you can quickly add to your blog !
Click Here To View Full Post >>

Display Post Author, Date And Labels With Icons Below Blogger Post Titles

On the recent post showing how to Display A Default Avatar For Anonymous Comments a comment by RedCherii asked "How do you put those little icons beside your post details (author, date, label) and make them appear below your post title?".The icons and details RedCherii asked about can be seen below the title of this and every post on Spice Up Your Blog.So for Redcherri and anyone else who likes them, in this post i will show you how to add them to your blog.What we are adding is the default Author Name, Post Date And Labels from the post with 16x16 icons to the left of each.I also have a pipe character splitting each, the code will be placed in your template to display this directly below the post titles.
Click Here To View Full Post >>

An Amazing jQuery Image Zoom Effect For Blogger

Many of the latest posts have been looking at Css effects and Image effects so in this post we will continue with the images but bring some jQuery into the mix.If your a beginner thinking whats he talking about don't worry we will have all the steps set up for simple copy and paste.The effect we will achieve in this post is very cool.When you add an image to your blog you can allow users to hover over that image and a larger version appears.Users can then move the cursor around the small image and see it zoomed.The demo below will show you exactly how it works.



Click Here To View Full Post >>

An Amazing jQuery Image Zoom Effect For Blogger

Many of the latest posts have been looking at Css effects and Image effects so in this post we will continue with the images but bring some jQuery into the mix.If your a beginner thinking whats he talking about don't worry we will have all the steps set up for simple copy and paste.The effect we will achieve in this post is very cool.When you add an image to your blog you can allow users to hover over that image and a larger version appears.Users can then move the cursor around the small image and see it zoomed.The demo below will show you exactly how it works.



Click Here To View Full Post >>

An Amazing jQuery Image Zoom Effect For Blogger

Many of the latest posts have been looking at Css effects and Image effects so in this post we will continue with the images but bring some jQuery into the mix.If your a beginner thinking whats he talking about don't worry we will have all the steps set up for simple copy and paste.The effect we will achieve in this post is very cool.When you add an image to your blog you can allow users to hover over that image and a larger version appears.Users can then move the cursor around the small image and see it zoomed.The demo below will show you exactly how it works.



Click Here To View Full Post >>

Add A Simple Css Bump Effect To Your Blogs Images

We all like images effects and adding some style to the pictures we use in our blogs posts.Some effects can be quiet elaborate (I have the very cool light box effect just about ready to publish) but sometimes a simple hover effect looks great.In a recent post i showed a rollover effect with some social icons changing one image to another on hover (we may look at using Css Sprites in future), in this post we will make your images simply Bump !
Click Here To View Full Post >>

Add A Simple Css Bump Effect To Your Blogs Images

We all like images effects and adding some style to the pictures we use in our blogs posts.Some effects can be quiet elaborate (I have the very cool light box effect just about ready to publish) but sometimes a simple hover effect looks great.In a recent post i showed a rollover effect with some social icons changing one image to another on hover (we may look at using Css Sprites in future), in this post we will make your images simply Bump !
Click Here To View Full Post >>

Simple Css Only Tooltip Hover Descriptions For Blogger

The Tooltip has become a common resource and is used by all the major sites to describe a link or give more help and information on a section of text.Often when using Google products you will see a small question mark that you can hover over to see a pop up with more information.I covered tooltips before using html, javascript and images to create the actual pop up.In this post however i have a really cool way to have tooltips on your blog using just Css.If your not too savy when it comes to this sort of thing, basically this is much easier, much faster to load and presents less chance of errors.
Click Here To View Full Post >>

Simple Css Only Tooltip Hover Descriptions For Blogger

The Tooltip has become a common resource and is used by all the major sites to describe a link or give more help and information on a section of text.Often when using Google products you will see a small question mark that you can hover over to see a pop up with more information.I covered tooltips before using html, javascript and images to create the actual pop up.In this post however i have a really cool way to have tooltips on your blog using just Css.If your not too savy when it comes to this sort of thing, basically this is much easier, much faster to load and presents less chance of errors.
Click Here To View Full Post >>

Display A Default Avatar Image For Anonymous Comments On Blogger

In the comments for my Recent Post about the New Blogger Design And Dashboard Going Live Ahmad Nuzul Asked "Can u make a post on how to make a custom avatar for anonymous comments? Thanks.".

No Problem !  In this post i will show you how you can have a default image appear as the Avatar Thumbnail for comments not only by anonymous commenter's but also for comments left using some of the other log in options or people that have no Image Uploaded to their Blogger / Google account.
Click Here To View Full Post >>

Display A Default Avatar Image For Anonymous Comments On Blogger

In the comments for my Recent Post about the New Blogger Design And Dashboard Going Live Ahmad Nuzul Asked "Can u make a post on how to make a custom avatar for anonymous comments? Thanks.".

No Problem !  In this post i will show you how you can have a default image appear as the Avatar Thumbnail for comments not only by anonymous commenter's but also for comments left using some of the other log in options or people that have no Image Uploaded to their Blogger / Google account.
Click Here To View Full Post >>

The New Blogger Dashboard And Design Is Live

Blogger today announced they have started the release of the New design Blogger Dashboard and User Interface Design.The release at first will be on Blogger In Draft, Quiet common for new releases but it will also be added to only some accounts at first .A random number of users will have the new Blogger dashboard from today when they log in via Blogger In Draft and over the next few days and weeks it will be added to more until all users have the new Dashboard in draft.Usually a new addition to blogger that is tested in draft finds its way on to the main blogger site within a week or two but a change this big could be longer.
Click Here To View Full Post >>

The New Blogger Dashboard And Design Is Live

Blogger today announced they have started the release of the New design Blogger Dashboard and User Interface Design.The release at first will be on Blogger In Draft, Quiet common for new releases but it will also be added to only some accounts at first .A random number of users will have the new Blogger dashboard from today when they log in via Blogger In Draft and over the next few days and weeks it will be added to more until all users have the new Dashboard in draft.Usually a new addition to blogger that is tested in draft finds its way on to the main blogger site within a week or two but a change this big could be longer.
Click Here To View Full Post >>

Use A Cool Envelope Background Image On Your Blogger Comments

In this post we are going to see how to add a really cool envelope image behind your Blog Comment Form.The envelope image will blend in with the comment form itself along with the Post A Comment Message, Post Comment and Preview Buttons and subscribe by email link.The image is grey with a nice design in the top left and a small icon will be below the subscribe by Email link users click to be notified of replies.

Click Here To View Full Post >>