Stylish Custom Label Cloud Widget With Hover Effect for Blogger

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.

1. Sign in to your Blogger Dashboard then go to Layout & click Add a Gadget option and select Label.
2. Now set the settings which are shown in the screenshot below.
   
3. You must Select the cloud option from the display settings.
4. Now click Save button & go for CSS.
5. Now click Template option & then click Edit HTML button.
6. Now press CTRL+F button in your keyboard & find ]]></b:skin> tag.
7. 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;}

8. 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.

Read More

Latest About Me Widget With Hover Effect

Hiii Friends! How are you all, I think you all are fine and waiting for my new post. So friends today I’m going to share a nice About Me widget on this blog. This Widget is basically For Bloggers, it may help you because this is really need of every blogger that make his blog attractive and stylish, and this is help you for making your blog more stylish, attractive and good looking. So let me give you this widget for free and make your blog more attractive and stylish.

Latest About Me Widget Features  

This widget has many features so read them below:

•  Fast Loading Widget
•  Especially built with CSS3 and HTML5
•  Awesome Hover Effect
•  Easy to add
•  Responsive on any browser
•  Awesome Design of Widget
•  Awesome Image Hover Effect
•  Following Buttons

How To Add This Widget
So Friends, I’m Going to tell you how to add this widget in your blogger blog.
NOTE: **When you edit your Blogger template keep a Backup your existing blogger template because If something goes wrong then you can Restore the template.** if u want to know how to Backup/Restore your blogger template then click here.

1. Login into your Blogger account & go to Posts page and click New post button. Please note do not publish the post at any moment.
2. Now In the post editor click Header Area & name it About Me and add your image & type your details. Also, put a link to your blog’s homepage and another to your google+ page. Below is what I did.
   
3. Now click on the Save but do not publish it.
4. Now close the editor & click Template button & then Edit HTML button.
5. Now press CTRL+F button in your keyboard & find ]]></b:skin> code.
   
6. Now Copy the below code and paste it above ]]></b:skin>

