This blog has moved here: www.bloggermint.com
Rethnaraj Rambabu Tuesday, June 29, 2010

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.


38 comments:

Unknown said...

Sweet! Just sweet!

Rethnaraj Rambabu said...

@Earl, hahaha...thx =)

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

Unknown said...

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!

Rethnaraj Rambabu said...

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/

Unknown said...

Works like a charm! Thanks buddy!

Rethnaraj Rambabu said...

Welcome, dude...

Anonymous said...

I'm Pedro

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

lookin for this :D

Please, help me. :) template is awesome!!

Rethnaraj Rambabu said...

@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

Unknown said...
This comment has been removed by the author.
Anonymous said...

Pedro Again!

Ohhh man, thanks!!!!!!!!

kat said...

Hi there. I've just applied this template to my blog, thank you - I really like it's simplicity. Can't seem to get my header to work though - can you please explain it really simply... ?

Rethnaraj Rambabu said...

Kat, it is working fine....

kat said...

Thanks, I've been trying a few things... it's frustrating when you know what you want but don't know where to start with the html!!!

Becca Allen said...

How do I change the title text to an image? Thanks

Rethnaraj Rambabu said...

Hi Becca Allen,

TO add title text to an image,

Go to Edit HTML in post editor, and add an "alt" attribute the the image source like this.

<img src="youimagesource" height="200" width="200" alt="i love blogger"/>

Usually, blogger will leave the alt='' blank. All you have to do is just fill it in HTML mode in Post Editor.

Becca Allen said...

Thanks, but what I asked was how to 'change' the blog title to an image. At the moment my blog title image is at the bottom of the page and I would like it up the top. apart from that though I love the layout.. thankyou! :)

Becca Allen said...

Also Rethnaraj, how do I add a comment option under each post so viewers can leave a comment if the wish? Thanks

Rethnaraj Rambabu said...

Sorry Becca Allen, I misunderstood it.

/****To change the the blog title to an image****/

1. Replace the text in header with image tag like shown in the code below between the

<h1><a expr:href='data:blog.homepageUrl' title='Your Blog Title Here'>

and

;/a></h1>

/*----------------------------------------------
After modification
----------------------------------------------*/

<div class='col last span-12' id='header'>
<h1><a expr:href='data:blog.homepageUrl' title='Your Blog Title Here'><img src="your_header_image_URL_here" /></a></h1>
<h2>Blogger template <span class='low'>by</span> Introblogger</h2>
</div>

Rethnaraj Rambabu said...

/****To add post comment link****/

1. Go to Design > Edit HTML > Click on 'Expand Widget Templates'

2. Search for this code

<div class='post-footer-line post-footer-line-1'>

3. Immediately after that code, add the following code.

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Leave your comments</a>

4. Click 'Save'. Done

Becca Allen said...

Magic! Thank you!!!! :) I dont want to be a pest but is there any way to change the spacing around the comment option as its touching the post underneath it, its only a small thing but it looks slightly funny. Thanks so much for your help you've transformed my blog!

Rethnaraj Rambabu said...

Hi Becca, sorry for the late reply.

Go to Design > Edit HTML and search for

.post-outer {

in the CSS part and add the following code just below it.

margin-bottom:10px;

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

.post-outer {
margin-bottom:10px;
border-top:1px dotted #BBBBBB;
padding-top:1em;
}

Carlo said...

Hi! Is there any way to add a hyperlink to the comment section? The one that you suggested, which is the "leave your comment" script, is apparently confusing to some of my readers.

Also, is there anyway to make the font for "Older Posts" and "Home" buttons bigger?

Hope you can help me! Thanks :)

Carlo said...

Ooops! It's me again, Carlo! You don't have to answer my first question as you have already answered it above.

But please do answer my second question which is how to make the font for "Older Posts" and "Home" buttons bigger.

And lastly, how do I make the left sidebar a bit slimmer?

Thanks! :)

Rethnaraj Rambabu said...

Carlo, Go to Design > EDIT HTML > and search for

#blog-pager {
margin:0 20px;
text-align:center;
}

add a new declaration

font-size:14px;

to it. So it will look like this...

#blog-pager {
margin:0 20px;
text-align:center;
font-size:14px;
}

You can adjust the font size..And for your second question, do you mean the sidebar which contains all the widgets/ the post-meta which contains labels,number of comments and date?

Carlo said...

Thank you for that!

Yes, the sidebar with all the widgets, labels, etc :)

Rethnaraj Rambabu said...

Adjust the width of sidebar here....from 290px to your desired width....

#sidebar-wrapper {
margin: 0;
padding: 8px 0 0 0;
overflow: hidden;
width:290px;
}

But, there will be some space in the right side. So, you may be can increase the width of the main wrapper. Increase as the same amount that you've decreased for the sidebar. Let say, you've decreased 40px in sidebar, then increase a 40px in main wrapper...

#main-wrapper {
float:left;
width:596px;
padding-top:1em;
overflow:hidden;
padding-right:10px;
}

and remove the "width:35.7em" declaration from the following CSS class selector...

.post-body {
font-size:12px;
line-height:1.6em;
margin:20px 0 30px;
width:35.7em;------>delete this<----
overflow:hidden;
}

Carlo said...

Thanks! I tried that the sidebar moves to the left instead of it moving to the right when minimized. Why is that so? How can I make it move to the right?

Rethnaraj Rambabu said...

Carlo, can you give your blog URL? I have to look at your blog first....

Anton said...

Hi!

How do I add this feature under the comments/tags?

http://img707.imageshack.us/img707/7861/screenshot20100803at316.png

I already tried to add it via Blogger but it won't appear on my blog. Help?

dddental said...

great template. thank you

simplyspeaking said...

Hey, is there a way to permanently cause all my images to be:

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

Instead of manually having to input it with each photo? Thanks!

Talin said...

Hello.

Congratulations for this simple and nice template.

Please can you help me whit the following points:

1) The distance between the "Navigation Menu" and the top of the blog is to beig. I would like to reduce it a little bit. How should I do?

2) I would like when you click on the number of comments, that it bring me automatically (via Link ) to the comments Box. How should I do?

Thank you very much and Regards

TalĂ­n

Dvallen said...

great template, nice work, but i have problem with comment, how to change the picture to default, so i can see who to comment to may blog.
thanks.

npinkett said...

Hello!

Could you please tell me if it is possible and how to add the facebook share button as code or a plugin? I’ve tried adding the code to the single.php but it doesn’t work. Also I would like to at a continue reading feature to my blog I see the code is there however it doesn’t work either. Any help would be mostly apprieciated.

Thanks!

Joshua Smith said...

Thank you for saying about useful subject. It important to understand that mobile apps development could help in your business by installing custom development software solutions.

the seo portal said...

love design of this blogger template will love to integrate this on my blog

Unknown said...

Saya pendatang baru di blog ini ingin mengucapkan terima kasih banyak kepada OM AGUS karna berkat bantuan Nomor togel 4D yang OM AGUS berikan ternyata benar2 tembus, saya tidak tau harus berbuat apa untuk membalas kebaikan OM AGUS,Awalnya saya kurang yakin dengan angka yang OM berikan, Tapi ternyata alhamdulillah saya menang 4D, Sudah berapa banyak peramal yang saya hubungi tidak ada satupun yang tembus malahan hutang-hutang saya bertambah banyak,kini kehidupan saya jauh lebih sukses dari pada sebelumnya ini semua berkat bantuan OM AGUS, Bagi teman-teman penggila kupon putih yang tidak pernah merasakan kemenangan 4D silahkan hubungi OM AGUS di 085396801745 dan angka yang di berikan 0M dalam 5X putaran ini tidak pernah meleset,anda jangan mudah tergiur dengan janji-janji saatnya kita perlu bukti hanya OM AGUS yang menjamin 100% kemenangan.Kalau mau bukti hubungi sekarang TERIMAH KSI.......

gopal das said...

To get best collection of wallpaper about Happy New Year 2017, View my blog Happy New Year 2017 Wallpapers


Post a Comment

Copyright 2010 Introblogger
Designed by Rethnaraj Rambabu
Introblogger | The free blogging guide - Blogged Web Statistics