Changed theme again

My previous themes went broken due to photobucket download limit. The template xml I got from the original site points directly to there.



So, I googled around for a new theme and found this http://b-themes.blogspot.com/2007/09/minyx-template-for-blogger.html. The download also provides a zip file of the images, so, I uploaded them to my pages.google.com storage to avoid the stupid photobucket problems happens again.

Reducing Blogspot feed size

By default blogspot shows 20 posts for the blog feed, however, this might not be desirable to some people (eg: those who are aggregated on Planets and hated when a minor edit to an old post causes the post to be bumped to the top of the Planet). Gladly that Blogspot feed URL have an optional feature to reduce the returned post quantity on the feed, though its not displayed in the default blogger.com dashboard.

The trick is easy, just add ?max-results=<number> to the end of the blogspot feed URL. For example

http://blog.kagesenshi.org/feeds/posts/default?max-results=5

p/s: dont bother opening that url, as you'll be redirected to my feedburner feed, but hey, you got the idea right?

Ref: Feedburner Forums , Topic 18650

Theme change

New looks for a new year .. :P

Actually, i got annoyed with the old theme where the main section is not wide enough to be comfortable with. Especially when the blog post is long.

So, I decided to google for some new blogger theme and decided to pick this : http://bloggertemplates.itmag.org/2007/11/blogger-template-underground.html. After some hack around and tweaking to my taste, the result is what you see now.

Comments whether this theme better/not than the previous theme are appreciated.

"Subscribe Feed" Blogger Widget (Update) / Hacking Blogger's widget engine #3

I have modified a little bit of the Subscribe Feed widget which I posted last time. The modification is simply for user-friendliness when adding the widget to your blog and editing the feed URL. Done it by using JavaScript to write the feed url into the links.

To edit the feed url, just adjust the value of

var feed_url = "/feeds/posts/default";

in the code.

To know more about automated widget adding here

You can get the widget using a one-click interface here.

and below is the code

<script type='text/javascript' language='JavaScript'>
// <!--

// use this value to use Blogger's default feed
// or edit it to use other feed's URL
var feed_url = "/feeds/posts/default";

document.write("<a href='http://add.my.yahoo.com/rss?url="+feed_url+"'><img alt='' src='http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif' style='border:0'/></a>");

document.write("<a href='http://www.newsgator.com/ngs/subscriber/subext.aspx?url="+feed_url+"'><img alt='Subscribe in NewsGator Online' src='http://www.newsgator.com/images/ngsub1.gif' style='border:0'/></a>");

document.write("<a href='http://fusion.google.com/add?feedurl="+feed_url+"'><img alt='Add to Google' height='17' src='http://buttons.googlesyndication.com/fusion/add.gif' style='border:0' width='104'/></a>");

document.write("<a href='http://www.rojo.com/add-subscription?resource="+feed_url+"'><img alt='Subscribe in Rojo' src='http://www.rojo.com/corporate/images/add-to-rojo.gif' style='border:0'/></a>");

document.write("<a href='http://www.newsburst.com/Source/?add="+feed_url+"'><img alt='Add to Newsburst from CNET News.com' height='17' src='http://i.i.com.com/cnwk.1d/i/newsbursts/btn/newsburst3.gif' style='border:0'/></a>");

document.write("<a href='http://my.feedlounge.com/external/subscribe?url="+feed_url+"'><img alt='Subscribe in FeedLounge' border='0' src='http://static.feedlounge.com/buttons/subscribe_0.gif' title='Subscribe in FeedLounge'/></a>");

document.write("<a href='http://www.netvibes.com/subscribe.php?url="+feed_url+"'><img alt='Add to netvibes' height='17' src='http://www.netvibes.com/img/add2netvibes.gif' style='border:0'/></a>");

document.write("<a href='http://www.bloglines.com/sub/"+feed_url+"' type='application/rss+xml'><img alt='Subscribe in Bloglines' src='http://www.bloglines.com/images/sub_modern11.gif' style='border:0'/></a>");

document.write("<a href='http://feeds.my.aol.com/add.jsp?url="+feed_url+"'><img alt='Add to My AOL' src='http://myfeeds.aolcdn.com/vis/myaol_cta1.gif' style='border:0'/></a>");
document.write("<br/>");
// -->
</script>

OpenDesigns.org : Open Web Templates for your website!

I found something interesting from StumbleUpon yesterday. An OpenSource website template community!!

The Open Design Community (TODC) is a group of Open Source Website Designers providing free web design templates helping to make the global internet a prettier place.
Our Goal

