Perfect 3 Column Liquid Layout

All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content.

Percentage dimensions of the holy grail layout

Maximum column content widths

To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. This chops off any content that is wider than the div. Because of this, it's important to know the maximum widths allowable at common screen resolutions. For example, if you choose 800 x 600 pixels as your minimum compatible resolution what is the widest image that can be safely added to each column before it gets chopped off? Here are the figures:800 x 600Left & right columns: 162 pixelsCenter page: 357 pixels1024 x 768Left & right columns: 210 pixelsCenter page: 459 pixels

The nested div structure

I've colour coded each div so it's easy to see:

The header, colmask and footer divs are 100% wide and stacked vertically one after the other. Colmid is inside colmask and colleft is inside colmid. The three column content divs (col1, col2 & col3) are inside colleft. Notice that the main content column (col1) comes before the other columns.

Click Here For Download This Layout

Read more...

HTML Javascript widgets suddenly require text in title field ?

Problem

I have been using the HTML javascript widget since I started blogging. Suddenly, I cannot edit or a new HTML Javascript widget without entering something in the title field. Previously, I could leave that field blank and put my own stuff in there without a title field making things look clumsy. Now, whenever I try to leave that field blank, it will not let me save. Error message: "required field must not be blank." This means that not only can I not edit widgets I already have, but I cannot add new ones. I want to leave that title field blank!!

Solution

1. Add a Gadget for HTML/JavaScript      

 

2. Put your HTML Code in this Gadget 

 

3.Try to save (Without Title)

 

4. Fill the Title Field with the name of HTML/JavaScript (as Gadget name)

5. you can save it and Title will be not shown on your Page as below Image -

See also other Solution on    Help Forum

Read more...

Software can detect depression in bloggers’ texts ?

Researchers have developed a software program that can detect depression in blogs and online texts.

The software, developed at Ben-Gurion University of the Negev (BGU), is capable of identifying language that can indicate the writer’s psychological state, which could serve as a screening tool.

Associate Professor Yair Neuman and his team demonstrated that when used to scan more than 300,000 English language blogs posted to mental health Web sites, the program identified what it perceived to be the 100 “most depressed” and 100 “least depressed” bloggers. A panel of four clinical psychologists verified a a 78 percent correlation between the computer’s findings and the panel’s.

“The software program was designed to find depressive content hidden in language that did not mention the obvious terms like “depression” or suicide. A psychologist knows how to spot various emotional states through intuition. Here, we have a program that does this methodically through the innovative use of ‘web intelligence,” explains Neuman.

The program can spot words that express various emotions - like “black” combined with other terms that describe symptoms of depression, such as sleep deprivation or loneliness. The software will be more of an aid to mental health workers and other professionals since “no one can actually replace excellent human judgment,” says Neuman.

With this software, it is possible to analyse proactively. If the blogger agrees, he will know whether or not he needs to seek professional counselling.

The findings will be published in the International Conference on Web Intelligence proceedings. (ANI)

Read more...

How to Create Post Title Background color with template designer

"And how can I give my post title a colour background?"

The first thing I thought of trying is to go to LAYOUT > FONTS AND COLORS as described in my previous post Changing fonts and colors for New Blogger (xml).

However, Blogger for better or for worse is constantly evolving and the LAYOUT tab is no more, replaced by a DESIGN tab and apparently have moved the template designer from Blogger in Draft to standard Blogger.

