What are Widgets?UPDATE : The Add Page Element link is now replaced by the Add Gadget link on Layout----->Page Elements tab. Technorati Tags:page element, template, template parts, widgets
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.
Like this article? Subscribe to the RSS feed!
An update on Google+ and Blogger
-
Following the announcement of Google+ API deprecation scheduled for March
2019, a number of changes will be made to Blogger’s Google+ integration on
4 Febr...
18 comments:
Can I change the size of a photo I added with the photo widget? I added it fine under customize your header, but it is too tall?
I added it from my computer rather than using a URL if that matters. Thanks!
The Brothers K,
You cannot change the size of a photo after it has been uploaded. You have to resize it on your PC and then upload it again. See :
http://betabloggerfordummies.blogspot.com/2007/06/10-quick-tips-for-smarter-blogging.html
How do I link the pic the another site?
Heather,
Get the image-link code from :
Making Image Links
Then paste it in a Html Page Element.
I may not understand...not working for me yet. as an Amazon Associate i would liek to put books in my widget bar. i pasted the code in a new widget. teh widget title appears but not the content. i do have the "3 book widget" but i would like to add individual books (image only), up to 15 different titles. Can you help?
Fishlab,
Did you generate the code correctly by clicking on "Build links' after login at the Amazon site?
Did you paste the code in a Html page element?
Hi i use make so here is the problem i am all new to this..to copy and paste you go in to edite high light it copy it and then how do i get the widjet into my blog i paste it where and how?
Caroline,
Have a look at : How to Add Widgets to Your Blog.
Hi Vin,
I have a Link List widget and I'd like to change some attributes such as line-height, letter-spacing, and maybe link colors. I'm not quite sure I understand how to implement this... is it doable? Thank you!
Fred,
In CSS part of Template add the style codes under the id of the widget like this :
#LinkList1 (
width:140px;
..
}
Very Clear and useful!Thank you.
How can I add a categorie section on the side my blog?
Is that considered a widget?
thanks
vanny
vanessa fried,
Add the Labels Gadget to sidebar.
Thanks so much for your help,I tried pasting the code right under sidebar content and it didn't work.
I also replaced the link of ..... with my label.
Did I do something wrong?
how do I see less of text on the ABOUT ME element?
thanks
v
vanessa fried,
I see your Categories section is up nicely. For the About Me add a HTML gadget to blog and put in just what you want.
Hi Vin,
If you have time and if you are interested please could you take a look at my widget problem I have listed on the Help Group Forum: http://groups.google.com/group/blogger-help-howdoi/browse_thread/thread/cc7d8af7f4913128/c5ee8801692ca5ce#c5ee8801692ca5ce
Any thoughts would be welcomed, a solution would be miraculous !!
Many thanks
FrancesFrancis
FrancesFrancis,
The easiest method would be to load a template having that feature.
The complicated method would involve creating a section and styling it so that it fits on top of the two sidebars and then to add widgets in it. Just like adding a third column to blog except that width should be larger.
CLICK TO LEAVE A COMMENT..... :-)
Skip to top of post.
Who is talking about the above post?