Our goal is to create a community owned and managed site, where users can share their free website designs and templates, discuss web design, and promote their services.

I browsed through the templates hosted there, and they are all awesome!. Almost all of them are well polished and professional looking and a lot are as high quality as expensive commercial web templates.

While browsing though, this Dark Ritual template caught my attention. I thought it'll look great for my blog. So I downloaded it and hacked it here and there to make it fit for Blogger's Layout engine and the product is, you're looking at it now!! (^-^)

Below is the modified Dark Ritual template for use in Blogger. For the image files , you can search and get it from OpenDesigns.org

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/*#############################################################
Name: Dark Ritual
Date: 2006-11-06
Description: Tribal-style three column layout.
Author: Viktor Persson
URL: http://templates.arcsin.se

Feel free to use and modify but please provide credits.
#############################################################*/
/*#############################################################
Changelog
Date: 2007-01-18
Hikaru Amano <http://kagesenshi.blogspot.com>
-> roughly modified template for use in new blogger's layout engine

#############################################################*/


/* standard elements */
* {
 margin: 0;
 padding: 0;
}


/******************************************************/
.post-body pre {
  font-size:small;
  border: 2px dashed #cccccc;
  background: #ffffff;
  max-height:120px;
  overflow:auto;
  color: #000000;

  padding: 2px;
}

textarea, input, select, option, button {
 font-family: Tahoma, Verdana, Arial;
 background-color : #F3F5F4;
 color : #7B9685;
 font-size : 10px;
 border: 1px solid #B9CAC0;
}
/************************************************************/



a {color: #682;}

a img {border:0;}
a:hover {color: #9A6;}

body {
 background: #333 url(img/bg.gif);
 color: #333;
 font: normal 62.5% "Lucida Sans Unicode",sans-serif;
 margin: 3% 0;
}

p,ul {
 padding-bottom: 1em;
}

ul {margin-left: 1.2em;}

li {list-style: none;}
.main li {list-style-image: url(img/li.gif);}

h1 {font-size: 1.2em;}

blockquote {
 background: #FFF;
 border-bottom: 1px solid #EEE;
 border-top: 1px solid #EEE;
 color: #333;
 display: block;
 font-size: 0.9em;
 margin-bottom: 1.2em;
 padding: 6px 12px;
}
blockquote p {padding: 3px 0;}

h1,h2,h3 {color: #994;}

/* misc */
.clearer {clear: both;}
.main_right .padded {padding: 6px 2px 6px 16px;}
.main .padded {padding: 7px 10px;}
.meta {font-size: 0.8em; color: #666;}
.left {float: left;}
.right {float: right;}

/* structure */
.container {
 font-size: 1.2em;
 background: url(img/bgcontainer.gif) repeat-y;
 margin: 0 auto;
 width: 840px;
 border: 12px solid #222;
}

/* header */
.header {
 float: left;
 width: 640px;
 background: url(img/header.jpg) no-repeat;
 font: normal 2.4em Verdana,sans-serif;
        height: 150px;
 line-height: 100px;
 text-align: center;
        vertical-align:bottom;
}


.header h1.title {
    color:#000000;
}

.header h1 a {
    text-decoration:none;
    color:#000000;
}

.header .description {
    font: normal small Verdana,sans-serif;
}

/* structure */
.top {
 background: #222;
 color: #DDD;
 float: left;
 font: normal 1.4em Verdana;
 height: 50px;
 text-align: center;
 width: 639px;
}
.subnav {
 float: left;
 width: 160px;
 color: #CCC;
}
.main {
 float: left;
 width: 480px;
}

.main .post-title {
       font-size: large;
}

.main .date-header {
       font-size:small;
}

.main img {
       border:1px solid #000000;
       padding: 5px;
}

.main .footnav img {
      border:0;
      padding:0;
}
.main_right {
 float: right;
 width: 200px;
 color: #CCC;
}

/* sub-navigation */

.subnav h1 {
 background: #222;
 color: #FFE;
 font: bold 1.1em Verdana,sans-serif;
 line-height: 24px;
 padding-left: 8px;
}
.subnav ul {margin: 0; padding: 0;}
.subnav li {
 border-bottom: 1px solid #696755;
 list-style: none;
}
.subnav li a {
 background: #89866F; 
 color: #111;
 display: block;
 padding: 8px 0 8px 12px;
 width: 148px;
 text-decoration: none;
}
.subnav li a:hover {
 background: #9C997C;
 color: #000;
}


div.widget {
        margin: 0 0 15px 0;
}
/* footer */
.footer {
 background: url(img/bgfooter.gif) repeat-x;
 color: #CCC;
 font-size: 0.9em;
 line-height: 39px;
 width: 100%;
 text-align: center;
}
.footer .left,.footer .right {padding: 0 16px;}
.footer a {color: #EEE;}
.footer a:hover {color: #FAFCB0;}


/** Page structure tweaks for layout editor wireframe */
body#layout { 
padding:0;
margin:0;

}

body#layout #main_wrap {
  width:380px;
}

body#layout #outer-wrapper { 
  width: 740px;
}

body#layout #header{
  width:540px;
  height:50px;
}



]]></b:skin>
</head>

