LawnyDesigns

How to add a jquery image slider to your blogger powered blog

webmaster@lawnydesigns.com (Lawny) — Mon, 06 Jul 2009 22:22:00 +0000

In this tutorial you will learn how to add a simple jquery image slider to your blogger powered blog note this will not work for those who have Javascript disabled in their web browser but most people have it enabled by default if you are not sure whether yours is disabled or not check the demo you should see a working image slider also all the images must be the exact same size as each other.

I recommend you download a backup copy of your template or use a test blog I'm going to use a 3 column template from my previous tutorial but it should work with any template now we need to download two scripts named jquery.js and s3Slider.js you can read more and download the scripts from this link or just grab the embedded source code from the demo.

Once you have the two scripts you can either upload them to your server or embed the scripts directly in the page i will show you both ways the first assuming that you have uploaded them to your server

go to layout > edit html and paste the following code just before the closing </head> tag making sure you replace the red comment with the direct link to the scripts if you have them on your own server

<script src='http://./jquery.js' type='text/javascript'/> 
<script src='http://./s3Slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#slider1').s3Slider({
timeOut: 5000
});
});
//]]>
</script>

otherwise if you do not have the scripts on your own server paste the following code just before the closing </head> tag

<script type='text/javascript'>
//<![CDATA[
/* paste contents of your scripts here */
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#slider1').s3Slider({
timeOut: 5000
});
});
//]]>
</script>

replacing the red comment with the full contents of the scripts you downloaded by opening them with a simple text editor the code in green is to set the duration of how long will one picture be shown on the page in milliseconds.

Once you have the scripts installed add the following CSS code adjusting the parts highlighted in red to the exact width and height of your images


#slider1 {
width:525px; /* To be same as image width */
height:237px; /* To be same as image height */
 position: relative; 
 overflow: hidden; 
 border:1px solid #eee;
 margin:0 auto;
}

#slider1Content {
width:525px; /* To be same as image width or wider */
 position: absolute;
 top: 0;
 list-style:none;
 margin:0;
 padding:0;
}
.slider1Image {
 float: left;
 position: relative;
 display: none;
}
.slider1Image span {
 position: absolute;
 font: 10px/15px Arial, Helvetica, sans-serif;
 padding: 10px 13px;
 width:550px;
 background-color: #000;
 filter: alpha(opacity=70);
 -moz-opacity: 0.7;
 -khtml-opacity: 0.7;
 opacity: 0.7;
 color: #fff;
 display: none;
 bottom:0;
}
.clear {
 clear: both;
}
.slider1Image span strong {
 font-size:14px;
}

Now save your template then go to the page element tab and add a html/javascript widget just above the post and leave the title field empty with the following xhtml code in

<div id="slider1">
<ul id="slider1Content">

<li class="slider1Image">
<a href='http://myblogpost.html'>
<img alt="my image" src="http://tinypic.com/5xpc1.jpg"/>
</a>
<span>
<strong>Some title</strong>
<br/>
some description text here
</span>
</li>

<li class="slider1Image">
<a href='http://someblogpost.html'>
<img alt="some image" src="http://tinypic.com/5fde1.jpg"/>
</a>
<span>
<strong>Some title</strong>
<br/>
some description text here
</span>
</li>

<div class="clear slider1Image"></div>
</ul>
</div>

In the code above i have added two images if you would like more it's just a matter of copying one of the blocks of code in between the <li></li> tags so the first part highlighted in green is the link to your blog post while the code highlighted in red is the direct link to the image and the blue text is the title and description of your image so now you should have a working image slider you can also have the caption coming in from the top, left or right side of the images i recommend you read more about it on the authors site.

Thanks for reading comments are welcome see my result

How to create a fully widgetized tabbed content box on blogger

webmaster@lawnydesigns.com (Lawny) — Sun, 24 May 2009 14:56:00 +0000

In this tutorial you will learn how to add a tabbed content box on your blogger blog using CSS, XHTML and Javascript in 4 simple steps it will also be fully widgetized so you can easy change colours and rearrange the widgets within your dashboard here's a simple screenshot of what we are going to create in this tutorial.

.

Note this will not work for those who have Javascript disabled in their web browser but most people have it enabled by default if you are not sure if yours is disabled or not check the demo you should see a working tabbed box.

If you have any questions about this tutorial feel free to ask in the comments so I recommend you use a test blog for this tutorial using the minima template or backup your template before attempting this as i cannot be held resposible if you mess up your template.

Now let me point out that I'm no Javascript expert I'm still learning so i did a little research around the internet and found a great script which does most of the work for us you can read more about it and download the script from this link look for the javascript file named tabber.js this is the script that we are going to use in this tutorial.

Now go to layout > edit html and paste the following code just before the closing </head> tag making sure you replace the red comment with the full contents of the tabber script you downloaded by opening it with a simple text editor.

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
/* paste the full contents of your tabber script here */
//]]>
</script>

next find the <div id='sidebar-wrapper'> just below there add the following code

<div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>
</div>

in the code above we have added 3 tabs if you would like more tabs it's just a matter of copying one of the sections and pasting it below the other making sure you change the id to tab4 and so on since section IDs must be unique.

