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