Subscribe: Widget-based
http://widget-based.blogspot.com/rss.xml
Added By: Feedage Forager Feedage Grade B rated
Language: English
Tags:
banner  beta  blog  blogger beta  blogger  data label  data  header  includable  label cloud  label  labels  var  widget 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: Widget-based

Widget-based



Blogger beta widget-based templates is sophisticated. Instead of letting it limit our creativity, here we come together to explore ways to make full use of this great feature.



Last Build Date: Wed, 16 Sep 2015 19:03:18 +0000

 



How to add a rotating banner to your Blogger beta header?

Tue, 05 Dec 2006 13:29:00 +0000

Sidney Shapiro have requested for a widget that would rotate banners in his Header section. I hope that many would find this useful as well.

This widget is pretty simple and straight forward but installing it may require some "work around".

Installation:
  1. First of all, we'll need to force the Header section to allow adding of other Page Element.

    To do this, go to Layout -> Edit HTML and look for the following codes.
        

    maxwidgets='1' showaddelement='no'>


    See the bold text? maxwidgets and showaddelement needs to be reconfigured.

        

    maxwidgets='2' showaddelement='yes'>


    Click Save Template.
  2. Now, go to Page Elements. In the header section where you want to insert the rotating banner, click Add a Page Element.
  3. Under "HTML/JavaScript", click "Add to Blog".
  4. Insert the following codes:
  5. Now, all you need to do is just insert your selected image URLs into the bolded text.
Simple isn't it?



Adding Technorati tags using Beta Labels

Fri, 17 Nov 2006 07:32:00 +0000

I'm pretty sure many people have attempted to create such a hack. Or maybe there's already several versions out there. This function basically uses your Blogger Labels, and create a link to Technorati. This saves you the time and effort to create each links one at a time.

Installation:
  1. Go to layout, and click on "Edit HTML"
  2. Tick "Expand Widget Templates"
  3. Now, the most difficult part is to find the following codes:
          
    Tip: search for "post-labels" using your browser's search feature (i.e. Ctrl+F)
  4. Replace with the following codes:
          
    Bold represent codes that were added while Italic represent an optional code, whether you want the labels or not.



Blogger Beta Template: Tremor

Thu, 16 Nov 2006 05:22:00 +0000

This is my first ever blogger beta template, I'm really proud of myself for completing this. This template isn't done lazily, it is fully compatible with Blogger. This means I took the extra time and effort to make sure it works in "Page Elements" and "Font and Colors".

(image) Tremor - Blogger Beta Template

To install:
  1. Download the template XML.
  2. Go to your blog layout and click "Edit HTML"
  3. Click on "Download Full Template" to make a backup copy of your original blog template
  4. Upload the Tremor template XML onto your blog
  5. Once uploaded, go to "Page Elements" and make customization to your blog.
Easy as pie. Have fun.

(image) Tremor - "Page Elements" view

What is included?

Apart from what you can see in the "Page Elements" view above, there's two other widgets that I've included:



Widget Request for Blogger Beta

Thu, 16 Nov 2006 04:41:00 +0000

Do you have a feature in mind that you would see useful and yet don't have the widgetry know-how to design them? Here's the chance for you to make a request.

In my effort to present my love for the new blogger beta, I will personally design them for you. (sounds so cocky) but yes I will and it's for free. If I see that it's possible to make your wish come true, I will make it.

Just post a comment here and let the ideas roll!



Recent Post and Comments for Blogger Beta

Wed, 15 Nov 2006 07:59:00 +0000

As you can see on the sidebar of this blog, I'm able to list down the most recent Posts and Comments along with it's relevant details. The great thing about this is, there's no script to install or javascript involved. It can be easily done just by using Blogger Beta's widget feature.
  1. First before you start, you'll need to find out your Blogger's Posts feed and Comments feed.
    http://*.blogspot.com/feeds/posts/default
    http://*.blogspot.com/feeds/comments/default
    where * represents your blog.
  2. Next, log in to your blogger beta account.
  3. On the dashboard under your blog title, click "Layout"
  4. Once your blog layout appears, click "Add a page element" on your sidebar.
  5. Choose "Feed" and add to blog.
  6. Insert your Posts or Comments feed into "Feed URL".
  7. Customise your settings:
    e.g. Title: Recent Posts/Comments
Also, did you know that by listing your most recent post and comments actually helps with your Search Engine Optimizations?

Happy bloggin.



Changing the Blogger Title Tag

Mon, 13 Nov 2006 09:49:00 +0000

This widget will change the Blogger's title tag to help amplify relevant keywords to your blog which improve the search engine ranking of your blog.

This is written for Blogger's Beta version and so it only works in Beta. If you're looking for the classic version, please visit Tech.Life.Blogged or Blogtimize!.

How does it work?

By default, your Blogger's title on the top left displays your blog title, and if it's in the items page, it'll include your post title as well.
e.g. Widget-based XML: Changing the Blogger Title Tag

It works the same way for labels and archives pages.

Installation

Find the following codes, near the top of your template:
<data:blog.pageTitle/>

Replace with the following code:






</b><b:loop values='data:posts' var='post'><b><b:include data='post' name='post'/></b></b:loop><b> ~ <data:blog.title/>











<data:blog.pageTitle/>


The trick is rather simple for the older Blogger version, but it's nearly impossible with Blogger beta without risking a little XHTML validation. This widget works well but it's only limited to items page. Meaning it'll go back to Blogger default in index, labels and archives pages.



Blogger Label Cloud

Sat, 11 Nov 2006 19:01:00 +0000

I'm a big fan of word clouds, or tag clouds. When I learned of Blogger's new post labeling system, I knew somehow that label cloud can be done. So a little Google search and I found this wonderful widget on phydeaux3.phydeaux3's label cloud has some very nice customization features including minimum and maximum font-size, algorythm-based color changing and a choice to show count. Installation is pretty simple with only 3 different parts to copy.I've installed it on my own blog and made a number of small changes (making it way better):added minPostCount where the cloud only display the label which have at least the specified amount of post. This is useful for a large blog with too many labels.reduced to only 2 parts to copy, i.e. CSS codes and widget codes.Non-javascript friendly. The original label cloud only works if JavaScript is enabled. Although most people usually have JavaScript enabled, there is nothing wrong to make it JavaScript-disabled friendly. Besides, it's good for search engine indexing.Using relative URL instead of absolute URL where you are required to insert your blog address, a move that I ... well ... considered as unnecessary (unless you're using FTP)Installation in two parts:CSS. Goes anywhere between the tags ... , preferably right before the end tag/* Label Cloud Styles----------------------------------------------- */ #labelCloud {text-align:center;font-family:arial,sans-serif;} #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;} #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;} #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0} #labelCloud a{text-decoration:none} #labelCloud a:hover{text-decoration:underline} #labelCloud li a{} #labelCloud .label-cloud {} #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000} #labelCloud .label-cloud li:before{content:"" !important}Widget. Goes anywhere between ...

  • ()