Customize displaying Blogger Feed

Blogger provides a fanstatic widget named "Feed" allows add Feed from ours favourites websites to the blog. But it's display quite simple and the same overall. It's great if we customizing the displaying of Feed to make sense our blog's layout. Recently, i just make one for me, and if you like it, it yours ;).


     I add an "@" at the title and index image to seperate feed item.

to install this feed layout:
 - first: create your Feed like original.
 - second: in Blogger "Layout" tab, select "Edit HTML", backup your current templete (for safe)
 - third: select "Expand Widget Templates", and find the snippet contains your Feed ( search by your Feed   title ;)  ). The snippet begin like this
         <b:widget id='Feed7' locked='false' title='Thanhnien.com.vn' type='Feed'>
           ........< script inside >
         </widget&gt


just replate "< script inside >" by the following snippet below. Save templates and view result of your work ;).

<b:includable id='main'>        
    <br/>
    <div><span style='float:left;color:#FF0000;'><h2>@</h2></span><h2>&#160;<data:title/></h2></div>
    <div class='widget-content'>
    <ul expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'>
      <b:loop values='data:feedData.items' var='i'>
        <li>
          <div style='float:left;'>&#160;&#160;&#160;&#160;&#160;<img src='http://www.blogblog.com/rounders3/icon_arrow_sm.gif'/>&#160;&#160;</div>          
          <div style='overflow:auto;'>
          <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 != &quot;&quot;'>
              <span class='item-date'>
                &#160;-&#160;<data:i.str_published/>
              </span>
            </b:if>
          </b:if>
          <b:if cond='data:showItemAuthor'>
            <b:if cond='data:i.author != &quot;&quot;'>
              <span class='item-author'>
                &#160;-&#160;<data:i.author/>
              </span>
            </b:if>
          </b:if>
          </div>         
        </li>
      </b:loop>
    </ul>
   
    </div>
  </b:includable>