Contact Form

Name

Email *

Message *

Add Couch Mode Widget in Blogger

Share This : Twitter Facebook Pinterest Google+ Email Reblog
Couch Mode provides comfort to readers of your blog in reading your published articles. Adding Couch Mode widget to your existing Blogger Blog provides extra edge over other bloggers, who doesn't give option to read without any irritated content. This article will enable you to add this gadget in your BlogSpot blog and enhancing user browsing experience.

Most of the blogs are using too much advertisement so that advertisements dominate the main content. Improper or too much use of advertisements or gadgets will makes the user feel irritated and due to this, they moves on to another website.



This widget gives an option to read the web pages in a clutter-free environment i.e. without any advertisements and unwanted widgets, social buttons and everything else that distracts the eyes.


Couch Mode Widget For Blogger Blogs


The latest version of most of top browsers like Mozilla Firefox, Safari and Chrome etc. has Reader View feature to render web pages in more beautiful layout. Even the only competitor of BlogSpot i.e. WordPress also has a WP Couch mode Plugin, But BlogSpot is far behind in this race because it doesn't support plugins.

But, still BlogSpot supports widgets and you can add widgets into your blogger template very easily. So that, this widget is made for those bloggers who are using BlogSpot platform for blogging.

What is Couch Mode ?


C
ouch Mode is simple widget which brings a proven solution for users to read post in popup mode without any annoying element and provide a clutter-free and better reading experience to your blog readers.

Couch mode is a way of providing to your blog readers to view published articles in a clutter-free environment without any advertisement, social plugins and other website elements.

Now, Let's move further.

Backup your Blog Template before installing this widget in your website.


