The New Blogger Interface

I tried the new Blogger interface.
Wow.
It's a LOT different.
I'm still trying to find things.

I don't like it.
It hogs too much horizontal screen real estate.
It's a poor design for wide screen displays.
The top portion of the screen locks when the page is scrolled down.
The text is tiny so I have to zoom in and that makes the screen real estate problem even worse.

Hard to read.
Features are hidden and you have to go hunting for them by clicking on things.
Tons of needless white space that could be used to display all the hidden items.
Yuk.

Playing With Fonts

Changed my template, and oh my, can one play a long time with those fonts. That was fun.
I sure like that Josefin Slab font for Post Title.
I like Syncopate font for Blog title.

I tried adding my own background image this time.
I'm using a spirograph pattern I created in Inkscape.

Not sure of that green color, but just testing.

Picasa only allows 1600x size images as far as I know. I used my wallpaper size 1366x768 and it is not seamless so not sure what I think about that. Maybe I should try an 1800x size image and load it within Blogger Template Designer, then check my html code to see what size it is?

When I changed my template, I had to add the fonts again to my template code. The fonts I used inline,that is. Tangerine and Dancing Script.

Tangerine Font Test

Two variants. Use font weight bold. Regular is too light. I could specify cursive then serif substitutes for this one? Test that. No, ugly, use serif.

Tangerine Google Font

Uppercase 60px Tangerine font weight bold:
ABCDEFGHIJKLM -Check line spacing- NOPQRSTUVWXYZ

Lowercase 60px Tangerine Bold, Line Height 1em:
abcdefghijklmnopqrstuvwxyz
Check line spacing for
bdfjklpq. This is a teensy font. Crowded letters too. Pretty though.

Letter spacing 0.05em, Line Height 1em:
Letter spacing. What does that do for this font? bdfjklpq

Misc 60px font weight bold:
&"{}?1234567890 Weird #'s.

Title 120 px:
Brief Insights

  To do is to be.
      To be is to do.
        Do be do be do be do...

Dancing Script Font Test

Dancing Script Google Font

Uppercase 30px Bold Line Height 1em:
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Check line spacing.
ABCDEFGHIJKLMNOPQRSTUVWXYZ


Lowercase 30px Bold Line Height 1em:
abcdefghijklmnopqrstuvwxyz
Check line spacing.
abcdefghijklmnopqrstuvwxyz

Misc 30px Bold:
& " { }? ~ * 1234567890

Title 90 px:
Brief Insights

NOTE for Title: Italic doesn't work, em is ugly, Bold is ugly.

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.