blogspot stuff: adding a background color to the date header of the awesome.inc template

Find this code in the HTML editor (widgets expanded, of course):

.main-inner .widget h2.date-header span {
  font: $(date.font);
  display: block;
  padding: .5em 15px;
  border-left: $(date.border.size) solid $(date.border.color);
  border-right: $(date.border.size) solid $(date.border.color);
}

Then replace that one with this one:
.main-inner .widget h2.date-header span {
  font: $(date.font);
  padding: 1px;
  margin-left: 14px;
  border-left: $(date.border.size) solid $(date.border.color);
  border-right: $(date.border.size) solid $(date.border.color);
  background: #yourhexcode
}

As you can see I have removed one line and also changed the padding. I also added a left margin in order to align stuff, your values may again be quite different than these. These are things that looked good with my particular design, you may want to go with other values or even keep the block display altogether, in which case the colored area will stretch across the width of the post as a bar.

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

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 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 stuff: removing the top navigation bar

Very simple, if you know where to look, which our ingenious student Furkan obviously did: Go to the HTML editor and find this bit of code: ]]> Before this snippet put #navbar { display: none; }

Furkan tried it and as you can see it works perfectly!

I tried it too and the only fly in the ointment which I can see with this is that it makes one lose the quick access to the design button on the right hand side of the bar. I guess one could keep the design editor open in a separate tab or something. 

Thank you again Furkan and keep the good stuff coming please. Much appreciated!

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

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... ;-)

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

moving the header image in blogspot

I could beat myself up! All that time I spent trying to align header images! And it never even occurred to me that there might be a really simple way of doing it (or rather of polishing things off). Well, there is, and this is it:

#header img {
margin-top: 0px;
margin-left: 0px;
}

Paste the above code into the CSS box on the Advanced Template Editor, play with the values highlighted in black - and watch things move!

Not that this will save you the initial design work that needs to be undertaken in the image editor, obviously. To get a really good clean look you will still need to align the blog columns and the header elements in the way in which I described it here. However, all that done, you may (and probably will!) need to tweak things still further once back inside the HTML environment. And that would be the point where this code snippet will prove its weight in gold!

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

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 >>>

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

the trio: padding - border - margin

The most common and confused elements of the css.

Border: As the name suggest it is the border around your element. If the border has 0 width, the border edge is the same as the padding edge and invisible.

Padding: Defines the space between border and element content. If the padding has 0 width, the padding edge is the same as the content edge. This means that your content will stick to the edge of your defined content box.

Margin: Defines the space between border (if you don't have a border then padding, and if you don't have a padding then content)  and other surrounding elements. If the margin has 0 width, the margin edge is the same as the border edge(if you don't have a border then padding, and if you don't have a padding then content).

Each edge of margin, padding and border may be broken down into a top, right, bottom, and left edge. (for ex: padding-right: , margin-left: , border-bottom: etc.)

The image below may give you a better understanding.

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

CSS position attribute

Position is the most vital component in web design and thus it deserves a separate post of its own. It tells your elements where and how they will be positioned in the flow of the page.

There are basically four different positioning properties that are available.

Static: The default property. You don't need to specify this unless you want to enforce a change on your element which receives a different position property from a parent element that is out of your control. Static does not do anything, it practically places the element into the flow of the page in the order it is written in the HTML.

Absolute: Like the name suggest, it is the most overwhelming positioning property. When you choose position:absolute, you have to specify the position by using attributes such as left: , right: , top: , bottom: (not all of them are necessary, use just the ones you will need). These will position your element according to the next parent element, if there are no other parent elements then it will take top-left corner as the reference point.

Beware while using absolute positioning, as powerful as it is, its improper use will restrict the flexibility of your page. As the absolute positioning removes your elements from the flow of the page, they will no longer be in interaction with the other elements of the page. They will rather become stand-alone elements that don't get effected by where other elements are.

Relative: The most commonly used positioning property. When used properly it is the most effective tool that opens up a bunch of powerful opportunities. However it is also the property that gets used improperly most of the time, leading to various problems.

It is confusing because when you say relative, people tend to think that it is relative to some other element, whereas it actually means relative to itself. Let me explain this with a simple example. Say you give an element position:relative; and no other attribute. In this case, you will have your element placed in the flow of your page just as it would have been in static. However when you start giving it attributes such as left: , top: , then you will have your element's position shifting relative to where it should have been.

With the relative property you also gain the chance to use z-index attribute, which is a very powerful attribute. It allows you to place elements on top of each other, the element with the higher z-index will always show up on top. There is a catch though, if you have a static element in that area, it will always be at the bottom even if you specify a z-index. this is something you have to plan beforehand.

