Easy HTML Tricks for Blogging

Post Title Customization - Blogger

How to customize your blogger Post Title...we can add some background picture behind the post title, or borders, change font.......................
..........................................................................well, a lot.
Before doing any customization, back up your template. Just in case....
Let's start with the beginning. Heh.

For customization, we will use the CSS style in the code section that corresponds to ourPost Title:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.....Attention:

this example is made in Minima Blogger default template, so your actual code may differ a bit
it's important to find the part ".post h3", or if you have custom template, the find the part that "carries" the style for your Post Title...

It's also important to know the width of your Post Title area, which is basically the same as your Post Content area ("main-wrapper" by default). This information, you'll find in this part of code:

#main-wrapper {
width: 410px;

...in orange, you can see the width, which is (in my case) 410px (pixels).

Attention again:

this is an example for Minima default template, your width can be different (or is)
"main-wrapper" represents Post Content area in Minima template, but yours can differ...(for example, the Post Content area in Rounders default template is called "#main-wrap1")
if you have custom template, you just have to find what part of the style (code) corresponds to your Post Content area...

Let's do something, already....

BACKGROUND PICTURE IN POST TITLE

To add a background picture behind our Post Title, we have to do 4 small things:

1. check the width of Post Title area (or Post Content area, or) -- like in example ABOVE
2. create (or find) a picture for our background, which will be the same width as Post Title / Content area......(you can make the width smaller, of course, but if you make it bigger, it will be "cropped")......you can choose height of the pic as you wish....
3. upload the picture to a free web host (Photobucket, Picasa, TinyPic....) to get the URL address
4. place the URL address in the code, so our pretty background can show up.....

....when you do the first 3 things, go to LAYOUT --> EDIT HTML --> and in the Post Title CSS style/code, add the some lines:

.post h3 {
background: url(URL OF HOSTED PICTURE); background-repeat:no-repeat;
height:55px;
margin:.25em 0 0;
padding:14px 40px 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

....in orange, we've added some background settings, and our picture (you have to replace CAPS with the URL adress of your hosted picture)
....in blue, we've added the line which tells Blogger that our picture has a certain height...you'll change this value corresponding to the height of YOUR PIC
....in green, you have to adjust your Title to fit into picture, change the value (higher value--> pushes the title more down)
....and in pink you can "push" your Title to the right, increasing this value....

Taa- daaam! That's it......

be creative, you can do whatever you want.....
if you'll need any advice, just ask.....I'll help. Promise.

COLORS AND BORDERS IN THE POST TITLE

This is a much simple way of customizing Post Titles in Blogger. And you can create great effect with it, also......
Here's the example of using some border styles and some background color:
LAYOUT --> EDIT HTML --> locate the Post Title CSS style/code, and add the following lines:

.post h3 {
background:#9fddea;
border:1px inset #000000;
margin:.25em 0 0;
padding:0 5px 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

....in orange, we've added some background color (you can choose any hex value you like)
....in green, we've choose a border "1px" thick, with color #000000 (black), and "inset" style....more about border styles here....
....in blue, we "pushed" our title a little bit to the right, so it's not to close to a border (higher value --> pushes more to the right)

....if you want your Post Title to be underlined....use this line:

border-bottom:1px solid #000000;

....of course, change the width, color and border style to whatever suits you....

....well, that's about it. If you are interested in some more customization of Post Titles,

Embedded Comment Form-All comments below Post

Well, you all know the default Blogger Comments appearance...not so nice, right? They open in a new window (or pop-up), and the default design of that page has nothing to do with your template. They are a mess...

So, Blogger decided to give the users the ability to embed the comments below post, so when you open a specific post all the comments will show up in the bottom, together with a quick "post a comment" box for a new one... You've seen this on lots of great sites.
The advantage is, that this style makes it easier for your visitors to read comments, and write them.

Let's do it. First, sign in to your Blogger account (you can do this with Blogger in draft, too: http://draft.blogger.com/.) Then, go to:
SETTINGS ► COMMENTS ►beside COMMENT FORM PLACEMENT, choose Embedded below post. Save Settings.

Now, click on the post title, and you should see your comments (all) of them below your post.
In case you still don't have any comments, write some. Just to test it. You can delete them easily later.

PROBLEMS WITH EMBEDDED COMMENTS
Some problems were reported by users regarding embedded comments. If your Blogger template is quite customized, maybe embedded comments won't appear. Follow these few steps, if you have these problems:

First, back up yor template. Then go to:
DASHBOARD ► LAYOUT ► EDIT HTML ► click on EXPAND WIDGET TEMPLATES in the upper right corner, and find the following part of code (use CTRL + F):

<b:include data='post' name='comments' />

When you have found it, just insert the following line BELOW it:

<b:include data='post' name='comment-form'/>

SAVE Template, and go check if they appear.

If they still don't, try this. Find the following code:

You have to REPLACE above code with this one:

Thanks to Amanda from BloggerBuster for the great tips...

Customizing Embedded Comments Below Posts

Ok, if you don't know what are Embedded Comments, or want them on your Blog, readthis article.
Here, we are going to customize them a little bit. On the picture below, you can see the default appearance of embedded comments.

Looks all right, but we can do better...
First thing, back-up your template. Then go to: DASHBOARD -- LAYOUT -- EDIT HTML. Find the following part of code (use CTRL + F for searching):

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

DELETE it, and REPLACE it with following code:

#comments h4 {
margin: 1em 3em;
font-weight: bold;
line-height: 1.4em;
color: #ffffff;
}
#comments-block {
margin-left:1.5em;
line-height:1.6em;
background: #ffffff;
color: black;
padding: 1em;
border:0px solid #ffffff;
}
#comments-block .comment-author {margin:.5em 0;}
#comments-block .comment-body {margin:.25em 0 0; background: #ffffff;}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
padding: 20px 10px 10px 10px;
background: #f3a64c url(http://i38.tinypic.com/27yu1xl.jpg) no-repeat top left;
}
.deleted-comment {
font-style:italic;
color:gray;
}