Now we need to add some CSS code for the structure and style of the tabs so copy the following CSS code and paste it in your template just before the body CSS code

/* start tab styles */
.tabberlive{
margin:0;
padding:5px;
clear:both;
background:$tbbxbgcolor;
border:1px solid $tbbxbrcolor;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid $tbbxbrcolor;
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid $tbbxbrcolor;
border-top:0;
background:$tbbxcolor1;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}

.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}
/* end tab styles */

in the CSS code above i have declared 4 variables named tbbxbgcolor, tbbxbrcolor, tbbxcolor1 and tbbxcolor2 so we can easy change colours of the tabbed content box from within the fonts and colours tab the width of the tabbed box will span to whatever width your #sidebar-wrapper is set to if you know CSS you could hard code the hex colour codes and tweak things further to your liking.

So now we add the final code to define the variables we just declared so copy the following code and paste it at the top of your template with the rest of the variable definitions

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">

now save your template and go to the page element tab you should see something like the screenshot below.

add a widget in the tabbed section then click the numbers to change tabs so you can add more widgets in the sections do not forget to save your template before viewing your blog to change colours of the tabs go to the fonts and colours tab you should see something like the following screenshot below.

Now you should have a fully widgetized tabbed content box i hope you enjoyed this tutorial comments are welcome see my result

How to create static pages on blogger

webmaster@lawnydesigns.com (Lawny) — Thu, 07 May 2009 12:23:00 +0000

In this simple tutorial i will show you how to create static pages within your blog on blogger so you can easy link to them from navigation links within your blog these could be any page you like such as "about me" and "contact me" pages.

so the first thing would be to either use a test blog or download a backup copy of your template before doing this to your blog as i cannot be held responsible if you mess up your blog.

Once you are ready go to your blog and create a new post using whatever title you want for this tutorial i gave mine the title of "About" now add your post content when you have finished click the "Post Options" link found at the bottom of the post editor see screenshot below

now we need to change the date of the post to something older than your first blog post that way it will be hidden in the archives next under "Reader Comments" click the last radio button to disable comments since we don't want people commenting on these static pages do the same for the Backlinks next publish your post and visit it note how the date, time, email post icon and posted by are all showing up and whatever else you have installed below the post footer such as social bookmarks.

Well here's how we can get rid of them on the static pages which we don't allow reader comments go to layout > edit HTML expand the widget templates and find the following code

<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != "item"'>
      <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
          </b:if>
        </b:if>
      </span>

now the code highlighted in red basically checks to see if we allow comments on the post if it does then the code within the tags will be shown otherwise nothing will be shown

so we need to wrap the post date, time, posted by and whatever else you don't want showing within the tags so they are not shown on our pages which do not allow comments

here's an example of the timestamp, posted by, and email icon wrapped within the tags as described above

<b:includable id='post' var='post'>
<!-- Code removed for simplicity -->
    <div class='post-header-line-1'/>
    <div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
     <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
<b:if cond='data:post.allowComments'>
<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
        </b:if>
      </span> <span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != "item"'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
        </b:if>
      </span> <span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>

        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span> 
</b:if>
  <!-- Code removed for simplicity -->
</b:includable>

and the post date


<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
    <b:include data='top' name='status-message'/>
    <data:adStart/>
    <b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
      <b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>
</b:if>
      <b:include data='post' name='post'/>
      <b:if cond='data:blog.pageType == "item"'>
        <b:include data='post' name='comments'/>
      </b:if>
<!-- code removed for simplicity -->
</b:includable>

you can use those tags as many times as you like through your template and put anything within those tags that you don't want showing up on your static pages so now you should know how to create static pages within your blogger blog take a look at my privacy policy created using the steps described above

i hope you enjoyed reading this tutorial if you are having any problems leave your comment and let me know i will get back to you as soon as i can

How to display total post and comment count on blogger

webmaster@lawnydesigns.com (Lawny) — Sun, 15 Mar 2009 18:30:00 +0000

In this tutorial i will show you how we can print out the total post and comment count of your blog using our blogs feed so first we need to add these two lines of javascript code which asks blogger to return our feed in JSON format which is a set of javascript objects. Don't forget to replace the red code with the URL of your blog

<script src="http://lawnydesignz.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numposts"></script>
<script src="http://lawnydesignz.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numcomments"></script>

in the code above we have asked blogger to return our JSON feed to two javascript functions named numcomments and numposts so now we will create those two functions to print out the total post and comments count

<script style="text/javascript">function numposts(json) { document.write('This blog has ' + json.feed.openSearch$totalResults.$t + ' posts'); }function numcomments(json) { document.write(' and ' + json.feed.openSearch$totalResults.$t + ' Comments'); }</script>

now if you paste the two sets of code together into an html/javascript widget and you followed this tutorial right you should see something like my result below

of course your numbers will be different so now you know how to print out the total post and comment count on your blog i hope you enjoyed this tutorial feel free to leave you comment or suggestion

How to adjust the size of images on blogger

webmaster@lawnydesigns.com (Lawny) — Mon, 23 Feb 2009 17:58:00 +0000

