How to add a calendar icon as date header

From this tutorial, you will be able to add your very own calendar icon to your blogger! If you’re going to show the date on every post, why not do it with a little style and make it a little more appealing to viewers? If you want your calendar icon to appear on every post, read Blogspot Vision’s post on how to do that by clicking here to go to the post. Let’s get started but first and foremost, make sure you back-up your existing template, just in case it doesn’t turn out as expected.

Steps to follow:

1. Login to your Blogger dashboard

2. Go to Layout > Edit HTML (Click on “expand widgets” box)

3. Search for the following section code: ]]></b:skin>
and add the following section code below right before it:

.post .date {
    height: 50px;
    width: 45px;
    background: url(http://www.blogspotvision.com/bspotvision/itheme-calendar.gif) no-repeat;
    font: normal 22px Arial;
    color: #666666;
    text-align: center;
    padding: 0px 2px 0 0;
    line-height: 100%;
    float: left;
}
.post .date span {
    height: 16px;
    display: block;
    font: normal 11px Arial;
    color: #ffffff;
    text-align: center;
    padding-top: 5px;
}

4. Next, you will need to search for the following section code: <b:if cond='data:post.title'>
and add the following section code below right after it.

<div CLASS='post'>
<script type='text/javascript'>
    var timestamp = &quot;<data:post.timestamp/>&quot;;
    if (timestamp != &#39;&#39;) {
        var timesplit = timestamp.split(&quot;,&quot;);
        var date_yyyy = timesplit[2];
        var timesplit = timesplit[1].split(&quot; &quot;);
        var date_dd = timesplit[2];
        var date_mmm = timesplit[1].substring(0, 3);
    }
</script>
<div CLASS='date'>
<span><script type='text/javascript'>document.write(date_mmm);</script></span>
<script type='text/javascript'>document.write(date_dd);</script>
</div> </div>

5. Preview your page before Saving Template, and if all works fine, Save Template.

Note: You might have to adjust the post title margin and padding to fit your style of blog, you can also find free calendar icons in the icons section!

6. Next, you will need to adjust your settings by clicking Settings > Formatting > Timestamp Format, and adjust it to Sunday, August 02, 2009.

Your done!

How to add a horizontal navigation bar to your header

From this tutorial, you will be able to add a horizontal navigation bar to your header. As we all know, Blogger’s default templates doesn’t supply this option in it’s gadgets, but we are able to manually add it with html/javascript. Remember to always back up your current existing template before beginning any tutorials in case it doesn’t turn out as expected.

Steps to follow:

1. Login to your Blogger dashboard

2. Go to Layout > Edit HTML (Click on “expand widgets” box)

3. Now search for the following section code: ]]></b:skin>
and add the following section code below right BEFORE it

/* Menu Control
----------------------------------------------- */
.menu{
margin: 0;
padding: 0px;
font: bold 12px Verdana;
background: #000;
width:900px;
height:31px;
}

.menu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.menu ul li{
position: relative;
display: inline;
float: left;

}

