Posts

Showing posts from December, 2017

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

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.trigg

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

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-

Connecting Microsoft SQL Server using PHP

Image
Throwing Steps Right away without wasting much time : 3 things you need to have: WAMP/XAMPP installed on your system to run PHP. SQL Server for creating and connecting to Databases etc. PHP Drivers : For bridging SQL Server and PHP. Latest version of PHP Drivers can be download from this Download link which now supports PHP version 7.x. Steps for installing PHP drivers: The file that you will download is a nothing but a zip containing some dll files which are nothing but PHP extensions. Find the PHP extension folder for the version you are using and place the files inside that folder. Next open the Php.ini files for the version in use and add the initialization for the dll/plugins files that you just placed in extensions folder cos without initialization those files are good for nothing. Restart the wamp services. Goto Php extension from wamp menu and select the options which are having the same name as those files. This completes the installation part and now we ar