Posts

Showing posts from 2017

How to add code snippets using Google Code Prettify

Image
Hey, In this tutorial you guys are gonna learn how you can add code snippets to your blog or website to highlight your code to your visitors. If you owns a website or running out of time then you can quickly visit the github repo and get your code snippet from there. A short description is also available there to help you get started. Here, we are gonna use Google Code Prettify to highlight our code which is 100% free and super easy to implement. Just follow the below steps to make your code shine on your page. Step 1 : Add Google Code Prettify to your page Add following script right above the closing </body> tag of your page <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> For Blogger: Open your blogger dashboard and go to Theme>Edit HTML like below Go to the bottom of the code and find </body> tag to add the above script Step 2 : Usage Put your code snippets in between

Add CSS to Blogger

Image
Hello everyone, in our previous post of  Create your own Custom Widget of Blogger  we used CSS in the blogger HTML/CSS widget. We directly put CSS in the widget content box but as i promised in the previous post, today we are gonna see how we can add CSS in the Customize theme option and if you don't know what the Customize theme option is or where the heck is this ' Add CSS  'option while you are customizing your theme then don't panic, we're gonna cover all of that in a pretty simple way. But wait..the question is why would you add CSS in Customize theme option when you can directly add CSS in HTML/CSS widget of your blog. Well, the answer is simple. Imagine that you have to create four or five widgets or suppose you want to edit the whole layout using your own custom CSS everywhere. Well, that will be a little difficult for you if you follow the above approach. You'll have to copy-paste the CSS from one widget to another widget in order to get the same

Create your own Custom Widget of Blogger

Image
Hey guys, in this tutorial i'm gonna show you how you can create your own Custom Widget on Blogger. You just need a basic knowledge of HTML/CSS which you can get from w3schools  but for now you can simply follow this guide to get started with creating your own widgets for blogger. Once you starts implementing this i bet you are gonna find it much easier and very interesting. You just need to follow this guide in order to make a simple About Widget. So without wasting any time let's just start the tutorial. Step 1: Add an HTML/Javascript Widget to your Blogger Layout. Step 2: Now you just copy paste the following code into the Content  block of your HTML/Javascript Widget <!-- Declaring CSS to style our widget content --> <style type="text/css"> /* This style block will produce a circular image for our About Widget */ .img-circle { border-radius: 50%; width: 200px; height: 200px; background-position: center center; back