Stylish Custom Label Cloud Widget With Hover Effect for Blogger ~ Blogspot Blog Tricks

Stylish Custom Label Cloud Widget With Hover Effect for Blogger

Share It!

Today I am going to share a nice label cloud widget with hover effect for blogger. This Label Widget look Gorgeous And Cool. This widget Specially created only For Blogger. Blogger Tag Clouds are used to show all the categories or labels present in the blog. By default blogger comes with simple design they do not look beautiful. But we designed our labels widget like CSS buttons, which will be looking attractive more than the default blogger labels cloud widget style. you can see preview in our screenshot image to know how is this is. I hope you will like it.

Please Note:- Before applying this label widget you must set your label style to cloud & backup your template for safety.

Click here for backup your Template

How To Add Custom Label Cloud Widget

To add this Widget in your Blog Follow the simple steps carefully.

Sign in to your Blogger Dashboard then go to Layout & click Add a Gadget option and select Label.
Now set the settings which are shown in the screenshot below.
You must Select the cloud option from the display settings.
Now click Save button & go for CSS.
Now click Template option & then click Edit HTML button.
Now press CTRL+F button in your keyboard & find ]]></b:skin> tag.
Now Copy the below code and paste it above ]]></b:skin> tag.

/*Stylish Custom Cloud Labels Widget by Manoj Paul----------------------------------------------- */ .label-size{ padding: 3px; text-transform: uppercase; margin:0 2px 6px 0; border: solid 2px #061ED5; border-radius: 3px; float:left; text-decoration:none; font-size:14px; color:#000000; background: #000000 ; } .label-size:hover {background: #0faefd ; border:5px solid #000000; text-decoration: none; -o-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -o-transform: rotate(7deg); -moz-transform: rotate(7deg); -ms-transform: rotate(7deg); -webkit-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .label-size a { text-transform: uppercase; float:left; text-decoration: none; color:#0FAEFD; } .label-size a:hover { text-decoration: none; color:#000000;}

Now click Save template button & view your blog.

If you face any problem, then leave a comment bellow and if you get this post is helpful then kindly share this post on your network or social network sites. Thanks for visiting my page.

If u like this post then please share it on your social network!

SOCIALIZE IT →

Tweets by @seo_blogger_lab DMCA

1 comments:

Brang Wunpawng1 April 2014 at 06:20
Hi Dear Admin, Thank you so much for everything that you share.
Thank for your beautiful label widget and I really appreciate for that. And Could I reguest you some help, please?
Now,my blog http://atsammarai.blogspot.com/ is getting full of mess.
I used the template from http://seobloggertemplates.com/ and it just show 4 post, and I would like to
remove the credit link and I would change the number of post into 12 posts, What should I do?
Please help me! I'm not a professional blogger or not an advanced blogger, just a
beginner from Myanmar.
I expect that some nice advice will come from you.
Thank you.