How to add Couch Mode Widget in Blogger blog for Comfortable Reading

Couch mode is way of providing your reader to view the posted articles in its free form without any outside interference of other website elements. Didn’t get the idea of what I am saying just click Couch button hovering below post title.

So what happen after you click it, do you see any change with my blog, if yes then I will today teach you how to add this your blogspot domain. This post is quite long and complicated as compared of my other posts because its necessary to you understand it thoroughly.

FAQ

1: How do you get this Idea?
Of Course from Labnol.org (Amit sir Excellent Blog)

2: Did you copy Amit’s sir codes and applied to your blog?
Hell no! Not even dreams. Though it appear just like it but it’s all my coding.He has already written this piece of article for Wordpress but not for Blogger.

3: Can I make changes to the code you provide as per my convenience?
Yes you can. 

4: Can I use this code/concept to create an article of my own for my blog?
No you cannot. I personally request all reader not to create any kind of article related to this piece of code with my permission. I have faith in all reader that they would respect the work that I have done here, because I haven’t include any kind of link to my blog in any piece of code.
 
Hope you read this above FAQ because it’s very important to me, if you have any other question you can comment below.

Here are some requirement that must be considered before you proceed further :

System Requirement:

Google Chrome/Mozilla Firefox

Access to BlogSpot XML file (i.e. Administrator of the Blog)

Person Requirement:

You should have good knowledge of HTML and your template structure because this widget it’s not easy as like most of other widget.

So finally let’s implement this widget to your blog. My recommendation would be that you first read the whole article then implement this widget into your blog template.

Step 1: Firstly backup your template because the following piece of codes may ruin your template if not done properly.

Step 2: Now open template HTML editor and place the following code just above/before ]]</b:skin>

.

.cm_eu{
    background:#fff;
    width:50px;
    text-align:center;
    color:#888;
    border-radius:3px;
font: 14px "OFL Sorts Mill Goudy TT", Georgia, Times, serif;
  border:2px dashed #888;
    padding-top:10px;
    padding-bottom:10px;
    cursor:pointer;
    transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
padding-left:8px;
padding-right:8px;
margin-left:10px;
}
.cm_eu:hover{
  border:2px solid #000; color:#000;
}

.restorecss{display:none;
cursor:pointer;
text-align:center;
text-decoration:none;
font: 14px "OFL Sorts Mill Goudy TT", Georgia, Times, serif;
}
.restorecss:hover{
text-decoration:underline;
}

.prnt_eu{display:none;
cursor:pointer;
text-align:center;
text-decoration:none;
font: 14px "OFL Sorts Mill Goudy TT", Georgia, Times, serif;
}
.prnt_eu:hover{
text-decoration:underline;
}
#couch-toolbar {text-align:center;
background:#000; border:1px dashed #888; 
height:25px; right:0; position:fixed; 
width:125px; top:0;z-index:998;
margin: 0px 4em 0px 0px 
}
#couch-wrapper{ line-height:25px; 
margin:0 auto; width:99%; 
text-align:center;
z-index:998
}

Step 3: Now place the Following code where you have to render your couch button.

<span class="cm_eu refunc" title="Couch Mode for Comfortable Reading">Couch</span> 

Step 4: Now place the following code to render the back button and print button. The position of the buttons can be changed according to your need. You can change the buttons appearance as per your requirement.

<!-- BEGIN: Couch toolbar eutectics -->
<div id="couch-toolbar">
<div id="couch-wrapper">
<a class="restore" href="#" id="restorecss" style="color: white; font-style: italic;" title="Switch to Original Layout">
<b>←</b>go back </a>
<a href="#" id="prnt_eu"></a>
<a href="javascript:window.print()" rel="nofollow" style="color: white; font-style: italic;" title="Print This Story 
without clutter">print</a>
</div>
</div>
<!-- END: Couch Toolbar eutectics-->

Step 5: Now place this following piece of code just before/above </head>

<script><!--script 1-->
$(document).ready(function(){
$(".refunc").click(function(){
$(".restore").css("display","inline");
$(".prnt_eu").css("display","inline");
$(".cm_eu").css("display","none");
$("#couch-toolbar").css("display","inline-block");
Your element css code id that you have 
to remove after you press Couch button. 
For more info read Paragraph A
});
});
</script>
<script><!--script 2-->
$(document).ready(function(){ 
$(".restore").click(function() {
   $(".restore").css("display","none");
$(".prnt_eu").css("display","none");
$(".cm_eu").css("display","initial");
$("#couch-toolbar").css("display","none");
The element that you have to restore.
For more info read Paragraph A
});
});
</script>

Paragraph A: Consider the following example, like say I have to remove the sidebar of my blog template just after the Couch button is click by my reader. Then I should include the following code in first script.

$(".sidebar-wrapper").css("display","none");

Now also to make thing appears to go its original layout as my reader click “go back”, I should also include this following code into second script.

$(".sidebar-wrapper").css("display","initial");

Here in the above code .sidebar-wrapper is my id of sidebar it will be different from your sidebar id. Similarly if you want to increase different parameter like increasing the font size after couch button is click. So simply add this codes into script 1 and script 2 respectively.

$("h1.post-title").css("font-size","70px"); 

$("h1.post-title").css("font-size","50px");

Here h1.post-title is id for post title. And finally all you have the add id of the element that you have to remove in couch mode in script 1 and restore to its initial state by adding the it’s restore code in script 2 like by setting its display its state to initial. All this above coding is all logical and can be understood easily. Finally after doing so the final code that you would obtain will something look like this.

<script>
$(document).ready(function(){
$(".refunc").click(function(){
$(".restore").css("display","inline");
$(".prnt_eu").css("display","inline");
$(".cm_eu").css("display","none");
$("#couch-toolbar").css("display","inline-block");
$(".sidebar-wrapper").css("display","none");
$("#content").css("width","95%");
$("#comments").css("display","none");
$(".post-footer-line.post-footer-line-2").css("display","none");
$("h1.post-title").css("font-size","70px");
});
});
</script>
<script>
$(document).ready(function(){ 
$(".restore").click(function() {
   $(".restore").css("display","none");
$(".prnt_eu").css("display","none");
$(".cm_eu").css("display","initial");
$("#couch-toolbar").css("display","none");
 $(".sidebar-wrapper").css("display","initial");
$("#content").css("width","65%");
$("#comments").css("display","initial");
$("h1.post-title").css("font-size","50px");
});
});
</script>

here #content is id for post body, #comments is id for comments and similarly h1.post-title is id for post title.

This above widget is get right by testing it and that’s how I have done it. It’s actually very difficult to add this widget to your blog that’s why I have included personal requirement, but when you get it right it’s really cool to see it work. Hope this article might help you to integrate this widget into your blog.

Share on Google Plus