Saturday, February 03, 2007

Save The Widgets !!!

Yes, it's a gas! When (1) you are already using BETA Blogger and (2) you have (maybe a painstaking process) installed some Page Elements (Widgets) then (3) installing a new Template probably will scare the crap out of you:

Widgets are about to be deleted CONFIRM & SAVE CANCEL

Ohhhhh bloody bloody no no NOOOOO (you shout) ...

and totally panicked you press the CANCEL button!

There is an easy way to save your current widgets.

The first thing to comprehend is the way the template can be presented: with Expanded or Collapsed Widget code!

Above the Edit Template Window you will find a Checkbox Expand Widget Templates.

Unchecked (thus widget code collapsed) a widget looks like:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Checked (thus widget code expanded) that same widget looks like (may look like - depends on the inserted code, of course):

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'> <data:label.name/> </a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

It is important to remember that, expanded or collapsed, the Widget Configuration Data is stored for you on the Blogger Server. Always!

The process ...

Saving your current template
  1. Dashboard > Template > Edit HTML > Expand Widget Templates UNCHECKED

    Do not use Download Full Template!

    Copy the code from the Edit Template Window:
    Select All (Ctrl+A) + Copy (Ctrl+C)

    Create an empty textfile on your disk (do not use Word or whatever, use Notepad - make sure you create a mytemplate.TXT file!!!) and save the template code here:
    Paste (Ctrl+V)
Preparing the new template
  1. Download the new template to your disk (again: save as a textfile!!!)

  2. Open the file and look for the place to add your widgets.
    (Whether the new template offers its code expanded or not is of no importance.)

    An example (this is the DownRight default left Sidebar code):

    <!-- start left sidebar -->
    <div id='leftbar_wrap'>
    <div class='side'>
    <b:section class='sidebar' id='leftbar' preferred='yes'>
    <b:widget id='LinkList1' locked='false' title='Link List' type='LinkList'/>
    <b:widget id='Text1' locked='false' title='Text' type='Text'/>
    </b:section>
    </div>
    </div>
    <!-- end left sidebar -->

    Notice there are two default widgets here: a LinkList and a Text Page Element!

    When the template is offered with expanded code the Widgets are a bit more difficult to identify.
    One expanded widget is everything between (and including)

    <b:widget id='...' locked='false' title='.' type='.'/>

    and

    </b:widget>!

    Let's replace them by your own saved Widgets:

    <!-- start left sidebar -->
    <div id='leftbar_wrap'>
    <div class='side'>
    <b:section class='sidebar' id='leftbar' preferred='yes'>
    <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
    <b:widget id='Label1' locked='false' title='Labels' type='Label'/>
    <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
    <b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
    </b:section>
    </div>
    </div>
    <!-- end left sidebar -->

    Right, the default ones are replaced by your own Profile, Label, Blog Archive and BloggerButton Page Elements.

Installing the new template
  1. Dashboard > Template > Edit HTML > Upload a template from a file on your hard drive:


  2. Browse ...


  3. Upload


  4. SAVE TEMPLATE

Done. That is: if you added all your existing Widgets you will not be bothered by this miserable Please confirm that the following widgets should be deleted. All the widgets' configuration data will be lost.!

And if so:

press CANCEL

... have a drink ... play with the dog ... love your partner ... have a cigar ... love the one you're with ...

and START AGAIN

Epilogue:
  1. Save your Widgets with collapsed code!
    Easy to handle, easy to recognize!

    IMPORTANT: every collapsed widget is no more then
    <b:widget id='...' locked='false' title='...' type='...'/>
    All widget code with this particular id='...' is stored for you on the Blogger Server!!!

    Uploading a template where the code is partly collapsed and parly expanded can/will be handled correctly by your Dashboard.

    So even when that new template has its main code expanded you can insert your one-liners (collapsed Widgets) and Upload/Save the (mixed) template! No problem.


Those Blogger boys and girls did a great job !!!

19 comments:

Long Island Dad said...

Thur, THANKS SOOOO MUCH for all your hard work. I'm so happy with all the options and ease of use. Template works great... I made some header changes to use my own banner.

Thanks for the widget info, definitely helped!

Thanks Again!

Bonnie Calhoun said...

Oh thank you, thank you, thank you for the widget advice. I was wondering what to do when I was ready to go live with this version of Downright!

steups said...

Thanks again for the template but I ma having a little difficulty customizing the sidebar font.

It seems to stay as a bold font.
How do I correct that?
Thanks.

Bonnie Calhoun said...

Steups...go...

Dashboard >Template >Fonts and Colors...

There you can change any of them!

Noor Azman Othman GBE said...

Hi Thur,

Just change to your Minima_Original_3_Column. It's awesome. I got helped from Peter Chen of BloggerForDummies though. To show my thanks, I dedicated my latest post to you. Come to my blog and I shall appreciate your comments.

