Adding Spry widgets to blogger

In my previous article I introduced you to Adobe's Spry framework for Ajax and explained its pros and cons. In this article, we will implement Spry into a blog and see how beautifully it works. Our aim will be to add an accordion in the right column. We will display a panel of badges, and widgets like Blog Rush and Feedjit in this accordion.

Spry provides widgets that are independent to one another and this makes it very easy to implement it restrictive environment. Another plus point is that your implementation of accordion is going to be very small. And the implementation is very simple. Once you have the downloaded Spry framework, you need unzip it and get hold of just two files located at \widgets\accordion. You need SpryAccordion.css and SpryAccordion.js files to build your project. If you want to make come changes, you can modify the CSS file. The file contains all the necessary style classes required for the accordion widget.

Once your custom modifications are done. Its time we move it on to the web! To host these two files, I will be using Google Pages. Many of you will be wondering why I am using Google pages and not other services that are specifically used to host files on web. The reason is, majority of these hosting services are bocked at corporate gateways and offices. I am not willing to mess up by blog when professionals access my blog. So, I will be using Google Pages. Coding a Spry widget is very simple. The accordion we are building will be represented as DIV tags. We will have a main DIV tag denoting the widget and each accordion panel will be represented as separate DIVs inside the main one. Each panel is further divided into panel heading and content. Both these parts are also denoted using DIV. So our widget code will look like this on completion:

<div class="Accordion" id="sampleAccordion" tabindex="0">
 <div class="AccordionPanel">
  <div class="AccordionPanelTab">Panel Heading</div>
  <div class="AccordionPanelContent">
   All the blog badges, images, will go in here.
 I can have multiple para tags and other tag here.
  </div>
 </div>
 <div class="AccordionPanel">
  <div class="AccordionPanelTab">Panel Heading next</div>
  <div class="AccordionPanelContent">
   Content for Panel 2 goes here!
  </div>
 </div>
 <div class="AccordionPanel">
  <div class="AccordionPanelTab">Final</div>
  <div class="AccordionPanelContent">
   Content for the last accordion panel goes here!
  </div>
 </div> 
</div>

Spry framework will not render the above code as accordion. We need to initialize the widget using Java Script. The initialization is also simple and straight forward as creating a object in Java using constructors. Have a look at how we initialize the widget:

<script language="JavaScript" type="text/javascript">
var sampleAccordion = new Spry.Widget.Accordion("sampleAccordion");
</script>

You can add this code into blogger template or use a HTML page element to hold the widget. Last modification to the blog is to add the CSS and widget JS files to the blogger template. This can be as simple as:

<link href="http://araotest.googlepages.com/SpryAccordion.css" rel="stylesheet" type="text/css" media="all" />
<script src="http://araotest.googlepages.com/SpryAccordion.js" type="text/javascript"></script>

You can see the demo on my testing blog where I build templates and test different functionalities. I am sure you will be confident enough to implement any other Spry widgets on a blog or site. Watchout for some interesting widgets to appear on my blog soon.

Techno Paper gets its 2008 look!

Let me present you the new look of Techno Paper. The new blogger theme is built on Blueprint CSS framework, and I will call this template BluePrint. Its built on 0.7 version of the framework and I would like to thank all people behind the framework. I started learning the CSS framework by building this blogger template. And I have come up with some better features compared to my previous theme.

When starting out to build a new template, I had few things in mind. Make the template simple (less graphics and images) , provide new sections to the blog and retain existing functionalities of old template like Social Bookmarking, Peek-a-Boo, etc.And I have achieved the same with this new template. I have added two new sections to the template and they are: "Featured Article" and "From the Archive". You will see these sections on top of the article. I hope these sections become useful to readers. I am sure rest of the features will be familiar to you and needs no explanation. Let me know your suggestions about this template.

:)

Techno Paper gets a new look!

Thanks to Dan S, who built the Gray Press theme from PressRow. I just took the Gray Press theme and modified it suite my need. So, if you ask what's new in this mutated template.. I have a list!

My major advancement is that I learned how a blogger template is built from scratch. Initially I tired to come up with my own template. But, I find less time to spend on these stuff after my daily work. So finally, I listed out what I need in my new template. This was my list :

• Menu in header
• Better profile display
  
• Search box other than Google custom search
• Tag Cloud
• Contact Me page
• Peek-a-boo view of articles
• Customized 3 column template
  
• Better template (run away from my present template! )

The menu was part of PressRow and Gray Press had a image header. I re-introduced the menu into this template, and has the original look and feel. My new search box now makes use of the defaulf blogger search rather than the Google custom search or other tools.

Another important feature is "Contact Me" page. You can access it from my menu. The contact form is from jotform. To integrate it with this template I had to make use of some javascript. Peek-a-boo feature was obtained from the normal blogger hack blogs found around!, And thank to those who developed it.

So here is the new template for my blog after sacrificing my blogging time build a template!
Happy blogging!

Adding Social bookmarks in New Blogger

People have started to using social bookmarks and its very common in blogs.But majority of these bookmarks are from sites like AddThis or iFeedReaders or AddThisBookmark etc. In this entry,we will see how to add social bookmarks to a new blogger.

Adding the new bookmarking links are not same as the old blogger.For the old blogger the blog entry url was represented as <$BlogItemPermalinkURL$> and title as <$BlogItemTitle$>.Whereas in the new blogger we have these represented as data:post.url and data:post.title respectively.

In new blogger you need to edit you template HTML to add these bookmarking links.In Templates, select "Edit Html" and check "Expand Widget Templates". Search for <p class='post-footer-line post-footer-line-1' />. Remeber that post-footer-line-1 will put your social bookmark links in footer's first link. If you intend to change the line, update the appropriate <P> tag. Also remember to close the tag in the end!

Add these to the required <P> tag :

Add to:
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title'>
Digg</a> |
<a expr:href='"http://del.icio.us/post?v=4&noui&jump=close&url= " + data:post.url + "&title=" + data:post.title'>
Del.icio.us</a>

Now simple save the template and you have your social bookmark added!

Blogger's spam-prevention

I am stuck! I was planning to blog on some other topic but ended up with a strange message from blogger in "Create" section:

This blog has been locked by Blogger's spam-prevention robots. You will not be able to publish your posts, but you will be able to save them as drafts.Save your post as a draft or click here for more about what's going on and how to get your blog unlocked.

Even after requesting for the unlock, I am still have no response from the Blogger!!! The only thing I can do now is create the entries and save them. I will publish this entry once I get my blog unlocked!

PN : [This post was published after the lock was removed]