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>
<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>
<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.
Sweet! Just sweet!
@Earl, hahaha…thx =)
Actually, I struggled for the comments part most…but, managed to create a template 99% like the original one..
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!
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/
Works like a charm! Thanks buddy!
Welcome, dude…
I'm Pedro
how I can add the "posted by" on this template ???????????
lookin for this 😀
Please, help me. 🙂 template is awesome!!
@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 != "true"'>,</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 != "true"'>,</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