Today I'm going to show you how to adjust the size of images posted on your blog since most of my friends are having problems with changing the size of images

first switch to "edit html" mode on your post editor and find the image you would like to adjust here's my sample image code

<a href="http://1.bp.blogspot.com/_JgEGJbRLYj4/SZhUSysfZJI/AAAAAAAABG8/XkkheuA60xU/s400/step-01.jpg"><img style="width:304px;height:400px;" src="http://1.bp.blogspot.com/_JgEGJbRLYj4/SZhUSysfZJI/AAAAAAAABG8/XkkheuA60xU/s400/step-01.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5303081243051517074" /></a>

yours may look a bit different from mine but don't worry we are only interested in the code highlighted in red this controls the width and height of your image.

You can change it to whatever you want but its best to keep it no bigger than the image size itself also you need to think about the width of your blog

if you are uploading your images somewhere else such as photobucket you can just link them in your posts using simple code below

<a href="http://i44.tinypic.com/5wdliv.jpg"><img style="width:304px;height:400px;" src="http://i44.tinypic.com/5wdliv.jpg" border="0" alt="" /></a>

again adjust the width and height to whatever size you need and the code highlighted in red with the direct link to your image if you do not want your images clickable remove the anchor tag so your code should look like the following

<img style="width:304px;height:400px;" src="http://i44.tinypic.com/5wdliv.jpg" border="0" alt="" />

that way your images will not be clickable i hope you find this useful and thanks for reading comments and suggestions are always welcome

How to embed adsense in blogger posts

webmaster@lawnydesigns.com (Lawny) — Sun, 15 Feb 2009 18:11:00 +0000

In this post i will show you how to embed AdSense ads in your blogger posts you can either have them at the top or bottom of your posts or both but remember you are only allowed a certain amount of ads on your blog so first I recommend that you download a backup copy of your template as i will not be held responsible if you mess your layout up

now if you check the box on the post widget you will see that it is a simple way to add AdSense to your blog posts

by default they are displayed at the bottom of your posts but what if we want them at the top below the post title ? or both well lets take a look at the code which is used to add the AdSense ads to the posts

go to Layout > Edit HTML check the check box to expand the widget templates and scroll down until you find the code shown in the screenshot below

once you have found the code cut it to Notepad or a simple text editor. Now we need to decide which ads we are going to use so for this tutorial I'm going to be using the 300px x 250px rectangle ad

note the width and height of your ads because we are going to wrap the code inside a simple div with inline styles so you can either type the code in or just copy the code below

<div style='float:left;margin:0 5px 5px 0;width:300px;height:250px;overflow:hidden;'>
  <b:if cond='data:post.includeAd'>
        <data:adEnd/>
        <data:adCode/>
        <data:adStart/>
      </b:if>
</div>

make sure your code looks like mine given above and set the width and height to the ad size you are using now to get the ads just below the post title find the following line of code in your template

<data:post.body/>

paste it just above there like i have in the following screenshot

save your template and view you should see the ad float to the left below the post title if you want to center it just remove the float and change the margin so your code would something look like

<div style='margin:0 auto;width:300px;height:250px;overflow:hidden;'>
  <b:if cond='data:post.includeAd'>
        <data:adEnd/>
        <data:adCode/>
        <data:adStart/>
      </b:if>
</div>

if you would like to show them at the bottom of your post instead paste the given code just after the following code <data:post.body/> so it would look like mine in the screenshot below

if you would like to show them at both the top and bottom of your posts you should only show them on the post pages since we are only allowed to display a certain amount on each page so to get them at the bottom and top of your posts copy the following code

<b:if cond='data:blog.pageType == "item"'>      
<div style='float:left;margin:0 5px 5px 0;width:300px;height:250px;'>
     <b:if cond='data:post.includeAd'>
        <data:adEnd/>
        <data:adCode/>
        <data:adStart/>
      </b:if>
</div>
</b:if>

paste it above and below the <data:post.body/> tag so it should look something like the following screenshot

now if you save your template and view a post on your blog you should see ads at the top and bottom so now you know how to position those AdSense ads in your blog posts. If you enjoyed reading this tutorial don't forget to leave your comment and have fun tweaking your blog

How to adjust margins and paddings of widgets in blogger templates

webmaster@lawnydesigns.com (Lawny) — Fri, 06 Feb 2009 01:41:00 +0000

In this post i will show you how to adjust the margins and padding's of the sidebar widgets and the posts so I'm going to use the minima template

always download a backup copy of your template before doing anything or use a test blog as i can not be held responsible if you mess your blog up.

As you can see, the browser has added space at the bottom of the sidebar widgets. In CSS, this space is called "margins" and "paddings" now the following CSS code is where the sidebar widgets and the main post get their margins and padding's from

