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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHD5gGKCTyMpKBhePEdI_BdtwL_5racqLt7RDL4rlwMBjC2lhz45ZNlCchnJY9lQuLmXxcehv5U87cuATIwcBTRhjVqVTnbb04IinCacA1l6Y_5TYHwJ61QO8xhlxTW1Dsb7kmHfQeu_Ea/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;
}
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