Position Comment Date Above the Comment Body

I am so glad that blogger have finally release the new comment system and now we can start making it look better like wordpress comment system or any other platform. :-)

I have posted about how to improve your comment section to create more interaction and that include how to highlight the authors comment. I have seen now a few sites where there comment section looks great and look much more better than before.

Today let's make a little changes, if you have noticed the timestamp in your comment section is placed at the bottom of the body...i would rather place them at the top right next to the comments authors name. To make this possible we will move the timestamp code right next to the comment authors code. Here's how to do it:

Reminder: Before editing your template, make sure to save a copy of your template.

Let's start:

1. Go to your Dashboard - Layout - Edit Html
2. Tick the box to Expand Widget Templates
3. Click Ctrl+F then type <dd class='comment-footer'>,will then get to the code below
   
4. This code below is what we need which you can find right after <dd class='comment-footer'>
   
   

<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>

5. We will move the above code right after <data:commentPostedByMsg/> then save.

Now look at what you have just done....it looks better than having the timestamps at the bottom of the comment body right!?

I hope you enjoy this tutorial as much as i am...until next time.

How To Add ScrollBar To The Sidebar

I find this very useful to those Bloggers who would prefer to put their list of link in the sidebar. For bloggers even though blogspot have no potential of adding another page with the help of talented bloggers we can now do it, please read my post How not to show Post Date When You Make Your ABout Me Page -- this is if you want to ad your link in your navigation page but for those who want the list to be seen in their sidebar then here's my tut's for you.

Entrecard is very Popular of connecting each blogger and now each blogger created a great list of friends, drop list and so on...

Here is how to add a scroll bar to save some space of your sidebar.

• Go to your Dashboard, Layout, Edit HTML.

Reminder before we start: Always download your template for safety reason.

• Type Ctrl+F type sidebar content
• Copy this code below right after the /* Sidebar Content */
  

/* Sidebar Content */
#LinkList1{
height:200px;
overflow:auto;
}

then save.

That LinkList1 (Color Blue) Replace them with the title you name of your list example: when you add the widget you title them as "Drop List" then that's the word you replace -- but to make it safe and to save more time of errors here's what to do.

• Edit HTML - tick the Expand Widget Templates
• Ctrl+F type <div id='sidebar-wrapper'>
  

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Subscribe1' locked='false' title='Subscribe To' type='Subscribe'/>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'/>
</b:section>
</div>

In my sidebar-wrapper it shows that the id in that sidebar are Subscribe1 and LinkList1 -- Linklist is what i named my list so i copy the "LinkList1" (Blue) then paste it to my sidebar content, you can change the height according to your liking.

This scrollbar toturial is only apply if you want to put scrollbar to only one widget, if you want more than one widget or the whole sidebar of even within your post then we added another code but that's for now i hope this helps and find it useful.

How to Make Rounded Corner for your Site

Rounded Corner is in and it added attraction to your post and most of all of to your site. I pushed my self to learn a rounded corner thanks to my hubby, he wanted a rounded corner around he's body post and i finally found out how after many attempts and trial and error of course with the use of cornershop a corner generator to get a perfect corner (I tried to make my own but it looks funny) glad i found this generator thanks to the creator.

What we need?
corneshop - corner generator
wellstyled - Colorscheme Generator

First decide what color you want, this is important because you need to work with your template background and the color of the box, when you create the graphic you need to make sure that page background will blend to the color of your template...you will find that after you follow my tutorial and then you can just play around of the color scheme for your post body.

I assume you have already open the Cornershop and WS -- copy the color code (RGB) that you want to the cornershop box background and page background, you will see the result when you click create graphics make sure you put 20 in the corner radius if you want the result the same as to my demo otherwise experiment according to your likeness of how round you wants the corner to be.

Before we start to the rounded corner first, Click Ctrl+F type .post { them make sure your background is the same as your page background

.post {
margin:.5em 0 1.5em;
background: #FF66AA;
}

Work with CSS Code and HTML
After you click the create graphics you will be given a code CSS Code, HTML and 4 graphics (right click, save link as then upload to Google pages or any free link uploader) this is all we need to create this nice rounded corner.

Go to your Dashboard - Layout - Edit HTML (Make sure you save you full template to make it safe)

1. Click Ctrl+F ]]></b:skin> then copy the CSS Code above the ]]></b:skin>
2. Replace the 4 links according the each code (se.gif, ne.gif, sw.gif and nw.gif) Then save.

Now, the tricky part HTML Code -- You must place them in the right place or else disaster (Just Kidding).

• Click Ctrl+F type <div class='post hentry'> -- Place the HTML Code green after the above code.
  

<div class='box'>
<div class='boxtop'><div></div></div>
<div class='boxcontent'>
<!-- Content goes here -->
</div>
<div class='boxbottom'><div></div></div>
</div>

• Click Ctrl+F again this time type <div class='post-footer-line post-footer-line-3'/> -- Place the HTML code Blue before </b:includable>
  

Do not save yet, click Preview to make sure you won't get error, if satisfied then save.

I suggest to use a test site until you know what your doing and confident enough to place it to your site to make it safe and not to lose your template designs etc. and i hope you enjoy this as much as i am.

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.
   

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