Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

Asino/Thesis Style footer for blogger

Today i m releasing Asino footer for blogger or you can say Thesis style footer for blogger. Actually its not Thesis style its called Asino. Well no problem at last we can now have for blogger also, thanks to ramandeep who inspired me or you can say gave idea to make it for blogger. At last its here for Blogger.
Thesis Style Footer

Thesis style footer is has its specialty in the way it has the category arrangement and the 3 column footer that looks very good and fantastic and has is been used by most of the thesis theme users.

Click here for live demo

Installing Thesis style footer

Installing Thesis style footer is easy and you also do not need any special requirements for installing it or any knowledge of coding.

  1. Login to Blogger Dashboard
  2. Navigate through Design >> Edit HTML
  3. Find for
    ]]></b:skin>

    ]]></b:skin>

    and add the below code above it :

    #asino-wrapper{background:#1F1F1F;padding-top:20px;color:#DBEDEE}
    #footer-column-container{clear:both;width:960px;margin:0 auto;font-size:14px}
    .footer-column{padding:10px;width:300px;float:left;text-align:left}
    .asino-cat{background:#3D3C3C;-moz-border-radius:5px;border-radius:5px;overflow:hidden;padding:0px 0px 7px 0px;float:left}
    #asino-wrapper h2{border-bottom:3px double #666666;color:#FFFFFF;font-size:18px;font-variant:small-caps;font-weight:700;letter-spacing:0;line-height:30px;margin:0 0 15px;text-transform:none}
    #asino h2{font-size:22px;font-variant:small-caps;font-weight:700;letter-spacing:1px;margin:10px 0 10px 15px;text-align:left;text-transform:none}
    .asino-cat ul li{display:inline;list-style:none}
    .asino-cat li{float:left;line-height:22px;margin:0 10px 5px 0;width:165px}
    .asino-cat li a{border-bottom:medium none;color:#FFFFFF;display:block;font-size:15px;padding:2px 5px;text-decoration:none;text-align:left}
    .asino-cat a:hover{background:none repeat scroll 0 0 #F2F2F2;color:#333333;text-decoration:none}
    .footer-column ul{list-style:none;margin:0;padding:0}
    .footer-column li{background:none repeat scroll 0 0 #3F3F3F;border:1px solid #111111;border-radius:5px 5px 5px 5px;color:#000000;line-height:1.4em;overflow:hidden;padding:0.5em;margin-bottom:0.692em}
    .footer-column li:hover{background:none repeat scroll 0 0 #4F4F4F;border:1px solid #7A7A7A;border-radius:5px 5px 5px 5px;color:#000000;line-height:1.4em;overflow:hidden;padding:0.5em}
    .footer-column ul li a{color:#F2F2F2 !important}
    .footer-column ul li a:hover{color:#F2F2F2 !important}
    #copyright a{color:#FFF}
    .copyright{text-align:left;border-top:1px dashed #4D4D4D;padding:1em 0 1em 0em}

    #asino-wrapper{background:#1F1F1F;padding-top:20px;color:#DBEDEE} #footer-column-container{clear:both;width:960px;margin:0 auto;font-size:14px} .footer-column{padding:10px;width:300px;float:left;text-align:left} .asino-cat{background:#3D3C3C;-moz-border-radius:5px;border-radius:5px;overflow:hidden;padding:0px 0px 7px 0px;float:left} #asino-wrapper h2{border-bottom:3px double #666666;color:#FFFFFF;font-size:18px;font-variant:small-caps;font-weight:700;letter-spacing:0;line-height:30px;margin:0 0 15px;text-transform:none} #asino h2{font-size:22px;font-variant:small-caps;font-weight:700;letter-spacing:1px;margin:10px 0 10px 15px;text-align:left;text-transform:none} .asino-cat ul li{display:inline;list-style:none} .asino-cat li{float:left;line-height:22px;margin:0 10px 5px 0;width:165px} .asino-cat li a{border-bottom:medium none;color:#FFFFFF;display:block;font-size:15px;padding:2px 5px;text-decoration:none;text-align:left} .asino-cat a:hover{background:none repeat scroll 0 0 #F2F2F2;color:#333333;text-decoration:none} .footer-column ul{list-style:none;margin:0;padding:0} .footer-column li{background:none repeat scroll 0 0 #3F3F3F;border:1px solid #111111;border-radius:5px 5px 5px 5px;color:#000000;line-height:1.4em;overflow:hidden;padding:0.5em;margin-bottom:0.692em} .footer-column li:hover{background:none repeat scroll 0 0 #4F4F4F;border:1px solid #7A7A7A;border-radius:5px 5px 5px 5px;color:#000000;line-height:1.4em;overflow:hidden;padding:0.5em} .footer-column ul li a{color:#F2F2F2 !important} .footer-column ul li a:hover{color:#F2F2F2 !important} #copyright a{color:#FFF} .copyright{text-align:left;border-top:1px dashed #4D4D4D;padding:1em 0 1em 0em}

  4. Now go to bottom and find for :
    </body>

    </body>

    And add the below code above this :

    <div id='asino-wrapper'>
    <div id='footer-column-container'>
    <b:section class='asino-footer' id='asino'>
    <b:widget id='Label1' locked='false' title='Labels' type='Label'>
    <b:includable id='main'>
      <b:if cond='data:title'>
        <h2 class='asino-h2'><data:title/></h2>
      </b:if>
      <div expr:class='&quot;asino-cat &quot; + data:display + &quot;-label-widget-content&quot;' style='margin-left:13px;'>
        <b:if cond='data:display == &quot;list&quot;'>
    <ul style='margin-left:-30px'>
          <b:loop values='data:labels' var='label'>
            <li>
              <b:if cond='data:blog.url == data:label.url'>
                <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
              <b:else/>
                <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
              </b:if>
            </li>
          </b:loop>
          </ul>
     
        </b:if>
        <b:include name='quickedit'/>
      </div>
    </b:includable>
    </b:widget>
    </b:section>
    <b:section class='footer-column' id='col1' preferred='yes'>
    </b:section>
    <b:section class='footer-column' id='col2' preferred='yes'>
    </b:section>
    <b:section class='footer-column' id='col3' preferred='yes'>
    </b:section>
    <div style='clear:both;'/>
    <div class='copyright' id='copyright'>
    &#169; <data:blog.title/> - All rights Reserved.<div style='float:right'>Footer by <a href='http://www.best2know.info/thesis-style-footer-blogger/' target='_blank'>Ritesh Sanap</a></div>
    </div>
    </div>
    </div>

    <div id='asino-wrapper'> <div id='footer-column-container'> <b:section class='asino-footer' id='asino'> <b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2 class='asino-h2'><data:title/></h2> </b:if> <div expr:class='&quot;asino-cat &quot; + data:display + &quot;-label-widget-content&quot;' style='margin-left:13px;'> <b:if cond='data:display == &quot;list&quot;'> <ul style='margin-left:-30px'> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> </li> </b:loop> </ul></b:if> <b:include name='quickedit'/> </div> </b:includable> </b:widget> </b:section> <b:section class='footer-column' id='col1' preferred='yes'> </b:section> <b:section class='footer-column' id='col2' preferred='yes'> </b:section> <b:section class='footer-column' id='col3' preferred='yes'> </b:section> <div style='clear:both;'/> <div class='copyright' id='copyright'> &#169; <data:blog.title/> - All rights Reserved.<div style='float:right'>Footer by <a href='http://www.best2know.info/thesis-style-footer-blogger/' target='_blank'>Ritesh Sanap</a></div> </div> </div> </div>

  5. click on Preview and make sure that you are having no error and then click save

Now we have successfully installed Thesis Style footer for blogger. Now check the new looks of your site. i guess you will like it very much because the footer is designed in a way that it can suit on any template. their might be a rare case the footer is going wrong , if its going wrong you can contact me.

Customization

Now lets start the customization part even though their is not much of customization.

How to change , color , font size etc ?
The Thesis style footer is mostly based on CSS so you need to change the css for the desired results visit w3schools.com for learning CSS if you don’t (w3schools.com is the place were i learned coding)

How to change the width of the Wrapper ?
for changing the size of the wrapper you need to “#footer-column-container” at line 2. just change the width property to change size you want.

How to change the width of the 3 column footer widgets
i have kept the 3 column widget footer fixed instead of fluid to avoid few problems that may arise. if you change the size of the above wrapper then you will also need to change the size of the widgets for that search for “.footer-column” at line 3 just below the width of the above wrapper

Need more customization or any other help regarding this tutorial then contact me. if you the tutorial and Thesis style footer please share it with your friends and give a link back if possible. you can also request for making of more cool stuffs like this

Subscribe via Email

Share this:

  • Twitter
  • Facebook
  • Pocket
  • Print
  • Email

Related

May 3, 2011 Ritesh Sanap Blogger Tutorials 3 column footer, Asino footer, blogger, Blogger Tutorials, Thesis style footer

Post navigation

Previous Previous post: Google 2-Step Verification
Next Next post: How to get Rid of spam comments

Currently Trending

  • How to download Specific parts of YouTube videos
  • Windows Vista CD key
  • You might also like this Widget for blogger or Related post widget
  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • h4x0r ( Hacker ) - Blogger Template
  • Embed Text Resizing Widget To Increase or Decrease The Font Size
  • ZooZooo - Vodafone Logos
  • How to Increase Dropbox upload speed
  • BlueStrap - WordPress Theme
  • How to download Subtitles from YouTube Videos

Random Posts

Different way’s to shutdown your pc

January 16, 2008 By Ritesh Sanap Leave a Comment

Make Firefox Work Faster Than Ever

February 29, 2008 By Ritesh Sanap Leave a Comment

[How-To]Writting In reverse In Orkut

December 17, 2007 By Ritesh Sanap Leave a Comment

Change WordPress From Email Address

March 4, 2011 By Ritesh Sanap Leave a Comment

How To Make Your Own Windows Media Player Theme

March 8, 2009 By Ritesh Sanap 1 Comment

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2022 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.