Find your next design

Search the collection

Search by template name or a keyword.

Your personal edit

Saved templates

Keep your favourites together. Saved in this browser.

Select the heart on a template to save it here.

Simple and Bright

Free

The template details

Features & setup

Template type : 1 Sidebar, 2 Column, 4 Column footer, Adapted from WordPress, Elegant, Featured Section, Fixed width, Fresh, Magazine, Premium, Red, Right Sidebar, Rounded corners, Slider, Top Navigation Bar, Web 2.0, White

How To Configure Navigation Menu

Find this in "Edit HTML":

<!-- begin #topMenu -->
<div id='topMenu'>
   <ul class='sf-menu' id='menu-topmenu'>
      <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
      <li>
         <a href='#'>About</a>
         <ul class='sub-menu'>
            <li><a href='#'>Fullwidth Page</a></li>
         </ul>
      </li>
      <li>
         <a href='#'>Portfolio</a>
         <ul class='sub-menu'>
            <li><a href='#'>Full Width Portfolio</a></li>
            <li><a href='#'>Portfolio with Sidebar</a></li>
         </ul>
      </li>
      <li><a href='#'>Our Blog</a></li>
      <li><a href='#'>Contact</a></li>
      <li>
         <a href='#'>Shortcodes</a>
         <ul class='sub-menu'>
            <li><a href='#'>Buttons</a></li>
            <li><a href='#'>Columns</a></li>
            <li><a href='#'>List Styles</a></li>
            <li><a href='#'>Message Boxes</a></li>
            <li><a href='#'>Media</a></li>
            <li><a href='#'>Social &amp; Gallery</a></li>
            <li><a href='#'>Toggle &amp; Tabs</a></li>
         </ul>
      </li>
   </ul>
</div>
<!-- end #topMenu -->

You can change "#" marks with your URLs and anchor text with your own words.

More details: http://www.premiumbloggertemplates.com/2010/10/how-to-configure-navigation-menu.html

How To Configure Slider

Find this in "Edit HTML":

<div id='slider_container'>
   <div id='slider'>
      <a href='ENTER-SLIDE-1-LINK-HERE'>
      <img alt='' class='slideimg' src='https://3.bp.blogspot.com/-XBlgrZoNojw/Uh1r8Ds06qI/AAAAAAAAKt0/0KJsdK0sipM/s1600/slide-1.jpg' title=''/>
      </a>
      <a href='ENTER-SLIDE-2-LINK-HERE'>
      <img alt='' class='slideimg' src='https://3.bp.blogspot.com/-tHxt5kvUhkU/Uh1r-9xZwSI/AAAAAAAAKt8/heH50qbAobA/s1600/slide-2.jpg' title=''/>
      </a>
      <a href='ENTER-SLIDE-3-LINK-HERE'>
      <img alt='' class='slideimg' src='https://4.bp.blogspot.com/-kCnMxh_Vit4/Uh1sBISNKaI/AAAAAAAAKuE/CViuSGNZ5So/s1600/slide-3.jpg' title=''/>
      </a>
   </div>
</div>

Change "ENTER-SLIDE-X-LINK-HERE"s with real featured posts URLs and replace slide images URLs with your images URLs.

Slide image size should be 960px X 345px.

Ready to install?

Back up your current Blogger template first, then follow this template’s own setup notes.

Installation guide → Ask a question →

Find your next design

A template that fits your blog.

Choose your style, layout and features to explore the collection.

Browse all templates
Refine your search Style, layout & features

The conversation

2 thoughts on “Simple and Bright Blogger Template”

  1. Dear sir,

    currently after i apply the template to my blogspot,

    the date is "undifined" . how to fixed it.

    thanks so much!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Your next design, considered

Compare templates

Browse more templates →