Wednesday, March 25, 2009

Blogger 'Layouts' - help!

I have just (and very belatedly) switched to the 'new' Layouts version of blogger, which replaced the old format aaaages ago. So far I have yet to find a useful function of it in all honesty, and am having to replace lots of old coding done by a friend of mine who is no longer around to help. I have two problems:

1) On my sidebar, any content which comes from blogger itself refuses to be centralised, unlike the rest of the sidebar content. Examples are the links to subscribe and my archive list - does anyone have an idea how to solve this?

2) I no longer have the function of expandable post summaries - the links I put on longer posts so I didn't take up a full front page with long posts. The blogger helpdesk says to add this coding:

< b:if cond='data:blog.pageType == " item" '>
span.fullpost {display:inline;}
< b:else / >
span.fullpost {display:none;}
< /b:if >

But it is very unclear as to where, and I have tried multiple options, all of which fail miserably and do very odd things to my site overall. Where do I put this code?!

Any help much appreciated! :)

This Post was written by Fahara from Souperior

9 comments:

Trig said...

I don't see a problem with your sidebar format as it is, but any widgets that load directly from Google without giving you access to the html code mean that you are dependent on the layout written into their code. When I first loaded my Followers widget I wanted to change the text colours, which clashed with my sidebar colour. Fortunately, enough people had the same problem and Google introduced colour options into their format. So it's worth revisiting any widgets you are using to see whether any format options have been introduced since you loaded it.

Also try inserting a left text alignment into your template css definition for the sidebar. This won't override a centred text alignment command explicitly written into widget code, but if centering results only from a general default, your code will take preference. Your template may differ from mine, but for my template, the change to my right sidebar would be (insert the italicised line):

#sidebar-wrap {
width:260px;
text-align:left;
float:right;

I do my own expandable post summaries using code that I found in Blogger Tips and Tricks and although you have to be very careful implementing every part of this it works well. Note that on my blog I changed the default expand/contract messages and you can also insert your own messages and format them as you choose.

One issue that you may have run into is the nesting problem. It took me a long time to understand why many of my post contractions failed to work and to find a solution. The problem arises when you include <span> or <div> commands in the html for your post – whether you write them explicitly or use Compose mode and thereby have html code inserted for you. You need to be in Html mode to correct these problems. The following code will work fine:

This is the first part of my blog post. I want this to be visible all the time.
<span id="fullpost">
This is the expandable part of my blog post. This will only display when you click on "More..." and will disappear when you click on "Summary only...".
</span>

But the following code will not work:

<div style="text-align:justify";>This is the first part of my blog post. I want this to be visible all the time.
<span id="fullpost">
This is the expandable part of my blog post. This will only display when you click on "More..." and will disappear when you click on "Summary only...".
</span></div>

Your <span> and </span> commands must be at the outer command level, not nested within format commands as shown. The following code corrects the problem above and works OK:

<div style="text-align:justify";>This is the first part of my blog post. I want this to be visible all the time.</div>
<span id="fullpost"><div style="text-align:justify";>
This is the expandable part of my blog post. This will only display when you click on "More..." and will disappear when you click on "Summary only...".
</div></span>

The only minor irritation is that each <div> forces a new display line, so untidy gaps appear. This is easy to correct by adjusting the code:

<div style="text-align:justify";>This is the first part of my blog post. I want this to be visible all the time.</div>
<span id="fullpost"><div style="text-align:justify";>This is the expandable part of my blog post. This will only display when you click on "More..." and will disappear when you click on "Summary only...".
</div></span>

I hope this helps. Let me know how you get on.

Nate @ House of Annie said...

I did a couple of posts on adding expandable post summaries to my Blogger template:

http://chezannies.blogspot.com/2008/03/hacking-blogger-to-add-expandable-post.html

http://chezannies.blogspot.com/2008/03/hacking-blogger-to-add-expandable-post_21.html

see if that helps.

Fahara. said...

@Trig, you're right, the blogger elements wont conform to my formating unfortunately so I can't get them to centre it seems.

@Nate-n-Annie, I've tried using your code (as it provides me with 'conditional' post summaries - I don't want all my posts expandable), but Blogger comes up with this error - "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup."

Any ideas why?

Sarah said...

Thanks for visiting my site!

cookingschoolconfidential.com said...

I feel your pain. I tried to post a culinary school quiz (my final exam from my first term at culinary school) so everyone could take it. Fancy layout finally defeated me so I had to settle for a plain questions on top with an answer key at the bottom layout.

It's a fun test (and people seem to enjoy testing their culinary knowledge) so that part is good, but it would have been nice if I could have gone with my first layout idea. Ah well.

Cheers!

Burma jade said...

transient...

comment system said...

I liked the sidebar format that you used. Did you load it directly or make some changed in it. I would suggest that you do some change in it before loading it so that you are not dependent on the layout written in its own code.

Doug said...

Thank you for the layout help, it has been really useful!

Chicago Bears blog said...

As many as lessons I have heard, I can't live like the lesson shows me.
http://huluxiaowa.exblog.jp/20104150/
http://huluxiaowawa.seesaa.net/article/403918360.html