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. :)

Related Posts :



24 comments:

March 28, 2009 at 6:20 AM hock said...

ITemplatez.com offers professional web templates, flash templates ,swish templates, dreamweaver templates, and other web design productsavailable for immediate download.

June 7, 2009 at 11:31 AM Claudya said...

Congrats Joyful, great theme. Only a question, i´m trying to change the background image, i´ve put another one, but it´s seems to strange, cause the main & sidebars are not to clear. Have a clue? Ty and xoxo from Brazil.
If you could take a look at http://claudya-testes.blogspot.com/.

June 7, 2009 at 11:38 AM Claudya said...

I just found what i want, ty....

June 25, 2009 at 1:21 PM expanium said...

Thank you blozard,

it would thank for much if you can add to the template: POSTS RSS Y COMMENTS RSS

Regards,


Gracias blozard la plantilla Revolution Elements es una de las mejores para blogger.

Te agradecería mucho si puedes agregar a ella POSTS RSS Y COMMENTS RSS.

June 27, 2009 at 7:18 AM Joyful Thiek said...

I'm a little busy at the time. I will address these issues and probably create a version 2 of the theme very soon. Thanks for stopping by.

June 27, 2009 at 12:00 PM Ameya said...

Oh & could you address the fact that all of my old posts now have "Read More" at the bottom of them? There is nothing more to read! How did that get embedded in my previous posts? I love having the option, but I don't want it in all of them.

Thanks for this great theme! If you're ever terribly bored (which i'm sure you probably aren't) you could always consider making an equally awesome theme with lighter colors (white/gray would be nice)! I found this trying to find a less dark layout, but I liked it too much to resist. But now i'm just being greedy, eh? :)

June 27, 2009 at 2:37 PM Joyful Thiek said...

The "read more" automatically embeds to all of the posts, both old and new. There are two options available: you can either edit all of your earlier posts to include the read-more or remove it altogether.

I think the later would suit you better..if so, a simple way is to go to Layout > Edit HTML and click on Expand Widget Templates. Within the code area, look for "read more" (you can easily do this by hitting Ctrl+F and typing "read more"). Once you've found it, delete the text 'read more...'. That should do it. We're not removing the entire code because things could get messy if not properly done.

Anyways, I'll address these issues and several other more in the new version. Take care!

June 30, 2009 at 2:40 PM Ameya said...

Alright. That fixed it. Thanks! :)

July 31, 2009 at 6:18 PM The Perfum(N)ista said...

Thank you! I'm going to use it to my other blog.
(www.chicwhiff.com)

August 13, 2009 at 2:03 AM niren said...

Really great ideas. I like every example. Just might have to try these... So cute! Thank you!
more templates easy to download

February 25, 2010 at 10:28 AM Anonymous said...

hey there, thanks for the template. i have a problem with the horizontal menu. how do i customize it so i can insert my own links. right now it's only for inner blog navigation only.

February 27, 2010 at 8:13 AM Thiek said...

Here's a tutorial on how to set up the navigation menu. Click here

May 11, 2010 at 12:33 AM viran ve bahar said...

Thanks my friend. I use this template in my blog. www.viranvebahar.com

September 5, 2010 at 11:53 AM chazzter_boi said...
This comment has been removed by the author.
September 5, 2010 at 11:54 AM chazzter_boi said...

hi. how can i have posts in a page i've set up on the nav bar? i've set up Home // Music // Sports. So, say I want to make a multiple posts in the Music page? how can i do that instead of editing the page to add new stuffs in the page? thanks! really need your help!

September 6, 2010 at 10:37 AM Blozard said...

You can use Labels. Label all your posts that you want to show in your Music section/page as 'Music'. Then replace the link to Music in your nav bar with http://aware-and-awake.blogspot.com/search/label/Music

Do the same for Sports.

September 8, 2010 at 11:17 AM chazzter_boi said...

Thanks a lot for the help, Blozard!Really appreciate it. That will surely complete my blog. Thanks! :D

November 23, 2010 at 10:22 AM Indonesia Siap Bersaing di SERP said...

This is my first opportunity to visit this website. I found some interesting things and I will apply to the development of my blog. thanks for sharing useful information, Bisnis Syariah

November 23, 2010 at 10:24 AM Rumah Mungil Yang Sehat said...

I love visiting your blog. I get a lot of knowledge to develop skills, Inilah Alasan Kenapa Anda Harus Bergabung Dengan Oriflame

August 10, 2012 at 10:31 PM Kamlesh Kumar said...

great post. i have applied this template but latest widget is not working in my blog http://kamlesh2011.blogspot.com/

Post a Comment

 
Top