<body>
  <div class='container' id='outer-wrapper'>

<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='&amp;laquo; Shadow Logs &amp;raquo; (Header)' type='Header'/>
</b:section>

 <div class='main_right' id='sidebar_right'>

 <b:section class='padded' id='sidebar' preferred='yes'>
               <!-- Right sidebar widgets here -->
 </b:section>

 </div>
 <div class='subnav'>
 <b:section id='subnav'>
  <!-- Left sidebar widgets here -->
 </b:section>
 </div>
  
 <div class='main' id='main_wrap'>

 <b:section class='padded' id='main_section' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
 </b:section>
<hr id='hrule1'/>
 <b:section class='footnav' id='footer'>
 </b:section>
 </div>
 
 <div class='clearer'><span/></div>

 <div class='footer'>
  <span class='left'> 2006 <a href='index.html'>Website.com</a>. Valid <a href='http://jigsaw.w3.org/css-validator/check/referer'>CSS</a> &amp; <a href='http://validator.w3.org/check?uri=referer'>XHTML</a></span>
  
  <span class='right'>Template design by <a href='http://templates.arcsin.se'>Arcsin</a>. Hacked for use in Blogger by <a href='http://kagesenshi.blogspot.com'>KageSenshi</a> </span>
  
  <div class='clearer'><span/></div>

 </div>

</div>

</body>

</html>          

"Subscribe Feed" Blogger Widget

This is my first widget written using the HTML widget type. It just a simple widget for users to easily provide buttons to several popular feed subscription site.I've been trying to use the add-widget form provided by Blogger, but it seems like the widget.template input couldn't accept input other than <data:content>. I think this is a bug and I've reported it. (Due to this bug, I think the next "Hacking Blogger Widget" post will be halted for a while)

Adding the widget into the template is easy. Open edit template html page, check expand widget, then copy the codes below, and paste it after another widget. Save the template and you're done. To rearrange the widget, just use the 'Page Elements' page.

After adding into your template, goto 'Page Elements' and click the edit button at the widget. Put your feed url into the widget content form. Be careful not to put any line breaks or other characters because it will go into your url.

Preview

And this is the code

<b:widget id='HTML12' locked='false' title='Subscribe Feed' type='HTML'>
<b:includable id='main'>
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <a expr:href='"http://add.my.yahoo.com/rss?url=" + data:content'><img alt='' src='http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif' style='border:0'/></a>
  <a expr:href='"http://www.newsgator.com/ngs/subscriber/subext.aspx?url=" + data:content'><img alt='Subscribe in NewsGator Online' src='http://www.newsgator.com/images/ngsub1.gif' style='border:0'/></a>
  <a expr:href='"http://fusion.google.com/add?feedurl=" + data:content'><img alt='Add to Google' height='17' src='http://buttons.googlesyndication.com/fusion/add.gif' style='border:0' width='104'/></a>
  <a expr:href='"http://www.rojo.com/add-subscription?resource=" + data:content'><img alt='Subscribe in Rojo' src='http://www.rojo.com/corporate/images/add-to-rojo.gif' style='border:0'/></a>
  <a expr:href='"http://www.newsburst.com/Source/?add=" + data:content'><img alt='Add to Newsburst from CNET News.com' height='17' src='http://i.i.com.com/cnwk.1d/i/newsbursts/btn/newsburst3.gif' style='border:0'/></a>
   <a expr:href='"http://my.feedlounge.com/external/subscribe?url=" + data:content'><img alt='Subscribe in FeedLounge' border='0' src='http://static.feedlounge.com/buttons/subscribe_0.gif' title='Subscribe in FeedLounge'/></a>
   <a expr:href='"http://www.netvibes.com/subscribe.php?url=" + data:content'><img alt='Add to netvibes' height='17' src='http://www.netvibes.com/img/add2netvibes.gif' style='border:0'/></a>
   <a expr:href='"http://www.bloglines.com/sub/"+data:content' type='application/rss+xml'><img alt='Subscribe in Bloglines' src='http://www.bloglines.com/images/sub_modern11.gif' style='border:0'/></a>
   <a expr:href='"http://feeds.my.aol.com/add.jsp?url=" + data:content'><img alt='Add to My AOL' src='http://myfeeds.aolcdn.com/vis/myaol_cta1.gif' style='border:0'/></a>
