New Widgets from Blogger in Draft.

Blogger in Draft has some new widgets which you may like to try out in your blog. Blogger In Draft (http://draft.blogger.com/) is a special version of Blogger where new features are tried out before releasing them to evryone.



You can add the widgets to your blog - they are fully functional - and experiment with them and give your feedback on them.........

LOGIN TO BLOGGER IN DRAFT

To add the widgets to your blog first login at Blogger In Draft : http://draft.blogger.com/. Click on Layout link on the Dashbard and then click Add Page Element link on The Page Elements subtab of Template tab. Proceed in the same method followed in Blogger to add Page elements to your blog.
In the popup window you will see the new widgets. See picture below :

FEED SUBSCRIPTION WIDGET

Most of the new blogger layout templates carry a "Subscribe to Posts Atom" link at the bottom of the Main Page. Many bloggers especially newcomers are mystified by this link and it's purpose. See : What is subscribe to Posts Atom?


The only solution was to add a prominent Feeds and email Subscribe icons at the top of the sidebar. Now Blogger is getting ready to roll out it's own Subscription Links Page Element. You can add it from Blogger In Draft and test it. With this your viewers can add one-click subscriptions to six popular feed readers: iGoogle, Google Reader, Bloglines, Netvibes, NewsGator, and My Yahoo!.


There is also a comment feed subscription option which offers per-post comments on the post page and whole blog comments on the Main Page.

GOOGLE GADGET PAGE ELEMENT

You can now add a Google Gadget from Blogger In Draft directly instead of going to the Gadgets home page. The Gadgets come from iGoogle Gadget directory which contains thousands of them for your selection. You can create your own Google Gadget and add it to the directory.

SEARCH BOX PAGE ELEMENT

Adding a search box to your blog has become easier with this widget which adds a Google Custom Search Engine to your blog. It can be customized to search your blog, the web or the links you have added to your blog or all three together.


Enjoy!

Backup Widgets Template Data.

Widgets are the modules which make up the New Blogger Template. For more information see What are Widgets. However the data they carry to and from your blog displayed in browser to the Blogger database is kept separate. When you backup the template this data is not backed up. When you copy widget code to another blog the data is not transferred along with it. If you upload a template with widgets to your blog the widgets are added without the data they carry........

To backup your blog you should backup the template also as described in How to change Template. The widgets are also backed up along with the template. For example my Link List widget is backed up in the template as follows :

<b:widget id='LinkList2' locked='false' title='BLOG RESOURCES' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

However I have a long list of links within the widget which does not appear in it. They are retrieved from the Blogger Database the moment the blog is displayed in a browser using this code :

<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>
</b:loop>


To backup this link list, so that you need not type it out all over again should you require to change blog template, you have to look at the page source. For this open your blog in a browser and go to View---->Page Source(in Firefox) or View---->Source in Internet Explorer. The source file will open in Notepad and save this file as MyblogPageSource.txt. Scrolling down this file will give you the data in all the widgets in your blog. For example the Link List widget data appears as follows :

<div class='widget LinkList' id='LinkList2'>

<h2>BLOG RESOURCES</h2>
<div class='widget-content'>
<ul>

<li><a href='http://www.nutrocker.co.uk/3dheader.html' target='_blank'>3D HEADER</a></li>


<li><a href='http://www.google.com/addurl/?continue=/addurl' target='_blank'>ADD BLOG TO GOOGLE</a></li>

<li><a href='http://www.adfreeblog.org/' target='_blank'>ADFREE BLOG</a></li>

<li><a href='http://www.autopinger.com/' target='_blank'>AUTOPINGER</a></li>
</ul>

<div class='clear'></div>

Select only the links from the above code and copy and save to another Notepad file as LinksWidgetBackup.txt. See Below :

<ul>

<li><a href='http://www.nutrocker.co.uk/3dheader.html' target='_blank'>3D HEADER</a></li>


<li><a href='http://www.google.com/addurl/?continue=/addurl' target='_blank'>ADD BLOG TO GOOGLE</a></li>

<li><a href='http://www.adfreeblog.org/' target='_blank'>ADFREE BLOG</a></li>

<li><a href='http://www.autopinger.com/' target='_blank'>AUTOPINGER</a></li>


</ul>

Do this with other widgets to save their data.

Technorati Tags:widgets, backup, template, page element, data

Add a Table of Contents to Main Blog Posts Column.

A Table of Contents can be added to your main Blog Posts column. This Table of Contents will list all your posts titles as links. You can arrange this Table to appear before your Blog Posts or after..............

To do this you will first have to add extra Page Elements to your Blog Posts column. Login to Dashboard and click on Layouts of the blog you want to modify. Then click on Edit Html subtab.

First Download your template by using Download Full Template link.

Then scroll down in Edit Template text box till you come to :

<div id='main-wrapper'>
<b:section class='main' id='main'>

Modify the second line in above code to :

<b:section class='main' id='main' maxwidgets='5' showaddelement='yes'>

This will add a Add Page Element (showaddelement='yes') link to your Blog Posts section on the Page Elements tab and allow you to add a maximum of five widgets/Page Elements (maxwidgets='5') to your Blog Posts column. Save Template.

Go to Page Elements tab where you will see a Add Page Element link on top of your Blog posts column as in below picture.





Click on Image to see bigger view.

Now we will convert your blog RSS feed to javascript. For this go to http://www.rss-to-javascript.com/p/138.html. In the URL box at the top enter your blog feed which in case of the new blogger is :

http://yourblogname.blogspot.com/feeds/posts/default?alt=rss

Substitute actual blog name in place of yourblogname. Since we want to display only the title of our posts choose No to most of the options like : Show Channel, Show "Simplified" Channel, Show Item Descriptions and Show Item Posting Date. Enter zero for Number of items to show all available items and Yes to Use List Elements. Hit the Preview button to check that your titles are shown.

If the Preview does not tally go to Settings------>Site Feed in your blog and turn on the site feed.

Click on Generate Javascript button to generate the code. Copy that Javascript code by selecting all.

Login to your Dashboard and click on Layouts beside your blog name. On the Page Elements tab click on add Page Element link in the Blog Posts section. In the new window which opens choose the Html/Javascript option and paste the Javascript code in the contents window. In the Titles window type Table of Contents. Save the Page Element. This is saved on top of your blog posts. If you want it to appear below click and drag that page element from the top to the bottom of your blog posts. Click on Save.

Technorati Tags:feed, javascript, page element, rss, table of contents

Add Widget to provide Button-Link to your Blog.

You can now add a widget to your blog with a button which when clicked adds a button link to your blog from the reader's blog. This is done automatically without the reader having to type in even a line of code.....

First create a button by going to http://cooltext.com/Buttons and create a button for your blog. Then upload this button picture to a freehost like Googlepages and copy down the url of the picture. Let us call it : URL OF YOUR BUTTON PICTURE.


To do this go to Layout from the Dashboard after logging in to your account. In the Page Elements section click on Add Page Element link in the sidebar. In the new pop up window which opens choose Html/Javascript option. In the content section paste the following code :

<form action="http://beta.blogger.com/add-widget" method="POST">

<input value="FAVOURITE" name="widget.title" type="hidden"/>

<textarea style="display:none;" name="widget.content">





</textarea>
<input
value="http://buzz.blogger.com" name="infoUrl" type="hidden"/>

<input
value="http://www.blogger.com/img/icon_logo32.gif" name="logoUrl" type="hidden"/>

<input value="LINK TO THIS SITE" name="go" type="submit"/>
</form>
<p>Click above button to get a button link to this blog</p>

In the middle code replace the Capital letters with the appropriate values. Add all the above code in blue including the code in the middle picture. Click on picture to enlarge it. Then save the widget.

View blog. You will see below button in your sidebar:





When a reader clicks on this button he is taken to a page where he has to select his blog where he wants to add the link to your blog as shown below :




Here the reader can change the Title and edit the content if he/she wants. On clicking Add Page Element the link is added to the Page Elements tab in the sidebar of his blog. He/She can then rearrange its location in the blog by drag and drop method.

Using this method I have added it to my blog in the right sidebar at the bottom.

Technorati Tags:button, button-link, link widget, page element, widgets

How to Add Widgets to your blog.

UPDATE : Blogger has now replaced the "Add Page Element" link with the "Add Gadget" link. Clicking on this link will bring up the "Add a Gadget" popup window. All the original Blogger widgets are listed under the Basics subtab in this popup window.

Blogger widgets are now called as Blogger Gadgets. The rest are Google Gadgets which have now been integrated into the Blogger Layout----->Page Elements tab.

To add widgets/gadgets to your blog ...........


Login to your Dashboard and click on Layout under your Blog name. This brings up the Page Elements page under the Template tab.

IMPORTANT : PAGE ELEMENTS ARE ONLY AVAILABLE IF YOU ARE IN BETA BLOGGER WITH A BETA TEMPLATE AND NOT ON FTP.

A Page Element is the other name for a Widget in Beta Blogger. Page Element are contained within Sections. The four Sections of your Blog are : Header, RightSidebar, LeftSidebar, Main(Blog Posts) and Footer. Click on Add Page Element link in any Section of the Layout. This opens the Choose A New Page Element window. Here are listed the types of Page Elements :

1. List. Add a list of your favorite books, movies, or anything you like.
2. Link List. Add a collection of your favorite sites, blogs, or web pages.
3. Picture. Add a picture from your computer or from somewhere else on the web.
4. Text. Add some words to your blog - like a welcome message - with our rich text editor.
5. HTML/Javascript. Add third-party functionality or other code to your blog. You can add any Javascript here. Javascript need not be written for beta blogger specifically. To search for Javascripts just Google for them and then copy paste here.
6. Adsense. Display AdSense ads targeted to your blog.
7. Feed. Add content from a site feed to your blog.
8. Labels. Show all the labels of posts in your blog.
9. Logo. Choose from a variety of Blogger logos to add to your page.
10. Profile. Display information about yourself.
11. Blog Archive. Display links to older posts.
12. Page Header. Display your blog's title and description.

Choose the type of Page Element you want and enter the data you want it to carry. Then Save Changes and View Blog.

To Edit the Page Element after adding it click on the Edit link in that section in Page Elemnts tab.

NOTE : PAGE ELEMENTS ARE REFERRED TO AS WIDGETS INTHE TEMPLATE CODE.

This will open a window to give access to edit options of each Page Element. For example if you click on Edit in Blog Posts section you will see the following window :




Here you can choose whether to show your Labels below your posts and other options. In the same way you can access other Page Elements for editing. You can also rearrange Page elements from this page by drag-and-drop method. To do this click on the element you want to move hold the click, drag it to new position and drop it (release click) there. See image below :



You can also add third party Page Elements from other sites.

CONFUSED ABOUT WHICH PAGE ELEMENT TO CHOOSE? THEN SELECT THE HTML/JAVASCRIPT OPTION.

So if you're on another site and enounter a button that says [+Blogger] or [Add to Your Blog] click on such a button, you should be prompted to log in to Blogger (if you aren't already logged in) and then you can select one of your blogs. You'll also see the title, content and template for the new page element, which you can edit if you want. A logo and "more info" link may also be present to tell you more about where this page element comes from, who created it, and what it does.

