Put an Icon beside your Navigational Button

I really like a clean yet unique designs of blog templates. I like playing with the CSS, the more i learned and understand how it work the more i like to experiment with it. One of my favorite web design site is Web Designer Wall -- and if you read this post 2008 design trends you will be amazed of artistic sites.

It look more attractive if your navigation buttons have an icon beside them, look at my navmenu and in my sidebar subscription menu. If you have don't have any navigation pages yet and you want to put them in your blog follow the steps i have in Steps on how to create your contact page and navigational button and when your done, you can come back and follow this steps to add icons besides you navigation pages.

Lets begin with this simple steps.
What we need to add a span tag inside your navigation button to make it look like this below:

<div id="navmenu">
<ul>
<li><span class="home"><a href="http://www.yourlinkurl.com">Home<span></span></a></span></li>
<li><span class="about"><a href="http://www.yourlinkurl.com">About<span></span></a></span></li>
<li><span class="RSS"><a href="http://www.yourlinkurl.com">RSS<span></span></a></span></li>
</ul></div>

Go to your Dashboard, Layout, Page Element then Html/javascript then add the above code.

The span class (Mark in Green) is where we place the icon, but don't be confuse because the url of the icon will be placed using the CSS -- you will see that in my next explanation below. One more thing that you need to remember is the div id (Mark in blue) take note that the navmenu should be the same name placed in your CSS.

Now, the CSS code to complete the process:

}
#navmenu ul li { display: inline; font-weight: bold; list-style-type: none; padding: 5px 5px 5px 0; margin: 0; }
#navmenu li span.home { background: url('http://youriconurl.jpg') no-repeat; padding: 0 0 0 20px; }
#navmenu li span.about { background: url('http://youriconurl.jpg') no-repeat; padding: 0 0 0 20px; }
#navmenu li span.RSS { background: url('http://youriconurl.jpg') no-repeat; padding: 0 0 0 20px; }
}

Note: If you want to add another page go to your page element and another link from your html/javascript then add another line in your CSS Code (Mark in blue).

You're Done! i hope you find it easy to follow. Enjoy and i also included some icon resources for your.

Icon Resources:

1. Iconlet.com - Icon search engine, it's a free icon for your navmenu.
2. Intersmash - 300 images from 1800 sites - great source of icons.
3. Freeicon - Free beautiful web icons.
4. Smashingmagazine - Of course, my favorite.
5. Freeicondownloads.com - Free downloads of loads of icons.
   

Table of Content For Your Site

This is a very useful hack. Can you see my Table of Content? look at my sidebar, click show the table of content -- so....what do you think? do you like it?.

Hans from Beautiful Beta works really hard for this. If you want to put a TOC in your blog so that you readers can easily find the content that they want you can follow the simple steps BlogTOC Widget Released, If you have more than 100 post read this beyond the 100 post limits.

I decided to just link you to the original post instead of posting them here because the instruction is very clear and easy to follow but if you have trouble i can still help you. You can change the background color to match your site and the border if you wanted too. Just look at the TOC CSS and look at the background and border and change them to your liking.

I hope you find this information useful.

Update: At the moment, i removed the TOC because it's not working....not sure whats the problem, will be posting soon as i find out.

Arte y Pico Award For TBN

I would like to say thank you from Mamaflo, she passed me the Arte y Pico Award, aside from the award itself; she gave a very wonderful and kind word about my site and i am truly honored, inspired and happy at the same time that i able to help some bloggers like mamaflo. I would like to share here the reason why she gave me the piece of this award:

"The Buzz Nutter because I've learned so much from this blog. The atmosphere is upbeat and positive and if you ask a question, you get a response - What a novel approach!!"

Isn't it sweet!

What is Arte y Pico Award?
"The "Arte y Pico" award was created and to be given to bloggers who inspire others with their creative energy and their talents, whether it be writing, artwork in all media's. When you receive this award it is considered a "special honor". Once you have received this award, you are to pass it on to at least 5 others."

Now it's my turn to pass this wonderful award to 5 bloggers who inspires me in their special way.

BlogU - Because she is a great help to every blogger, If one blogger ask for help she makes a great explanation quick and easy to follow.

BloggerBuster - I learned so much from her site...she always have find of new ways to make blog a better place.

Cheaper By The Half Dozen - Her site is entertaining, i find her a great inspiration for mums. Imagine having six kids, In my motherhood side she inspires me.