.sidebar .widget, .main .widget { 
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

as you can see it is using the shorthand property which sets all padding's and margin properties the first part of the value 0 is assigned to margin-top from there it's clockwise 0 is assigned to margin-right 1.5em is assigned to margin-bottom, and the margin-left is inherited from the margin-right which is set at 0 you could of just wrote the above CSS code like the following

.sidebar .widget, .main .widget { 
border-bottom:1px dotted $bordercolor;
margin-top:0;
margin-right:0;
margin-bottom:1.5em;
margin-left:0;
padding-top:0;
padding-right:0;
padding-bottom:1.5em;
padding-left:0;
}

i prefer the first method now if you do not want to adjust the main widgets padding or margin just replace the above CSS code with the code below

.sidebar .widget{ 
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

now change the padding of the sidebar widget's to whatever you need here's an example

.sidebar .widget{ 
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0; /* resets the padding on all 4 side's */
}

and here's a screenshot of the sidebar widgets with the above code applied

now you can play about with the margin's and padding's on your blog i hope you find this helpful and don't forget to leave your comment

How to remove the quick edit and wrench icons on blogger

webmaster@lawnydesigns.com (Lawny) — Sat, 31 Jan 2009 15:36:00 +0000

I'm writing this post because i get asked by a lot of my friends how they can get rid of those quick edit icons so if you have seen those quick edit icons under your posts and the little wrench spanner icons in the sidebar on your blog you maybe thinking how do i get rid of them or why are they there ?

in fact they are useful if you need to quickly edit your blog post's or a widget in the sidebar you can just click them to instantly edit your post or widget they are only shown to the admin of the blog if you log out you shouldn't see them but i prefer to hide or remove them since i can just login to my dashboard to edit my post or widgets

so to hide the quick edit icon below the post footer go to layout > page elements and click the edit link for the post widget from within your dashboard and uncheck the checkbox titled "Show Quick Editing" then save now those icons shouldn't show below the post

but they are still showing in the sidebar to remove them go to layout > edit HTML and expand the widget templates and look for the following code

<b:include name='quickedit'/>

each widget you have in the sidebar will have one of them so to save time having to remove each one of them just paste the following code anywhere inbetween the opening <b:skin> tag and the closing </b:skin> tag in your template to hide them

.quickedit{display:none;}

now you can get rid of those icons if you dont want them showing i hope you find this useful and thanks for reading

How to customize your blogger templates fonts and colours

webmaster@lawnydesigns.com (Lawny) — Sun, 25 Jan 2009 21:46:00 +0000

Today i will show you how to customize the fonts and colours of your template and I'm going to use the template from my previous tutorial but it will work for most templates you just need to find the id or the class name of the element you are trying to style.

Now if you are trying to change the font or colour of the sidebar titles through your blog dashboard it will also change the font and colour of the post date which is not what some of us want so to change that we can either hard code them in the CSS code or define variables for the font and colours i will show you both ways

by default all <h2></h2> tags inherit from this CSS code

 h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

so that is where the sidebar and post date get their colour and font styles from but if you look in the template the post date has a class name applied to it

<h2 class='date-header'><data:post.dateHeader/></h2>

and it has its own set of CSS rules shown below

 h2.date-header {
margin:1.5em 0 .5em;
}

you could just add more style rules for the post date for example

 h2.date-header {
margin:1.5em 0 .5em;
color:#f00;
font:Arial, Verdana, Sans-serif;
font-size:13px;
font-weight:bold;
}

or just declare variables so you can change colours and fonts from within your blogger dashboard here's an example

 h2.date-header {
margin:1.5em 0 .5em;
color:$postdatecolor; 
font:$postdatefont;
}

in the example above I created 2 variables named postdatecolor and postdatefont to use them just define them at the top of your template like I've done in the screenshot below

once you have done that save your template and go to the fonts and colours tab you should see something like the following screenshot

now you can change fonts and colours for the post date from within your blogger dashboard you can also write CSS code for the sidebar titles like this

.sidebar h2 {
font-size:13px;
font-weight:bold;
background:#f3f3f3;
padding:3px;
}

so now you know how to customize the fonts and colours of your blog if this helps some of you who are trying to customize your template leave your comment and let me know thanks for reading

Create a 3 column blogger template with 2 right columns

webmaster@lawnydesigns.com (Lawny) — Mon, 19 Jan 2009 18:56:00 +0000

In this tutorial i will teach you how to create a 3 column blogger template with two narrow columns on the right and a section above the two columns here's a simple screenshot of the layout I'm planning to teach you to build

now you have an idea what we are going to build lets get started. I recommend you use a test blog for this tutorial using the minima template i always use this template because its an easy starting point once you have your template go to layout > Edit HTML scroll down and delete the width from within the CSS #header-wrapper

this enables the header to span the entire width of whatever we set the #outer-wrapper to. Do the same for the #header .description and the #footer see screenshots below

Now change the width of the CSS code for the #outer-wrapper from 660px to 960px and the width of the #main-wrapper from 410px to 530px and the float to left like I've done in the screenshots below

Next find the CSS code for the #sidebar-wrapper and change its ID to #column_wrapper and the width to 410px and the float to right see screenshot below

now we will create the CSS code for the two right columns and the top section above them so copy the following code

#sidebar-top{
clear:both; 
}
#sidebar-right{
width:200px;
float:right;
word-wrap:break-word; 
overflow:hidden; 
}
#sidebar-left{
width:200px;
float:left;
word-wrap:break-word; 
overflow:hidden; 
}

paste it in your template like I've done in the screenshot below

