Thursday 8 January 2015

How to make Three Column Footer Widget in Blogger

Discovering it hard to include widgets to your weblog without overstuffing the actual sidebar? Ahh nicely, maybe it’s time for you to add a footer for your blog. This guide will show you how to perform just that -install the three-column footer.


  1. Sign in to your Blogger accounts (if you have not done so already).
  2. Go to Theme >  Modify HTML. 
  3. Regress to something easier your template.
  4. Search for the existing footer program code near the end of the HTML. It might appear something like this:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>




  • in case you already have contents within the footer, the program code should be longer.

  • Duplicate and paste the actual code below instantly under the footer  </div>. This program code will create three new gadget storage containers (one for each column) under the existing footer container.

    <!-- three column footer HTML -->
    <div id='new-footer-wrapper'>
    <div id='column1-wrapper'>
    <b:section class='new-footer' id='new-footer1' preferred='yes'/>
    </div>
    <div id='column2-wrapper'>
    <b:section class='new-footer' id='new-footer2' preferred='yes'/>
    </div>
    <div id='column3-wrapper'>
    <b:section class='new-footer' id='new-footer3' preferred='yes'/>
    </div>
    <div style='clear: both;'/>
    </div>
    <!-- three column footer HTML End -->



    • Copy the actual code below as well as paste it within CSS section, prior to ]]> </b: skin>.


    /* three column footer CSS Start */
    #new-footer-wrapper {background: #E1E2B8; margin: 0 auto;width:98%; padding: 0 10px  10px 0;}
    #column1-wrapper, #column2-wrapper, #column3-wrapper { float: left; display:inline-block; width: 33%;padding: 0px 0px 0px 0px; text-align: left; word-wrap: break-word; overflow: hidden;}
    .new-footer h2 { margin: 0px 0px 0px 0px; padding: 4px 10px 4px 10px; text-align: left; color: #222222; background: #C1C298; font-weight: bold;font-size: 0.9em;}
    .new-footer .widget { margin: 10px 0 0 10px; border: 1px solid #F1F5CA; background: #F7FCDF;}
    .new-footer .widget-content { padding: 0px 5px 5px 5px; }
    .new-footer ul { list-style-type:square; margin-left:15px; }
    /* three column footer CSS End */



    • savethe template as well as go to Layout. You ought to have the 3 vacant footer containers additional at the bottom of the design.



    You can now drag as well as drop the gadget from the existing footer or sidebars in to the new footer storage containers. The end result should appear something like this.


    When the columns are not dispersed evenly, try modifying the width in-line 3 and correct margin in line five of CSS program code (in step 6).
    Once satisfied with the end result, if you want you can return to the old footer program code in step 4 as well as delete it (from  <div till  </div> ).

    Monday 5 January 2015

    Add a forum on your blogger with Nabble

    Which means you want to put a forum / bulletins board on your Blogger/blogspot blog. A chatbox, shoutbox or comment widget in a sidebar just doesn’t cut it, you want a actual forum, for free. You heard that it can not be done.

    Well it can be done really, with Nabble embeddable forum. Here is a step by step guide to create your real forum a reality:

    Create a forum


    • Go to Nabble.com and register.
    • Select Start a Free Forum.
    • Enter your forum name inside and click Create Forum.
    • Click Yes, create sample sub-forums button.
    • To add a sub-forum go to Options > Structure > Create a new sub-forum.
    • Once you’re satisfied with the results, click Embedding Options link on top right corner.
    • You will see a simple code in a text box, similar to the sample below.


    <a id="nabblelink" href="http://n3.nabble.com/Bloggeril-blogspot-Forum-xxxxxx.html">Bloggeril Forum</a>
    2
    <script src=http://n3.nabble.com/embed/xxxxxx></script>
    Copy the code.

    Embed the forum in a page

    1. Go to Edit Posts > Edit Pages and click New Page button to create a new page.
    2. Switch to HTML mode and paste in the forum code.
    3. Click Publish. That’s it your forum is installed.
    4. Now, view your page. You should see the forum added to the page. It will look something like this:

    Personalize the appearance of your forum page

    I must agree looking at screenshot, it is absolutely nothing to brag about. You probably want you could remove all the unnecessary things from the page and make the discussion board fill up the entire blog width.
    Nicely, wish granted, provided you the actual instructions in Apply different layout/styling to static pages. When you are done with that, your forum web page might as well look something like this:


    Discussion board features

    • The forum comes with all of the features similar to any other forums.
    • Visitors will browse, search, post, as well as navigate without ever leaving your own page. The same applies to forum servicing.

    Saturday 3 January 2015

    5 ways to backup a Blogger blog

    Backing up your blog contents is very very important. Why? Because your Blogger/blogspot blog can be running smoothly today and yet it also can all of a sudden disappear, without warning. It happened before and will happen again in the future. Playing by the rules doesn’t make you immune either because mistakes do happen.
    So be prepared, and if you haven’t yet backed up your blog, then do it now.
    Below are 5 ways to backup you Blogger blog:

    1. Using blog feeds

    First of all you need to ensure the feed contains complete post contents (including images). Go to Dashboard > Settings > Other > Site Feed, and select FULL in the "Allow Blog Feed" dropdown menu.
    • Posts
    Go to this URL and save page as "Webpage, Complete" in your PC: 
    http://YOURBLOGNAME.blogspot.com/feeds/posts/default?max-results=500
    • Comments
    Go to this URL and save page as "Webpage, Complete" in your PC:
    http://YOURBLOGNAME.blogspot.com/feeds/comments/default?max-results=200
    
    
    A posts feed retrieves only up to 500 posts and a comments feed up to 200 comments. If your blog has more posts or comments, you need to get more than one feed. Add a start-index query in the URL to specify the starting point of each subsequent feeds, like this:
    
    
    http://YOURBLOGNAME.blogspot.com/feeds/posts/default?start-index=501&max-results=500
    
    
    The same applies to comments feed.
    If you redirect your blog feed, then append &redirect=false at the end of the URL.
    

    2. Using export feature

    Posts and comments Go to Dashboard > Settings > Other > Blog Tools and click "Export Blog". The blog posts and comments (in XML file) will be downloaded to your PC.
    (To import it, go to the same page: Dashboard > Settings > Other > Blog Tools, then click "Import Blog".)

    3. Using Email feature

    Using this method lets Blogger send you an email every time a post or comment is published on your blog.
    • Posts
    Go to Dashboard > Settings > Basics > Mobile and Email > Email Posts To and enter your email address in the textbox.
    • Comments
    Go to Dashboard > Settings > Mobile and Email > Comment Notification Email and enter your email address in the textbox .
    
    
    
    

    4. Using Google Takeout

    First go to https://www.google.com/takeout/#custom and Login to your Google or Gmail Account. After logging in to your account, it will take you to a new page here you will see a list of services that you have used through your Google account. 
    From the list select of services select “Blogger” and proceed to download archive.

    5. Using Httrack

    HTTrack downloads all files into your PC and creates a mirror copy of your blog offline. You can browse the blog as if you were online, posts, comments and all. HTTrack is available for Windows and Linux. Download it here. Once downloaded use this this instructions to install it in your PC. Enjoy!