Eyespi20 - Because her site is easy on the eye. A straight forward blogger with great content.

My so called life - I Love visiting her site because she have a great talent in photography, a very positive atmosphere.

How to Add a Message Board to your Blog Site

How would you like to add a message board to your site? Look at the top of my latest post it's my message board...i can change any text whenever i want without intruding my other post or template.

Their are times where we want to leave a message to our readers and we want the message to stay at the top of our post. I have read a few blogger put a message at the top of their post then they start the message with "This is not a post, scroll down to read my post" it's annoying isn't it Nothing to worry anymore, Here's how to add a message board to your template or blog.

Open your Blogger Dashboard click Layout then Edit HTML

1. Hit Ctrl+F key then find <div id='content-wrapper'>
2. Add this code:
   

<div id='message-board'>
<b:section class='msgbrd' id='msgbrd' maxwidgets='1' showaddelement='yes'>
<b:widget id='Text1' locked='false' title='' type='Text'/>
</b:section>
</div>

Now we need to add the Style for your Message Board:
Hit Ctrl+F again then look for ]]></b:skin> -- copy below code before ]]></b:skin>

/* Messageboard */
.msgbrd h2 {
display: none;
}

.msgbrd .widget-content {
padding: 2px 2% 10px;
background-color: #FFFFFF;
border: 2px solid #cccccc;
color: #dbdbff;
font:italic normal 100% Helvetica, Arial, sans-serif;
font-size: 100%;
text-align: center;
}

Edit the color, font to match your site color.

Add your Messages

You can now go to your Page Element and see the new page element at the top after your header's page element (See image below) then open it and start your text.

You're Done!

I hope you enjoy this tutorial and it helps your blogging aswell.

Source: Hans or Beautiful Beta

Color me World

What a title, but isn't it color is life? Everywhere we look color is there. Now, if you do it yourself your template like most of us bloggers, we like to work on white background because we are not sure with colors...look at my banner and the body of my site it's not match, it's not even close lol! -- I am working with my header but my brain is like everywhere and not conditioned...so that stays like that until i am ready still thinking for great design.

What i would like to share to day is about colors. I have four sites here that are very helpful for you...you have nothing to worry if the color of your site match or what.

Check this sites and let me know what you think.

1. Colr.org - I love this, Load your own image (Images that you are inspired with) and they will generate the code for you, fun and So much helpful...very safe.
2. WellStyled - Paster, Contrast, Pale choose what type of color you like...very handy and safe.
   
3. Colourlovers - I am not sure if this colors are obsolete but i love the color collection, have a look and see it yourself.
4. W3 Colornames - Some of us likes to work with color names.
   

There so many colors out there that sometimes we are not sure anymore that is why some bloggers settled with white and black not just to be safe but because it's clean and simple but you know sometimes its great to take risk and have a unique color of site but safe at the same time, a color that is not pain in the eye and a color that is so relaxing.

Try to take the risk of choosing color of your site, experiment and dare to be unique.

I Finally able to made my very own vector images

Do you remember the post Vector Graphic Image manipulation which are free to download -- I have said that i have not tried Gimp yet, though i suggested to download them because i know that their is a great value of this software...will, now i can vouch that this software are very -very useful. If you can't afford Adobe Gimp is for you.

If you are a kind of person like me who loves designs, vectors and drawings or even you just love doodling then download them. In my other site i started Freebie Friday because i get addicted making vector images, i will put a few images here for you to download if you like and to see what i am talking about.

With this images i used inkscape to draw and then i used gimp for background using gradients and brushes, It's fun and addictive. Please check the vector images i made.

To check more here's the link of my Friday Frebbie; Frebbie Friday 2.

When Negative Comment Strike

What would you do as a blogger? I am sure every one of us receive a negative comment every now and then it's just a matter of time. Is it a laughing matter or a serious matter? How do you deal them them? Do you take them personally or do you move on without dealing this?

I remember this instance, awhile back when i was using link referral and i was so excited to read the comment of visitors, sometimes it's the same tune of comment but their are visitors that are true and give what they really think of your blog or your site as a whole. One time there is one blogger leave a comment saying very little and it goes like this "It's great collection of copy and paste stuff" hahh! what the hell is he talking about? I am so mad, because even though my post are lack of grammar but their mine, i never copy and paste...so i went to he's site to check of who the hell is he and there you go, it's a collection of copy and paste himself. So i responded to him and the rest is history. I will accept if it is true and learn from them but if it is not then their will be corrections. Even though this is not a comment placed in my site but it is comment about my site so i class this as belong to my topic today.