scroll down and find the <div id='sidebar-wrapper'> and change the ID to <div id='column_wrapper'> then just below there change the ID of the sidebar section to id='sidebar-right' so it becomes a right column in the sidebar not sure ? see screenshot below

now we are going to create the top section and the left column for the sidebar so copy the following code

<b:section class='sidebar' id='sidebar-top'/>
<b:section class='sidebar' id='sidebar-left'/>

paste it just below the <div id='column_wrapper'> see screenshot below if you are not sure

now add this final bit of CSS code just after the #footer if you are not sure where to add it see screenshot after the code

/* wire frame layout tweaks */
body#layout #outer-wrapper{width:750px;}
body#layout #main-wrapper{width:310px;}

now if you save your template and followed this tutorial right you should see this on you page element tab

i may show you some more tweaks with this template in another tutorial check my result live HERE i hope you enjoyed this tutorial and don't forget to share and leave your comment

How to highlight authors comments on blogger

webmaster@lawnydesigns.com (Lawny) — Mon, 17 Nov 2008 14:42:00 +0000

This post shows how you can highlight authors comments on your blogger blog using CSS and if/else tags im going to use the minima template so like i always say backup your template or use a test blog now go to edit html and make sure you have expand widget templates check box checked look for the comments-block like i have in the following screenshot

now it depends which template you are using the only difference in your template is the <dl></dl> tags could be <ul></ul> tags but it works the same way. It is easier to just replace the code highlighted in the above screenshot with the code given below i have explained the code further down below

<div id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
<div class='authors-comments'>
<div expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</div>
<div class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</div>
<div class='clear'/>
</div> <!-- end authors-comments -->

<b:else/>

<div class='norm-comments'> 
<div expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</div>
<div class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</div>
<div class='clear'/>
</div> <!-- end norm-comments -->
</b:if> 
</b:loop>
</div> <!-- end comments-block -->

the code above highlighted in red basically just checks to see if the posted comment equals to the post author if it does it prints out the code highlighted in green otherwise it prints the code highlighted in blue note how i have wrapped the two blocks of code in a separate div tag with class names like <div class='authors-comments'> and <div class='norm-comments'> . Now we need to add some CSS code to style the authors comments so copy the code given below

.norm-comments{
margin:0;
padding:5px 10px;
line-height:1.4em;
}
.authors-comments {
margin:0;
padding:5px 10px;
line-height:1.4em;
border:1px solid #84aadb;
background:#ddecff;
}

paste it in your template at the top like the screenshot below and save

you may want to change the border and background colour to suit your style you can see this in action on this site if you look at the comment section. If you have any problems with getting this to work let me know and i'll see what i can do hope you enjoyed this tutorial

How to display widgets on certain pages in blogger

webmaster@lawnydesigns.com (Lawny) — Mon, 30 Jun 2008 19:16:00 +0000

Today I'm going to show you how we can get widgets to display on certain pages within your blogger blog using if conditional tags

so first i recommend you download a backup copy of your template or use a test blog.

Now for this tutorial I'm going to add a simple HTML/JavaScript widget (it could be any kind of widget) in the title field of the widget i named mine "My Widget"

the reason i did this is so that we can easy identify it when we switch to the edit html tab make sure you have the expand widget templates checkbox checked and find the code for your widget here's a screenshot of mine

Now once you have found the widget code you need to decide which page you want it to be displayed on.

Here's the code for displaying widgets on the postpages

<b:if cond='data:blog.pageType == "item"'>
</b:if>

Here's the code for displaying widgets on the homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'>
</b:if>

Here's the code for displaying widgets on the archive pages

<b:if cond='data:blog.pageType == "archive"'>
</b:if>

now add it to the widget like i've done in the following screenshot

save and preview your template to see it in action

Now if you use the AdSense widget in your blog posts by default it will show them on the main page with a little tweak we can get them to show on the post pages only by moving the closing if tag further down here's a screenshot of the post widget before and after

Now if you make the above changes to the post widget and save it AdSense will only be displayed on each post page. I hope you enjoyed reading this post dont forget to comment if this works for you

How to split your blogs header into two widgets

webmaster@lawnydesigns.com (Lawny) — Sat, 07 Jun 2008 16:53:00 +0000

This post shows how you can split your blogs header into two widgets like the following screenshot

so i recommend you backup your template or use a test blog for this example I'm going to use the Minima Template so if you are using a different template the code would be different. The default width of the template header-wrapper code is 660px
(if you don't know what I'm talking about see screenshot below)

So I'm going to set the width of the main header section to 350px and float it to the left see screenshot

now that's done we can create the second section for the right widget so copy the following code


#header2 {
float:right;
width:250px;
}

and paste it some where in between the opening and closing skin tags like Ive done below

next copy the following code for the new section


<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>

and paste it like so

now save it and go to the page element tab you should have a new section on the right side of the header here's a screenshot of my result

How to fix your blogs header

webmaster@lawnydesigns.com (Lawny) — Sat, 31 May 2008 19:59:00 +0000

Today im going to show you how you can fix your blogs header as lots of blogspot users have been having problems with their header image so i recommend you download a backup copy of your template or use a test blog now you will need to expand the widget templates and find the following code highlighted in the screenshot

