New Blogger Page Elements, Widgets and Layout Tags Tutorial
February 22nd, 2007 | More Posts: Web Design, Internet Marketing |Like me, if you went crazy cracking up the new blogger template and layout tags, then this post would shed some lights. Lets accept that the New Blogger has limited page elements and to incorporate advanced customization of these page elements requires a deep dive into their coding.
In this post, I will explain the basics of page elements and how its structured. You can use their interactive menu to move / create new page elements within the layout. Alternatively, if you are strong in programming concepts, you can try their widget code directly and make customize it further.
List of Page elements / Widgets of New Blogger
- List
- Link list
- Picture
- Text
- HTML/Javascript
- AdSense
- Feed
- Labels
- Logo
Page Elements / Widget Codes
List - displays a list of things.
<b:widget id=’TextList1′ locked=’false’ title=’yourtitle’ type=’TextList’>
<b:includable id=’main’>
<h2><data:title/></h2>
<div class=’widget-content’>
<ul>
<b:loop values=’data:items’ var=’item’>
<li><data:item/></li>
</b:loop>
</ul>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>
Link list - displays list of links. Use for manual blogrolls or link rolls i.e. list of favourite links etc.
<b:widget id=’LinkList1′ locked=’false’ title=’yourtitle’ 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’><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>
Picture - displays an image.
<b:widget id=’Image1′ locked=’false’ title=’yourtitle’ type=’Image’>
<b:includable id=’main’>
<b:if cond=’data:title != “”‘>
<h2><data:title/></h2>
</b:if>
<div class=’widget-content’>
<img expr:alt=’data:title’ expr:height=’data:height’ expr:id=’data:widget.instanceId + “_img”‘ expr:src=’data:sourceUrl’ expr:width=’data:width’/>
<br/>
<b:if cond=’data:caption != “”‘>
<span class=’caption’><data:caption/></span>
</b:if>
</div>
<b:include name=’quickedit’/>
</b:includable>
</b:widget>
Text - displays a chunk of text, which can be formatted.
<b:widget id=’Text1′ locked=’false’ title=’yourtitle’ type=’Text’>
<b:includable id=’main’>
<!– only display title if it’s non-empty –>
<b:if cond=’data:title != “”‘>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<data:content/>
</div>
<b:include name=’quickedit’/>
</b:includable>
</b:widget>
HTML/Javascript - displays HTML or Javascript e.g. a badge or other code.
<b:widget id=’HTML1′ locked=’false’ title=’yourtitle’ type=’HTML’>
<b:includable id=’main’>
<!– only display title if it’s non-empty –>
<b:if cond=’data:title != “”‘>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<data:content/>
</div>
<b:include name=’quickedit’/>
</b:includable>
</b:widget>
AdSense - displays your Adsense ads, of course.
<b:widget id=’AdSense1′ locked=’false’ title=” type=’AdSense’>
<b:includable id=’main’>
<div class=’widget-content’>
<data:adCode/>
</div>
</b:includable>
</b:widget>
Feed - displays items from feeds of your desired blogs or sites, kind of a feed roll but built into Blogger.
<b:widget id=’Feed1′ locked=’false’ title=’ yourtitle’ type=’Feed’>
<b:includable id=’main’>
<h2><data:title/></h2>
<div class=’widget-content’>
<ul expr:id=’data:widget.instanceId + “_feedItemListDisplay”‘>
<b:loop values=’data:feedData.items’ var=’i'>
<li>
<span class=’item-title’>
<a expr:href=’data:i.alternate.href’>
<data:i.title/>
</a>
</span>
<b:if cond=’data:showItemDate’>
<b:if cond=’data:i.str_published != “”‘>
<span class=’item-date’>
- <data:i.str_published/>
</span>
</b:if>
</b:if>
<b:if cond=’data:showItemAuthor’>
<b:if cond=’data:i.author != “”‘>
<span class=’item-author’>
- <data:i.author/>
</span>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>
Labels - shows all the labels used on your blog, a label cloud in effect.
<b:widget id=’Label2′ locked=’false’ title=’yourtitle’ 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>
Logo (Blogger button) - Just displays the standard Blogger button. Click against the pic you want (there’s a choice of 6 button looks). No other options.
<b:widget id=’BloggerButton1′ locked=’false’ title=” type=’BloggerButton’>
<b:includable id=’main’>
<div class=’widget-content’>
<a href=’http://www.blogger.com’><img alt=’Powered By Blogger’ expr:src=’data:fullButton’/></a>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>
Popularity: 3%