The URL in red color is the address of picture used in this tutorial. If you would like to use that one, it's ok. But, also, you can make your own pic. Just size it properly.

Ok. This is how it how it looks like now. But, keep in mind that you can do a lot more with just changing the code a bit. Here's another example, done with the same template as before...I've changed the template background, added some borders to comment box, and colored it blue...
Not much, but it's already happier.....

One more thing. If you want to change the "Post a comment", to something else (like "say something"), find the following code (EXPAND WIDGET TEMPLATES):

..and REPLACE the part in red with anything you want. So it will look like this:

<h4 id='comment-post-message'>Say something...</h4>

Quotes Blogger Custimization

We're going to learn how to customize the quotes in Blogger. By customize, I mean changing the looks of it, giving it some color, borders, background.....changing size of it, font, style...

WHAT ARE QUOTES?
Quotes are used for quoting. Heh. Quoting defines:

► repeating or copying the words of another, usually with acknowledgment of the source
► citing or referring for illustration or proof
► repeating a brief passage or excerpt

DEFAULT QUOTES IN BLOGGER AND HOW TO USE THEM
Default quotes ain't much of a fun. Really. They are rather dull. And blank.
When you're composing the Post, and want to make a quotation, you will:

► highlight the part of the text that will be a quote
► and click on the quote button in the Blogger toolbar

This will change highlighted part into a quote, with a default design, and that is:

It just added some margins to it....not fun at all. I told you so.

SO, WHAT CAN WE DO?
Well, a lot! First, let's see what part of the code (CSS style) we have to play with....

.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

...that's the one! You can find it easily going to LAYOUT ► EDIT HTML ► and scroll until you find it (use CTRL + F to make it easier)...
...yours may be a bit different (if you have customized template), but it will be something like that...

I'll show you a few examples, and in each one, you will have to DELETE the code from above, and REPLACE it with the one from example.

◄ Borders, font styles and colors ►

Example 1	Example 2	Example 3	Example 4

Example 1.

.post blockquote {
border-top: 1px solid #FF82AB;
border-left: 1px solid #FF82AB;
border-right: 2px solid #FF82AB;
border-bottom: 2px solid #FF82AB;
background: #ffffff;
margin: 6px 20px 6px 20px;
padding: 8px 8px 8px 8px;
font-size: 1em;
font-style:italic;
line-height:1.4em;
}

Example 2.

.post blockquote {
border:1px dashed #DC143C;
background: #EEE0E5;
margin: 6px 10px 6px 10px;
padding: 8px 8px 8px 8px;
font-size: 1em;
font-style:italic;
line-height:1.4em;
}

Example 3.

.post blockquote {
color:#EE9A00;
border:5px dotted #000000;
background: #ffffff;
margin: 6px 6px 6px 6px;
padding: 8px 8px 8px 8px;
font-size: 1em;
line-height:1.4em;
}

Example 4.

.post blockquote {
color:#00CED1;
border-top: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background: #ffffff;
margin: 6px 0px 6px 0px;
padding: 8px 8px 8px 8px;
font-size: 1em;
line-height:1.4em;
}

...these are just examples, so you can see what variables you can adjust....
...change the colors (hex values)...change border styles...
...font size, font style (italic), font color (color)...
...margins (the space between box and the post content)...
...padding (space between quote text and the borders)...

◄ Picture in the quotes ►

Example 1	Example 2	Example 3	Example 4

Example 1.

.post blockquote {
color:#666666;
background: #ffffff url(http://i39.tinypic.com/154iuq9.jpg);
background-position:top left;
background-repeat:no-repeat;
margin: 6px 6px 6px 6px;
padding: 8px 0px 8px 74px;
font-size: 14px;
font-style:italic;
line-height:1.4em;
}

Example 2.

