Sunday, 20 February 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg-nyP6ebxYvHw8pm0wHLPDvADsPl3gItyxgjf2Br7n2CktmL0TBcv75G3zYN-gRA4oqtVfiO7r3jJ90-rnVRTQj_tT8kcR-FGBxcHznxlVzz1NguwdexOoj2VZ1X3NYYErAoLF5KtY17R/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;

}

39 comments:

  1. It's really nice templates. I think Mr.Tung Lam from dulichbui.org will like this temp. Thank nhamngahanh.

    ReplyDelete
  2. Please Make Music Portal template please?

    ReplyDelete
  3. WoW, i love it. I will use this template for my new blog.
    Thanks!

    ReplyDelete
  4. @nhamngahanh : It is background for single post just leave it empty?. I mean there no need to be the way like background for page just like step 11 from your post.

    if that so. How do i change it? i try to put push stop (.) but it still not working. How?

    ReplyDelete
  5. Why my blogspot can't showed as background in header automatically in single post ?
    http://myportofolio-gallery.blogspot.com/2011/02/red-flower.html

    ReplyDelete
  6. Hey, can not see the images in all templates (show imageshack banner). Thanks for your help!

    My blog: www.ticespor.com

    ReplyDelete
  7. WOW, amazing template. Good work

    ReplyDelete
  8. How do we get the image displayed from the bigger version like from the link or custom one? As you can see there normally 2 versions of the image, one as a thumbnail the other is the real size.

    ReplyDelete
  9. Hi,

    Please check your demo, "Read more" function not working if somebody click on it.

    ReplyDelete
  10. Dear Huy, Congratulations on the template. Is excellent. But I have an observation. The long title of the post text presented on the main page, not featured, are cut off. I send this link to observe the anomaly. http://interprensanoticiasblog.blogspot.com/ How I can resolve this problem?

    ReplyDelete
  11. the background for page seem not working

    ReplyDelete
  12. can u check again this template. we cant see picture bground at single post. But for page, yes we can get a bground as u mention above. example: differnce between ur demo template page and our page. there is missing code for the picture.
    *****************\\our template
    img src="https://lh4.googleusercontent.com/_WGxHjhSA4EA/TcJeKyMKu0I/AAAAAAAAIa0/-TdOI0avWdA/s640/IMG_1666.JPG"

    ****************\\ your demo template
    img title="Plitvice Lakes, Croatia" alt="Plitvice Lakes, Croatia" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/304/overrides/16-plitvice-lakes-croatia-national-park_30417_600x450.jpg"

    there is code img title and alt before image.

    ReplyDelete
  13. nhamngahanh this is awesome template but the readmore is doesnt work how i can fixed that n how i can remove the slider content. i'll used this template but not with the slider content n single post content background. could u please tell me the code for that ,, thanks

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. i have a problem with slider post. anyone can help?

    ReplyDelete
  16. I really want to use this theme but there are no image for the post slider. please help me. my blog www.ikonmetro.blogspot.com

    ReplyDelete
  17. Porque quando clica em Leia mais o cabeçalho para fica desse jeito?
    http://agendamg.blogspot.com/2011/05/eventos.html
    Quando o que seria mas legal era ficar como na pagina inicial me ajude a resolver esse problema.

    Gostei muito desse template.

    http://agendamg.blogspot.com/

    Add: miragospel@hotmail.com

    ReplyDelete
  18. Dear friend, thank you from Turkey... We love yours templates. There is a problem about widths with posts on the home page... Too large... And if use a long title there is a problem too... Thanks...

    ReplyDelete
  19. Make it more than 4 posts in the category, you'll see the problem.

    ReplyDelete
  20. Oh, if sb can fix this template, contact me ttcontributor007[at]gmail.com I'll come with the price.

    ReplyDelete
  21. @YUSUF: 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;
    }

    ReplyDelete
  22. Thanks a lot for the fix CSS for long title - you got me cover!

    How about fixing the single post image bg?

    ReplyDelete
  23. Hmm.. The Read More tags in the individual posts link to the home page but the read more's in the feature content section work just fine. Hadn't noticed that before. Will look into it but it should be a lot more simple than the last bug. ;)

    ReplyDelete
  24. I deleted the 'read more' href in the class 'posts' and got rid of the read more's (just on posts) altogether until there is a better fix. I tried 10 different ways and couldn't get it to work.

    ReplyDelete
  25. @nhamngahanh, we need you here, please :)

    ReplyDelete
  26. Thanks a lot dude. We are always at your sidekick as we appreciate all your work putting so far in this blog.

    ReplyDelete
  27. logo nd category menu bar hide on ie8, how can i resolve this ?.. thanks in advance.

    ReplyDelete
  28. @zonna3 : did you fill the content of these widget ? if there's nothing in widget content ,it can't be shown . Or maybe some CSS tags have been missed ,so it make these widgets can't float over the slider.That's my opinion ,could you check that ?

    ReplyDelete
  29. everything filled right,... in firefox works fine.
    i test the Demo and other sites mentioned here and i saw same problem on ie8:
    logo and category bar appears for a second until slider charge, then hides behind the slider.

    ReplyDelete
  30. Picture on the main page was dessapearing slightly, like in Demo, but now there is no effect. May be something with java scripts...?

    ReplyDelete
  31. Hi! Your template looks great! Buuut... I can't make the download work... Please help! :-)

    ReplyDelete
  32. thank you in advance for your hard work to make this cool template. I have a constraint section "slider" does not work at all. how do I fix this? regards

    blog anggabp

    ReplyDelete
  33. i have a problems...my blog at - http://apaajanews.blogspot.com/
    no image on front pages
    need help

    ReplyDelete
  34. Hello,
    First of all Thank you and congrats for creating such a beautiful photography template.It looks awesome. I am trying to use your template in my blog. The problem is once i enter the POST of my blog, half of my image seems visible and half of my image is hidden due to the side bar. I would like you to suggest me what code should i change inorder for the sidebar not be visible(once we enter a particular POST) and only the contents of the POST be visible on the screen, so that the image will be visible completely. I hope you will reply me. Thank you :) :)

    ReplyDelete