How to add Couch Mode in Blogger

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.

Share on Google Plus