Modern Clix Blogger Template

Modern Clix is a minimal, grid based, elastic WordPress blog theme inspired in the Swiss Style of Design. I’ve managed to convert it into Blogger after being requested to do so by a reader, Earl. Another important thing is that it is a fast-loading blogger template with no background images involved in CSS.


Instructions on editing the template

1. Blog title and description

<div id=’main-nav’>
<ul>
<li class=’page_item page-item-2′><a expr:href=’data:blog.homepageUrl’ title=’Home’>Home</a></li>
<li class=’page_item page-item-2′><a href=’#’ title=’About’>About</a></li>
<li class=’page_item page-item-49′><a href=’#’ title=’Sample Page’>Sample Page</a></li>
<li class=’page_item page-item-51′><a href=’#’ title=’And Another Sample Page’>And Another Sample Page</a></li>
</ul>
</div>

2. Navigation menu

<div class=’col last span-12′ id=’header’>
<h1><a expr:href=’data:blog.homepageUrl’ title=’Your Blog Title Here’>Modern Clix</a></h1>
<h2>Blogger template <span class=’low’>by</span> Introblogger</h2>
</div>

3. Date format
– Blogger default date format is Monday, June 28, 2010. Change it to June, 28 2010.

8 Replies to “Modern Clix Blogger Template”

  1. @Earl, hahaha…thx =)

    Actually, I struggled for the comments part most…but, managed to create a template 99% like the original one..

  2. I was testing out to patch DISQUS but anyway, it's great. I guess I'll stick to the old blogger comment style. All in all it feels like the original. One question though, is there a way to post images on their full width like this one, http://bit.ly/bB0fS8 ?

    Really love the theme, will feature you soon in one of my posts!

  3. Earl, yes there is a way to post images of full width. Go to Edit HTML. Then search in CSS for

    .post-body

    and remove [ overflow:hidden; ] from it. Later, when you post images add a

    style='margin-left:-165px;max-width:none;'

    within the <img src='…' style='…' />. You can adjust the [ margin-left:… ] accordingly. But, before that install a useful plugin for Mozilla Firefox, Firebug. It helps you to adjust every HTML/CSS in a webpage.

    https://addons.mozilla.org/en-US/firefox/addon/1843/

  4. I'm Pedro

    how I can add the "posted by" on this template ???????????

    lookin for this 😀

    Please, help me. 🙂 template is awesome!!

  5. @Pedro, Go to Blogger > Design > Edit HTML. Then, check the "Expand Widget Templates" box.

    1. Search for this code…

    <div class='top-meta'>

    2. You will see a bunch of codes like this..

    <div class='top-meta'>
    <ul class='nav' style='margin-left:0;'>
    <li> <data:post.dateHeader/></li>
    <li><span class='labels'>In <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
    </b:if>
    </span></li>
    <li><b:if cond='data:post.allowComments'>
    <b:if cond='data:post.numComments == 1'>
    1 Comment
    <b:else/>
    <data:post.numComments/> Comments
    </b:if>
    </b:if>
    </li>
    </ul>
    </div>

    3. So immediately after <ul class='nav' style='margin-left:0;'>
    <li> the add the code shown below.

    <li>Posted by <data:post.author/></li>

    4. So, the new modified code will look like this

    <div class='top-meta'>
    <ul class='nav' style='margin-left:0;'>
    <li>Posted by <data:post.author/></li>
    <li> <data:post.dateHeader/></li>
    <li><span class='labels'>In <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
    </b:if>
    </span></li>
    <li><b:if cond='data:post.allowComments'>
    <b:if cond='data:post.numComments == 1'>
    1 Comment
    <b:else/>
    <data:post.numComments/> Comments
    </b:if>
    </b:if>
    </li>
    </ul>
    </div>

    5. Save..You can remove "Posted By" if you don't like it

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.