Blogger Template | Charisma

Charisma is a wordpress theme designed by Cozmoslabs. Attracted to it’s elegance and simplicity, I decided to convert this theme into Blogger. Previously, I’ve converted another theme by Cozmoslabs, { Early Morning }.

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>

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 –>

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-165×205.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>

10 Replies to “Blogger Template | Charisma”

  1. Thanks for converting one of the most elegant WP templates ever! You don't know how much you saved me now…

  2. @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.

  3. 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.

  4. 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

  5. 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

  6. 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

  7. Hi Rethnaraj and thanks for your lovely work. The thing is, I like what I see but I have this vision on what I want for my site and just haven’t found it yet. I have the content just not the look I want. What do I do? as some templates have what I want but not everything I want. It does get frustrating. You might have a way of assisting.

    Anyway, you do great work… keep it up.
    Cheers.
    alex recently posted..Now is your time!

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.