p/s I'm comfortable using the classic template than the new layout.

70150 said...
This post has been removed by the author.
New2Blogger said...

Hello Thur,

Firstly, congrats on making a neat, clean and easy-on-the-eye template.

I am new to blogging and XML. I tried using your template. I want to add google adsense code at the beginning and the end of the post, but its just not working.

I tried the following -
1> Edited the blog widget to make it allow adding page element.
2> Expanded template widgets, and
(a) tried adding after div class='post-header-line-1
(b) data:blog.pageType == "item"
(c) data:post.body
None of it worked.

Is there some way to make it work? Any pointers you can give is much appreciated.

Once I am over this problem (with your help, or with some more of my hair pulling :) ), I shall add you to my blogroll.

Thanks.

- New2Blogger

Bonnie Calhoun said...

70150, you're problem is that you did not follow Thur's directions in this post. Go back and follow what he says step by step...no shortcuts.

Anonymous said...

Hey thus, me too having the adsense problem as new2blogger above. could you help on how to fix it...

Gracias

- Yipee

Anonymous said...

hello thur,

thank you for the lovely new blogger format 3 coloumn template. i downloaded downright ver 1.3, and had a silly question - i wanted to add adsense at the beginning and end of the post.

I followed your tips above on adsense code insertion at post beginning; i tried for post ending adding adsense code before post-footer-line post-footer-line-1. but the ads are not displayed there. did i do something wrong?

also, in the end, there is box which says powered by blogger, followed by the theme name etc. am i allowed to remove this entire text and replace it with a disclaimer for my blog?

thanks again for template and your help.


i was able to view ads at beginning using


http://te-test-blog.blogspot.com/

thur said...

Anonymous,

It is my guess (just a guess ... haven't tried it) that the Ad at the post bottom could be inserted right after

<p class='post-footer-line post-footer-line-3'/>

And of course you are allowed to remove my footer disclaimer text (please leave my disclaimer IN the template itself intact - all I am asking - as I state somewhere: Call it my small (narcistic) Advertising Campaign! :-) )

Darren said...

Thanks for the info. The panic CANCEL you described is
e x a c t l y
what I did.
: )

Anonymous said...

hello thur,

its new2blogger again. i am still struggling with the adsense code :( . The idea you gave to add it at the bottom of the posts didnt work :( . please advise on a way out, it would be a big help...

thanks you

Juliette Rossant said...

Thurs,

Major question just arose.

I finally understood how to use your new templates for the new Blogger.

I decided to test one on a Blogger.com test URL I have:
http://superchefblogtest.blogspot.com/

I downloaded your XML for the news Blogger Minima White 960w and installed it in a test area.

I added tons of "Page Elements," AKA "widgets."

My test template replicates the old one quite well (thanks to you).

I caught the comments about Widgets and have expanded them.

However, suddenly, a huge question arose in my mind: will templates bring all those Page Elements/Widgets from one blog to another?

Especially if my test is on Blogspot.com, while my regular ("real") site resides on a web host I myself pay for?


Yikes! - Juliette

Juliette Rossant said...

Thur,

I may have snookered myself here: can you let me know?

I figured out finally how to use one of your wonderful newBlogger templates and downloaded the Minima White 960 for my blog Super Chef.

I decided to test everything on a test site, and I was happy with the results there.

HOWEVER, when I go to move the template to another test site, to double-check, I bomb.

All I get is this message:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Content is not allowed in prolog.

Will none of my Page Elements / Widgets transfer from one blog site to the next? Especially if my first test site is on Blogspot.com (http://superchefblogtest.blogspot.com/), while I host my real blog (http://www.superchefblog.com/) independently of Blogger.com?

My guess (and fear) is that I will have to "upgrade" the old, non-newBlogger site (http://www.superchefblog.com/) with a new template of Blogger.com's, then start all over again with your template, then enter all the Page Elements / Widgets again (or at least cut and paste each one from the test site to the regular site)....

In short, did I make a huge mistake in not anticipating that templates are no longer immediately transferable in newBlogger, as they used to be in oldBlogger?

Help! - Juliette

thur said...

Hi Juliette,

You've got mail!

Kind regards,

Thur

F1 Wolf said...

switched my easier blog to DownRight Blogger Theme v1.4 to test it before I move on to the one with more posts and widgets. One issue I have that the countdown widget I have on http://schwarzwolf.blogspot.com/ does not work nice on the sister blog http://formula1fantasy.blogspot.com/ - when I tried to put it at the same position I had white gap several times the size of the grey countdown field.

Another issue - the text in the post did not automatically fit the width of the post body. I had to insert the text again. This is something I would not want to do with my main blog where there are much more posts with links in the posts. Any simple way ?

Jean-Simon DesRochers said...

Wonderfull ! Merci beaucoup ! Thank you for the templates and the widget tip !

thur said...

Salut Jean-Simon,

Avec plaisir.

Thur.