By clicking the [Add Page Element] button on this screen, you will be adding code to your blog. So it's important to make sure you either trust the source of this code, or have reviewed it to make sure it's something you're willing to have on your blog.

Once you've added the page element, it will appear on the Template | Page Elements tab for your blog, where you can edit, move, or delete it, just like the other parts of your page.

Technorati Tags:page element, widgets

What are Widgets?

UPDATE : The Add Page Element link is now replaced by the Add Gadget link on Layout----->Page Elements tab.

Page Element = Blogger Gadget.

Code for a Blogger Gadget = A Widget

Widgets in Beta blogger are.............

individual page elements such as a picture, a blogroll, or anything else you can add from the Page Elements tab to a Section of your blog.

A Page Element is referred to as widget in Beta Template code.

A widget consists of code which forms the widget and the data which is added to it by the user. Multiple widgets are grouped together in Sections which are the areas of your page such as the Header, the LeftSidebar, the RightSidebar, the Main(posts) and the Footer. The whole Body of the webpage is made up of Sections containing widgets. A Section may contain none or many widgets. A Widget is also known as a Page Element. A widget corresponds to its real world alternative : gadget and has the same function. Each section and its corresponding widgets is included in the wrapper of that section. For example the sidebar wrapper contains the section 'Sidebar' which contains widgets/Page Elements like 'Profile', Links', 'Feed', 'Adsense Javascript', etc.