.post blockquote {
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
background: #000000 url(http://i37.tinypic.com/23tgzfk.jpg);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
font-size: 0.9em;
}

Example 3.

.post blockquote {
background: #ffffff url(http://i44.tinypic.com/slh4yu.jpg);
background-repeat:no-repeat;
background-position:top center;
margin: 6px 6px 6px 6px;
padding: 8px 36px 8px 40px;
font-size: 14px;
line-height:1.4em;
}

Example 4.

.post blockquote {
color:#000000;
background: #ffffff url(http://i41.tinypic.com/24fh84w.jpg);
margin: 6px 6px 6px 6px;
padding: 8px 6px 8px 6px;
font-size: 14px;
line-height:1.4em;
}

...remember to change the URL address of the pic with your own...
...you have lots of options here....be creative...change....
...trial and error...
...read some more about background pictures is Blogger...

If you have some doubts/questions, just ask....

Smile!

Viral Marketing for Beginners

Checking the del.icio.us popular page today, I noticed this page, which had already been tagged 923 times and rising. No knock against the person who wrote it but...it's just a list of a half-dozen or so AJAX tutorials.

I mean, can viral marketing really be this easy?

A killer, comprehensive resource like the SEOMoz Ranking Factors page gets 882 del.icio.us tags, and a links page listing seven AJAX tutorials eclipsed it easily in a few days (although SEOMoz's Web 2.0 awards had significantly wider appeal).

And, of course, it's been Dugg.

So what's the lesson here? I guess that getting Del.icio.us and Digg traffic by writing about AJAX is easier than your sister on prom night. I suppose the other lesson is get linked to by Scoble.

Here's something that's both inspired by, and a commentary on, that post. It's a short list of the best viral marketing info I've come across online.

First, a quick rundown on what makes an idea viral by the guy who essentially invented the term, Seth Godin.

Second, Todd Malicoat (stuntdubl) has an excellent post on viral marketing from an SEO perspective(commonly referred to as linkbait).

Third, Graywolf has some good ideas on how to get Dugg even if you're (gasp!) not writing about AJAX.

From what I've heard, Digg traffic doesn't have much commercial value, since Digg users don't tend to buy anything, click on ads, or do anything else that might make you money. They arrive, read your stuff, and then move on (possibly knocking your site offline in the process if you weren't prepare for the influx of traffic). Tech-recipes breaks down what you should know about Digg traffic.

Finally, CopyBlogger has a great free PDF ebook on viral marketing with blogs.

With blogging, going viral doesn't necessarily mean big bucks. The financial benefit of going viral typically doesn't lie with selling to or otherwise monetizing the traffic itself, but rather with the increased exposure that might result in a large number of sites linking to you (especially bloggers).

That boost in incoming links can then nicely translate into your site ranking higher for those keywords that actually will bring in paying customers.

The Beginners Guide to Promoting Your Site With Delicious.com

Social bookmarking sites like delicious.com are rapidly becoming important to search engine optimization, though for a slightly different reason than most people might suspect.

Links from sites like delicious.com aren't worth a whole lot from a search engine perspective, since they use the "noarchive,nofollow,noindex" robots meta tag at the top of the bookmarks pages.

However, these social bookmarking tools can be used to drive traffic to your site, if they're used correctly. The way to do that is to tag your pages with the keywords relevant to them. This especially can be used to increase the exposure of new blog posts.

Let's say you have a blog about ringtones. After making a blog post, post it to your delicious account and tag it with keywords like "ringtones", "cellphone", and "mobile."

A link and description will then show up on the following pages:

http://delicious.com/tag/ringtones
http://delicious.com/tag/cellphone
http://delicious.com/tag/mobile

Each of those pages has its own rss feed, which is usually subscribed to by bloggers and other people interested in tracking the latest about those keywords. That means you increase the chances that those people are going to see the link to your site, a certain number are going to click through, and, if your post or article is a good one, some of them will probably link to you from their own sites..

Also, a link to your post will show up on this page (but only for two minutes):

http://delicious.com/recent

and if enough people find your page interesting enough to tag with their own delicious.com accounts, then it could show up on this page:

http://delicious.com/popular/

Getting listed on the delicious.com "popular" page can potentially send you a huge amount of traffic, but getting there is not easy, since you have to be creating something that a large number of people will find tag-worthy.

As you can see, the link-building effect of a site like delicious.com is indirect.The links from delicious.com confer no ranking benefit in themselves, but they can be used to send traffic to your site, and if you have something good to offer, a certain number of the people coming to your site are going to link to you.

However, the traffic boost will be non-existent if the content is mediocre, and even good content will often be ignored if it doesn't catch on with a large group of people. While a site like delicious.com can be used to increase the exposure of your site, if you're going to be tagging your own pages, you should save it for those pages you find really exceptional. Otherwise, you're just increasing the clutter on the site, and boring pages are not likely to result in any increase in traffic or links.