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.
- Now click Save template button & view your blog.
/*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;}
Hi Dear Admin, Thank you so much for everything that you share.
ReplyDeleteThank 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.
Hi,Thankyou for this informative article. Explain every thing very well, if you want any service regarding web services or cloud services visit here
ReplyDeletehttps://www.sibergen.com
ReplyDeleteWow, this tutorial worked perfectly on my blog https://vandeweybalao.blogspot.com. Thanks Manoj!
ReplyDelete