Customize Label cloud widget of blogger with Hover effects.

Hi guys welcome back to worldtech360.In this post i am gonna deal with blogger labels.Usually Labels are used to categories your blog posts.By using Labels on your blog or website you tell the readers what type of topics you deal with.So in order to make the labels more attractive,in this post i am gonna show how to customize the label widget with hover effect.So let's see how to do this.

Steps:

1.Open Blogger>>Layout.
2.Click "Add widget" and select "Labels" form it.
3.Now a window will pop up and choose display as cloud instead of list as shown below.

4.Now move to Template >>Edit HTML.
5.Search for ]]></b:skin> and paste the below code above it.

/*-----Labels Cloud widget by worldtech360.com ----*/
.label-size{
  background-color:#ffffff;
  border:2px solid #2AA4CF;
  float:left;
  font-family:georgia;
  font-size:12px;
  margin:0px 1px 1px 0px;
  padding:7px;
  text-transform:uppercase;
  box-shadow:rgba(0, 0, 0, 0.45098) 0 1px 11px;
}

.label-size:hover {
  background-color:#ffffff;
  border:none;
  border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
  border-top-left-radius:12px;
  border-top-right-radius:12px;
  font-family:georgia;
  font-weight:bold;
  padding:7px;
  text-decoration:none;
  border-bottom-style:solid;
  text-color:#fff;
  border-bottom-color:#595b67;
  border-bottom-width:4px;
  box-shadow:rgba(0, 0, 0, 0.45098) 0 1px 11px;
}

6.Save you template and you will see the labels as shown below.

7.Done.
That's it friends i hope you enjoyed the post,if you have any queries feel free to ask us through comments.