March 20, 2014

4 Easy Steps to Install Responsify, the Responsive Blogger Template

With the FREE Responsify template, making your Blogger-powered blog responsive has never been easier. Just follow the four simple steps below to install it on your blog.

  1. Download the template
  2. First and foremost, download Responsify, the FREE Responsive Blogger template. Unzip it on your computer, and you will get the xml file.

  3. Disable the mobile template
  4. As responsive template, Responsify will adapt your blog to the screen size of any device used to visit your blog. Therefore, there is no need to have separate mobile template anymore. In fact, you have to disable it in order to make Responsify functions properly.
    To disable the mobile template, on your Blogger dashboard, go to Template, then click the gear icon to customize the mobile template. On the pop-up window, check the No. Show desktop template on mobile devices. radio button, then click Save.

    Disable Mobile Template
    Disable the mobile template by checking the radio button.


  5. Upload the template
  6. Still in Template section, click Backup/Restore at the upper right-hand corner. On the pop-up window, click Choose File and select the template-Responsify.xml file on your computer, then click Upload.

    Uploading Responsify Template
    Uploading Responsify template to Blogger-powered blog.


  7. Check the blog
  8. Make sure the blog looks good and up to your expectation by clicking View blog from the dashboard. You might want to delete some legacy widgets (Google calls them Gadgets) from your old template if they got in the way of Responsify performing properly.

  9. BONUS: Delete legacy widget
  10. Making use of the Bootstrap grid system, the Responsify template makes it easier to manage your widgets. If, after checking the appearance of the blog, you want to delete any legacy widget, just go to Layout on the Blogger dashboard. As the Blog Posts column is stacked on top of the Sidebar section, you will find most, if not all, the widgets in the Sidebar section. Click Edit on any widget you're going to delete, then click Remove on the pop-up window. You can also move any widget to and/or from the Sidebar to the Blog Posts section, or just change the order.

    Deleting Legacy Widget
    Deleting legacy Search widget.


  11. BONUS: Delete nonremovable widget
  12. As default, Blogger blog is provided with some nonremovable widgets, such as Header, Navbar, and Atribution. Fortunately, you can remove them, if you want to. Just go back to Template on the dashboard, click Edit HTML. In the template, each widget is enclosed with the <b:widget></b:widget> tags.
    In order to delete Header widget, for example, search for type='Header' inside a <b:widget> tag. To make it easier, click the line code number on the left hand side of the code to shorten the code, and make sure to select the code from the opening <b:widget> tag to its closing </b:widget> tag. Delete them, then click Save template.

No comments:

Post a Comment