Fixed: The rarest property among all four. It certainly has its uses, but has to be thoroughly tested because it has proven to be one of the most problematic on different screen resolutions.

This property positions the element relative to the browser window. When you scroll a page the browser window doesn't change thus your element will stay where it is no matter what, it will practically scroll with your page.

The most popular uses of this property are having a non-scrolling background image, having your header always stick up to the top of the window and having your footer always stick to the bottom of the window. Sometimes it is also used to keep sidebar navigation in view at all times as well, though this is highly unrecommended. Also do never use this for content area elements unless you have an overwhelmingly creative idea.

Bonus Tip: Relative+Absolute: If you have a parent element that has relative position, you can create a child element to it and then absolute position it inside that relatively positioned element.

If you want to delve into the topic more and get a good grasp of the uses, I recommend you to read this 10 Step Guide which explains the uses very clearly.

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

HTML/CSS starter kit

I have prepared a simple webpage including a header, footer, navigation area and 3 columns. It is written in W3 standards and shows all the simple actions such as ordered lists, unordered lists, image placement, use of header and paragraph texts, linking, styling using css and also inline styling. Of course there are hundreds of layouts to be explored and it is up to your imagination. This is only an example to get you started and familiarized with the structure. You can download it from here. Alternatively here.

The .rar file also includes a commonly used styles.txt for a reference point. But it is impossible for me to explain how each one of them is used or what their variables are. I highly recommend that you take a look at this. It will give you a great insight on how you can use them efficiently, if you are planning on coding your own website. 

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

custom header for blogspot

As you will see up top we now have a custom header. Not just a plain header text image, but also a second line with a menu and image rollovers. 

Very easy (and also very tough) to make: The tough part was getting things aligned properly and it basically just involves a lot of trial and error. Lots of going back and forth between photoshop, dreamweaver, blogspot and picasa to where I uploaded the blog title image which I kept tweaking to get right and then re-uploading. Still not completely there - but it will have to do, I guess.

I used a basic table*** inside dreamweaver to assemble this, from where I copy pasted the entire code (also including what was in the <head>) into a custom HTML/Javascript gadget. The gadget will automatically delete unneeded info as it saves, except for one line at the top - the document title, which you have to then go back and get rid of manually.

Something to remember when you do this is that you have to put all the images that you are using online first, and then embed the image URL's into the correct table cells in the HTML editor. The menu is actually a direct copy paste from the HTML gadget which we had on the sidebar, into a table cell in dreamweaver, and the images which that one uses are also online, of course.

Dreamweaver, with it's split window is wonderful of course, and I have been looking around to see if there is a comparable software which is free. However, no such luck so far. The best that I have been able to find is called Page Breeze and you can download it from here >>>. You do have a visual interface on this, which helps, however no split window, I'm afraid.

And finally, you can see the full code of the header, where I am also highlighting a few important parameters which you need to pay attention to in order for everything to properly work, here >>>.

*** No lovely CSS <div>s for me. My skills do not go that far - not even close... ouch!

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

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.

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

splitting up the header in blogspot

Today seems to be shaping up as a Fırat Gunal day here on easy peasy. While he is busily developing his own site he has been fabulous about finding some really useful stuff which we can share here as well: 

You may want to add a button or a search box onto the header of your website. In which case you need to split it. Here, as re-blogged from BloggerSentral, is how to do this:

Go to Dashboard > Design > Edit HTML. Make sure the Expand Widget Templates check box is un-checked. Look for the following lines in your HTML code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Test  Blog (Header)' type='Header'/>
</b:section>

Insert the following code right under (after) it:
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

So the final code should look like this:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogger Sentral Widget Showcase (Header)' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

You now have two sections in the header, the section with the existing blog title on top and the new section below it. You will now need to position the sections side by side, by floating the section containing the blog title to the left,  and the new section to the right. To achieve that, locate this line of code:

]]></b:skin>

Add the following CSS code right before (on top of) the line:
#header, body#layout #header {width:50%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

Now it is time to add the banner, search box, or whatever it is that you want to add. Go to Design > Page Elements and click the Add A Gadget link to add your widget. If the added widget shows up under the blog title (instead of on the same level, on it’s right), go back to the CSS code, and change header and header-right widths and experiment with different values until you get it right. And you can see a screenshot of how this looks on Fırat's post.

 (Extra little tip from Fırat:  You can also do this by going to Design > Template Editor > Advanced > Add CSS where you will see the newly added code and also how the header looks on the page. Much easier to tweak values when you actually see what you are doing at the same time!  ;-) 

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.

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