I believe that it is still possible to edit the template direct to add CSS (Cascading Style Sheet to control the post title background but found that Blogger Template Designer has provided a "Advanced" option to do that via the template designer with INSTANT PREVIEW. And apparently some of the functions of the new Blogger Template Designer can be used even if the template you are using for your blog has not been designed with Blogger Template Designer

So to change/control post title background color:

1. Sign into Dashboard

2. Click DESIGN tab to get to LAYOUT

3. Click TEMPLATE DESIGNER sub-tab

4, Click ADVANCED at the top-left corner

5. Scroll down to bottom of sub-menu and click ADD CSS (see screen shot below):

and there I add this line of CSS:

.post-title { background-color:#blue; }

and immediately below the change is previewed (see screen shot below and noticed background color has been changed to green. For more color options, refer to HTML color codes:

6. If you are happy with the changes, click APPLY TO BLOG to save the changes to your template:

Read more...

How to Remove and Hide Blogger NavBar (Top Navigation Bar)

When browsing Blogger powered weblogs hosted on blogspot.com domain or custom domain, there is always a NavBar (Navigation Bar or Banner) that appears on top of the blog. The Blogger NavBar contains Search Blog textbox, Flag Blog to notify Blogger about objectionable contents on the blog, Next Blog link to visit another blog randomly, plus links to create a blog or sign in to Blogger.

No many visitors nor bloggers themselves may find it useful though. It’s possible to hide and remove the NavBar with a little CSS hack. The trick will not interfere or mess up with the custom layouts that webmaster has designed, and pretty safe and easy to implement. In fact, if you’re publishing the Blogger blog to own custom domain with FTP or SFTP, it’s possible to turn off NavBar.

Turn Off and Disable NavBar in Blog Published by FTP or SFTP

• Login to Blogger.
• On the Blogger Dashboard, click on the Template (replace with Design) link of the blog that you want to disable its NavBar. You can also click Customize on NavBar while visiting your blog.

• The Edit HTML page under Template (Design) tab should be loaded. Click on the drop down box beside Change the Blogger NavBar and select Off.

• Click on SAVE TEMPLATE (Design) CHANGES button when done.

Remove and Hide NavBar in Blogger Widget Template

• Sign in to Blogger.
• On the Blogger Dashboard, click on the Layout link of the blog that you want to disable its NavBar. You can also click Customize on NavBar while visiting your blog.

• Under the Layout tab, click on Edit HTML tab to view the template’s HTML code.

• Search for the following line of code:   

]]>

• Before the line, add in the following line of code:

          #navbar { display: none; }

           or:

#navbar-iframe { display: none !important; }

• Click on SAVE TEMPLATE to make the change effective.

Remove and Hide NavBar in Blogger Classic Template

• Login to Blogger.
• On the Blogger Dashboard, click on the Template link of the blog that you want to disable its NavBar. You can also click Customize on NavBar while visiting your blog.

• The Edit HTML page under Template tab should be loaded. If not, go to the tab.
• Search for the following line of code:

</style>

• Then, add the following line of code before that line:

#navbar-iframe { display: none; }

• The Blogger Classic Template uses iframe to load the NavBar, and styles it with ID named navbar-iframe. The name actually also works for new Blogger Widget Template too.

• After hiding the Nav Bar in Blogger using Classic Template, there tends to be a gap that replaces the navigation bar. The gap may be white, red, green, blue, or black in color, depends on what is your background color. To remove the gap, find the following code (normally near the top of the HTML):

body {

• Add in the following like of code after the body tag:

position: relative;

top: -32px;

• Click on SAVE TEMPLATE CHANGES button when done.

Tip: To display and show NavBar again, just remove and delete the additional codes that have been added.

Read more...

Contribute Templates FOR Blogger.com

Blogger is the largest blogging platform in the world, and contributing templates or images to Blogger is a great way to promote your designs and drive traffic back to your site.

What We Are Looking For

• Designers with good knowledge of CSS* to create beautiful templates.
• Graphic Designers & Photographers* to submit background images and patterns.

Why build templates for Blogger?

Blogger gets hundreds of millions of pageviews a day and has millions of active users. Blogger will offer your designs in a Template Directory in Blogger.com. From there, we'll link to a URL you provide to drive traffic back to your site.

If you are interested in building templates for Blogger, CLICK HERE

Siobhan Quinn

Product Manager, Blogger.com

Read more...

BLOG Jet

The most advanced Windows blog editor and manager. Get convenience and speed of a native application, and the ability to write posts offline.

BLOG Jet Demo

Read more...

FLAG COUNTER

MODIFYING YOUR FLAG COUNTER

We've made it very simple to make changes to your Flag Counter. You can change your counter's colors, add rows, and much more, at any time. On the bottom of any of your statistics pages (reached after clicking on your counter) there is a "Regenerate HTML" link. Just follow that link and you'll be modifying your existing Flag Counter. When you're finished, just swap out your old HTML code with the new code and you'll be all set! 

Read more...

LinkWithin: A Prettier and Smarter Way to Feature Related Stories on Your Blog

 Most blogging platforms now feature a number of third-party plugins that can display a list of related stories on your blog, or even on other blogs on the Internet. Typically, these plugins will look at how a story was tagged and then display a short list of similar stories that use the same keywords. LinkWithinis the newest contender in this market. The plugin looks at tags, but it also analyzes other factorslike relevancy, popularity, and recency. Unlike similar plugins, however, LinkWithin doesn't just display a list of headlines underneath each post, but also a thumbnail with a picture from each post, which makes it far more attractive than most of its competitors.

The plugin is available for Wordpress, Typepad, and Blogger, though LinkWithin will also provide you with a code snippet that you can use on other blogging platforms. We assume that LinkWithin does some semantic analysis in the background in order to arrive at its list of related stories, though we weren't able to track down any details.

In testing LinkWithin on our own WordPress blog, the suggested posts were always spot-on, but obviously, your mileage may vary .

A Few Caveats

Because LinkWithin does most of the computing on its own servers, it can take a little while before its results appear on your blog (usually around one hour). The plugin also doesn't play nice with every theme, though the team promises to fix any problem you might encounter within a few hours after you contact them.

Verdict

LinkWithin is still a bit rough around the edges. It would be great, for example, if you could actually customize how the related items are displayed on your blog. For now, you are restricted to showing three related stories, for example, and the related stories will appear on both your homepage and on individual posts.

If you are looking for a different way to showcase more of your blogposts on your blog, however, LinkWithin is definitely worth a try.

Read more...