Posted by : Latief Kamikaze 26 September 2012


5 Colours Template




Download 5 Colours Template:


Fitur:

1. Featured contents slider
You can display your popular/featured posts here. The slider is only visible in home page of the blog and not in archive pages, post pages or static pages.



2. Multi-level drop down navigation menu
This CSS only multi-level dropdown menu works without any javascripts.



3. Tabbed sidebars
Only the first three widgets in the sidebar will be shown in tabbed sidebar. Thanks to Abu Farhan for this great feature.



4. Three column footer
The template comes with a minimalistic three column footer.



5. Post Title with comment bubble
Post comments number is shown in a small "tab" like feature beside every post title. The "tab" above the post wrapper shows "Latest Posts" in the home page and shows "You are reading" in post/static/archives pages.



6. Unique Comments Display
Most of the blogger templates care less about the design of comments boxes. But, I've managed to design comment boxes with unique look. I've implemented the same technique used to display the comments in Intro Blogger blog in this template.



Setting Template:

1. Featured contents slider
  • Replace the "Sample Post 1" between <h2>...</h2> tags in the code below with the post title of your featured posts.
  • Replace href='#' with desired URL and src='......'  with desired image source URL in <a href='#'><img alt='' height='145' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8bJuljrHsZJDcNbH6bQjfR80m4PCN9NPOlO02n3XUf7uVV2_EZvNSdfgbo31xS7q68g-wNVCvQuqxW3HB-yHvjlDTrgqqem-CJh5AlcX19XAflHmLbcIZUD4fXHdTVRrHckZhnHxLYP1v/' width='215'/> . The image height should be 145px and width is 215px. You can use slightly larger images if you want.
  • And write a small summary about your featured post between <p>......</p> tags.

<div id='slideshow'>
<div id='slidesContainer'>

<div class='slide'>
<h2>Sample Post 1</h2>
<p><a href='#'><img alt='' height='145' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8bJuljrHsZJDcNbH6bQjfR80m4PCN9NPOlO02n3XUf7uVV2_EZvNSdfgbo31xS7q68g-wNVCvQuqxW3HB-yHvjlDTrgqqem-CJh5AlcX19XAflHmLbcIZUD4fXHdTVRrHckZhnHxLYP1v/' width='215'/></a>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. [...]</p>
</div>

<div class='slide'>
<h2>Sample Post 2</h2>
<p><a href='#'><img alt='' height='145' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0KXi8e9m_-Lwi6rQtdi6muZAyLi6B_zeo-5-AYie1Fh1dc8jr-keUxB1S0S0ZXxm5WN_oTVI_e7yqhs197jWmqp_L4ZHl6o_DkCGtavf4TI5Q-zWe2ei8XGbhRXevh6MBvNwxPKMMBB4P/' width='215'/></a>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. [...]</p>
</div>

<div class='slide'>
<h2>Sample Post 3</h2>
<p><a href='#'><img alt='' height='145' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8bJuljrHsZJDcNbH6bQjfR80m4PCN9NPOlO02n3XUf7uVV2_EZvNSdfgbo31xS7q68g-wNVCvQuqxW3HB-yHvjlDTrgqqem-CJh5AlcX19XAflHmLbcIZUD4fXHdTVRrHckZhnHxLYP1v/' width='215'/></a>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. [...]</p>
</div>

<div class='slide'>
<h2>Sample Post 4</h2>
<p><a href='#'><img alt='' height='145' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0KXi8e9m_-Lwi6rQtdi6muZAyLi6B_zeo-5-AYie1Fh1dc8jr-keUxB1S0S0ZXxm5WN_oTVI_e7yqhs197jWmqp_L4ZHl6o_DkCGtavf4TI5Q-zWe2ei8XGbhRXevh6MBvNwxPKMMBB4P/' width='215'/></a>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. [...]</p>
</div>

</div>
</div>
2. Navigation menu

<div id='navigation'><ul id='nav'><li class='page_item'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li><li class='page_item page-item-51'><a href='#' title=''>About</a></li><li class='page_item'><a href='#' title='Categories'>Categories</a><ul><li class='cat-item cat-item-3'><a href='#' title=''>Category 1</a></li><li class='cat-item cat-item-4'><a href='#' title=''>Category 2</a><ul class='children'><li class='cat-item cat-item-8'><a href='#' title=''>Sub Category 1</a></li><li class='cat-item cat-item-8'><a href='#' title=''>Sub Category 2</a></li></ul></li><li class='cat-item cat-item-5'><a href='#' title=''>Category 3</a></li><li class='cat-item cat-item-1'><a href='#' title=''>Category 4</a></li><li class='cat-item cat-item-6'><a href='#' title=''>Category 5</a><ul class='children'><li class='cat-item cat-item-7'><a href='#' title=''>Sub Category 1</a></li><li class='cat-item cat-item-9'><a href='#' title=''>Sub Category 2</a></li></ul></li></ul></li><li class='page_item'><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Subscribe'><img class='headrss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYgnbTBLnaDcacsSjoxKDNmXR9xkYByKzAD1egNiWHSNx3MLo_MJVLOCeVEb7QtzVmJ4j2rl-HYhtXkjdPtE_Xr4BAGC95Q5h_iu7GhyBa43TD-0tQmBjpoGA99SgljFCtFmGPJpgNH8/'/>Subscribe</a></li><li class='page_item page-item-51'><a href='#' title=''>Contact</a></li></ul></div> 

Leave a Reply

Subscribe to Posts | Subscribe to Comments

- Copyright © 2012 NE-GEN BLOG -Shinpuru v2.3- Powered by Blogger - Designed by Johanes Djogan -