<br/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

You might need to adjust the div id to make it compatible with your theme. Also, the widget id must be a unique id. If theres other widget in your template with the same id, put a different id for this one.

Hacking Blogger's widgets engine #2

This is my second post about what I've learned from the new Blogger engine. This time, I'll explain the about the widgets, its tags, and how to create your first widget.

Widgets
To those who didnt know it, Blogger widgets are those drag-and-drop able page elements in the new Blogger. By default, you can only choose to use the widgets provided by Google for your page. However, that is not the limit. The widget engine in the new Blogger offers good customization and allows developers to develop their own widgets to share with others!. Its uses HTML for layout and XML for content, therefore, its not hard to create your own widget if you know the basics.

Widget Tags
Widgets are defined using <b:widget> tags. You can read Blogger's documentation about the tag here. The basic is, when you define a widget, you just need to give it an id and a type. For a list of available widget types and it data variables, visit here. Below is an example of a simple widget using the HTML type.

<b:widget id="myWidget" type="blog">

<b:includable id='main'>
   <div style="align:center">
      <h><data:title/></h>
      <data:content/>
   </div>
</b:includable>


<b:widget/>

Writing Your First Widget
Writing a widget is very easy if you have basics in HTML, XML and a little bit of programming. Blogger's widget is a combination of those 3 elements. A program have a main() function, user defined functions and variables. Blogger's widget similar to that. The <b:includable> tags are the functions, and <data:/> tags are the variables. It also support loops and conditional operations. Read here for more information about includes, loops and conditional operations.

A very basic skeleton of a widget contains a widget declaration and main includable.

<b:widget id="myWidget" type="html">

<b:includable id='main'>

     <-- main HTML layout -->

</b:includable>


<b:widget/>

From the skeleton, we can expand it more by adding includes and conditions.

<b:widget id="myWidget" type="html">

<b:includable id='main' var='post'>
     Title : <data:title>
     <b:if cond='data:content == ""'>
     Content : Empty
     <:b:else/>
     <b:include id='printContent'/>
     </b:if>
</b:includable>

<b:includable id='printContent'>
    Content : <data:content/>
<b:includable/>

<b:widget/>

With this, I beleive its already enough for y'all to start writing your own widgets. And if you do, don't forget to share it with the rest of the world.
Sadly though, I couldn't find how to define our own variables. Without user defined variables, it reduces your flexibility when writing the widgets because you'll be depending a lot on built-in variables and widget types. Anyway, good luck :D

Hacking Blogger's widgets engine #1

I just started playing around with the new Blogger's widget based template engine. At first it was confusing because its not normal HTML based template, but a strict XHTML 1.0 XML template. But after a playing around with it for a few hours, I started to understand the elements of the template and started to modify my template little by little (those who entered my blog a few times today might noticed that the template keep changing) and testing what element will affect what values. This is what I've learned so far.

The Template
The template generally consist of 2 significant parts, the layout and the widgets. The layout template is the one Blogger shows by default when you enter edit-html mode. The widgets are shown below the layout template after you check "Expand widget template" checkbox. You only need to change the layout part if you want to customize the base appearance of your blog. If you want more widget specific customization, edit the widget.


Theming
The theming system in the widgets engine depends heavily on CSS. If you scroll down the layout code of the default themes, you'll see that more than 80% of the layout is CSS. XHTML is only used to define how stuff will be arranged and CSS will define how stuff will look like.


Font and Colors
The new engine provide a nice UI interface for changing the color and font values in the CSS code. You just need to define the variables inside the CSS code using <variable> tags and it will appear at the "Font and Colors" setting in Blogger.



Example of a variable definition

<Variable name="bodyBgColor" description="Background Color" type="color" 
default="#cfcfcf" value="#C3D9FF">

Example of using the variable inside the CSS

body {
   background-color: $bodyBgColor;
}

From what I found for now, the variable tag only support 2 types which are color and font. So, you can only use it for CSS font and color settings only.

Thats all I guess for now. I will be posting more of this in the future. So, stay tuned (^-^)