Create your own Custom Widget of Blogger

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;
  background-repeat: no-repeat;
  display: block;
  margin: 0 auto;
}

</style>

<!--Here goes our image for the widget with class img-circle that we created above -->
<div>
<img class="img-circle" src="Your_Image_Url"/>
</div>

<!-- Here we've added some text for our Widget having inline style CSS to make it look pretty -->
<div style="text-align: center; margin:0px; padding:0px;">
<h2>Your Name</h2>
<h5 style="margin-top:-5px">Brief introduction about you..<a href="#">..read more</a></h5>
</div>

Step 3:
Replace Your_Image_Url with your image's url. You can simply get the url of your image by right clicking any image and selecting "Copy image address" in the browser.

Replace Your Name with your name that you want to be visible to your blog viewers

Replace # from <a href="#"> with the link to your About Page so that your visitors could redirect to your About page from the widget itself.

Step 4:
Now click on 'Save' and save the arrangements by clicking on 'Save arrangement'. That's it, open your blog and see the changes that you've just made.

You can play with the above code to make your widget look more cool and more attractive. Similarly, you can create other widgets as well. You can also add CSS in the Theme Customization options which will make your work more easier but that's it for today, we'll work with that in the next post. To get updates about the upcoming posts you can follow this blog or can like the Facebook page or you can follow Pc-Hub on google plus and you can also follow Pc-Hub on Twitter and Pinterest.

If you faced any issues while following this tutorial feel free to comment below so that i could help you to fix it ^_^