# How to redesign default blog listing module

**URL:** <https://community.hubspot.com/t/how-to-redesign-default-blog-listing-module/429>\
**Category:** CMS Development\
**Created:** [November 17, 2016, 8:04am UTC](https://community.hubspot.com/t/how-to-redesign-default-blog-listing-module/429 "2016-11-17T08:04:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![buelersandra](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/buelersandra/32/93635_2.png) [@buelersandra](https://community.hubspot.com/u/buelersandra)\
**Post date:** [November 17, 2016, 8:04am UTC](https://community.hubspot.com/t/how-to-redesign-default-blog-listing-module/429/1 "2016-11-17T08:04:38Z")

</div>

Hello everyone, i am just beginning with designing with the COS and I have designed couple of templates for a blog. I need help with how to go about changing the default blog listing module code to look like the image attached.

 ![blog listing.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/4/f4525c4efa79945bb58f36da50b8a5d6089b49bb.png)  
blog list

Thanks

---

<div class="post-metadata">

**Author:** ![Gonzalo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/gonzalo/32/106671_2.png) [@Gonzalo](https://community.hubspot.com/u/Gonzalo)\
**Post date:** [November 17, 2016, 11:41am UTC](https://community.hubspot.com/t/how-to-redesign-default-blog-listing-module/429/2 "2016-11-17T11:41:03Z")

</div>

Hi @buelersandra,

You need to go throught each post with the [For loop](http://designers.hubspot.com/docs/hubl/for-loops) (as in the [default layout](http://designers.hubspot.com/docs/hubl/blog-content-markup)). And inside each post you need to [print](http://designers.hubspot.com/docs/hubl/hubl-variables-and-macros-syntax#variables) the different variables like name, featured image, date, summary and the link. So it should be something like:

```auto
{% for content in contents %}
 <div class="row-fluid">
 {% if content.post_list_summary_featured_image %}
 <div class="span3 hs-featured-image-wrapper">
 <a href="{{content.absolute_url}}" title="" class="hs-featured-image-link">
 <img src="{{ content.post_list_summary_featured_image }}" alt="{{ content.featured_image_alt_text }}" class="hs-featured-image">
 </a>
 </div>
 <div class="span9 post-body">
 {% else %}
 <div class="span12 post-body">
 {% endif %}
 <h2><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
 <div id="hubspot-author_data" class="hubspot-editable" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author">
 {{ content.publish_date_localized }}
 </div>
 {{ content.post_list_content|safe }}<br>
 {% if content_group.show_summary_in_listing %}
 <a class="more-link" href="{{ content.absolute_url }}">Read More...</a>
 {% endif %}
 </div>
{% endfor %}

```

And of course, a lot of CSS to set it beautiful 🙂

You can also check the documentation about the [blog variables](http://designers.hubspot.com/docs/hubl/hubl-supported-variables#blog-variables) to go depper.

Regards,

Gonzalo

---

<div class="post-metadata">

**Author:** ![buelersandra](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/buelersandra/32/93635_2.png) [@buelersandra](https://community.hubspot.com/u/buelersandra)\
**Post date:** [November 17, 2016, 12:05pm UTC](https://community.hubspot.com/t/how-to-redesign-default-blog-listing-module/429/3 "2016-11-17T12:05:18Z")

</div>

Hi Gonzalo,

I appreciate your time and response. I would go through it and get back to you.

Thank you very much