semi-transparent and/or image background for all posts in blogspot

This is a step by step tutorial for creating a transparent/image background for the entire main posts section.

1- Creating a transparent .png:

Create a new photoshop (or whichever program you are using) file with 16x16 or 32x32 size, 72 resolution and tranparent background. Fill it with the color you wish to use, then change the opacity of the layer to a desired amount (a value between 70 to 90 is optimal). Save it for Web & Devices, making sure you have png24 and transparency selected. Now, upload it to somewhere (picasa etc.), so that you can have an url of the image which we will need later.

2- Template Designer:

Navigate to your blogger account's template designer tab. Select Advanced, here depending on your blogger template you will either have "Post Background" or "Background", first look for Post Background if you don't have it, select the other one.

For people with Post Background

From the color picker of Background Color, put a tick to transparent. If you don't want borders, do the same for Border Color.

For people with Background

From the color picker of Main Background, put a tick to transparent.

Finally apply to blog.

3- Edit HTML

Under the Edit HTML tab, look for this piece of code,

For people with Post Background in the previous step,

find,

.date-outer {

in it there is a line like this,

background-color: $(post.background.color);

replace it with this line changing the "image_url" with the actual url of your image

background: url(image_url) repeat;

For people with Background in the previous step,

find,

$(content.background.color.selector) {

in it there is a line like this,

background-color: $(content.background.color);

replace it with the following changing the "image_url" with the actual url of your image

background: url(image_url) repeat;

.................................................................................................................................

blogspot: unlocking the header widget so that you can place it in a different location

Oooops! A couple of posts ago I was talking about making a vertical header and completely forgot to mention something very important related to that: In order to move your header to a different location on the site you will have to do some sniffing around inside the HTML editor (with expanded widgets!), where you need to find this line:

<b:widget id='Header1' locked='true'
and change it to
<b:widget id='Header1' locked='false'

.................................................................................................................................

design + details: padding the widgets

Fairly self-explanatory image I would say... On the left is the default state and on the right is the one where I have tweaked padding values by placing this code in the CSS box on the Advanced Editor:

#Label1 {
padding: 24px;
padding-bottom: 8px;
}

The padding makes a huge difference as to how this looks. The strokes become much sleeker when they stop a bit short of the border, and the top and the bottom of the box is also sitting much better now that I no longer have that big space below the last line.

.................................................................................................................................

blogspot page bottom: customizing the pager, the footer, the subscriptions links, etc...

Again we have Furkan to thank for this really great information which deals with all of the elements on the bottom of a blogspot site:

To delete the "subscribe to posts (atom)" line find the line <b:include data='feedLinks' name='feedLinksBody'/> inside the HTML code, and simply delete it.

To remove the attribution gadget (that is the "powered by blogger" line), find /* Footer, and to the end of this section add the line display:none;

(Note:  I am not sure if removing the attribution gadget is something that Blogspot takes very kindly to. There may even be legal issues involved with doing so. So be careful with this one, I would say!)

And now the really cool part: Customizing the pager, which is the section where you have the links which lead you home, to older posts and to newer posts! You can change the default link text with anything that you wish and you can even replace it with images.

Above you can see how I customized the bottom area of the shoezznutzz site with little arrows pointing left, right and upwards on the pager and by removing the subscription link. On his own site Furkan used the shark on his header which he converted into an arrow. Brilliant!

The code for doing all this is somewhat lengthy, so I am going to direct you to Furkan's post about this here >>>, or...

Find this part in your code:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>


<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>


<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>

Now, if you want to change the text, just delete these underlined parts and write you own text.
If you want to put an image source, delete them, put this: <img src="Image URL" />

.................................................................................................................................

blogspot post customization code snippets

Some things that I could think of (and found the code for at various places) that all relate to modifying the appearance of your posts. All sorts of things from post and post title background colors, to post title icons, to initials. This is a long and somewhat messy looking post, so I am going to ask you to very kindly take a little jump break and... :-)

Whatever is marked up in black is what you will need to change. Remember that you can do most of the stuff that applies to the entire blog (and not just a single post) in the Custom CSS box of the advanced tab of the template designer. This will allow you to see your changes as you tweak the code:

Changing the background color and padding of a single post:

Place this line inside the HTML tab of the post editor, in the beginning, add your text, close with the slashed div tag:

<div style="background:#your hex value; padding:Xpx;">
Your text goes here....
</div>

Changing the background image of a single post

Place this line inside the HTML tab of the post editor, in the beginning, add your text, close with the slashed div tag:

<div style="background:url(URL of your picture) no-repeat;">
Your text goes here....
</div>

(Note: If you have an image which you would like to repeat, just change the word "no-repeat" to "repeat", or you can also remove the whole thing from the code altogether).

Centering the post title on the whole blog:

The code for this will vary from template to template, however what you need to do is this: Find the line which says h3.post-title in the HTML editor. Then place text-align:center; underneath that line and just above the }

Adding a small icon before the post title on the whole blog:

Find the first line of code below in the HTML editor, then add the second line, with your image URL:

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><img src="Your image URL" style="border-width:0px"/><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>

(Note: You can also place the icon in different locations, above and below or to the right of your post title. Read more about this here:

http://www.blogbulk.com/2008/11/add-icon-or-picture-in-blogger-post.html)

Adding a picture to the background of post titles on the whole blog

Find the first line of the below code in the HTML editor, then play with all the values highlighted in black:

h3.post-title {
background: url(URL of your picture); background-repeat:no-repeat;
height:Xpx;
margin:.Xem 0 0;
padding:Xpx Xpx Xpx;
font-size:X%;
font-weight:normal;
line-height:Xem;
color:$titlecolor;
}

Adding color to the background and borders of post titles on the whole blog

Find the first line, then play with the values highlighted in black:

h3.post-title {
background:#your hex code;
border:Xpx inset #your hex code;
margin:Xem 0 0;
padding:Xpx Xpx Xpx;
font-size:X%;
font-weight:normal;
line-height:Xem;
color:$titlecolor;
}

And if you want your post title to be underlined (like I did on this blog) use this line in the code above:
border-bottom:Xpx solid #your hex code;

Getting big dropcaps initials/or a big first letter in a single post

Go to the HTML tab in the post editor and place this code around the letter that you wish to have drop, play with the stuff highlighted in black:

<span style="float:left;color:#000000;font-size:Xpx;
line-height:Xpx;padding-top:Xpx;font-family: Times, serif, Georgia;">your letter</span>


This one below for the initial you wish to go upwards:
<span style="font-family:Georgia,;color:#000000;
font-size:Xpx;font-weight:X;line-height:X%;letter-spacing:Xpx;">your letter</span>


All that I can think of for now folks. Maybe more will follow at some point... ;-)

.................................................................................................................................

using the blogspot text widget (and the post editor) to make menus and thumbnail galleries

On the right hand column of this site you can see a section where I have put a menu with thumbnails for template downloads. It just occurred to me that I never got round to posting on this little trick which I figured out and which makes it very easy to make something like this by using the text widget and the regular post editor. Here's how it goes:

1) Start a regular post - except do not publish it but save it as a draft! (You can always go back and add to it later as well if you just keep the draft).

2) Put all your images and text in the post. (Your text will wrap automatically, however remember that your images will need to be sized to the width of the sidebar that you are planning to put the widget into).

3) I guess you could also add a background texture/color, or a border, or a bit of padding while you are still doing the post entry, as explained here >>>. I haven't tried this myself yet, but I am assuming that all of these attributes would show up on the text widget as well.

4) Select all the stuff on the HTML tab of the post editor and copy.

5) Start a new text widget, go to the HTML tab, then paste the code you got from the post editor into there.

6) Save! Done!

.................................................................................................................................

blogspot stuff: how to make your blog wider than 1000 pixels

Look for the first line of the following code inside the HTML editor and play with the values highlighted in black:

<b:template-skin>
      <b:variable default='930px' name='content.width' type='length' value='1000px'/>
      <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
      <b:variable default='360px' name='main.column.right.width' type='length' value='402px'/>

That's it!

Not that this would be a recommended thing for most sites, of course. However, if you want to do something of an artistic nature, which only folk with high screen sizes could see in full - this would be how, I guess... ;-)

.................................................................................................................................

blogspot template modification - shoezznutzz

http://shoeznutz.blogspot.com/

I indulged my love of weird shoes in order to make another template modification. ;-)

There isn't too much to tell with this one except that I like the menu on the bottom and worked quite a bit on getting that to sit right. The header text was created in photoshop, using layer styles. Although I am usually somewhat careful when it comes to colored typography, in this case it seemed to be a good choice since the site background and the design are both toned down enough for colored text to make a good contrast.

Something which has really added to the design here is the post recommendations widget which I was posting about a few days ago. And another thing which I put in here is a custom cursor, which I got from the free cursor site, which I posted about before here.

This one too started out from the picture window template, in this case the first one on the left. I just wanted to try something very simple and minimal to show the images. So, I changed the radius values and the background image URL's from the HTML editor, played around with fonts, type sizes, colors etc and that was pretty much it, outside of adding a border to the images. For which again, I used the CSS box on the Advanced Template Designer to put in this bit of code:

.post-body img {
padding: 12px;
background-color: #151515;
border: 1px solid $(image.border.color;
}

Download template and header visuals from here >>>

.................................................................................................................................

blogspot template modification - istanbul catz and dogs

http://istanbulcatz.blogspot.com/

A Flickr contact of mine named István Tóth takes the most wonderful Istanbul cat and dog photos. With his consent, I have now started a blog for them. Partly to provide tutorial material for the easy peasy page, but mainly because it is so much fun to do it! (great content = easy design, remember? ;-)

For this one I used the picture window template, the one in the middle with the red header. What I was looking for was something like the rounded rectangle background that goes underneath everything, including the header. Nice unification of design elements, that. The radiuses of the rectangle's corners were smaller than what I have here, so I looked for the word "radius" inside the HTML code and changed the values. Also, I replaced all of the background png files with my own stuff by doing a ctrl+F in the HTML editor for "png". Then as usual, I went to the Advanced Template Designer and changed the fonts, colors, etc from there.

Another thing which I used here is the code which Furkan found on Southern Speakers a few days ago, which allows you to have separate boxes for things you post on the same day.

There is one thing with this blog, which is that it is bi-lingual. Which means that in the posts I would like to somehow distinguish between Turkish and English. So, the English stuff gets some added code inside the HTML tab of the post editor. Nothing major - only one small line:

<span class="Apple-style-span" style="font-family: 'Times New Roman'; font-size: 17px; line-height: 1.8em;">english text</span>

The widgets got a custom treatment: They got a special shape, became wider, got a background color, etc. All of which I did from the CSS tab on the Advanced section of the Template Designer. And here is the code which I used for that, which you will need to apply to all the new widgets that you create:

#Gadget ID{
margin-top:20px;
margin-right:-15px;
margin-left:-5px;
padding: 15px;
background:#222222;
font-family:Arial;
font-style: normal;
font-size:13px;
text-align:left;
color: #888888;
border-radius: 20px;
}

I also added a border to the post images, again with the same CSS tab. And the code for that is this one, obviously you can change padding and color values as needed:

.post-body img {
  padding: 6px;
  background-color: #975858;
  border: 1px solid $(image.border.color;

There is a custom cursor on this as well. Those who would rather not have this will need to go into the code and remove the line which says
<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-7/cur671.cur), progress;}</style> 
and which comes just before
<b:skin><![CDATA[/*

And finally the header - where I tried something new: I placed the cat image (which is actually a part of the header) on the upper right hand corner in such a way that the header takes a curve around the post column. This was positioned as a separate image gadget, whose location I played around with using the CSS tab on the advanced designer. You can use your own image to replace what I have on the site. Create an image with a transparent background, save as a 24 bit png file and upload into the picture gadget.

The code for the placement of this is below, and please note how the margin values are huge big negative ones. This allows me to position the transparent png image above the header text, as well as the post, as a layer. Great! And I will certainly be experimenting with this feature a whole lot more:

#Image1{
margin-top:-100px;
margin-left:-44px;
}

And as for the header text, this was made with a layer style, however turned out to be way too strong in terms of color in the end. So, after I was sure of where everything was supposed to go, I merged the layers and colorized/desaturated the whole thing with the HSL palette and then saved this as a 24 bit PNG file with transparency.

Download template and photoshop file for the header here >>>

.................................................................................................................................

blogspot: separate boxes and timestamps for posts that were created on the same day

This is something which is much needed indeed! Furkan has spotted the solution at Southern Speakers where it is all explained very clearly here:

http://www.southernspeakers.net/2010/12/show-date-for-each-blogger-post.html

Thank you Furkan!

Southern Speakers seems to be hard to reach at times, so I am also copy pasting the code onto here. However, this is a really long bit of code, so to see it please take a jump break and

Find the first line of this code in the HTML editor:

<!-- posts -->

<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:defaultAdStart/>

    <b:loop values='data:posts' var='post'>

      <b:if cond='data:post.isDateStart'>

        <b:if cond='data:post.isFirstPost == &quot;false&quot;'>

          &lt;/div&gt;&lt;/div&gt;

        </b:if>

      </b:if>

      <b:if cond='data:post.isDateStart'>

        &lt;div class=&quot;date-outer&quot;&gt;

      </b:if>

      <b:if cond='data:post.dateHeader'>

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

      </b:if>

      <b:if cond='data:post.isDateStart'>

        &lt;div class=&quot;date-posts&quot;&gt;

      </b:if>

      <div class='post-outer'>

      <b:include data='post' name='post'/>

      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

        <b:include data='post' name='comments'/>

      </b:if>

      <b:if cond='data:blog.pageType == &quot;item&quot;'>

        <b:include data='post' name='comments'/>

      </b:if>

      </div>

      <b:if cond='data:post.includeAd'>

        <b:if cond='data:post.isFirstPost'>

          <data:defaultAdEnd/>

        <b:else/>

          <data:adEnd/>

        </b:if>

        <div class='inline-ad'>

          <data:adCode/>

        </div>

        <data:adStart/>

      </b:if>

      <b:if cond='data:post.trackLatency'>

        <data:post.latencyJs/>

      </b:if>

    </b:loop>

    <b:if cond='data:numPosts != 0'>

      &lt;/div&gt;&lt;/div&gt;

    </b:if>

    <data:adEnd/>

  </div>

Select the code and very carefully scroll all the way to the end, making sure you do not miss anything or select anything extra. Then delete all of what you selected and insert this instead:

<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/> 
 <data:defaultAdStart/>
 <b:loop values='data:posts' var='post'>
  <div class="date-outer">
   <h2 class='date-header'><span><data:post.timestamp/></span></h2>
   <div class="date-posts">
    <div class='post-outer'>
     <b:include data='post' name='post'/>
     <b:if cond='data:blog.pageType == "static_page"'>
     <b:include data='post' name='comments'/>
     </b:if>
     <b:if cond='data:blog.pageType == "item"'>
     <b:include data='post' name='comments'/>
     </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
     <b:if cond='data:post.isFirstPost'>
     <data:defaultAdEnd/>
     <b:else/>
     <data:adEnd/>
     </b:if>
      <div class='inline-ad'>
       <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
    <b:if cond='data:post.trackLatency'>
     <data:post.latencyJs/>
    </b:if>
   </div>
  </div>
 </b:loop>
 <data:adEnd/>
</div>

.................................................................................................................................

blogspot stuff: this (too) is "awesome inc"

I seem to notice in class that you are not really pushing the limits of the templates as much as you should. These templates are a fabulous start out point, however left in their default state they will hardly be adequate to suit any sort of ambitious design criteria. They are not even meant to do so - they are meant to be modified! And, as far as I can see, very few of you are modifying them to the extent where they will really suit your needs.

So, I have decided to do a few examples for you. Here is the first one: My visual communication history blog was long overdue for an overhaul, so it will be a good one to work on for this.

As visual material I have modified an earlier photoshop file, so nothing new there. I did make some new header typography for it, however. Which I may still change, not entirely happy with it yet... 

The template that I have used is one of the subcategories of awesome inc, and as a matter of fact it is that particularly nasty looking pink one with the white band underneath the header. So, yes, it did take quite a bit of work to get this to look the way that I wanted it to look.

What I did want out of this was a semi transparent background for the widget area. To get rid of all the white stuff I went into the code and replaced the image file which they had used with my own image file, a tiny 16 x 16 pixel semi transparent dark gray 24 bit png file, which I had previously uploaded to Picasa.  (Tip:  just do a ctrl+F for "http" and you will find all of it, since it is one linked image which has been used several times. And after that it is just a matter of replacing it with yours  ).

Next thing was adjusting all of the line heights. Which meant pasting this code into the CSS box all the way on the bottom on the advanced tab of the template editor. This is a really great thing (almost as good as the split window in Dreamweaver), since you can see the changes take effect as you are tweaking. The parameters you need to play with are highlighted in black:

#PopularPosts1 li{
line-height: 140%;
}
.post-body {
line-height: 1.7;
}
li{
line-height: 140%;
}

And then finally, all the other colors, etc, were fixed in the advanced editor as well. And, now I have a brand new look on my blog! See it in action here:
http://visualcommunicationhistory.blogspot.com/

You can also download the template from here >>>

.................................................................................................................................

using a blogspot template for a fast design job

I was asked to put together a fast and furious promotional design package for this upcoming event at our university. And what better way to do it than right here? Ultra-fast, ultra-clean and ultra-easy design solution!

What this approach has given me is an instant visual identity, complete with color scheme, typographic scheme, visual side elements (the thin strokes), and of course grid, layout and structure. Such a visual identity normally takes quite some time to put together, but it has turned out to be a cinch here. And once you have this in place, it is very easy to adapt it to other media as well, which is what I may need to do eventually.

I took the Ethereal template, which I have been wanting to play around with anyway, because of those really nice thin lines which you can have running at both sides of your content once you make the main background transparent and keep the border as a color. Added a dark gradient background, changed fonts and colors a bit  - and not even all that much, to be honest. Only problem with this template is that you cannot modify the size of the blog description, unless you go into the code. However, that can very easily be fixed by importing the header text as a png file from photoshop. And here we are:

http://isea2011leaf.blogspot.gen.tr/

The organizers may also want a poster at some point. No problem! This is a perfectly aligned, well structured, ready to go layout in which all the visual hierarchies are correctly placed. (Not bragging or anything, nothing that I spent a lot of time figuring out, just works that way - the indigenous web format sees to all of that most efficiently ;-). So, as I already said before, this will adapt itself to other media quite easily. And, since almost everything here is text based there will be no major resizing issues either. All I will need to do therefore, is to print this page as a pdf, at an A2 size (or even larger), open it up in Illustrator, where all of the text will still be editable by the way. Delete whatever isn't working (which will be all the bitmap based stuff), clear the background and the header (again, both are bitmap and won't resize without some very serious loss of quality), and then copy paste the whole shebang into photoshop, which I vastly prefer to Illustrator as a design medium. Add the images, the background, the header and - you have a poster!

Or even change the format (portrait to landscape, different aspect ratios, etc), move the elements around, and you have a flier, an invitation, a brochure - whatever it is that you need really...

.................................................................................................................................

how to add a poll into a blogspot post

Easy enough to add a poll as a gadget, however what happens if you want to put a poll into one specific post only? Can be done as well, and this video shows us how:

http://www.youtube.com/watch?v=qoK9lHMjnDc
Ingenious, huh? Tried it, works like a charm... ;-)

.................................................................................................................................

a new (cleaner) look for easy peasy

This blog is getting to be quite big now. We have lots of different material, from plain text, to code samples, to photo gallery and slideshow demos, to lots and lots of different types of images. And when we start thinking in terms of design functionality, such diverse and colorful content needs a much quieter, simpler container.

I had been wanting to do something with the "Simple" template ever since I started this blog since it has a really cool, minimalist interface. There were a few problems with it however, such as that the default line height is way too narrow, both in the post body and in the gadgets. And when I started this blog only a few weeks ago I had no clue as to how to fix that! This last month has been a hugely instructional time for me - and this comes with a huge big thank you to Selim, who has undertaken not only our student's education in "code", but also mine.

And - I am totally loving it as well. All this fiddling around with code values and hunting around for them has gotta be the best fun that I have had in front of a computer in quite some time!

So, first I saved the old template for all the bits and bobs that I had put in the header. Then I installed the "Simple" template, copy pasted whatever was needed from the old one onto here; fixed all the other stuff that I felt wasn't quite right with the new template (namely all the line heights), tweaked the old header image a bit, changed the background image - and hey presto - we now have a much cleaner looking blog!

.................................................................................................................................

blogspot stuff: and if you want to edit the text attributes of your popular posts?

First off, you need to be aware that although they look like as if they are, these are not really made up of regular text fields; in fact the whole shebang is hypertext - in other words these are all links. Which Selim, sharp cookie extraordinaire that he is, figured out in a nano-second of course. So, as an example, if you want to change the line height, again scroll to the end of the widgets section inside the HTML editor, where again you need to find the line which says

/* Posts
----------------------------------------------- */
before which (while you are still in the widgets section) you paste:
#PopularPosts1 li{ 
line-height: 140%; 
}

