Contact

By

Name

Email *

Message *

Get new posts by email:

Popular posts from this blog

Enabling fixed Sidebar for blogger Contempo template for screen sizes smaller than 1440px

By
Image
Here is how to do it :

Add this code in your blogger template(where to add this code is mentioned before 2nd code snippet of this post) ,now the value 1300px is the screen size for which I want the sidebar to be always visible for, you can reduce this value as you like, but be aware that reducing this value to much smaller digit will result in showing the overlapped sidebar instead of content body for your blog readers who are using much smaller screen devices such as mobiles which you might not want to happen so be wise :

@media screen and (max-width: 1300px) {   .sidebar-container {     bottom: 0;     position: fixed;     top: 0;   }   .sidebar-container {     left: 0;     right: auto;   }   .sidebar-container.sidebar-invisible {     -webkit-transition-timing-function: cubic-bezier(0.4,0.0,0.6,1);             transition-timing-function: cubic-bezier(0.4,0.0,0.6,1);   }   .sidebar-container.sidebar-invisible {     -webkit-transform: translateX($(sidebar.width * -1));         -ms-tran…
Read

Adding copy to clipboard button to every google code prettify pre blocks in blogger

By
Image
It's a 2 part process:
The script part to find all the pre blocks having code in it and append a copy button to it dynamically.The style part to place our copy button at the specified location(on top right of every code block in this case) The script part:
<script> var pre = document.getElementsByTagName('pre'); for (var i = 0; i < pre.length; i++) {             var button = document.createElement('button');                     button.className = 'copy-button';                     button.textContent = 'Copy';                     var s = pre[i].innerText;                     button.setAttribute("data-clipboard-text",s);                     pre[i].appendChild(button);        } var clipboard = new Clipboard('.copy-button'); clipboard.on('success', function(e) {     console.info('Action:', e.action);     console.info('Text:', e.text);     console.info('Trigger:', e.trigger);     e.trigger…
Read

Adding code prettify to Blogger

By
Image
Cutting the crap short:
You simply need  to add this line of code in your blogger/blogspot HTML template any where insideheader tag <head>Add code Here</head> just before </body> tag this will not block page from loading and your site will stay as fast as it was without Syntax Higlighting:
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script> And then whenever you have post that involves somekind of code that needs to be pretty printed you wrap that code like shown below in HTML editor of your post editor dont forget to replace the Your codehere with your actual code:
<pre class="prettyprint linenums">Your code here</pre> If you want more theme options and styling you need to follow this link : StylingYou can have more reference on adding it to your template at : ReferenceYou can read about alternatives at : AlternativesYou can read more details about the one we are u…
Read