it should be within the #header-wrapper when you have found it replace it with the following code

<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>
<!--Show just the image, no text-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id=' "headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a>
</div>
<b:else/>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "height: " + data:height + "px;"' id='header-inner'>
<div class='titlewrapper' style='background: transparent'> <h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!-- Normal header No image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable> 
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>

now copy following css code
(note: ive set the background position as centered you could change it to left or right if you wanted)

#header-inner {
 background-repeat:no-repeat;
 background-position:center;
}
#headerimg {
 text-align:center;
 margin:0 auto;
}

paste it in your template like so and save it

now add an image to the header throught the page elements tab also you might need to tweak the css code a bit it would be best to know the exact size of the image you are going to use so if the header image is wider than the #outer-wrapper it would spoil the layout it is just a matter of tweaking the css code and depends what layout you are using anyway i hope this works for most of you if not let me know and i will try and help you

How to stop widgets been deleted when uploading templates

webmaster@lawnydesigns.com (Lawny) — Wed, 07 May 2008 10:29:00 +0000

So if you have ever downloaded a free template and wanted to install it without having to reinstall all those sidebar widgets again read on im going to use a 3 column i created for this tutorial you can download it for free here
i recommend you use a test blog for this tutorial by default when you create a new blog it will already have 2 sidebar widgets installed so you should add another two for this tutorial. Now you should have four widgets in your sidebar try uploading this free template which has two widgets you will get the following warning your widgets are about to be deleted

so for this example i have four widgets in my current template and i want to use the free one which only has 2 widgets but i dont want to reinstall the other two widgets
(note:you could have a lot more than 4 widgets)

to get round this you will need to download a copy of your template and open it with a simple text editor and find the widget code

so here's the code for my current templates sidebar
(red and blue code is the profile and archive code some removed for simplicity)

<div id='sidebar-wrapper'> 

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>



</dl>
<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>



<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

This is the third widget code

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

This is the fourth widget code

<b:widget id='HTML2' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

</b:section> 
</div> 

note the widget and section opening and closing tags

every widget is within an opening and closing section tag and every widget has a opening and closing tag
so i would need to copy the code for the other two widgets (green code) and paste them somewhere within the opening or closing section tags in the free template sidebar like so

so that way when i upload the free template it will still have all the four widgets without deleting any you could do that with 10+ widgets if you had that many
so every time i create a new blog template i would just copy all the widgets code straight into the new template before uploading it and all those widgets would still be there a great time saver

How to add social bookmark links to blogger

webmaster@lawnydesigns.com (Lawny) — Sat, 15 Dec 2007 14:41:00 +0000

Today im going to show you how to add social bookmark text links below your blog post so people can bookmark it or whatever. So first save a backup copy of your template before editing now you will need to expand widget templates and look for the following code in the screenshot below

next copy the following code


<p class='bookmark'>

<a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Digg it</a>

<a expr:href='"http://del.icio.us/post?v=4&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Add to del.icio.us</a>

<a expr:href='"http://www.stumbleupon.com/submit?&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Stumble it</a>

<a expr:href='"http://www.facebook.com/sharer.php?&amp;u=" + data:post.url' target='_blank'>Share on Facebook</a>

<a expr:href='"http://technorati.com/signup/?f=favorites&amp;Url=" + data:post.url' target='_blank'>Add to technorati favorites</a>

<a expr:href='"http://reddit.com/submit?&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>Submit to reddit</a>

<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?&amp;u=" + data:post.url' target='_blank'>Add to YahooMyWeb</a>

<a expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" + data:post.url' target='_blank'>Submit to simpy</a>

<a expr:href='"http://www.spurl.net/spurl.php?v=3&amp;Url=" + data:post.url' target='_blank'>Submit to spurl</a>

<a expr:href='"http://www.furl.net/storeIt.jsp?&amp;u=" + data:post.url' target='_blank'>submit to furl</a>

</p>

and paste it like ive done in the following screenshot

now we will add some CSS code to create some spacing in between each of those links so copy the following CSS code


.bookmark a:link {
 margin:0 8px 0 0;
}

and paste it just before the closing skin tag like ive done in the following screenshot below

now if you preview your template before saving you should see some text links like mine in the screenshot below

you can play around with the CSS code to create more spacing also you could change the margin to padding just see what you can come up with.

If you enjoyed this post dont forget to comment and let me know if it worked for you

How to create expandable post summaries on blogger

webmaster@lawnydesigns.com (Lawny) — Fri, 07 Dec 2007 19:20:00 +0000

Today im going to show you how to create expandable post summaries on new blogger this is a great trick for those who have lots of long articles on their blog and would like to show a certain amount of text/images from the beginning of that post on the main page with a read more link at the bottom. So lets get started first i recommend you download a backup copy of your template so if anything goes wrong you can always restore from that. Next we need to make sure we have post pages enabled so go to Settings > Archiving and change Enable Post Pages to yes like mine in the following screenshot below

Now go to the edit html tab and tick the box to expand widget templates we are going to use conditional CSS to change how posts display on different pages. So copy the following code


<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'> 
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;} 
</b:if>
</style>