And this will stop the text of your popular posts being all squished up in that horrible way. The value 140%, which is highlighted in black can of course be changed to whatever you wish it to be.

.................................................................................................................................

aligning the top of your columns in blogspot

You may already have noticed that the top of the post column at blogspot stands a few pixels above the gadget columns, and if you are like me you are probably dying to fix that. Yesterday in class I was delighted to find out that our student Furkan is bothered by this as well, so this post is especially for him :-).

Funnily enough the blog section at blogspot is perceived as yet another widget by the code! Which Selim most ingeniously figured out - one smart cookie, that one! So, you actually need to go to the bottom of the widgets section of the CSS in the HTML editor, where you will see this line, which is the start of the next section:

* /Posts

----------------------------------------------- */

Then add this code directly above that line, while you are still inside the widgets section, that is:

#Blog1{

margin-top: 6px;

}

Then play with the pixel value highlighted in black until all the stuff is aligned. In the case of this page this was 6 pixels, could be less or more in yours, of course.

.................................................................................................................................

blogspot stuff: finding your gadget ID

This is something which you need to know about if you wish to configure the properties of your individual gadgets in the HTML editor. They are well hidden out of sight, however can be found at the very end of the address bar of the gadget when you are on the Design panel: Click to edit the gadget, scroll all the way to the right, to where the mouse cursor on the image is pointing - and there it is!