playing with blogspot widgets (gadgets)

As we have talked in the class last week, it is possible to separately edit every widget, give them different backgrounds, alignments, borders, colors, fonts etc. Here is how you do it:

The "widget id" is the only thing you need to edit the widget, but first you need to find it of course. To find the ID of the gadget you wish to modify, please read this previous post here.

Now go into the HTML editor, into the CSS part and find the section entitled "Widgets", then scroll down to the end of the section, just above the part where "Posts" section starts. In other words search for this line:
* /Posts
----------------------------------------------- */
And then all you have to do is; add the code given below straight above this line. The word Label1 in the topmost line, which is highlighted in black, is what you replace with the ID that you have found in the way described in the above linked post.

#Label1{
margin-top:20px
padding-left: 5px;
background:#ddddd;
font-family:arial, sans-serif;
font-size:11px;
text-align:left;
color: #db4c46;
};

The styles I have used are just for example, you can use as many or as few as you wish.

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

backgrounds: one size fits all

Here is what to do if you want to have a background image that will automatically re-size itself according to the browser windows size (thus also for different screen resolutions).

First off be sure to get a nice large image around 16:9 ratio size having preferably 1900 px width, reduce its size (not in pixels, as in kbs) so it is not larger than 300-450 kbs(even this is too large but it will do).

Then upload it to someplace where you can have a direct link to it.

Finally go into "Edit HTML" from the design tab. Find "body {" in the css section. (just searching that quote without the quotes will get you there if you can't see it). It will most likely look something like this:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}
Now, replace this part;
background: $(body.background);
with this;
background: url(http://www.yoururl.com/your_image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
You should have something like this as the final result;
body {
  font: $(body.font);
  color: $(body.text.color);
  background: url(http://www.yoururl.com/your_image.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

This will work in most of the latest versions of known browsers.

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

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!

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

can you resize a full background image on an HTML/CSS website?...

... one of my students wanted to know last week. Well, seems that you can:

http://css-tricks.com/how-to-resizeable-background-image/

And you can see a demo of it in action here:

http://css-tricks.com/examples/ImageToBackgroundImage/

Apparently this works with just a few lines of code which you insert directly into the CSS:

#img.source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}

Very very nice indeed! Lots and lots of other really cool code snippets (as they call them over there) to check out on their huge site. So, thank you Chris Coyier and CSS-Tricks!

 Note:  I have been thinking, and in order for this to give a good result your image aspect ratio would need to be 4 x 3 so that it reaches down effectively at sizes like 1024 x 768 or 1600 x 1200. However the width would need still need to be 1920 so that it also stretches to 1920 x 1080. Which makes the vertical value 1440. So, 1920 x 1440 is what you need. Which is pretty big and may be difficult to bring down to 300KB, which is the limit on blogspot background images. Read more on browser sizes and background images here  ) 

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

playing around with (HTML) type

I haven't really been looking too carefully at the compose tab when I am entering a post, I guess. Just noticed now that (unlike wordpress) blogspot allows you to change the fonts and sizes of bits inside the text intuitively.

Great news! Means you can have custom designed block quotes on your posts, without having to write too much code! (The default block quote command does not look too clever since it pushes the text inside, so it is usually quite tough to get things correctly aligned with it).

Of course, one would need to be very careful when doing any of this because it might end up looking absolutely awful if you don't get it right. Still, I cannot resist and am trying one out right now. The body text on this blog is Arial so I will use Times New Roman to get a nice contrast between sans-serif and serif. Usually works very well - especially if serif is also set in italic:

______________________________

And now I will make this quite big, so that it really stands out from the body text.

______________________________

Since this is a special element, a strong color should be OK to use for type: So, I made this a dark blue for added accentuation. Now, I will go back to the regular font size/color and write some more, so that I have enough text to fill the post - a block quote needs a lot of text to nest inside properly. Notice that I also added lines to top and bottom to give it even more definition. While the body text is justified, the big text is flush left since at such a big size it would be very difficult to justify the type and not get "white rivers", which are the lines that run through and break up body text vertically. Very clumsy whenever that happens...

Although I started out on the compose tab I ended up tweaking the code in the HTML tab of the post editor quite a bit: Changed the font size from x-large to a pixel value, and also I changed the line height with an added <div> tag. So, here is what the code for this ended up looking like (the stuff that I added/tweaked is marked up in black):

<div style="line-height: 30px;"><i><span class="Apple-style-span" style="color: black; font-family: 'Times New Roman', serif; font-size: 38px;">And now I will make this quite big so that it really stands out from the body text.</span></i></div>

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