Revolution Elements Blogger Template

I'm announcing the launch of Revolution Elements theme for Blogger. This extremely cool theme was originally created by Jason Schuller [View WP Demo] for Wordpress. Copyrights are owned by Brian Gardner of Studio Press under the GNU Creative Commons License or whatever (I don't really know the stuffs. :D) What matters though is that Brian has given me the permission to "go for it". And walla, here it is the Revolution Elements Blogger theme available for free download!

Click here to skip to the download button

Given the time and labor spent on converting this theme from its Wordpress counterpart and on certain modifications, I thought I'd make it a premium template, maybe sell it for some few dollars. But I decided otherwise because this is my first Blogger template ever; I want to know how it's doing. So please do give your honest comments and most importantly, report any broken links or deviations from the Demo Site.

Learn about Snapchat face swap at SnappTips.

If you're looking for an Adsense optimised template, I'm afraid this Revolution Elements Blogger template might just not be the right one for you. Of course, you can display any number of ads you wish to. But this template is more about the looks than mere money-making. And I have to say it looks better with fewer ads. If you must however, image ads with proper customization are just the right ads (so I opine!). :)

    Special features of the theme:
  • An extremely cool top Menu. See how to set up.
    [Part of the credit goes to Amanda Fazani [Blogger Buster]. I used a modified version of her menu style in Grid Focus template.
  • A share and bookmark button attached to every post. Already customised and set up.
    [Thanks to addthis.com]
  • A pre-customised label cloud which can be attached from the normal 'Add Page Element' by the usual way.
    [Thanks to Phydeaux3]
  • A pre-customised tabbed sidebar Menu for Recent Posts, Comments and Twitter updates which can be manually installed. See how.
    [Thanks to Trick Tips Blogger]
  • A pre-installed "Read More" expandable post summary hack which you can easily add in two steps. See how
    [Thanks to eBlog Templates]
  • Pre-installed 'Revolution' icon (which is so cool!).
  • Pre-customised sidebar widget space for 125x125 Picture Ads which you can easily add. See how to set up.
  • Different background for blog authors' comments.

    Comment backgrounds
  • Last but not the least, the specialty of this theme lies in the fact that it is built directly from Blogger's Minima template. So future modifications, if any, can be done really easily by following the default rules.


Given the amount of time and labor input in the creation of the theme, a donation would be most certainly appreciated; even a click or two on my Adsense ads would mean a lot. Donation button is at the bottom of the page...just in case.


Note
Using this template requires that you do not change the credit links to the creators' sites. The credits/links area is at the bottom of the page. Please leave it intact. Thank you.


    The Tutorials:
  1. Setting up the top Horizontal Menu:

    Go to your Blogger Dashboard > Layout > Edit HTML

    Within the Edit Template section, scroll down towards the end and look for the following code within the <body> and </body> tags.:

    <div class='nav'>
    <ul class='nav fix'>
    <!-- NOTE: Please fill the up the NAVIGATION MENU in reverse order of preference -->

    <li class='skip'><a href='LINK URL HERE' title='LINK DESCRIPTION'>LINK4<br/><span>LINK DESCRIPTION</span></a></li>

    <li><a href='LINK URL HERE' title='LINK DESCRIPTION'>LINK3<br/><span>LINK DESCRIPTION</span></a></li>

    <li><a href='LINK URL HERE' title='LINK DESCRIPTION'>LINK2<br/><span>LINK DESCRIPTION</span></a></li>

    <li><a href='LINK URL HERE' title='LINK DESCRIPTION'>LINK1<br/><span>LINK DESCRIPTION</span></a></li>

    <li><a expr:href='data:blog.homepageUrl' title='Return to the the frontpage'>Home<br/><span>frontpage</span></a></li>
    </ul>
    </div>


    If you can't find it, try pressing CTRL + F and type "LINK1". That is sure to take you to the desired location.

    Now, make necessary changes to the Menu by changing the "LINKs", "LINK DESCRIPTIONs" and "LINK URL HEREs". You don't have to add the "Home" link, it has already been added.

    Remember, the link to the right of "Home" is LINK1. LINK4 is the last link in the Menu. Don't try to add more than these 4+1 links, it will mess up the looks of the Navigation Menu as the background image is fixed.

    Back to features
  2. Setting up the Tabbed Sidebar Menu:

    Go to Dashboard > Layout > Page Elements

    On the right side of the page you will see the sidebar widgets like the one shown in the adjoining picture:

    Click on the edit link of Latest and insert the following code:

    <form action="tabview.html" method="get">
    <div id="TabView" class="TabView">
    <div style="width: 290px;" class="Tabs">
    <a>POSTS</a>
    <a>COMMENTS</a>
    <a>TWEETS</a> <!-- Twitter updates -->
    </div>

    <div style="width: 268px; height: 250px;" class="Pages">
    <div class="Page">
    <div class="Pad">
    <script src="http://www.geocities.com/jo_thiek/blogger-widget.js"></script>
    <script>var numposts = 9; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
    <script src="http://BLOGNAME.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
    </script>
    </div></div>

    <div class="Page">
    <div class="Pad">
    <script style="text/javascript" src="http://www.geocities.com/jo_thiek/comments.js"></script><script style="text/javascript">var a_rc=4;var m_rc=false;var n_rc=true;var o_rc=35;</script>
    <script src="http://BLOGNAME.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"> </script>
    </div></div>

    <div class="Page">
    <div class="Pad">
    <div id="twitter_div"><ul id="twitter_update_list"></ul>
    <a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/TWITTER-USERNAME" target="_blank">follow me on Twitter</a>
    </div>
    <script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
    <script src="http://twitter.com/statuses/user_timeline/TWITTER-USERNAME.json?callback=twitterCallback2&count=4" type="text/javascript"></script>
    </div></div>

    </div></div></form>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>


    Make necessary changes to the capitalised values, i.e, your "BLOGNAME.blogspot.com" and "TWITTER-USERNAME". If you want to change the menu header for your twitter updates from "TWEETS" to anything, just replace "TWEETS" (at the top) with it.
    Back to features
  3. Setting up the "Read More":
    The required code within the body of the HTML <body> tag has been added in the template. All you have to do now is go to Dashboard > Settings > Formatting and do the following:

    Scroll down to the last option "Post Template" and paste the following code:

    <span class="fullpost">


    </span>


    Yes, retain the space in between. Once you're done it should look something like this:
    Post template

    Now, save your settings and try posting a new blog post. You will notice that the editor area already contains the <span> tags necessary to bring about the "Read full post" feature.
    Anything put above the <span class="fullpost"> tag would appear as the 'teaser text' in the final post. And anything below it will be invisible in the final post when viewed from the homepage.

    Read More

    Publish your post and see how it works. For more information please refer to the tutorial in eBlog Templates.

    [Images courtesy of eBlog Templates.]
    Back to features
  4. Setting up the Picture Ads:

    Go to Dashboard > Layout > Page Elements

    On the right side of the page you will see the sidebar widgets like the one shown in the adjoining picture:

    Click on the edit link of Sponsors and insert the following code in the content area:

    <table border="0" class="table_ads">
    <tr><td>
    Insert code for Picture Ad#1 here
    </td><td>
    Insert code for Picture Ad#2 here
    </td></tr>

    <tr><td>
    Insert code for Picture Ad#3 here
    </td><td>
    Insert code for Picture Ad#4 here
    </td></tr>
    </table>


    Insert the respective codes for your Picture Ads or Referral Image Ads, preferably of size 125x125 pixels. Don't change anything except the texts "Insert code for Picture Ad here".

    Save it and you're done.
    Back to features

Btw, do bookmark or share this post if you think it's useful enough. There's a share button just right below.

Thank you. :)

Read full post

New Blogger Template

A new Blogger template is on its way. Keep watching out!
  1. Revolution Elements Blogger Template
    "Converted from the original Wordpress theme and modified. In fact, this is the first theme I've converted from Wordpress. I didn't want to upload it before I get the permission from the copyright owner Brian Gardner. Yesterday, he'd given me the 'GO FOR IT' indication. Will be launched very shortly for free download."


  2. It has been launch! Click here.

  3. Grid Focus Redo
    "My redo of Grid Focus [bloggerized by Blogger Buster]. Coming soon!

  4. Almost Facebook Blogger Template
    "This is the template I'm currently using. After certain re-modifications, I shall upload it for free download." Status update [March 22]: won't be happening soon. I'm a little too busy right now


Read full post

Thank You

Thank you for contacting. I will attend to you in a short while.
Read full post

Contact

Can't see the form? Write to me at joyful.thiek[at]gmail.com


Read full post
 
Top