20 Free Blogger Template: Awesome Gallery

Awesome Gallery is a 2 column showcase style template for blogger with contrast color combination and stunning backgrounds images. This is an "Adsense" ready template, as you can see in demo there is a 728x90 ad banner place on top just below menu bar and 125x125 ad places in the side bar and 468x60 ad place in the inner page below post title and above post content. A unique piece of CSS based "Email Subscription Form" for feeds I have added just beside the 728x90 ad place. I use Ubuntu 9.10 OS with Firefox3.5 browser so, the screen-shot below may differ from the actual results in other OSs' and browsers. For the the title image (logo) I have used "Create a cool metallic logo with reflections and perspective shadows" section of GIMP 2.6.

Screen-shot (On Firefox 3.5 Browser on Ubuntu 9.10 OS)

DEMO | DOWNLOAD

Screen-shot: Comments Area

Now let's move to the installation part. First step is to take the backup of your existing template. To do so just log on to Blogger, Go to Edit HTML, and then click Download Full Template and save it.

To upload the template:

• Go to Layout > Edit HTML
• Click on the Browse Button and upload the awesomegallery.xml file.
• Click on the Save button.

Navigation Menu:

To edit Menu links find the following series of codes;

Code:

<!-- TOP NAVIGATION MENU WIDGET STARTS-->
<ul class='menu4'>
<li><a expr:href='data:blog.homepageUrl'><b>Home</b></a></li>
<li><a href='LINK URL'><b>About Us</b></a></li>
<li><a href='LINK URL'><b>Contact us</b></a></li>
<li><a href='LINK URL'><b>Disclaimer</b></a></li>
<!-- SEARCH BAR STARTS-->
<li id='search_bar'><form action='/search' id='search_bar'><table border='0' cellpadding='0' cellspacing='0'><tr><td><input class='search_field' id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search this site..&quot;;}' onfocus='if (this.value == &quot;Search this site..&quot;) {this.value = &quot;&quot;;}' type='text' value='Search this site..'/></td><td><input class='search_button' type='submit' value=''/></td></tr></table></form></li><!-- SEARCH BAR ENDS-->
</ul>
<!-- TOP NAVIGATION MENU WIDGET ENDS-->

and replace only the RED texts shown above with required link URL and title.

Twitter and RSS Buttons:

To edit the Twitter and RSS widget on top find the following series of code;

Code:

<!-- TWITTER AND RSS WIDGET STARTS-->
<ul id='twtlink'>
<a href='http://twitter.com/YOUR TWITTER USER ID' target='_blank'><img alt='Follow Me' background='transparent' class='twt' height='100' onmouseout='this.style.opacity=0.8;this.filters.alpha.opacity=80' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigsmjXmwDwFTy4j5S5dnFHoeswsr8N7EHHqDr01s9YKLBIDIbtVkHXYkWrappxbHhBTWrwbZRj7Zaq8w4INCh9UZIaHqfz6RafUN2W-WY4BY2sxeAlgyezWOlnGRSF3a5oDKVhOZNe-PEf/s1600/twitter_blur.png' style='opacity:0.8;filter:alpha(opacity=80)' width='100'/></a>
<a href='YOUR FEED URL HERE' target='_blank'><img alt='Feed Me' background='transparent' class='ss' height='100' onmouseout='this.style.opacity=0.8;this.filters.alpha.opacity=80' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirixeiEtefZYZtL93wJeWA7Ove4GUO-pKFe_o8hHkSCxYZoZC4iZbEmTrIsfVpw_vs3BUBBzndYsIylE6yiBSsUT_inXrBLCNl79wXqFEB_amT6Rmq1vx10qHJjwHTrS5TtJ6CivVOHgOT/s1600/feed_blur.png' style='opacity:0.8;filter:alpha(opacity=80)' width='100'/></a>
</ul>
<!-- TWITTER AND RSS WIDGET ENDS-->

and replace the RED texts shown above with your Twitter User ID and your blog's feed URL respectively.

Top 728x90 AD Panel and Email Subscription Form:

To edit the top 728x90 AD panel and email subscription form find the following series of code;

Code:

