Thursday, 27 November 2014

Add Couch Mode in Blogger [NEW METHOD]

Provide excellent readability feature for your user like in Labnol. It requires only few line of coding and is very easy to add in your bloggers blog.

Add Couch mode in blogger blogs

People like clutter free environment while reading content, that no doubt you would see Flipboard like services have tremendous popularity between the tech enthusiastic. Also apple safari also provides this readability to its user while browsing through it.

Couch mode is way to provide your user to read your article posted on your blog without interference of other website element. I have already posted another article where I have discussed this method, but it was actually much difficult to implement since it require more coding and good HTML knowledge.

But in this method much less coding will be required and it is far simpler to use for your readers. In previous method we use toggling of CSS style, this toggling is applied to complete template which makes it very complex to implement. In this method we use JavaScript to add HTML over the template structure of your post.

Improve readability of your blogger blogs. It important for you to back your template before proceedings these steps further

Steps
1: Go to blogger dashboard and open your HTML editor.

2: Search for ]]></b:skin> and just above it paste this CSS code.
.cm-eu{margin:0}.cm-eu a{color:#e94f1d;text-transform:uppercase}.cm-eu a:hover,.toolset a:active{color:#333}.cmbox-eu{font:1.1em/150% Georgia,"Times New Roman",Times,serif;background-color:#fdfdfa;position:fixed;z-index:999999999;top:0;right:0;left:0;bottom:0;overflow-y:auto;padding-bottom:50px}.cpbody-eu{border:1px solid #eee;border-top:0;border-bottom:0}.nsb-eu{overflow:hidden}.cmbox-eu .navc-eu{color:#fff;height:auto}.cmbox-eu .navc-eu ul li{display:inline-block}.cmbox-eu .navc-eu .UL001{background-color:#000;text-align:center}.cmbox-eu .navc-eu ul{background-color:transparent;text-align:center;padding:15px}.cmbox-eu .navc-eu ul li a{cursor:pointer;color:#e94f1d;padding:6px}.cmbox-eu .cpout-eu{font-size:100%;margin-top:10px}.cmbox-eu .cpout-eu h1.ptc-eu{text-align:center;border:1px solid #eee;padding:10px 0;margin:1% 11%;border-left:none;border-right:none}.cpbody-eu{padding:1% 5%;margin:1% 16%;color:#000}.cpbody-eu h2{font-size:30px;margin:5.2% 0 1.5%}.cpbody-eu h3{font-size:26px;margin:4.2% 0 1.5%}.cpbody-eu h4{font-size:22px;margin:3.2% 0 1.5%}.cpbody-eu h5{font-size:18px;margin:2.2% 0 1.2%}.cpbody-eu h6{font-size:16px;margin:1.2% 0 .5%}.cpbody-eu ul{list-style-type:square}.cpbody-eu blockquote{background:#f9f9f9;border-left:10px solid #ccc;margin:1.5em 10px;padding:.5em 10px;quotes:"\201C""\201D""\2018""\2019"}.cpbody-eu blockquote::before{color:#ccc;content:open-quote;font-size:4em;line-height:.1em;margin-right:.25em;vertical-align:-.4em}.cpbody-eu blockquote p{display:inline}.cpbody-eu pre{background:#FFF}.cpbody-eu img{padding:6px;border:1px solid #d4d4d4;background-color:#FDFDFD}.cpbody-eu a{color:#AD0000}

3: Now search for </head> and add this JavaScript code just above it.
<script type='text/javascript'>function hidcmeu(){$(&quot;.cmbox-eu&quot;).fadeOut(function(){$(&quot;.cmbox-eu&quot;).remove();$(&quot;body&quot;).removeClass(&quot;nsb-eu&quot;)})};</script> <script src='https://blogeutectics.googlecode.com/svn/CouchEutectics.js'/>

4: Now finally we will add this couch button just below post title (you can add this couch button anywhere in your blog template). Search for <b:includable id='post' var='post'> . Now below you would find h2 tag with class “post-title”. Just below it paste this following code so that it could appear only below post title and that on only post page.
<b:if cond='data:blog.pageType == &quot;item&quot;'><span class='cm-eu by-cm'><a href='#' id='couchMode' title='Couch mode for comfortable reading'>Couch Mode</a></span</b:if>

Finally it’s done. Note you should had added Jquery libraries for its proper working.
If you face any problem regarding in implementation in your blog, do comment.

NOTE: Do not use this code for your commercial use. This blog is protected via DMCA.

7 Discussion

  1. not working well on my blog. My blog address http://monster-tech123.blogspot.in/

    ReplyDelete
    Replies
    1. The code is works perfectly, but appears to seem it doesn't work if we place ads inside post-body. If you really want this couch mode in your blog, check out source code of labnol.org. It actually uses pure JavaScript to toggle CSS style of complete website which is quite tedious to do and the method will differ according to template design
      Labnol method :
      Add two three style like as follows:<!--Main CSS code-->
      <link href="http://img.labnol.org/css/labnol.12102014.css" media='screen' rel='stylesheet' type='text/css'>
      <!--Print CSS code-->
      <link href="//img.labnol.org/css/print.css" media='print' rel='stylesheet' type='text/css'>
      <!--Couch CSS code-->
      <link href="//img.labnol.org/css/couch.css" media='couch' rel='stylesheet' type='text/css'>
      Add this JavaScript: toggleCSS() {
      var e, t;
      for (e = 0; t = document.getElementsByTagName("link")[e]; e++) {
      if (t.getAttribute("rel").indexOf("style") != -1 && t.getAttribute("type")) {
      if (t.getAttribute("media") && t.getAttribute("media") != "print") {
      if (t.getAttribute("media").indexOf("couch") != -1) {
      t.setAttribute("media", "screen,projection")
      } else {
      t.setAttribute("media", "couch")
      }
      }
      }
      }
      }
      It quite complex to add by this above method but it works really great. Thanks or visiting :)

      Delete
  2. ok thanks anyways, i dont need it, by the way how is my blog? Am I writing well?

    ReplyDelete
    Replies
    1. I think your issue is the template design don't use Labnol like template, almost every Indian know about Labnol, so try some different template. And one more thing add more textual content it will really help you. It seem you textual content is quite low in some of your of articles, to sum it up it looks great. Keep blogging :developer: :D

      Delete
  3. you have a nice blog i am subscribing to it

    ReplyDelete
  4. Thanks for your suggestions. I am changing the labnol template to new template.

    ReplyDelete
  5. Can you reup Js file because https://blogeutectics.googlecode.com/svn/CouchEutectics.js í no longer availabel.
    thanks

    ReplyDelete

Note : All comments will be moderated. Do Not Spam.