Paste it just before the closing head tag like Ive done in the following screenshot below

Now scroll down and look for the following code

Once you have found it copy the following code


<b:if cond='data:blog.pageType != "item"'>

<a expr:href='data:post.url'>Read more!</a> 

</b:if>

And paste it in like ive done in the screenshot below

Now if you preview the template you should see a Read more link at the end of your post like mine in the following screenshot or on the main page of this blog

of course it doesn't have to say read more it can be whatever you want also this link is still visible even when your post is not long. Now you should save the template and go to your post editor now you will need to add this <span class='fullpost'></span> tag around the part of the post you would like to hide like i have in the screenshot below

Now to save time having to enter that in everytime you post you could just go to Settings > Formatting scroll to the bottom and paste it in Post Template like i have below so you do not have to enter it in each time you want to post

i hope you enjoyed reading this post

Copyright infringement

webmaster@lawnydesigns.com (Lawny) — Tue, 04 Dec 2007 18:10:00 +0000

Today I'm a victim of plagiarism the owner of this http://hellohello100.blogspot.com/ site has copied my whole blog and the content like a big fool and he has even pointed me to his profile page here http://www.mybloglog.com/buzz/members/fauzirassull/?fs=2007080618174203 on my bloglog and here http://profiles.friendster.com/fauzirassull so just to let my visitors know he has stole my content and I'm waiting to get his site shut down here is a screenshot of my sitemeter

he still has the tracking script in the template

UPDATE: Ive notice the site has been taken down now but i will still name and shame anyone who is caught stealing my content without my permission.

Update: This morning i checked my shout box over at blogcatalog and the cheeky thief has finally admitted to stealing my content here is a screenshot of what he said

How to make a 4 column blogger template

webmaster@lawnydesigns.com (Lawny) — Mon, 03 Dec 2007 17:17:00 +0000

In this tutorial we will be making a 4 column blogger template based on a two column originally designed by Douglas Bowman so i recommend you create a new blog for this tutorial using the following template

Now we have our template we need to find the header-wrapper CSS code and change the width from 660px to 100% or 990px like ive done below

Now we have that done we need to look for the outer-wrapper code and change the width from 660px to 990px and the padding from 10px to 0 like ive done in the following screenshot

Now find the main-wrapper and change it from 410px to 450px unless you want your main post body to stay 410px wide also ive added a margin of 20px

Now im going to rename the sidebar-wrapper to left-column and change the width to 170px and the float to left because it is going to be a left column although you dont have to rename it but it helps see screenshot below

Now we have that done we need to change the XHTML code for the column so find the following XHTML code and change the name from sidebar-wrapper to left-column also move it above the main-wrapper see screenshot below (click the image for a larger view)

Now that is done we add the CSS code for our new columns so copy the following CSS code


#rightsidebar-left {
margin:0 0 0 10px;
width: 200px;
float: left;
word-wrap: break-word;
overflow: hidden;
}


#rightsidebar-right {
width: 120px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

and paste it just below the left-column CSS code like ive done below

Now copy the following XHTML code



<div id='rightsidebar-left'>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
</div>


<div id='rightsidebar-right'>
<b:section class='sidebar' id='sidebar3' preferred='yes'/>
</div>

and paste it just after the main-wrapper like ive done below

Save your template if you followed this tutorial right your page elements should look like mine below 4 columns althought if you preview the template you will not see them until you put widgets in them i hope you enjoyed this tutorial. Click Here to see my final results

Create a nice feed icon in Photoshop

webmaster@lawnydesigns.com (Lawny) — Wed, 14 Nov 2007 21:59:00 +0000

Today I'm going to show you how to create a nice Rss Feed icon below is my final result

First create a new document width 200px height 200px background colour white

Now select the rounded rectangle tool and make sure you have the options set like mine below

Set your foreground colour to #d9600f press and hold shift draw a shape as big as the document like mine below

Now press ctrl + j or right click the shaped layer and choose duplicate layer from the little menu to duplicate the shaped layer now you should have 2 layers in your layers window like mine below

Make sure you have the top most layer selected then go to the main menu and choose Edit > Free Transform or just press ctrl + t now change the settings for the width and height to 97 like Ive done below and hit enter

Now right click the top layer and choose blending options click gradient overlay and use settings given below

Now click on stroke and use the following settings

you should now have the following image

Now you can either download this shape i made or draw your own once you have the shape load it in Photoshop and press d then x on your keyboard to reset your foreground colour to white next holding shift on your keyboard click and drag to draw a shape like mine below

Now you have your own RSS feed icon which is vector meaning you can resize it without losing quality. The next step is optional

To make the icon a bit more interesting Ive added a glossy shine so if you would like to do the same follow along with the next step

Press ctrl and click the middle layer Ive highlighted below to create a section around it

Create a new layer then fill it with white and press ctrl + d to deselect the section now your image and layers window should look like mine below

Now select the pen tool and use the following settings make sure you have paths selected

Click once on the left side of the image and hold down shift on your keyboard and click once on the right so you have a straight line like mine below

now select the Direct selection tool and right click the line and choose Add Anchor Point create two like Ive done below