<!--Top AD Panel & Subscription Form Widget Starts -->
<div id='addy_B'><span class='big_ad'><a href='AD LINK URL'><img alt='ADVERTISEMENT' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6srjUw-F2hdgc18hCE05BRXxSuZJ1ndW-3ee7JSrhN5sZtnc7tgMHJQiPI6IB1mq0ojzUhQgDkutazIzMFiltkX6NLfjw1Qq5fmNtSEO8A0BwpVgrPDkaNQJFI3coIxnYa0F7a68VjD7o/s1600-r/728addy.jpg'/></a></span><div class='small_ad' id='subsfeed'>
<p align='center' style='margin:5px 0 7px 0; font-size:110%;'><b>Subscribe Via E-mail</b></p>
<p><a class='email_button' href='http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER FEED TITLE&amp;loc=en_US' method='' onclick='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER FEED TITLE&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'/><p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER FEED TITLE&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input class='subsfeed_field' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;email address&quot;;}' onfocus='if (this.value == &quot;email address&quot;) {this.value = &quot;&quot;;}' type='text' value='email address'/><input name='uri' type='hidden' value='YOUR FEEDBURNER FEED TITLE'/><input name='loc' type='hidden' value='en_US'/><input class='subsfeed_button' type='submit' value=''/></form>
</p></p></div></div>
<!--Top AD Panel & Subscription Form Widget Ends -->

and replace RED texts shown above with 728x90 leaderboard adsense code and BLUE texts shown above with your feedburner feed title.

125x125 SIDEBAR ADS:

To edit 125x125 ADS in the side bar find following series of codes;
Code:

<!-- 125x125 SPONSOR ADS STARTS-->
<center><a href='125x125 AD LINK URL'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlA3iG_iz8N6aCSrUNUuUj13-uYNVIiPxo-5WcNbEePE6WOLYXrNyZl7mqZD_rYopKrcpxLBnVmK4BJYpM7ZsDgQRYVLyf9uApf_nc8BMtTWTwtEeLHwPzlx875YlaDpznTxyB1r1t77U2/s1600/125addy.jpg'/></a> <a href='125x125 AD LINK URL'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlA3iG_iz8N6aCSrUNUuUj13-uYNVIiPxo-5WcNbEePE6WOLYXrNyZl7mqZD_rYopKrcpxLBnVmK4BJYpM7ZsDgQRYVLyf9uApf_nc8BMtTWTwtEeLHwPzlx875YlaDpznTxyB1r1t77U2/s1600/125addy.jpg'/></a></center>
<center><a href='125x125 AD LINK URL'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlA3iG_iz8N6aCSrUNUuUj13-uYNVIiPxo-5WcNbEePE6WOLYXrNyZl7mqZD_rYopKrcpxLBnVmK4BJYpM7ZsDgQRYVLyf9uApf_nc8BMtTWTwtEeLHwPzlx875YlaDpznTxyB1r1t77U2/s1600/125addy.jpg'/></a> <a href='125x125 AD LINK URL'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlA3iG_iz8N6aCSrUNUuUj13-uYNVIiPxo-5WcNbEePE6WOLYXrNyZl7mqZD_rYopKrcpxLBnVmK4BJYpM7ZsDgQRYVLyf9uApf_nc8BMtTWTwtEeLHwPzlx875YlaDpznTxyB1r1t77U2/s1600/125addy.jpg'/></a></center>
<!-- 125x125 SPONSOR ADS ENDS-->

and replace the RED texts shown above with link and image URL(s) respectively.

468x60 AD Panel:

To edit the 468x60 ad panel below post title in the inner page(s) find the following code;

Code:

<!-- 468x60 AD BELOW POST TITLE STARTS -->
<div align='center' class='ads'><a href='468x60 AD LINK URL'><img alt='AD' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1XVCTHelhhOdyW1LvPOyX9OZuEhaukNuHSVBqvcDOkiddiP-GlpY_pSvEM2-lyZCCDKEof5fbQunTqdDJO56QCmDLfUVzWGeumNaLdp7N-DM_xLyzzllt3uqPKGr3mqLecR0ZLsFfm36k/'/></a></div>
<!-- 468x60 AD BELOW POST TITLE ENDS -->

and replace the RED texts shown above with your 468x60 ad code.

IMPORTANT: USE WORDPAD FOR THE TEXT FILES IN DOWNLOAD PACKAGE

For any further query please come through the comments section!


Update On 14 March,2010:

If you are experiencing any glitches with "Javascript" files on this template then either download the updated template file from the link above or find following codes;
Code:

<script src='http://www.yourjavascript.com/122201022579/mootools.js' type='text/javascript'/>
  <script src='http://www.yourjavascript.com/201352290112/bumpbox.js' type='text/javascript'/>

and replace with following codes within the template;
Code:

<script src='http://www.weebly.com/uploads/3/9/3/0/3930875/mootools.js' type='text/javascript'></script>
<script src='http://www.weebly.com/uploads/3/9/3/0/3930875/bumpbox.js' type='text/javascript'></script>