Category: blogging

Hello Readers,

I was going through the stock dots dark template when I came across a section labeled “Page structure tweaks for layout editor wireframe” just before the closing skin tag in the template head. Soon I realized that I can use this section to modify the looks of my layout editor in the following section:

Template > Page Elements > Add and Arrange Page Elements

For those of you who couldn’t follow me, here is a visual of what I am referring to:

After converting to a three-column layout in my dots dark template, for many months my layout editor was in a mess. This happened because I changed my template’s outer-wrapper width such that there is no wastage of space on a typical 1024×768 resolution screen or in other words I stretched the template to fit snugly 🙂 I did not bother my self with the layout editor and learnt to live with it.

Here’s how my layout editor looked after switching to three columns and then the widebar layout. Call it an example of a bad layout in the layout editor:

However, after the recent switch to the lighter and more legible dots template, I discovered this section of the template and found out that I can completely control the looks of the layout editor from within the template code. Here’s how the code looks:

Here’s my modified code to get the layout-editor in order:

/* Page structure tweaks for layout editor wireframe */

body#layout #sidebar, body#layout #main,
body#layout #main-wrapper,
body#layout #outer-wrapper,
body#layout #sidebar-wrapper { 
  padding: 0;
}

body#layout #outer-wrapper { 
  padding: 0;
  width: 765px;
  padding: 0 5px 0 10px;
 }

body#layout #sidebar1-wrapper { 
  padding: 0;
  width: 150px;
 }

body#layout #sidebar2-wrapper { 
  padding: 0;
  width: 170px;
 }

body#layout #widebar-wrapper { 
  width: 290px;
  padding: 5px 10px 0 5px;
 }

body#layout #widebar { 
  padding: 0;
  width: 290px;
 }

body#layout #main-wrapper { 
  padding: 0;
  width: 360px;
  padding: 5px 10px 0 5px;
 }

body#layout #header-wrapper { 
  padding: 0;
  width: 750px;
 }

body#layout #footer-wrapper { 
  padding: 0;
  width: 750px;
 }

/* End of Page structure tweaks for layout editor wireframe */

and the result is acceptable:

Just look at the code and follow its syntax and how it’s done. Play around with the width values to get the best fit (in a test blog and with backup on original). Soon you should be able to fix layout editor issues on your own. Remember that you can drop a line here in case some thing goes wrong.

Dear readers,

Based on the new JSON format and the JavaScript code for displaying recent posts from Hans of beautiful beta, I now present horizontal navigational menus with auto (activates on mouse hover) drop-downs which display the most recent posts under each of your labels (say categories).

To see this in action take your mouse cursor to the “Beta Hack” or “Hack News” section in the navigation bar in my blog’s head section (i.e. just below the hidden navbar).

This hack will allow readers to browse a particular label category by simply clicking on the label name in the menu or go directly to a specific post under that label by clicking the post title that appears in the drop-down. Therefore, this does not take away the navigational advantage of horizontal tabs in header and at the same time it allows a blog author(s) to give exposure to the most recently updated posts from various label categories.

I found the code for this drop-down menu on dynamic drive at the following link. (Don’t forget to visit this link to learn more about customizing this code according your preferences.)

Warning : If you are not familiar with your template code and HTML I recommend you create a backup copy of your template and/or first try this hack on a test blog.

The Hack

Here is the procedure for installing this hack in your blog:

1. JavaScript source

Copy-paste this line of code into the <head> section of your template, preferably just before </head>

<!– /***********************************************
* Chrome CSS Drop Down Menu- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/ –>
<script src=’http://stubb.fanatic.googlepages.com/chrome.js’ type=’text/javascript’/>

To download this file for modification/alternate hosting, right-click here and save to your hard-drive.

2. Including the CSS

Copy-paste any one of these CSS style codes just before the ]]></b:skin> line in the header section of your template. The images (links in the code) are hosted in my test blog, so if you wish to, you can download the images and host them in your own blog.

CSS style 1: Click here to view/download the code.

CSS style 2: Click here to view/download the code.

CSS style 3: Click here to view/download the code.

CSS style 4: Click here to view/download the code.

3. Code in the HTML widget.

Copy-paste this code into a HTML widget from the page layout section (using add a page element feature). You should ideally create this widget in the top most region of your page (like in my blog).

Click here to view/download the widget code.

Modifications:

– Each drop down menu’s code has been demarcated with indicator comments in <!– … –> If you wish to add additional drop downs, follow the usual flow of the code i.e. a fourth drop down will have

<li><a href=”[label link]” rel=”dropmenu4“>[label name]</a></li>

in the very first div, and

<!–4th drop down menu –>
<div id=”dropmenu4″ class=”dropmenudiv” style=”width: 150px;” >

[the js code for calling the post titles]

</div>

to include the function call for displaying post titles.

– Replace all the […]s with the appropriate text as indicated. For example, replace [Label feed URL] with the feed URL of your label which will be of the following format

http://stubborn-fanatic.blogspot.com/feeds/posts/default/-/[LabelName]

If the label name is not one single word and has got spaces between words, replace the spaces with %20

http://stubborn-fanatic.blogspot.com/feeds/posts/default/-/Label%20Name

– The value of “numposts” which by default equals 5, can be modified but I do not recommend increasing it, as long drop-downs might look ugly.

The hack is now installed. Do let me know if you face any problems.

Update: Alastor from nonstop nonsense (but it makes quite a bit of sense here :)) has used the same code from dynamic drive to convert entire widgets into drop-downs! Please visit his blog to learn how. The “Labels” and “Translate” section in my header navigation bar are using this hack.

Dear readers,

If you were a regular visitor to my blog, you might have noticed that I was using frames to display all the link-exchange chicklets until some time ago. I discontinued the use of frames, because they don’t display by default in Internet Explorer or IE (which still seems fairly popular).

I was hosting my frame HTML document at Google pages (as Blogger does not allow HTML file uploads) and it made my blog loading very slow for two reasons:

1. There were a large number of chicklets and some javascript snippets in the frame.
2. Every time my blog was accessed, stuff had to be loaded from google pages as well which is a completely different server/domain.

All I wanted was to use a blogspot domain to host this frame HTML and I found out that it can be easily done.

See these images to know what I am referring to:

One simply needs to create new blog and strip it of its entire template code except for a few necessary sections. See image to note what needs to be retained:

Basically, everything within the <head> </head> tags can be removed except for the skin tags (which need not contain any data if you want a frame). In addition, there must be at least one b:section tag in the <body> portion of the template.

Once you are ready, simply copy-paste your HTML code into the body portion of the template and save the template. For example I had created a simple list of links (different from linklists in page-layout section). You can access this page by clicking here.

Once you modify the template in this manner, this is how the page layout section will look like:

To embed a frame into your blog’s sidebar, use this code:

<object data=”[Your HTML Doc’s URL]” width=”275″ height=”300″ type=”text/html”></object>

Example:

This frame, in action, can be seen here.

Once I had done all this, I thought that IE would display the frame without any issues now, but it appears the IE does not like the <object> tag at all. Even after getting a frame to load from the blogspot domain, I could not get IE to display the frame by default.

Suggestion: Use the Firefox (adsense link) in my blog’s sidebar to download this beautiful browser if you are on IE 🙂