A widget is added by coding it in the Edit Html tab and after saving it appears in the Page Elements tab where data can be added to it.

Following types of data can be added in a widget :

1. Globally Available Data
2. Page Header
3. Blog Posts
4. Blog Archives
5. Profile
6. Text/HTML/Javascript
7. Feed
8. Picture
9. Labels
10. List
11. Link list
12. Logo

The complete widget code is hidden until you put a check in the Expand Widget Templates box at the top of the Edit Template text box under the Edit Html subtab which is under the Template tab.

Widget code is included between the following tags :

<b:widget [...attributes...]>

WIDGET CODE HERE

</b:widget>

Remember each widget is included in a Section which is included in a wrapper which is included within the body of the webpage.

The content within a widget is contained within 'includable' sections like this :

<b:includable id='main' var='thiswidget'>

[insert whatever code you want here]

</b:includable>

The attributes are as follows:

* id: (Required) A unique identifier made up of letters and numbers.
* var: (Optional) An identifier made up of letters and numbers, for referencing data within this section.

For example :

<b:includable id='post' var='p'>
Title: <data:p.title/>
</b:includable>


This was to show how the widgets are coded and where they can be accessed. In the next post we will discuss how to give them colors. Thus inside widgets are includables and inside them you can put code.

Technorati Tags:page element, template, template parts, widgets

How to put Adsense Link unit in your Header.

To put an Adsense Link Unit Ad. in the header..........

Log in to your Dashboard. Click on your 'Layout' link under your blog name. This takes you to Page Elements under the Template tab. Click on Edit Html. Scroll down in Edit Template field till you come to :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' preferred='yes' showaddelement='yes'>

Change the second line to be the same as the second and third lines above.
Save Template.
Go to Page Elements subtab.
Now you will see in the Header Section an 'Add Page Element' link.
Click on the link and in the popup window choose Html/Javascript.
Paste your Adsense 728 by 15 Ad. Javascript code in Content field.
Save. The Ad. unit is placed above the Title unit.
Click and drag this to below the Title unit.
Save.
View blog.

Technorati Tags:adsense, header, page element, template, widgets