Skip to main content

Customize Label cloud widget of blogger with Hover effects.

By
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.
Customize Label cloud widget of blogger with Hover effects.

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.
choose cloud from display of labels widget.
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.
Look of labels before and after.
7.Done.
That's it friends i hope you enjoyed the post,if you have any queries feel free to ask us through comments.
Labels:

Comments

Post a Comment

Popular posts from this blog

8 Important Tips to Protect Your Magento Store from Hacking

By
Protection of eCommerce and financial websites is necessary because these websites deal with monetary transactions and stand first as a victim in the list of cyber crime. Magento is the most popular eCommerce platform which also comes under threat of hacking by accessing unauthorized logins and other attacks. Magento Platform is rich in security features but security is needed on the admin level to protect it from cyber criminals. Here are some security tips that help you to protect your Magento store and keep your site safe: 1.Admin Path Customization: It is the first step you can take to keep your Magento site safe is to customize the admin path because the normal login pages and admin pages can easily be accessed by just hit and trial methods and it is very easy to navigate to admin page by hackers if the path remains unchanged. With the use of many hacking software available online, it is easy to guess user name and password combinations and these software can guess user n...
1 comment
Read more

How to change the color of a folder in windows 8/7/vista/XP.

By
Have you ever tried to change the color of a folder in windows 8/7/vista and xp? Because in windows one cannot change the color of a folder as we do in MAC OS(without using software).So in this tutorial i am gonna show you how to change the color using third party programs like folderico and folder colorizer.So lets see. Methods: Method 1: 1.Go to softorino.com  and download the folder colorize file and install it using system administrative     rights(Right click on the download file and click on " Run as Administrator "). 2.After installation of the software choose the folder for which you want to change the color. 3.Right click on the selected folder and you will find an option called " colorize ! ".Move the cursor on the colorize option and it will show a list of colorized folder as shown below. 4.From the list choose your color and you will find the folder as shown below. Method 2: 1.Go to folderico and download the folderico file(Its a paid...
Post a Comment
Read more

How to Create you own custom Chrome app-2 ways.

By
Google Chrome is the most common web browser which is used all around the world due to its speed and compatibility with our systems.As a result day by day new type of Apps and Extensions are released in to chrome web store.But have you ever tried to make one of your own App and Extension? If not in this tutorial i am gonna show you how to make your own Chrome app and Extension for you site or any other site with in Minutes using Manifest.json file.So let's see how to do this. Steps: 1.Create a New Folder any where on your Pc and name it as like " Worldtech360 chrome Apps " or " Chrome Apps and Extensions ".Now create a Sub folder and name it with your site. 2.Open the Sub folder which you have created and create a new " Text document ".Now we are going to convert this text document in to Manifest.json. 3.Open the Text document and copy the below code in it.   { "manifest_version": 2, "name": "Web site name...
Post a Comment
Read more