.menu ul li a{
display: block;
background: #000;
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .menu ul li a{
display: inline-block;
}

.menu ul li a:link, .menu ul li a:visited{
color: white;
}

.menu ul li a:hover{
background: black;
color: white;
}

Note: You will need to replace the section code in red with your width’s template and adjust the height’s px to fit your style.

4. Next, you will need to search for the following section code:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

5. Add the following section code below right under it:

<div class='menu'>
<ul>
<li><a href='http://'>Home</a>
<li><a href='http://search/label/tutorials'>Tutorials</a></li>
    <li><a href='http://search/label/templates'>Templates</a></li>
    <li><a href='http://search/label/widgets'>Widgets</a></li>
  <li><a href='http://search/label/designs'>Designs</a></li>
<li><a href='http://search/label/icons'>Icons</a></li>
<li><a href='http://search/label/fonts'>Fonts</a></li>
      </li>
</ul>
<br style='clear: left'/>
</div>

Note: You will need to replace all links in blue with that of yours, and all texts in red are texts that will be displayed in the menu bar.

6. Your done! You can also add some designs to your horizontal bar, check out the design section.

Utility Widgets for Blogger

Easy Comments – Simple comment system that allows anyone to comment on any page of your blog. Get your readers feedback quickly and easily with “like this comment?” options and includes comment threading and more.

 

---

Recent Comments – Recent comments allows you to display the most recent commented posts on your blog. This widget can be modified by CSS to fit the style of your blogs layout and is highly recommended to have on a blog because of it’s ability to keep your viewers interaction with one another.

---

Popular Posts – This widget allows you to display a list of the ten most commented posts on your blog. Another recommended widget to have on a blog to keep your readers updated with the contents that have the most quality in your blog and can also be modified to fit blog style.

Social Widgets Services

MyBlogLog – a Yahoo! service that allows you to discover and connect with who’s checking out your blog, share online activity, photos, blog posts, videos, tweets, and more on a single page, updated automatically.

 

---

Add This – Allow easy access for your readers to share your content, and that generates more traffic back to your site! Add This has over 50 social networks and bookmark destinations and can analyze reports on how people are sharing your content.

 

---

friendfeed – Share all friendfeed activities with your viewers. Widget html can be modified to fit your style of blog.

 

 

---

Google friend connect – Display Google friends on your website. Allows users to join a site, see the other members, play games, rate and review your site, promote events, recommend pages they like, leave footprints, and more.

 

---

Delicious Linkrolls – Share your Delicious bookmarks on your blog. Linkrolls are a way for you to have your latest Delicious bookmarks displayed as part of your website. Widget html can be modified to fit your style of blog.

 

---

Twitter – Allows you to display tweets from your twitter page directly on your blog. Twitter services allows you to display anywhere from your last tweet to your last twenty tweets and also features a display of your twitter link for people to follow you with one click.

 

---

SocialFeed – Want to display all activities from all of your social media website on your blog? This widget allows users to display latest updates, photos, videos, and tweets! You can also customize the SocialFeed to display content from your favorite users and modify the html to fit your style of blog.

There are no coincidences

There are no coincidences in any successful blog today. Each and every one of those blogs had to experience ups and downs at one point of time or another, but what’s the most important factor that made these blogs more successful than the rest? Fortunately, it’s something all of us can develop over time, and it’s their willingness to learn and their ability to visualize and have a positive expectancy for everything they have tried to implement in the process of learning. Of course there are other specific factors that will make a blog successful, but those factors all drive down to the principle of positive expectancy.

This principle simply states that the more confident you expect something good to happen, the more likely it is to occur. When making changes to your blog, have confident that your changes will produce some kind of result, if it does not, look for something good you got to learn out of it. When you develop this key factor, you will start seeing changes in your personal life and as well as your blog. You will be able to see which changes you implement bring about positive results and which changes bring about negative ones. When starting off, many changes will initially appear as failures or unfortunate events, but later turn out to be exactly what needed to happen for you to achieve your ultimate goal.

7 Old Western type fonts

Here are seven clean Old Western type fonts for designing your blog. These fonts are for blogs with style and attitude. With its design already pre-made and ready for photoshop effects - Old Western type fonts will reduce a couple of work hours and not to mention the brain-dead days, when you just can’t seem to be creative – Old Western type fonts will give you that push or that spark to get on with it.

1. Bellbott

Preview | Download

2. Crowntit

Preview | Download

3. Dry Good

Preview | Download

4. Maverick

Preview | Download

5. Pirates

Preview | Download

6. Rustler

Preview | Download

7. Show Boa

Preview | Download

7 Useful comic type fonts

Here are seven unique and eye-catching comic type fonts you might find useful while designing your blog. Comic type fonts are usually fun to work with because they can go with almost any style, with a little bit of mixing and matching or matching and mixing, you could make your blog a lot more appealing to your readers.

1. 4 Starfac

Preview | Download

2. Arcadeam

Preview | Download

3. Day of The

Preview | Download

4. Flotsama

Preview | Download

5. Flotsamc

Preview | Download

6. Gilligan

Preview | Download

7. Ronnie

Preview | Download

7 Useful computer display fonts

Here are seven useful computer display type fonts for your blog. These are good for technology type blogs, but use your imagination and creativity, who knows what you could come up with!

1. Bazaroni

Preview Download

2. BD Brick

Preview Download

3. Dot28

Preview Download

4. Off On

Preview Download

5. Omega Max

Preview Download

6. TPF Disp

Preview Download

7. V5 Prophi

Preview Download

How to create a scheduled post

From this tutorial, you will be able to have any post scheduled to the date you want it to be posted. Having the option to create scheduled posts can be convenient for you if you were on vacation or if any technical problems were to arise and you find yourself being banned from posting for that moment. You won’t have to back up your template for this tutorial since it’s just simply an option that needs to be set under your posts.

Steps to follow:

1. After you have written your post, click Post Options in the bottom left corner of the post form.

2. The Reader Comments and Post date and time options will appear. Set the date and time you want your current post to be published, and select Publish Post to save it to a scheduled post.

Note: To un-schedule a post, simply save it as a draft at anytime before the published date.

Blog will be down

In the process of building a new computer, should be up in about two days.. but expect a lot of updates soon!

Free Socialize Part 2 Icons

Here is a set of free socialize icons by dryicons.com. This set contains the most popular social-network icons and is placed inside a sticker, making these icons useful for all kinds of web projects. Although initially intended for blogger users, these icons can be modified to go beyond that for use in various website genres. Be sure to check out and bookmark dryicons.com.

Author: dryicons.com
Amount of icons: 12
Icon Sizes: 32x32px, 48x48px, 64x64px and 128x128px
File Types: .png
Color/Shape: Circle icons placed inside a sticker
Other Info: Universal icons
Download Here

Happy 4th Of July Fireworks Javascript For Blogger

Happy 4th of July everybody and have a safe holiday! Here’s a little something for the special day.

You will need the following files for this tutorial:
1. red.gif
2. blue.gif
3. green.gif
4. orange.gif
5. firework.js

Note: You will need to save these files to your webserver.

Steps to follow:
1. Open the file firework.js

2. You will see the first part of the code like the following section code below. You will only need to modify the first part of the section code(in bold). For example:

//////////////////////////////////////////////////////////////// // Javascript made by Rasmus - http://www.peters1.dk // ////////////////////////////////////////////////////////////////

var FIRE_Path = "http://www.domain.com/firework/"; // Path to the directory containing the firework-pictures

var FIRE_no = 10; // Numbers of Rockets in one firework

var FIRE_Pause = 5; // Pause between the fireworks in seconds

var FIRE_SameColor = false; // true = The rockets have the same color in one firework

Note: You will need to change the section code in red to the link containing the firework-pictures. You can also modify the numbers of rockets in one firework with the text in blue. Text in orange indicates the pauses between the fireworks in seconds. And last but not least, the text in green is in conjunction with the colors of the firework, either true(rockets will have same color in one firework, or false(rockets that will have various colors in one firework.)
3. Once you have modified the script and uploaded it to your webserver, you will need to login to your Blogger dashboard

4. Go to Layout > Page Elements > Add a Gadget > HTML/JavaScript

5. Next, add the following section code:

<script type="text/javascript" src="http://www.domain.com/firework/firework.js"></script>

Note: You will need to change the section code in red to the link containing the firework script.

6. Select Save after you have added the section code and preview to see your fireworks!

How To Make Your Columns Of Equal Height

From this tutorial, you will be able to make all of your columns in your template of equal height. Having all columns with the same height can make your template look much more organized and in place to your readers. As we all know, bloggers default templates doesn't supply this option, but you will be able to modify it with one simple script. As always, make sure you download your current existing template just in case it doesn’t turn out as expected.

You will need this file for this tutorial
1. sameheight.js

Steps to follow:
1. Login to your Blogger dashboard

2. Go to Layout > Edit HTML (do not click on “expand widgets” box)

3. Search for the section code: ]]></b:skin>

