tag:blogger.com,1999:blog-9311982594656715172024-02-21T06:30:05.126+08:00Experimenting with Blogspot"If you must play, decide on three things at the start: the rules of the game, the stakes, and the quitting time."Felicityhttp://www.blogger.com/profile/13814316244416690454noreply@blogger.comBlogger5125tag:blogger.com,1999:blog-931198259465671517.post-9320398114381777402012-04-22T09:10:00.001+08:002012-04-22T18:45:18.591+08:00Another success<h3>
</h3>
I've managed to get an inner background colour onto my blog here.<br />
<br />
This is the section in the blog. I added the gif where you can see the URL:<br />
<br />
<span style="background-color: black; color: white;"> background: transparent $(body.background.gradient.cap) repeat-x scroll top left;<br />
_background-image: none;<br />
}</span><br />
<span style="background-color: black; color: white;">.content-outer {<br />
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);<br />
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);<br />
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;<br />
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);</span><br />
<span style="background-color: black; color: white;"> margin-bottom: 1px;<br />
}</span><br />
<span style="background-color: black; color: white;">.content-inner {<br />
padding: $(content.padding) $(content.padding.horizontal);<br />
}</span><br />
<span style="background-color: black; color: white;">$(content.background.color.selector) {<br />
<span style="background-color: red;"> background: url("</span></span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Fv1ew5KLN0d1NM67LM5D3CB-Ll_WAoRy8rNEB72-uz2NRYVxMjvkNR34lI-dtlUlkUTMNGWwWzKgma8mqlmYiPedP_DgL7MfilRgCvZF7SnyI5vJQlpN2avJ8XYHp1aWnqlqIehtJok/s400/sw1bg3b.gif"><span style="background-color: red; color: white;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Fv1ew5KLN0d1NM67LM5D3CB-Ll_WAoRy8rNEB72-uz2NRYVxMjvkNR34lI-dtlUlkUTMNGWwWzKgma8mqlmYiPedP_DgL7MfilRgCvZF7SnyI5vJQlpN2avJ8XYHp1aWnqlqIehtJok/s400/sw1bg3b.gif</span></a><span style="background-color: red; color: white;">");<br />
}</span><br />
<span style="background-color: black; color: white;">/* Header<br />
----------------------------------------------- */</span>Felicityhttp://www.blogger.com/profile/13814316244416690454noreply@blogger.com0tag:blogger.com,1999:blog-931198259465671517.post-23370384067410890652012-04-22T08:10:00.002+08:002012-04-22T08:22:46.374+08:00Adding tabs to a classic templateLook above at Cross stitching like crazy: <br />
<br />
<br />
I've added tabs to an out-of-date template. <br />
I'm very pleased with myself, I must say. <br />
<br />
So, how did I do it? <br />
I went to this site: <br />
<a href="http://www.markandey.com/2009/06/how-to-add-tabs-on-blogger_25.html">Markandey's Blog</a> <br />
<br />
This is what he told me to add: <br />
<br />
<br />
STEP-1 Go to Blogger Dash board <br />
<br />
STEP-2 Go to layout section of your blog, and go to edit HTML <br />
[Save your template, to make sure that if anything will go wrong, you <br />
can restore the things back] <br />
<br />
STEP-3: Grab this code <br />
#tabsB { <br />
float:left; <br />
width:100%; <br />
background:#F4F4F4; <br />
font-size:93%; <br />
line-height:normal; <br />
} <br />
#tabsB ul { <br />
margin:0; <br />
padding:10px 10px 0 50px; <br />
list-style:none; <br />
} <br />
#tabsB li { <br />
display:inline; <br />
margin:0; <br />
padding:0; <br />
} <br />
#tabsB a { <br />
float:left; <br />
background:url("http://sites.google.com/site/hackbit/tableftB.gif") <br />
no-repeat left top; <br />
margin:0; <br />
padding:0 0 0 4px; <br />
text-decoration:none; <br />
} <br />
#tabsB a span { <br />
float:left; <br />
display:block; <br />
background:url("http://sites.google.com/site/hackbit/tabrightB.gif") <br />
no-repeat right top; <br />
padding:5px 15px 4px 6px; <br />
color:#666; <br />
} <br />
/* Commented Backslash Hack <br />
hides rule from IE5-Mac \*/ <br />
#tabsB a span {float:none;} <br />
/* End IE5-Mac hack */ <br />
#tabsB a:hover span { <br />
color:#000; <br />
} <br />
#tabsB a:hover { <br />
background-position:0% <br />
-42px; <br />
} <br />
#tabsB a:hover span { <br />
background-position:100% <br />
-42px; <br />
} <br />
<br />
STEP-4 Paste this code(above code) just after body CSS which will look like <br />
this <br />
body { <br />
background:$bgcolor; margin:0; <br />
color:$textcolor; <br />
font:x-small Georgia Serif; <br />
font-size/* */:/**/small; font-size: /**/small; <br />
text-align: center; <br />
} <br />
STEP-5 Grab following code (customize the link as per your need) <br />
<div id="tabsB"><br />
<ul><li><a
href="#" title="Link 1"><span>Link 1</span></a
</li><br />
<br />
<li><a
href="#" title="Link 2"><span>Link <br />
2</span></a
</li><br />
<br />
<li><a
href="#" title="Link 3"><span>Link <br />
3</span></a
</li><br />
<br />
<li><a
href="#" title="Longer Link Text"><span>Longer <br />
Link Text</span></a
</li><br />
<br />
<li><a
href="#" title="Link 5"><span>Link <br />
5</span></a
</li><br />
<br />
<li><a
href="#" title="Link 6"><span>Link <br />
6</span></a
</li><br />
<br />
<li><a
href="#" title="Link 7"><span>Link <br />
7</span></a
</li><br />
<br />
</ul>
</div>
STEP-6 Paste the above code in you HTML template after header section (the line
which will look like this)
<?xml:namespace prefix = b /><b:widget id="Header1" locked="true" br="">title="Experimenting Blogger (Header)" type="Header">
</b:widget>
STEP-6 Done!!, save the template and view your blog <br />
<br />
Felicityhttp://www.blogger.com/profile/13814316244416690454noreply@blogger.com0tag:blogger.com,1999:blog-931198259465671517.post-48419257719063020582012-04-20T10:39:00.001+08:002012-04-20T14:10:30.731+08:00Stuffing around with the templateThis 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. <a href="http://experimenting-with.blogspot.com.au/2012/04/here-is-where-i-was-at-at-end-of-first.html" target="_blank">Go back</a> 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! <br />
<br />
<h3>Using the "Links"</h3>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: <a href="http://blissxstitches.blogspot.com/" target="_blank">Blissxstitches</a>. <br />
<br />
Well, well, well!<br />
<br />
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.<br />
<br />
<h3>Using the 'add page' button</h3>This was an interesting outcome. Of course, it doesn't work with my old template. It's a keeper for now!<br />
<h3>Changing the background <span style="font-family: wingdings; font-size: 200%;">ü</span></h3><br />
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.<br />
<h3><br />
Some hours later ...</h3><div align="center"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCXKT8dcW_8eyEegXAF765pp2V21QImqM9D59dEIYma8HsqdQ1DdNUv1UpExQVWZqfiezYqNt16rO9wO649KSRhu4IWo1o_OBUxcgnWS6cKMQzAOm3128pRBjUs_6KHS70QRhgYxbdwPY/s1600/Blog+3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="269" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCXKT8dcW_8eyEegXAF765pp2V21QImqM9D59dEIYma8HsqdQ1DdNUv1UpExQVWZqfiezYqNt16rO9wO649KSRhu4IWo1o_OBUxcgnWS6cKMQzAOm3128pRBjUs_6KHS70QRhgYxbdwPY/s320/Blog+3.jpg" width="320" /></a><br />
We're cooking with gas!</div><br />
<br />
<br />
<br />Felicityhttp://www.blogger.com/profile/13814316244416690454noreply@blogger.com0tag:blogger.com,1999:blog-931198259465671517.post-65105365605381118582012-04-20T10:16:00.001+08:002012-04-22T09:24:02.191+08:00<div align="center"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2u53ZYt5wlKaMhH6DUHyYvf7CRqisTiDOCYR0glziGQtjcK39OeIOmseYB-c9FT0V0jsGHEDyQVDLT1ERVcwjDz8IZCUngddSBFcrnVggc_W0jWbPWZvUE9roDcihYQvO1X6gpsJVTMQ/s1600/Bogger+2.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2u53ZYt5wlKaMhH6DUHyYvf7CRqisTiDOCYR0glziGQtjcK39OeIOmseYB-c9FT0V0jsGHEDyQVDLT1ERVcwjDz8IZCUngddSBFcrnVggc_W0jWbPWZvUE9roDcihYQvO1X6gpsJVTMQ/s400/Bogger+2.jpg" width="400" /></a></div><br />
Here is where I was at at the end of the first post.<br />
<br />
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.Felicityhttp://www.blogger.com/profile/13814316244416690454noreply@blogger.com0tag:blogger.com,1999:blog-931198259465671517.post-3519710677167563942012-04-13T09:50:00.000+08:002012-04-20T12:09:35.623+08:00New beginnings<div style="text-align: left;">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.<br />
Hence, this is my experimental change.<br />
<br />
<br />
<h3>My Goals<br />
</h3><ol><li>Change the template<br />
to the way I like it and to see if I can reproduce a version of templates that might suit my other blogs.</li>
<li>Experiment with a few of the extras my classic blogs don't have.</li>
</ol></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkDHiTM83QUATVeLzZ5JIxTh2sZhuXPGjXA1M8wsI_imvVDaUVfLMe8yQXALt13nozWy4J6gnzcgTrgOoxPuuNRPbhcyMdbNhxqCeqZm3AfM_-vj4Ee8wFoj-kMUpMQsxm8c47c9RIIsA/s1600/blog+1+copy.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkDHiTM83QUATVeLzZ5JIxTh2sZhuXPGjXA1M8wsI_imvVDaUVfLMe8yQXALt13nozWy4J6gnzcgTrgOoxPuuNRPbhcyMdbNhxqCeqZm3AfM_-vj4Ee8wFoj-kMUpMQsxm8c47c9RIIsA/s320/blog+1+copy.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">This is where I am with this first post</td></tr>
</tbody></table><div style="text-align: center;"><br />
</div><br />
<br />
OK. That will do for now. Let me begin.<br />
<br />
<br />
<br />
<h3><br />
<br />
<br />
Today </h3><ol><li>I added the new blog. <span style="font-family: wingdings; font-size: 100%;">ü</span> <br />
</li>
<li>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.<span style="font-family: wingdings; font-size: 100%;">ü</span> </li>
</ol><h3>What I've learned so far today</h3><ol><li>The first way I get the tick symbol (<span style="font-family: wingdings; font-size: 200%;">ü</span>) is by adding this code which is a picture: <a href="<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV83IgEspXgp2VbCHiEW4LWUJox1pxehrrHPUaQieExYueOtut3XhSHpq1yVzG-Kd9sj3M8lvLeOdQ53Ozi5ljSGnzCPaXGC9ypp7w3ueYKeBRXgTzC0DxKoxfnoOK8xy2b4Iao6urClfz/s1600-h/tick2.jpg%22%3E%3Cimg">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV83IgEspXgp2VbCHiEW4LWUJox1pxehrrHPUaQieExYueOtut3XhSHpq1yVzG-Kd9sj3M8lvLeOdQ53Ozi5ljSGnzCPaXGC9ypp7w3ueYKeBRXgTzC0DxKoxfnoOK8xy2b4Iao6urClfz/s1600-h/tick2.jpg"><img</a> alt="" border="0" id="BLOGGER_PHOTO_ID_5035432702739704946" src="<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV83IgEspXgp2VbCHiEW4LWUJox1pxehrrHPUaQieExYueOtut3XhSHpq1yVzG-Kd9sj3M8lvLeOdQ53Ozi5ljSGnzCPaXGC9ypp7w3ueYKeBRXgTzC0DxKoxfnoOK8xy2b4Iao6urClfz/s320/tick2.jpg">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV83IgEspXgp2VbCHiEW4LWUJox1pxehrrHPUaQieExYueOtut3XhSHpq1yVzG-Kd9sj3M8lvLeOdQ53Ozi5ljSGnzCPaXGC9ypp7w3ueYKeBRXgTzC0DxKoxfnoOK8xy2b4Iao6urClfz/s320/tick2.jpg</a>" /></a></li>
<li>The second way is adding this code for <span style="font-family: wingdings; font-size: 200%;">ü</span> in wingdings font: <span style="font-family: wingdings; font-size: 200%;">&#252;</span> </li>
<li>The tick symbol comes up as an umlaut u on a mobile device like my iPhone. Ah well.</li>
</ol><br />
<br />
<br />
<br />
<br />Felicityhttp://www.blogger.com/profile/13814316244416690454noreply@blogger.com0