Steps to install Couch Mode for Blogger


  1. Login to Blogger dashboard and Click on "Template" option available in left sidebar, Then open HTML Editor.

  2. Now, Search For ]]></b:skin> and copy CSS Code given below and paste this CSS code just above ]]></b:skin> in your template XML code.

    
    /* Couch Mode 2 Layout */
    .toolset {
    list-style:none;
    text-align:right;
    border:0;
    margin:20px 8px;
    clear:both;
    text-decoration:none;
    }
    .toolset ul {
    margin:0;padding:0
    }
    .toolset li {
    display:inline;
    margin:0 3px;
    padding:0;
    list-style:none;
    }
    .toolset li a {
    font-family:sans-serif;
    padding:10px 12px;
    color:#fff;
    font-weight:400;
    font-size:13px;
    text-align:center;
    letter-spacing:.5px;
    border-radius:3px;
    transition:background-color .2s ease-out;
    }
    .toolset li a {
    background-color:#f64c3b;
    }
    .toolset li a:hover,.toolset a:active {
    color: background-color:#e24131;color:#fff;
    }
    .couchModeBox {
    font: 1.1em/150% "Times New Roman", Times, serif;
    background-color:#fff;
    border: 1px #eee;
    position:fixed;
    z-index:999999999;
    top:0px;right:0px;left:0px;bottom:0px;
    overflow-y:auto;
    }
    .couchPostBody {
    border: 0;
    }
    .noScrollBar {overflow:hidden;}
    .couchModeBox a,.couchModeBox a:visited {color:#000;text-decoration:underline;}
    .couchModeBox a:hover {text-decoration:none;}
    .couchModeBox h1,.couchModeBox h2,.couchModeBox h3,.couchModeBox h4,.couchModeBox h5,.couchModeBox h6 {font-family:Times,Helvetica, sans-serif;}
    .couchModeBox button,.couchModeBox input[type='submit'] {background-color:#FCFCFC;}
    .couchModeBox p,.couchModeBox div {
    margin-bottom: 1.5em;
    }
    .couchModeBox .navCouch .UL002 li a {
    -webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -ms-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
    }
    /* The Navbar CSS */
    .couchModeBox .navCouch {color:white;height:auto;}
    .couchModeBox .navCouch ul {list-style-type:none;padding:0.2% 0.5%;margin:0px;}
    .couchModeBox .navCouch ul li {display:inline-block;}
    .couchModeBox .navCouch .UL002 {background-color:transparent;text-align:right;padding-top:15px;}
    .couchModeBox .navCouch .UL002 li a {cursor: pointer;
    background-color: rgba(0, 0, 0, 0.62);
    color: #fff;
    display: block;
    font-size: 12px;
    text-decoration: none;
    margin: 0px 5px;
    padding: 5px;
    border-radius: 3px;}
    .couchModeBox .navCouch .UL002 li a:hover {background-color:rgba(0,0,0,1);}
    /* Post area outer */
    .couchModeBox .couchPostOuter {font-size:100%;margin-top:10px;}
    .couchModeBox .couchPostOuter h1.postTitleCouch {text-align:center;margin:12px 0px;border-bottom:2px dashed #eee;padding:10px 0px;}
    /* Post Area Inner */
    .couchPostBody {padding:1% 5%;margin:1% 4%;color:#000;}
    @media screen and (max-width: 588px) {
    .couchPostBody {padding:1% 5%;margin:1% 1%;color:#000;}
    }
    .couchPostBody img {align:center;padding:6px;border:1px solid #eee;background-color:#FDFDFD;border-radius:5px;}
    .couchPostBody h2 {font-size:30px;margin:5.2% 0px 1.5% 0px;}
    .couchPostBody h3 {font-size:26px;margin:4.2% 0px 1.5% 0px;}
    .couchPostBody h4 {font-size:22px;margin:3.2% 0px 1.5% 0px;}
    .couchPostBody h5 {font-size:18px;margin:2.2% 0px 1.2% 0px;}
    .couchPostBody h6 {font-size:16px;margin:1.2% 0px 0.5% 0px;}
    .couchPostBody ul {list-style-type:square;}
    .couchPostBody blockquote {background:#f9f9f9;border-left:10px solid #ccc;margin:1.5em 10px;padding:.5em 10px;}
    


    Note : You can Edit CSS code to change the couch page view as per your choice.


  3. Now search for </head> in your blog template and add following JavaScript code just above </head> tag.


    
    <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
    <script type='text/javascript'>
    function hideCouch() {
    $('.couchModeBox').fadeOut(function(){
    $('.couchModeBox').remove();
    $('body').removeClass('noScrollBar');
    });
    }     
    </script>
    <script>
    //<![CDATA[
    $(document).ready(function(){ // Code Starts Here
    var pageTitle = $('title').text();
    var postTitle = $('.post-title').text();
    var postBody  = $('.post-body').html();
    var couchHtml = "<section class='couchModeBox animated animation'> <nav class='navCouch'> <ul class='UL002'> <li class='leftList GDNAV0091'><a onclick='hideCouch()' class='CM390949'>Back to normal</a></li></ul> </nav> <section class='couchPostOuter'> <h1 class='postTitleCouch'>"+postTitle+"</h1>  <div class='couchPostBody'>"+postBody+"</div> </section>  </section>";
    $('#couchMode').on('click',function(){
    $('body').append(couchHtml);
    $('body').addClass('noScrollBar');
    });
    });
    //]]>
    </script>
    


    Note : Jquery Libraries are required for proper working of this script, hence i have added Jquery Libraries Version 2.1.3 in this script, you may use any other version of libraries.

  4. After this, You have need to install some HTML code to add couch button. You can add this button anywhere in your blog template after </head> tag but the best place to insert it just below post title.

    To insert this button below post title, Search for <b:includable id='post' var='post'> and below this, you may find XML code like this  <h2 class='post-title entry-title' itemprop='name'> and after it you will see Closing H2 tag like </h2>.

    Just copy the HTML Code given below paste it after </h2> closing tag.


    
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <ul class='toolset'>
    <li><a href='#' id='couchMode' title='Couch mode for comfortable reading'>Couch Mode</a></li>
    </ul>
    </b:if>
    


  5. Now you have completed all the steps successfully and creating a reader-friendly version of your blog.


Points To Remember (For Advance Users Only)


  1. Any other Jquery Libraries supported widgets like related post etc. should not be inside in your post area tags. Otherwise this script will not works properly.

  2. Be careful while adding Couch Button HTML code, since improper placing of this code will break your template.

If you find any problem while installing this widget in your website, let me know in the comments.

You Might Also Like

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

Thanks you for Reading! We welcome and appreciate your precious comments, but make sure to add some value to this article while posting your comments. If you have any queries, suggestions or anything related to this article, feel free to ask them via comment form.

But, if your blog comments are a random "Thank you", "Useful Post", or anything that doesn't actually enhance value of the article, then we will be removing them and it won't be appeared below. Thanks for understanding and connecting with us. If you want to give us any feedback or report any errors, you can kindly contact us and we'll revert back soon.