Friday, June 25, 2010
Templates
The home page has a beautiful slider, where you can display featured blog posts. Charisma theme comes with a unique feature where only post titles are shown in the home page of the blog. This feature for sure will help to increase your blog's page views and average time on your site.
As mentioned by original author of the theme, Cristian Antohe, it is a well structure theme which highlights the content and gives the user a pleasurable reading experience.
Here are instructions on customizing/editing the Charisma blogger template.
1. Navigation menu
<div id='nav'>
<div class='wrap'>
<ul class='nav' style='margin-left:130px;'>
<li class='home current_page_item'><a expr:href='data:blog.homepageUrl' rel='nofollow' title='Home'><span>Home</span></a></li>
<li class='page_item page-item-3'><a href='#' title='Contact'><span>Contact</span></a></li>
<li class='page_item page-item-5'><a href='#' title='Services'><span>Services</span></a>
<ul class='children'>
<li class='page_item page-item-7'><a href='#' title='Subpage 1'><span>Subpage 1</span></a></li>
<li class='page_item page-item-12'><a href='#' title='Subpage 2'><span>Subpage 2</span></a></li>
</ul>
</li>
<li class='page_item page-item-16'><a href='#' title='About'><span>About</span></a></li>
<li class='page_item page-item-18'><a href='#' title='Page Templates'><span>Page Templates</span></a>
<ul class='children'>
<li class='page_item page-item-20'><a href='#' title='One Column'><span>One Column</span></a></li>
<li class='page_item page-item-21'><a href='#' title='Html Elements'><span>Html Elements</span></a>
<ul class='children'>
<li class='page_item page-item-23'><a href='#' title='Sub Menu'><span>Sub Menu</span></a></li>
<li class='page_item page-item-24'><a href='#' title='Interestingness'><span>Interestingness</span></a></li>
<li class='page_item page-item-25'><a href='#' title='Birds'><span>Birds</span></a></li>
</ul>
</li>
<li class='page_item page-item-22'><a href='#' title='Archive Template'><span>Archive Template</span></a></li>
</ul>
</li>
<li class='page_item page-item-19 current_page_parent'><a href='#' title='Notes'><span>Notes</span></a></li>
</ul>
</div>
</div>
<div class='wrap'>
<ul class='nav' style='margin-left:130px;'>
<li class='home current_page_item'><a expr:href='data:blog.homepageUrl' rel='nofollow' title='Home'><span>Home</span></a></li>
<li class='page_item page-item-3'><a href='#' title='Contact'><span>Contact</span></a></li>
<li class='page_item page-item-5'><a href='#' title='Services'><span>Services</span></a>
<ul class='children'>
<li class='page_item page-item-7'><a href='#' title='Subpage 1'><span>Subpage 1</span></a></li>
<li class='page_item page-item-12'><a href='#' title='Subpage 2'><span>Subpage 2</span></a></li>
</ul>
</li>
<li class='page_item page-item-16'><a href='#' title='About'><span>About</span></a></li>
<li class='page_item page-item-18'><a href='#' title='Page Templates'><span>Page Templates</span></a>
<ul class='children'>
<li class='page_item page-item-20'><a href='#' title='One Column'><span>One Column</span></a></li>
<li class='page_item page-item-21'><a href='#' title='Html Elements'><span>Html Elements</span></a>
<ul class='children'>
<li class='page_item page-item-23'><a href='#' title='Sub Menu'><span>Sub Menu</span></a></li>
<li class='page_item page-item-24'><a href='#' title='Interestingness'><span>Interestingness</span></a></li>
<li class='page_item page-item-25'><a href='#' title='Birds'><span>Birds</span></a></li>
</ul>
</li>
<li class='page_item page-item-22'><a href='#' title='Archive Template'><span>Archive Template</span></a></li>
</ul>
</li>
<li class='page_item page-item-19 current_page_parent'><a href='#' title='Notes'><span>Notes</span></a></li>
</ul>
</div>
</div>
2. Blog title and description.
<div id='title-area'>
<h1 id='title'><a expr:href='data:blog.homepageUrl' title='Your Blog Title Here'>Charisma</a></h1>
<p id='description'>Just another Test Blogs weblog</p>
</div><!-- end #title-area -->
<h1 id='title'><a expr:href='data:blog.homepageUrl' title='Your Blog Title Here'>Charisma</a></h1>
<p id='description'>Just another Test Blogs weblog</p>
</div><!-- end #title-area -->
3. Featured Content Slider
<div class='anythingSlider'>
<div class='wrapper'>
<ul>
<li>
<a class='alignleft' href='#' title='Hello world!'><img alt='rose' class='attachment-home-charisma-featured' height='205' src='http://1.bp.blogspot.com/_b8IA1ajBJG8/TCNOZY32LbI/AAAAAAAABNs/CjgFsk-iXms/s1600/rose.jpg' title='rose' width='165'/></a><h2><a href='#' title='Hello world!'>Hello world!</a></h2><p>Vel cu causae torquatos concludaturque, quo laudem dolorum et. No duo suats alia omnium, ne debet omnes vim. Has quodsi vituperata eu, nam no ferri nostrud mentitum? An nulla dicant nec, eum possit vivendo alienum ad! Animal scripserit ne mea, ex vel vocibus eloquentiam. Sea aperiam commune te.</p>
</li>
<li>
<a class='alignleft' href='#' title='Birds migrate in the winter'><img alt='DSC_0208' class='attachment-home-charisma-featured' height='205' src='http://4.bp.blogspot.com/_b8IA1ajBJG8/TCNOaLL2EfI/AAAAAAAABN0/k8l7AQz6pFw/s1600/DSC_02081-165x205.jpg' title='DSC_0208' width='165'/></a><h2><a href='#' title='Birds migrate in the winter'>Birds migrate in the winter</a></h2><p>Nulla vel dolor ac diam dictum rutrum. Praesent feugiat nisl et quam lacinia bibendum. Pellentesque enim augue, mollis in cursus quis, blandit ut eros. Nam metus arcu, adipiscing imperdiet facilisis eu, dictum quis augue. Suspendisse potenti. Mauris odio nulla, euismod fermentum tempus et, mattis et nisi. Nam lorem ipsum, lobortis at ultricies vel, molestie quis [...]</p>
</li>
<li>
<a class='alignleft' href='#'><img alt='image name' height='205' src='Image URL' width='165'/></a>
<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>
<p>Post Description</p>
</li>
<li>
<a class='alignleft' href='#'><img alt='image name' height='205' src='Image URL' width='165'/></a>
<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>
<p>Post Description</p>
</li>
</ul>
</div>
</div> <!-- END AnythingSlider -->
<div class='wrapper'>
<ul>
<li>
<a class='alignleft' href='#' title='Hello world!'><img alt='rose' class='attachment-home-charisma-featured' height='205' src='http://1.bp.blogspot.com/_b8IA1ajBJG8/TCNOZY32LbI/AAAAAAAABNs/CjgFsk-iXms/s1600/rose.jpg' title='rose' width='165'/></a><h2><a href='#' title='Hello world!'>Hello world!</a></h2><p>Vel cu causae torquatos concludaturque, quo laudem dolorum et. No duo suats alia omnium, ne debet omnes vim. Has quodsi vituperata eu, nam no ferri nostrud mentitum? An nulla dicant nec, eum possit vivendo alienum ad! Animal scripserit ne mea, ex vel vocibus eloquentiam. Sea aperiam commune te.</p>
</li>
<li>
<a class='alignleft' href='#' title='Birds migrate in the winter'><img alt='DSC_0208' class='attachment-home-charisma-featured' height='205' src='http://4.bp.blogspot.com/_b8IA1ajBJG8/TCNOaLL2EfI/AAAAAAAABN0/k8l7AQz6pFw/s1600/DSC_02081-165x205.jpg' title='DSC_0208' width='165'/></a><h2><a href='#' title='Birds migrate in the winter'>Birds migrate in the winter</a></h2><p>Nulla vel dolor ac diam dictum rutrum. Praesent feugiat nisl et quam lacinia bibendum. Pellentesque enim augue, mollis in cursus quis, blandit ut eros. Nam metus arcu, adipiscing imperdiet facilisis eu, dictum quis augue. Suspendisse potenti. Mauris odio nulla, euismod fermentum tempus et, mattis et nisi. Nam lorem ipsum, lobortis at ultricies vel, molestie quis [...]</p>
</li>
<li>
<a class='alignleft' href='#'><img alt='image name' height='205' src='Image URL' width='165'/></a>
<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>
<p>Post Description</p>
</li>
<li>
<a class='alignleft' href='#'><img alt='image name' height='205' src='Image URL' width='165'/></a>
<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>
<p>Post Description</p>
</li>
</ul>
</div>
</div> <!-- END AnythingSlider -->
4. About author box below every blog posts
Go to EDIT HTML and check/tick "Expand Widget Templates". Then, search for the following bunch of codes. You may replace the default gravatar image with your own image.
<div class="author-box">
<img alt="" class="avatar avatar-70 photo" height="70" src="http://1.bp.blogspot.com/_b8IA1ajBJG8/TCNHNhq1KSI/AAAAAAAABME/W9v1xQsqxZc/avatar.png" width="70" /><b>About Author</b>
Write anything about you here!</div>
<img alt="" class="avatar avatar-70 photo" height="70" src="http://1.bp.blogspot.com/_b8IA1ajBJG8/TCNHNhq1KSI/AAAAAAAABME/W9v1xQsqxZc/avatar.png" width="70" /><b>About Author</b>
Write anything about you here!</div>
Subscribe to:
Post Comments (Atom)
11 comments:
Thanks for converting one of the most elegant WP templates ever! You don't know how much you saved me now...
how can i change the width of the body and sidebar? i just need it wide.
@ihack,
To change the width of post body and sidebar, go to Design > Edit HTML. In CSS, change the default width property of following id selectors to the shown values.....
#inner {
width:900px;
}
#content {
width:600px;
}
.main .Blog {
width:570px;
}
#sidebar-wrapper {
width:300px;
}
#header {
width:900px;
}
and click save. Done.
Thanks for beautiful template. I like that. I'd like to custormize it a little bit, so can I ask you a question?
I'd like to change the top page of the blog. Below the featured content slider, there are 4 or 5 titles of recent posts. Can I change that like an other usual blogs? Such as, title of the post, date, body, another title of the post, date, body, title, date, body, like that.
Sorry for my poor English and your help would be much appreciated.
MIC, thanks for your interest to use my template and your english is really good. Follow these steps to get the blog look that you wish.
1. Go to Blogger > Design > Edit HTML and click "Expand Widget Templates".
2. Search for this code.
<div class='post-outer'>
3. You will see these bunch of codes below that code.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h2 class='entry-title'><a expr:href='data:post.url'><data:post.title/></a></h2>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
4. Remove every other codes from that bunch of codes leaving only the code shown below.
<b:include data='post' name='post'/>
5. So, now the whole code will look like this
<div class='post-outer'>
<b:include data='post' name='post'/>
6. Save the template and done
How fast your answer is! It works as I intended! Thank you, and keep up your good work. I'd like to subscibe your blog at Google reader.
-MIC, from Japan
MIC, thank you very much. I like to help others..^_^!!!
Hello , I would like to ask if what is the code of that accordion like....part there , i wanna apply it to my template thanks
can i increase the number of posts being shown on the HOME page down there as a list?
hi. i absolutley love this template but i'm hoping for a few custimzations not mentioned.
iam using this theme now and i would like for the post titles on the top left (above the actual posts) to be at the bottom of the page after the last post instead of before the actual posts. i'm afraid after i made 20 posts that the whole first page will be gray bars linking to my posts...
i also wanted to move the nav gallery (i don't know what its really called but the thingie with HELLO WORLD) to the bottom possibly in the footer... how do i do that?
this is the best theme i have found so far! loving it!
We're glad to read about this. Let me share with instant car insurance that is provided by best insurance companies. You may save on cheap home insurance which allow you to apply for cheap policy.
Post a Comment