Skyrocket Your Blog Traffic!
Join our newsletter to get guides which will help you boost your blog traffic for free!



Topics Widget For Blogger With Hover Effects!

Nitishk Gupta 10/20/2015 No Comment
topics-widget

First of all sorry that i had forgotten about a series which was Basics Widgets Series but now here i present you an awesome topics widget which is very much important for every blogger so that people may navigate your blog easily.
So let's talk about features of this widget -



Some Features -

  • Responsive
  • Clean
  • Beautiful
  • Effects Ready 
  • Font Awesome Ready

Importance Of This Widget -

This is an important widget as it allows your audience to see list of posts according to the labels which definitely helps your audience to surf your blog easily.
By default there is labels widget in blogger but it is not too attractive therefore this widget will perfectly help you there.

So here is the list of basic widgets -

                                               BASIC WIDGET SERIES

So this was the basic widget series which will let you install some basic and required widgets in your blog.
You must be anticipated to install this widget so lets start-

Adding Topics Widget In Blogger -

1- Go To Blogger
2- Click Add A Gadget
3- Click HTML/JAVASCRIPT
4- Paste This Code With Customization -

<!--MBA Tags-->
<style>
.mbatags li a {text-decoration:none;color:#007abe;font-size:20px;font-family:lucida handwriting;text-shadow:1px 1px 1px;margin-bottom:4px;}
.mbatags li a:hover {color:black;}
.mbatags li a:active {color:green;}
</style>
<ul class='mbatags'>
<li><a href='#'>Tag 1</a></li>
<li><a href='#'>Tag 2</a></li>
<li><a href='#'>Tag 3</a></li>
<li><a href='#'>Tag 4</a></li>
</ul>
<!--Ends-->
 Customization -

Replace # With Your Labels URL'S And Orange Text With Your Tag Names.

How To Add More Tags ?

It's Simple Just Add this code above </ul> tag With Same customization stated above -

<li><a href='#'>Tag </a></li>

How To Add Font Awesome Icons ?

Firstly Install Font Awesome In Your Blog And Add Font Awesome Icon Text As Shown Below -

<li><a href='#'><i class='fa fa-tag'></i> Tag </a></li>

Need Any Help ?

So this was the topics widget which you can add in your blog and i you face any problem just share it using comments and do share it with your friends.
By the way have you subscribe us ? if not then subscribe now to receive daily updates with awesome freebies.
Stay Calm And Be Happy :) 



Join Our Newsletter!

Join our newsletter to get regular updates with secret tips/tricks to skyrocket your blog rankings!

Nitishk Gupta
Hi, I Am Nitishk Gupta, a blogger and web developer. I am an addicted blogger who wants to share each and everything I have learned so far in my 4 years journey. Feel free to send me friend request or follow me. Thanks!

No comments:

Post a Comment

Powered by Blogger.