BieTemplates ~ Easy HTML Tricks for Blogging

Description
Community Blogger Template is designed by me . I like widescreen layout. This template is suitable for your portfolio project or magazine blog.

Designer
BieTemplates

Featured

Automatic thumbnail and readmore
Bookmarks post icon
RSS Subscribe
Twitter update
Banner advertisement
Adsense ready
Three column
Three column at lower section
Navigation menu

Installation Setting

Install Template

Download xml file, click on download link
Save to your desktop
Go to blogger dashboard, open Edit HTML, click on upload and choose your downloaded xml file
Save

Top Navigation Menu

Open Edit HTML, edit these code below

<div class='topnav'>
<ul id='topnav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://www.bietemplates.com/' target='_blank'>
Template Gallery</a></li>
<li><a href='http://dezigntuts.com' target='_blank'>Dezigntuts</a></li>
<li><a href='http://www.emocutez.com' target='_blank'>Emoticon</a></li>
<li><a href='http://blogger.com' target='_blank'>Login</a></li>
</ul>
</div>

Header Logo

If you want to set your own logo follow these instruction

create your logo image using image editor
upload it through Page Element
click Edit on Header widget
upload your image, choose instead of tittle and description
save

468x60 Banner Advertisement

This template is designed ads ready. You can put your banner ads on header right. Access through Page Element. Click on header right section widget and paste your code

Second Navigation Menu

Open Edit HTML, edit these code below

<div id='navbarmenu'>
<ul id='nav'>
<li><a href='http://your-link-here'>Photoshop</a></li>
<li>
<a href='http://your-link-here'>Freebies</a>
<ul>
<li>
<a href='http://your-link-here'>Icon</a>
<ul>
<li><a href='http://your-link-here'>Icon #1</a></li>
<li><a href='http://your-link-here'>Icon #2</a></li>
<li><a href='http://your-link-here'>Icon #3</a></li>
</ul>
</li>
<li><a href='http://your-link-here'>Pattern</a></li>
<li><a href='http://your-link-here'>Brush</a></li>
<li><a href='http://your-link-here'>Swirl</a></li>
</ul>
</li>
<li><a href='http://your-link-here'>Vector</a></li>
<li><a href='http://your-link-here'>Sketch</a></li>
<li><a href='http://your-link-here'>Wallpaper</a></li>
<li><a href='http://your-link-here'>Theme</a></li>
<li><a href='http://your-link-here'>Layout</a></li>
<li><a href='http://your-link-here'>Inkscape</a></li>
<li><a href='http://your-link-here'>Graphic</a></li>
<li><a href='http://your-link-here'>CSS</a></li>
<li><a href='http://your-link-here'>Community</a></li>
<li><a href='http://your-link-here'>Submit</a></li>
</ul>
</div>

Twitter Update

You can put your twitter update on this template. Open Edit HTML. Tick mark on Expand Widget Template. Find these code below

<h2 class='sidebar-title' style='display:none;'>Twitter Updates</h2>
<ul id='twitter_update_list'/>
<a href='http://twitter.com/bietemplates' id='twitter-link' style='display:block;text-align:right;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPLmA7AAqvgAxTwwvNb_SMBHnbYnIYIdqP3vVi5KuT9BT-S58GBXP7tLMb6xGU1QKFEYTUl-qyW7LUyspgv6Itizqtg47hahWZ6mrPNIaaW1qK5vf2skEVbbDKq5CLcjlCRP4DWQtToRP-/s1600/twitter.png'/></a>
</div>
<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/>
<script src='http://twitter.com/statuses/user_timeline/bietemplates.json?callback=twitterCallback2&count=1' type='text/javascript'/>

Change red text to your twitter username

RSS Subscribe

Open Edit HTML. Tick mark on Expand Widget Template. Find these code below

<form action='http://feedburner.google.com/fb/a/mailverify' id='feedform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=bietemplates', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input class='textarea' name='email' onblur='if (this.value == '') {this.value = 'Enter email address here';}' onfocus='if (this.value == 'Enter email address here') {this.value = '';}' type='text' value='Enter email address here'/><br/>
<input name='uri' type='hidden' value='camelgraph'/> <input name='title' type='hidden' value='54800'/> <input name='loc' type='hidden' value='en_US'/>
</form>

<p><a href='http://feeds2.feedburner.com/bietemplates'><img alt='' height='26' src='http://feeds2.feedburner.com/~fc/bietemplates?bg=5eb7c3&fg=ffffff&anim=1' style='border:0' width='88'/></a></p>

Change red text to your feeds username

Advertisement Banner 125x125

Open Edit HTML. Tick mark on Expand Widget Template. Find these code below

<a class='ad1' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaxpv3W3S03qzKRrevcovbvq1JwvVnzYMqe7n7eJQFbEeERuLAApUBTOJMkrP74at2AcSVD6A73TiLqdhxpdEmEOuZbqksHNnrCf2JHyvkSFT4W0XhjOFaPMx3ebpxEvba7HPj4Nx6YRRO/s1600/themeforest.jpg'/></a>

<a class='ad2' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaxpv3W3S03qzKRrevcovbvq1JwvVnzYMqe7n7eJQFbEeERuLAApUBTOJMkrP74at2AcSVD6A73TiLqdhxpdEmEOuZbqksHNnrCf2JHyvkSFT4W0XhjOFaPMx3ebpxEvba7HPj4Nx6YRRO/s1600/themeforest.jpg'/></a>

<a class='ad3' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaxpv3W3S03qzKRrevcovbvq1JwvVnzYMqe7n7eJQFbEeERuLAApUBTOJMkrP74at2AcSVD6A73TiLqdhxpdEmEOuZbqksHNnrCf2JHyvkSFT4W0XhjOFaPMx3ebpxEvba7HPj4Nx6YRRO/s1600/themeforest.jpg'/></a>

<a class='ad4' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaxpv3W3S03qzKRrevcovbvq1JwvVnzYMqe7n7eJQFbEeERuLAApUBTOJMkrP74at2AcSVD6A73TiLqdhxpdEmEOuZbqksHNnrCf2JHyvkSFT4W0XhjOFaPMx3ebpxEvba7HPj4Nx6YRRO/s1600/themeforest.jpg'/></a>

Change '#' to your targetted URL
Change https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaxpv3W3S03qzKRrevcovbvq1JwvVnzYMqe7n7eJQFbEeERuLAApUBTOJMkrP74at2AcSVD6A73TiLqdhxpdEmEOuZbqksHNnrCf2JHyvkSFT4W0XhjOFaPMx3ebpxEvba7HPj4Nx6YRRO/s1600/themeforest.jpg to your image URL