Another success

 

I've managed to get an inner background colour onto my blog here.

This is the section in the blog. I added the gif where you can see the URL:

  background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
  _background-image: none;
}
.content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  margin-bottom: 1px;
}
.content-inner {
  padding: $(content.padding) $(content.padding.horizontal);
}
$(content.background.color.selector) {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Fv1ew5KLN0d1NM67LM5D3CB-Ll_WAoRy8rNEB72-uz2NRYVxMjvkNR34lI-dtlUlkUTMNGWwWzKgma8mqlmYiPedP_DgL7MfilRgCvZF7SnyI5vJQlpN2avJ8XYHp1aWnqlqIehtJok/s400/sw1bg3b.gif");
}
/* Header
----------------------------------------------- */

Adding tabs to a classic template

Look above at Cross stitching like crazy:


I've added tabs to an out-of-date template.
I'm very pleased with myself, I must say.

So, how did I do it?
I went to this site:
Markandey's Blog

This is what he told me to add:


STEP-1 Go to Blogger Dash board

STEP-2 Go to layout section of your blog, and go to edit HTML
[Save your template, to make sure that if anything will go wrong, you
can restore the things back]

STEP-3: Grab this code
#tabsB {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
}
#tabsB ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsB li {
display:inline;
margin:0;
padding:0;
}
#tabsB a {
float:left;
background:url("http://sites.google.com/site/hackbit/tableftB.gif")
no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsB a span {
float:left;
display:block;
background:url("http://sites.google.com/site/hackbit/tabrightB.gif")
no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#tabsB a span {float:none;}
/* End IE5-Mac hack */
#tabsB a:hover span {
color:#000;
}
#tabsB a:hover {
background-position:0%
-42px;
}
#tabsB a:hover span {
background-position:100%
-42px;
}

STEP-4 Paste this code(above code) just after body CSS which will look like
this
body {
background:$bgcolor; margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small; font-size: /**/small;
text-align: center;
}
STEP-5 Grab following code (customize the link as per your need)

• Link 1
  
  
• Link
  2
  
  
• Link
  3
  
  
• Longer
  Link Text
  
  
• Link
  5
  
  
• Link
  6
  
  
• Link
  7
  
  

STEP-6 Paste the above code in you HTML template after header section (the line which will look like this) title="Experimenting Blogger (Header)" type="Header"> STEP-6 Done!!, save the template and view your blog

Stuffing around with the template

This is going to make or break my confidence with the new blogger. I want what I like and not what blogger wants to give me in the way of templates. Go back to my last post to see how the blog looked to start off with because I'm sure that by the time I get to the end of this, it will have changed!

Using the "Links"

Using the link button which is in the composing section above and then opening the site into a new window by adding a target="_blank code, I'm going to show you what my Bliss-X-stitches currently looks like. It has taken years of refinement but one still has a few bugs: namely that its font is a bit small: Blissxstitches.

Well, well, well!

What I just learned about links is interesting. I used the same codes to get back and to go to the Bliss-X-stitches sites but one scrolled to the article and the other opened, as expected, in a new window. While this wasn't the intent, I still find it cool.

Using the 'add page' button

This was an interesting outcome. Of course, it doesn't work with my old template. It's a keeper for now!

Changing the background ü

That's about the only thing I've worked out how to do. The editing stuff won't let me show the headings on the page.

Some hours later ...

We're cooking with gas!

Here is where I was at at the end of the first post.

Now for some experimenting on pictures. What I found to start off with is that I suck at organising pictures according to Blogger. I know how to do it with html but not using the new fangled methodology which gets the pic opening in another window (something I don't actually like). Hence, I'm happy to leave it as a 'large' picture with my own code to make it come up as a pic in another window when you click on it.

New beginnings

I'm not so keen on all the changes in Blogger, but the reality is that I have to learn how to live with them and use them if I want to keep posting in my home blogs.
Hence, this is my experimental change.

My Goals

1. Change the template
   to the way I like it and to see if I can reproduce a version of templates that might suit my other blogs.
2. Experiment with a few of the extras my classic blogs don't have.

This is where I am with this first post

OK. That will do for now. Let me begin.

Today

1. I added the new blog. ü
   
2. To that, I added a picture (the one above). I'm now going to 'fiddle' with the html and get it to be the way I like my pictures to be in blogger.ü

What I've learned so far today

1. The first way I get the tick symbol (ü) is by adding this code which is a picture: <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV83IgEspXgp2VbCHiEW4LWUJox1pxehrrHPUaQieExYueOtut3XhSHpq1yVzG-Kd9sj3M8lvLeOdQ53Ozi5ljSGnzCPaXGC9ypp7w3ueYKeBRXgTzC0DxKoxfnoOK8xy2b4Iao6urClfz/s1600-h/tick2.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5035432702739704946" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV83IgEspXgp2VbCHiEW4LWUJox1pxehrrHPUaQieExYueOtut3XhSHpq1yVzG-Kd9sj3M8lvLeOdQ53Ozi5ljSGnzCPaXGC9ypp7w3ueYKeBRXgTzC0DxKoxfnoOK8xy2b4Iao6urClfz/s320/tick2.jpg" /></a>
2. The second way is adding this code for ü in wingdings font: <span style="font-family: wingdings; font-size: 200%;">&#252;</span>
3. The tick symbol comes up as an umlaut u on a mobile device like my iPhone. Ah well.