Now with the Direct selection tool still selected click and drag one of the new anchor points and move them one at a time like Ive done below

Now select the pen tool again and close the path like Ive done below

Now right click the path and choose make selection from the little menu which appears you should have a selection now go to the main menu and choose Select > Inverse or press shift + Ctrl + I to inverse the selection now make sure you have the white fill layer selected which should be the top most layer and hit delete on your keyboard and press Ctrl + D to deselect the selection turn the Opacity down to about 20 for this layer now you should have something like the final image

You can easy play around with the settings to create different colours below is just an example of what you can do

I hope you enjoyed this tutorial

How to add a navigation bar

webmaster@lawnydesigns.com (Lawny) — Sun, 04 Nov 2007 18:20:00 +0000

Today i will show you how to add navigation links just below your blogs header like mine above and it depends what template you are using but it will fit most so always use a test blog before you apply it to your current blog as I'm not responsible if you mess your template up and there is lots of different styles you could have but I'm going to show you how to add a simple set of navigation links so first we need to copy the following CSS code


/* navigation links css code
----------------------------------------------- */
#topnav {
height:40px;
}
#topnav ul {
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
#topnav a {
padding:3px 7px 3px 7px;
float:left;
text-decoration:none;
color:#000;
margin:9px 10px 0 0; 
}
#topnav a:hover {
color:#666;
}
#topnav li {
display:inline
}

Now paste it like i have done just below the closing skin tag

Now you need to copy the following XHTML code changing the red parts to where ever you are pointing your links to. The first part with the / points to your blogs homepage


<div id='topnav'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Link 3</a></li>
<li><a href='#'>Link 4</a></li>
</ul>
</div>

and paste it just below the header closing div tag like I've done below

now if you preview your template you should see some links just below your blogs header like mine below

you can change parts of the CSS code to make different navigation styles you should make a test blog and play around with the CSS code to see what you can come up with this is just a simple one

Free email post icons

webmaster@lawnydesigns.com (Lawny) — Wed, 24 Oct 2007 01:04:00 +0000

Today i will show you how you can change the little email post icon seen at the bottom of the post I've made a few free icons with different colours for anyone who wants to change theirs here are the actual icons right click and choose save picture as

so first go to edit html tab and you will need to tick expand widget templates see screenshot below

now you will need to look for the code I've highlighted above in black and change it like i have done below

now copy the following CSS code changing the red text to where ever you are hosting your icon


.post-icon {
margin:0 0 0 .5em;
background: url("http://yourlink.gif") no-repeat left;
padding:9px;
}

and paste it like i have done below just before the closing skin tag

now preview your template if you did this right you will have a new icon at the bottom of your post footer enjoy please do not give these out on your site these are what i created

add a space between header and post

webmaster@lawnydesigns.com (Lawny) — Sat, 20 Oct 2007 18:36:00 +0000

today I'm going to show you how you can create some space in between the header and the post so i recommend you use a new blog until you understand how this works then you could apply it to your current blog as I'm not responsible if you mess your template up now it depends what template you have but most of them already have this bit of code so you will need to make sure you have the following code

if you cant find it on your template don't worry just add it after the header like i have done above and make sure you add a closing div tag at the bottom like below

now you need to look for the following CSS code again it depends what template you have if you cant find it you will need to add it but without the padding:0 16px; value

once you have found it or added it you need to add the highlighted code to the content-wrapper you just found or added and you can change the 50px value to whatever you want it depends how much space you want between the blogs header and the post

once done preview your template before saving to see the space you just created then save or change the 50px value if you need more or less space

add an image to blogs header

webmaster@lawnydesigns.com (Lawny) — Mon, 15 Oct 2007 23:24:00 +0000

Today another friend of mine at blogcatalog asked me how to add an image to the blogs header so I'm going to show you how to add an image to the blogs header just like mine now there is two ways you can do it the first you may already know so for those who don't know go to your page element tab and look for the following edit link highlighted in red

now click that and you will see the following image browse for the image you would like to add as the blogs header it can be on your computer or hosted on another server

Now if you would like to add it the other way go to the edit html tab and find the following CSS code it depends what template you have this is based on the one from my previous tutorial which can be found HERE.

and add the code Ive highlighted below of course change the URL to where ever you have the image hosted also you may need to change the height and width depends what size your image is and you may need to optimize it for the web so your site loads faster

so now you know how to add an image to the blogs header

UPDATE: i have notice lots of people's blogs header has shrunk i have managed to come up with a fix which works for some depends what template you have first make sure you download a copy of your template next add the following CSS code you may need to alter the height and width to whatever you need


#Header1_headerimg {
 width:100%;
 height:95px;
 text-align:center;
}

if this helped dont forget to leave your comment and let me know

Update: i have wrote a new fix here

Blogs Record buttons

webmaster@lawnydesigns.com (Lawny) — Sun, 14 Oct 2007 15:18:00 +0000

UPDATE: I notice the site has now closed down !!

yesterday i decided to make some nice buttons for Blogs Record a new social blog directory here is a screenshot of the buttons

click the image to go over there and join if you would like to meet more bloggers and get your button they also have a forum where you can chat with other members and add your blog for more readers its just another blog directory with a few extras check it out