Custom Components

   
I found this on one of the custom components, it presents 3 of the most recent blog posts. Where can I find instructions on how to build something similar to this, I'm trying to build this for polls and photos/videos.

On the homepage of the community I'm display a set of four tabs, polls, photo & videos, and inside mcdonalds.

I'm using jquery create the swap the content within the tab styled widget.


<#assign messages = rest("/topics/style/blog/recent?page_size=3").messages />
<div class="custom-recent-articles-container">
  <#if messages.message?size gt 0>
    <div class="custom-recent-articles-heading-bar">
      <span class="custom-recent-articles-heading-bar-title">${text.format("Latest Blogs")}</span>
    </div>
  </#if>
  <#list messages.message as message>
    <#assign posted_by_userid = message.author.login?string />
    <#assign posted_by_label = text.format("Posted By:") />
    <div class="custom-recent-article-wrapper">
      <div class="custom-article-header">        
        <div class="custom-article-subject">
          <a href="${message.@view_href}">${message.subject}</a>
        </div>
        <div class="custom-article-posted-by">
          <span class="author">${posted_by_label} <#if ((posted_by_userid != "") && (posted_by_userid != "Anonymous"))><@component id="common.widget.user-name" user="conv:${message.author.login}" /></#if></span>
        </div>
      </div>
      <div class="custom-article-teaser">
        <#if message.teaser?length gt 0>
          ${message.teaser}
          <span class="custom-read-more"><a href="${message.@view_href}">${text.format("Read More")}</a></span>
        </#if>        
      </div>
    </div>
  </#list>
</div>