Sunday, February 20, 2011

SimplexBuzz - one more premium template

This is my latest template SimplexBuzz . This template has a eye-catching feature slider ,and I think it's good for travel/art/photography blog .

Live Demo | Download

Here are steps to install this template


1,Download template file

2,Open template file in any word editor you have .

3,To change the credit box at the end of each post

find this code
<div id="authorbox">
<h3>About Author</h3>
<img width="60" height="60" class="avatar avatar-60 photo" src="http://1.bp.blogspot.com/_MsaNQZtvB5E/StANlDhWFgI/AAAAAAAAAKA/8p5PORokslI/S220/normal_HNH_9244-sapa0207.jpg" alt=""/>
<div class="authortext">
<h4>
<a href="">Nhamnganhanh</a>
</h4>
<p>This is template SimplexBuzz .
</p>
</div>
</div>

Change the text in bold to what you want (you can write some description about you and your blog ...)

4, To add your feedburner account to email subscription form

find this code
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=simplex', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
                                  <fieldset>
                                     <input type="hidden" name="uri" value="simplex"/>
                                     <input type="hidden" value="en_US" name="loc"/>
                                     <input type="text" name="email" class="sub"/>
                                     <button type="submit">Submit</button>
                                 </fieldset>
                             </form>
change the text in bold 'simplex' to your feed burner account .

5,To add your social network accounts

find this code
<ul class="social">
                                 <li><a class="twitter" href="http://twitter.com/dinhquanghuy">Twitter</a></li>
                                 <li><a class="facebook" href="http://facebook.com/simplexdesignblog">Facebook</a></li>
                                 <li><a class="flickr" href="http://flickr.com/photos/">Flickr</a></li>
                                 <li class="rss"><a class="rss" href="/feeds/posts/default">RSS</a></li>
                             </ul>
change the links (marked in bold) to your social network accounts.

6,After that ,upload template to Blogger .

7,To add your logo

click on logo widget

then add your logo into widget content as I did in picture below

Click Save

8,To add items to top menu navigation

click edit link in category widget

then add link to your category into widget content like this

Link to category in blogspot has structure : http://yourblogspot.blogspot.com/search/label/your category

9,To add content to feature slider

Click on edit link in 'feature content slider' widget
Then add the name category which you want to show recent posts in feature content slider in widget content
for example ,I want to show recent posts under 'travel' category into feature content slider ,I click edit link in 'feature content slider' widget

then fill the widget content with name of category 'travel'

Save changes . From now ,4 latest posts in category 'travel' will be showed in feature slider

10,To show post in feature content section below slider

click on edit link in feature content widget

add name of category you want to show into widget content

Then save changes . Recent posts in this category will be showed in feature content section .

11,In this template , when you enter a single post ,the first image in this post will be showed as background in header automatically .
But when you enter a page ,there's no image displayed in header .
To add image in the header of pages

click on edit link in 'background for page' widget

and add the image into widget content .

From now ,the image you added will be showed as header's background each time you enter a page .

12,To add the text in alert box

click on edit link in 'alert' widget

and enter the text you want to show .

You can use HTML tags to make text in alert box display as you want .

13,To add your ad,click on edit link in banner widget

and add your ad code into widget content .


14, That's all for default widgets .You can add more widget or remove existed as you want .

Save all changes ,and you are done .I hope you all like this template and keep supporting me .
Feel free to use my template but please keep the credit at footer .Thanks in advance .

Update : As question from YUSUF left in my blog related to problems on long post titles and width of post in home page ,here is the solution
Find this

div.post h2.storyTitle {
color: #000000;
float: none;
font-size: 2.6em;
font-weight: bold;
line-height: 120%;
margin-bottom: 5px;
width: 585px;
}
and delete width: 585px;
Then find

div.post div.storyContent {
float: none;
margin-bottom: 20px;
width: 585px;
}
delete width: 585px;
To fix the problem with recent posts/comments tab when post title is long :
First ,find this

div#sidebar div.tabsContainer ul.panes ul li h4 {
left: 70px;
position: absolute;
top: 15px;
}
and delete all of them
Second ,find this

div#sidebar div.tabsContainer ul.panes ul li p.meta {
bottom: 0;
color: #85837E;
font-size: 0.9em;
left: 70px;
line-height: 120%;
overflow: hidden;
position: absolute;
}
Then change it to

div#sidebar div.tabsContainer ul.panes ul li p.meta {
color: #85837E;
font-size: 0.9em;
line-height: 120%;
margin-left: 60px;
}

the last step : Find this

div#sidebar div.tabsContainer ul.panes ul.comments li h4 {left:35px; width:250px;}
And replace it with

div#sidebar div.tabsContainer ul.panes ul.comments li h4 {
margin-left: 20px;
}

No comments:

Post a Comment