Google Fonts

I'm trying out the Google fonts.

“To perceive freshly, with fresh senses is to be inspired.”—Henry David Thoreau

There's so much inline code in that, it hardly seems worth the trouble.
I had to do a span for each smart quote and a span for the quote and a span for the author.
That's 4 spans each formatted with font size, color, then use Dancing Script for the font.

And THEN Blogger changes the code when I post it in my Sidebar!
So if I go in and Edit yet again, the code is wrong, and it won't display correctly.
Grrr...

Dancing Script isn't listed within the Template Designer?

It's a Google font, so I added the code per instructions here.
Add a slash at the end of the code, which isn't included in the code given at Google fonts.

I'm going to turn off fonts with Firefox NoScript and see what it looks like if the google fonts won't display for some reason. (Okay, substituted serif Georgia.)

Let's see if I can display the code:

Insert this code:
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'/>
Right before:
</head>

Inline code:
<span style="color:#ffcc00;font-size:28px;">&#8220; </span>
<span style="color:#ffcc00;font-family:'Dancing Script',serif;font-size:28px;font-weight:bold;">To perceive freshly, with fresh senses is to be inspired.</span>
<span style="color:#ffcc00;font-size:28px;">&#8221;</span>
<span style="color:#ffcc00;font-family:'Dancing Script',serif;font-size:28px;font-weight:bold;">—Henry David Thoreau</span>

I added line breaks to make it easier to read. Tweaked the code too. Blogger creates rgb verbosity instead of the color#. It also strips out my smart quote codes. I think I had the emdash code (—) there too at one time and Blogger striped that out also.

If I find a better way to inline code a quote with Google Fonts, I'll post it here.

Picture Window Dark

I picked the dark theme of the Picture Window Template.

Transparent text header images work again.
YAY!
However, Blogger is automatically stretching the image.
The transparent text still looks okay, so I'll leave it alone.

However, I tried an old header image with text and the automatic stretch made the image and text blurry. Yuk. I couldn't figure out how to display it at its original size. I've used an old header image before and it worked okay. So this is a new glitch. The header image sizes I tried were 740x150 and 560x150. Both were stretched bigger and looked blurry. I think I tried a different height as well and that didn't work either.

Tried using my own background image, which is a new feature (9 Sep 10) in Template Designer and that worked just fine. The option is under Background. After you upload your image, then you get the options for tiling and alignment. The image is stored in your Blogger Picasa account. So it can be deleted later if desired.

Screenshots and image samples:

Seamless tile I made. (Free to snag if anybody wants it.)


Screenshot:


I also like this space image in the Science category of background images available in Designer Template and decided to use that on my main blog.



Had to add blockquote coding again and changed the colors to a dark purple.
Code and info is here.

colors I used:
border:#67228a
background: #411757

Screenshot:

Simple Taupe

Screenshot:


Since transparent Header images no longer work in Blogger (happened around 14 Sep 10), I was trying out different Headers and playing with the gold, taupe color scheme idea. Ended up tweaking a Simple Template.



My header image is the light taupe part (560x150px). Blogger stretches the image taller, no matter what size I make it. Grrrr... The rust colored part is the Header background color. A happy accident.

Gotta get rid of that pesky image border again.



With this template, you do have color choices for the image border, but you can't get rid of it from within Template Designer. You have to tweak the above code in the Html section.

I like the divider at the end of each post. I made it a little thicker (3px).
That's a Footer Border in the Html section, but called a Shadow within Template Designer.

Picture Window Gold Pattern

Tweaked my template again.
How about gold, taupe, black, white

Transparent Header images no longer work in Blogger, so I went back to a plain text Header until that gets fixed.

Here's a screenshot (Laptop):


Border code:
dotted black on bottom of post and solid black on top of post.



Pattern:

Picture Window - Bottom Border Divider

I add a bottom-border divider to Picture Window Template.

Can change it to desired color via Template Designer, Advanced, Post, Border Color.

Border Screenshot:


Code screenshot:(Edit HTML area of Blogger.)

Picture Window Autumn

Same Picture Window Template.
Add autumn leaves background for the obvious choice autumn template.

I bought a Laptop, so now I get a 14" 16:9 screen view and the 17" 4:3 screen view of my old monitor.

Laptop View Screenshot:


The image:


Other autumn leaves background images:

Picture Window Sunrise

I've been hungry for orange lately.
Decided to fiddle with Blogger Templates again and see what I could come up with in the color orange that's "naturey."

Used my same Picture Window Template with the serene Mountain scene.
Changed the background image (Nature category) and used the suggested text colors.
Had to change the Post Border color and Post Background color to transparent (Advanced Section).



It was a little tricky getting the header text to be readable yet blend in.
I came up with a gradient for text on transparent png image.



Added one of my bird pics (70% opacity) on my transparent bg name avatar.
Not sure how I like it.

Here's the screenshot result of my template now: