Tuesday, June 29, 2010
Templates
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.
Subscribe to:
Post Comments (Atom)
38 comments:
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 :D
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
Pedro Again!
Ohhh man, thanks!!!!!!!!
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... ?
Kat, it is working fine....
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!!!
How do I change the title text to an image? Thanks
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.
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! :)
Also Rethnaraj, how do I add a comment option under each post so viewers can leave a comment if the wish? Thanks
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>
/****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
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!
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;
}
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 :)
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! :)
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?
Thank you for that!
Yes, the sidebar with all the widgets, labels, etc :)
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;
}
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?
Carlo, can you give your blog URL? I have to look at your blog first....
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?
great template. thank you
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!
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
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.
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!
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.
love design of this blogger template will love to integrate this on my blog
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.......
To get best collection of wallpaper about Happy New Year 2017, View my blog Happy New Year 2017 Wallpapers
Post a Comment