4. Add the following section code right after it:

<script src='http://www.blogspotvision.com/bspotvision/scripts/sameheight.js' type='text/javascript'/>

<script type='text/javascript'>
function adjustLayout()
{
// Get natural heights
var cHeight = xHeight(&quot;main-wrapper&quot;);
var lHeight = xHeight(&quot;sidebar2&quot;);
// Find the maximum height
var maxHeight =
Math.max(cHeight, Math.max(lHeight));
// Assign maximum height to all columns
xHeight(&quot;main-wrapper&quot;, maxHeight);
xHeight(&quot;sidebar2&quot;, maxHeight);
// Show the footer
xShow(&quot;footer&quot;);
}
window.onload = function()
{
xAddEventListener(window, &quot;resize&quot;,
adjustLayout, false);
adjustLayout();
}
</script>

5. You will need to replace the link in red, with the link you uploaded the script to.

6. With the script right under it, all blues represent the main-wrapper(where your posts are located), all the orange represents your second column, which is, in most cases, your sidebar. You will need to replace the bolded and crossed out code above with yours. Main-wrappers are AKA main or main-content. Sidebar2 are AKA sidebar, right-column, or left-column.

Note: If you have more than two columns in your template, you will need to add another variable, which will represent another column. For example:

<script type='text/javascript'>
function adjustLayout()
{
// Get natural heights
var cHeight = xHeight(&quot;main-wrapper&quot;);
var lHeight = xHeight(&quot;sidebar2&quot;);
var gHeight = xHeight(&quot;anothersidebar&quot;);
// Find the maximum height
var maxHeight =
Math.max(cHeight, Math.max(lHeight, gHeight));
// Assign maximum height to all columns
xHeight(&quot;main-wrapper&quot;, maxHeight);
xHeight(&quot;sidebar2&quot;, maxHeight);
xHeight(&quot;anothersidebar&quot;, maxHeight);
// Show the footer
xShow(&quot;footer&quot;);
}
window.onload = function()
{
xAddEventListener(window, &quot;resize&quot;,
adjustLayout, false);
adjustLayout();
}
</script>

Note: Everything in red needs to be added for a third column and remember to change the crossed out “anothersidebar” to your other column’s id.

How To Install Twitter Widget To Your Blogger

For those of you who doesn't have Twitter yet, you should check it out. Many blogs today have a twitter page as well to allow their readers to have another source of the daily updates on your blog. From this tutorial, you will be able to add your very own twitter widget to your blog. There are two ways in which you can install this widget, either automatically(for beginners) or manually(for experienced). You will also need to have a twitter page already, you can sign up here: http://www.twitter.com/

Automatically

Steps you will need to follow:

1. Sign into your twitter page

2. Click Settings

3. Click "You can also add twitter to your site here" link

4. Click Blogger > Continue

5. Click Add to Blogger button

6. Click Add Widget

Manually

1. To add this widget manually, we go back to step 6 in automatic and instead of clicking add widget, simply click edit content

2. Copy the section code and paste it in HTML/JavaScript option