.................................................................................................................................

no more bands underneath your top gadgets in blogspot

And following closely, is another really good one from SouthernSpeakers:

Unfortunately it isn't only your pages gadget! Any gadget you place up at the top of your page seems to get this nasty old band underneath it. To get rid of them once and for all, simply go to Design > Template Designer > Advanced > Add CSS and paste the following code: 

.tabs-outer {
  background: none !important;
}
.tabs-cap-top, .tabs-cap-bottom {
  border-top: none;
}

Then press enter after the last character of the last line } (after the last curly bracket, in other words). Apply to Blog. Done!

Thank you SouthernSpeakers! Awesome!
__________________________________

And here is Onur's addition: The page that he has directed us to tells us to do one of two things with the following text. You can either go to the Template Editor > Advanced > Add CSS. Or you can go directly to the HTML editor and look for ]]></b:skin> and paste it right before that line.

So, here is the code if you want to center your pages:

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

If you want the pages to align right however, then this is it:

.PageList {text-align:right !important;}
.PageList li {display:inline !important; float:none !important;}

If the tabs stack on each other after you added the code, replace display:inline with display:inline-block.

 ( Note:   And be sure to catch the little fullstops at the beginning of every line of the code. Very easy to miss, so be extra careful!  ) 

.................................................................................................................................