/* Professional About Me widget with hover effect by Manoj Paul ---------------------------------------------*/ .bbtaboutme{ margin: 5px auto; background-color: #A3ABAE; width: 270px; padding: 5px 3px 5px 5px; height: 340px; overflow: hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; border: 5px solid #16DAD6; } .bbtaboutme:hover { border: 10px solid #000000; background-image: linear-gradient(bottom, rgb(148,197,89) 13%, rgb(197,157,89) 55%); background-image: -o-linear-gradient(bottom, rgb(148,197,89) 13%, rgb(197,157,89) 55%); background-image: -moz-linear-gradient(bottom, rgb(148,197,89) 13%, rgb(197,157,89) 55%); background-image: -webkit-linear-gradient(bottom, rgb(148,197,89) 13%, rgb(197,157,89) 55%); background-image: -ms-linear-gradient(bottom, rgb(148,197,89) 13%, rgb(197,157,89) 55%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.13, rgb(148,197,89)), color-stop(0.55, rgb(197,157,89)) ); } .image { border: 5px solid #2935B9; float: left; height: 140px; width: 140px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111; box-shadow: 5px 5px 5px #111; } .image:hover { border: 5px solid #49DFE1; float: left; height: 140px; width: 140px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111; box-shadow: 5px 5px 5px #111; } .bbtadmin { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .bbtadmin:hover { border-radius: 50%; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); }

7. Now Click Save Template Button.
8. Now go to Layout Page & click add a gadget and copy the below code & paste it in  content area.

<div class="bbtaboutme"> <div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <div class="bbtadmin image"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4yQDnuG7iyhmuFCVcKSD8-jNZWal9y7UMxvV1yPxHnjL_BD_9XRGZgqqMmB1Qxj5Y-bqQFqqDTzNF9R0pUR5XH1Gtx9C2dHWvdlTpfX4WXEMUvn3F-aI7vC8AyVx773S6ks4y_1d_V00/s1600/manoj.jpg" height="140" title="MANOJ PAUL" width="140" /></div> <span style="color: orange; font-family: arial black;"><a href="https://plus.google.com/+ManojPaulOnline/posts" target="_blank">Manoj Paul</a></span><br /> He is a young addicted Blogger who is founder of  <b><a href="http://blogspotblogtricks.blogspot.com/" target="_blank"><span style="color: lime;">Blogspot Blog Tricks</span></a></b>. He is 23 years old and living in India, Kolkata Currently. He loves to share Blogger Tips, Blogger Widgets, Blogger Templates, Adsense Tips & seo Tips for helping newbies in the Blogging world. He started his blogging career as a part time blogger and now he is full-time blogger, you can call him professional blogger.<br /> <b>Follow him on</b> <br /><a href="https://plus.google.com/+ManojPaulOnline/posts" target="_blank"><img alt=" Google+" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguF2YZTczSaNzU94vDMRox-LtoR7O1gB04dKm6W01j-Oe7HJgwmPpbKZVXWz9mAinH2G8asa-_lxKbh1YpnT1gPZ_X1YvVzeIDplLMlRHRVZqrSJKUHpJCkoKXnZrlG-Co41SFwlBJp8w/s1600/google.png" style="text-align: center;" /></a><a href="https://www.facebook.com/manoj2015paul" target="_blank"><img alt=" Facebook" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi0naafFxgGtePQbXqtP30nMfKjQQQ7ChNR6Vd4sWCKq_IKZ0_ANjsK1FeAywNCi1OpcZousYXSpv85sa_tDGaWJPZgu-A_Fa-5ErJ8AsxC2ps0HaOogi7gLxT_E0fPy-d4Mh7thvW90w/s1600/facebook.png" /></a><a href="http://www.linkedin.com/pub/manoj-paul/88/20/a26" target="_blank"><img alt=" Linkedin" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu_5I_4MbfizV8qEl0apNZFfs6w_IH8IsE3A13ynSVEmT_vqeMzSPqTUIzfzN3xPvvQ-do7cgI0_iy4lQqHXCDjfQi2s4O89T93AjhAfKOTIiE57FNs0Bjfa4yO02KGE9zgzCLVhnAGMA/s1600/linkedin.png" /></a><a href="http://www.twitter.com/ANDROPORTER" target="_blank"><img alt=" Twitter" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha2L6Crjvljy50DQkVJmWHhJ83H4BUcaIqFoRJ8hVCEo2qhFH9Sfd8YpJhqTsJWJHrGmdnym18oFzg3hyX5YsgMo2j3-pC2mP50d9pPxgDnDVhuj67xhJC8lv5_kR_rwa5lj1AS5ousto/s1600/twitter.png" /></a><a href="http://www.pinterest.com/androporter/" target="_blank"><img alt=" Pinterest" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGPnJC9y0WULL3hKmQ-s582_ZAhINo-opfQc5SsHNTjVNwXrtaSBovouByUbQTNeB8UfIVLb9mhZGCtDcW-dqZwm894S0OTGcjRbpEPBzWc5dpI9y-5heKLuBMqNYI4EKhb0HyuKjhzws/s1600/pinterest.png" /></a></div> </div> </div>

9. Now Replace the purple colour link with your image link and replace all green colour link with your Faceook, google+, Linkedin, Twitter & Pinterest Profile Links.
10. Now  go to your Posts page & find About Me post and click edit option.
11. Now click on the HTML tab of the post editor and copy the whole code from there & replace with upper orange code.
12. Now save it & view your Blog. If Height & Width is not correct then go to your Template then Edit HTML & edit the Upper Red colour & Blue Colour css code.
13. Please note If your sidebar width is 320px then its ok just modify the height pixel but if your sidebar width is not 320px then change the Width like this:

If Your Sidebar width is 300 then change the width 270px to 250px

so friends ! You successfully added this widget in your blogger blogs by this tutorial. Hopefully I say that no help needed but If you want any kind of help do comment below I’m here to help you. You can easily contact us by the comments. If you like my post little bit then please support me by shareing my page on your network or subscribing us and liking our facebook fan page. Thank you for visiting my page.

Read More

Parse HTML to XML Online Tool

Parse HTML Online Tool For Bloggers

Parse HTML is a great tool that enables to change or convert any HTML / Javascript codes to be compatible and can be received by the Blogger platform and consequently the course to facilitate the installation of affairs both Bloggers widget or ads codes or adsense. You can use an Online Parse Html Tool that is ready to Parse, just copy and paste the HTML code / javascript that you have you and the code will automatically parsed.

Related tools

Adsense Ad Code Converter Tool

Html to Xml Converter Tool

Read More