Thursday 14 August 2008

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>

6 comments:

HostMtBlog said...

I can see from your blog that you know a lot about this field. Do you think you could share some information about blog hosting as well? Starters find it difficult to decide which host to choose.

fulltimeblog said...

I am a "Blogger" and I'm very satisfied with the services provided by this blog hoist.

livecontent said...

From what we can obviously see, the internet use isn't the only one who has changed, blogs use is also very different from its initial use.

mobi2 said...

With all the new use and goals of using the internet, new technologies, like dot mobi can develop and become pretty successful.

Hot Pictures said...

Easy code and easy task nice

A2Z Hollywood Movies said...

thanks for your tips..
succes for you..
you can visit me in.
Free Hollywood Movies