Laughing Matter?
I am not sure if it is, maybe after a few days, months etc...-- like now that i remember that certain comment i just laugh to he's comment and to my response.

Serious Matter?
Yes for me. It's a matter of life and death so don't miss with me (Just Kidding); I am passionate of what i am doing -- I love to hear negative feedback because that mean i will grow i have plenty of room for that. No matter what form of comment positive or negative comment every blogger can benefit from that, but if, only if you make sense with your comment and has constructive meaning other than that it means war.

Hide under Anonymous
When you leave negative comment, do not hide...don't be a coward. This is a real problem of every blogger "Mr/Ms Anonymous" Hey! show yourself and stand to every word you say but if you can't then just don't, just leave it in your mind.

We just can't please everybody. You Post something that you though great article but some people think it's stupid or ___________ (Fill the in the blank or what's on your mind). So When negative comment strike what would you do? There are bloggers delete them and just carry on like nothing happens, Some take it seriously and strike back but if it is constructive they learn that them.

So how do you deal with the negative comments? should you delete them or should it stay in you site? please share them here.

Add A CSS Pop-ups To Your Navigation Menu

I would like to give credit to the origin of this CSS Eric Meyer's this gives me an idea and i have done a few trial and error. I have come up a few Tutorial but i am still working to the other one where i want to use images.

This Tutorial is about how to add Popups to your existing navigation menu.

Things to do:

1. Add CSS Codes of your pop-ups
2. Add div code to your existing navigation html/javascript code
3. Optional: draw a background images for your pop-ups

Once you play around with this one this will give you a few idea and you can modify and create a more attractive design to either your navigation menu or post.

Important! Before you start, please download your full template for your safety.

Lets Start! with CSS Code: Go to your Dashboard, Layout then Edit Html -- Ctrl+F type ]]></b:skin>

Then Place this Code BEFORE ]]></b:skin>

#navlinks {
position:relative;
padding:9px;
margin-bottom:25px
}

#navlinks a:hover {
text-decoration:none
}
#navlinks a span {
display:none
}

#navlinks .home span {
width: 202px;
height: 31px;
background: url(Image.png) no-repeat;

}

#navlinks .about span {
width: 202px;
height: 31px;
background: url(image.png) no-repeat;

}

#navlinks .contact span {
width: 202px;
height: 31px;
background: url(image.png) no-repeat;

}

#navlinks .Links span {
width: 202px;
height: 31px;
background: url(image.png) no-repeat;
}

#navlinks a:hover span {
display: block;
position:absolute;
top:0;
left:0px;
}

Then save your template.

Note: Only include the code that are marked as blue if you want to add background, if not then take them off and that is the optional.

Next....

Open the Html/javascript code of your navigation menu and replace with the code below.

<div id="navlinks">
<ul>
<li><span class="home"><a href="http://www.yoururl.com">Home<span>Go to Home</span></a></span></li>
<li><span class="about"><a href="http://www.yoururl.com">About<span>Want to know more?</span></a></span></li>
<li><span class="contact"><a href="http://www.yoururl.com">Contact<span>If you need for something</span></a></span></li>
<li><span class="Links"><a href="http://www.yoururl.com">Links<span>Check if you are in my list</span></a></span></li>
</ul>
</div><!-- /navlinks -->

If you don't want to replace, you can manually add the code below instead.

Add the once that are marked red to your existing navigation menu.

There you go, you can check my navigation menu for demo. I hope you find this tutorial helpful, it's easy and it's a simple yet add value to your blog design.

A Big Thank You

Now it's my turn to say a BIG Thank You to all of my regular droppers. If you are going to look at the number of drops i got from them it's something that i really appreciate it's shows consistency and loyalty.

So guys all of you deserves a shout out from my site and i thank you all.

Dropper	# of drops
Turnip of Power	30
Fendy's BitComet Blog	30
On The Bricks	30
Chica & Pumuckl - Funny Cats in Egypt	30
Mommieshome.net	29
Squeaky's - Madmouse Blog	29
The Path to the Pegasus Letter	29
The Success	29
CK Marketing	29
MamaFlo's Place	29

I added everyone to my blogroll. Thanks once again.