how to stop your pages gadget stretching all the way across your blogspot site

The fact that this happens is one of the reasons why I have not been using this gadget since it breaks up your page in a really nasty way. Here is how to fix it:

Go to Design > HTML editor. Find the line which says
/* Headings ----------------------------------------------- */

Then, paste the following code directly above it:
/*--Pages Gadget No-Stretch Starts--*/
.tabs-outer {
background: transparent !important;
}
.cap-top, .cap-bottom{
border: none !important;
}
.tabs-inner .widget li a{
border: none !important;
border-right: 1px solid $(tabs.border.color) !important;
}
#crosscol{
background: $(tabs.background.color) $(tabs.background.gradient);
border: 1px solid $(tabs.border.color) !important;
}
/*--Pages Gadget No-Stretch Ends--*/

Comes to us from SouthernSpeakers, a great site for all sorts of blogspot codes. Lots more there, definitely check them out!

.................................................................................................................................

nice clean search box

I don't know about others, but I was hugely bothered by the way the default search gadget looks on blogspot - the way the 'search' button shoulders its way into the actual search area and then all that 'powered by google' stuff below...

So, here is the code for a squeaky clean one, no buttons, no nothing, just a plain empty entry field. And as is usually the case - "less is more" once again! Simply copy/paste this code into an HTML/Javascript gadget. Change the value highlighted in red to get the correct width and you are all set to go:

<form action="/search" id="searchthis" method="get" style="display: inline;"><input id="search-box" name="q" size="18" type="text" /></form>

.................................................................................................................................