Latest Posts :

Latest About Me Widget With Hover Effect

Share It! LinkedInFacebookPinterestTwitterGoogle+RedditDiggStumbleUpontumblrflattr

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>
  7. /* 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); }
  8. Now Click Save Template Button.
  9. Now go to Layout Page & click add a gadget and copy the below code & paste it in  content area.
  10. <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="http://1.bp.blogspot.com/-1j5rzuzT8Pw/UqmgM6AD44I/AAAAAAAAAU4/mR6iCnQD71I/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="http://4.bp.blogspot.com/-k_IDZrEQyFU/Ut0aS9kkRNI/AAAAAAAAAkU/GyvOaDQF05s/s1600/google.png" style="text-align: center;" /></a><a href="https://www.facebook.com/manoj2015paul" target="_blank"><img alt=" Facebook" border="0" src="http://1.bp.blogspot.com/-N3vqKL95ewE/Ut0ZVAOwPxI/AAAAAAAAAj8/YhFMtLY2JsU/s1600/facebook.png" /></a><a href="http://www.linkedin.com/pub/manoj-paul/88/20/a26" target="_blank"><img alt=" Linkedin" border="0" src="http://4.bp.blogspot.com/-fu2beqJ6Nv8/Ut0XdJQWEkI/AAAAAAAAAjw/HswcuWRY_P8/s1600/linkedin.png" /></a><a href="http://www.twitter.com/ANDROPORTER" target="_blank"><img alt=" Twitter" border="0" src="http://3.bp.blogspot.com/-L8LO6-6z73c/Ut0Z3EL2FyI/AAAAAAAAAkM/wlnc73XUpqk/s1600/twitter.png" /></a><a href="http://www.pinterest.com/androporter/" target="_blank"><img alt=" Pinterest" border="0" src="http://4.bp.blogspot.com/-Y8vnWquRr0A/Ut0Zn49ZVSI/AAAAAAAAAkE/JpvFL1HakRo/s1600/pinterest.png" /></a></div> </div> </div>
  11. 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.
  12. Now  go to your Posts page & find About Me post and click edit option.
  13. Now click on the HTML tab of the post editor and copy the whole code from there & replace with upper orange code.
  14. 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.
  15. 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:
  16. 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.

If u like this post then please share it on your social network!
SOCIALIZE IT →
FOLLOW US →
SHARE IT →
Powered By: Blogspot Blog Tricks

0 comments:

Post a Comment

>

 
  • Latest Widgets

    Latest Widgets

    Blogspot Blog Tricks is a blog from where you can get all the tricks, gadgets, templates, widgets and tutorials for your blogger blogs.

  • Why GoDaddy

    Why GoDaddy?

    Learn Why we chose GoDaddy as our Web Host and find discount coupons to kick start your blog today!

  • Buy Domain 35% off

    Buy Domain or Hosting server from Godaddy. Visit the upper Image for 50% off in Hosting & the text link for 35% off in any Products.

  • Facebook Tips & Tricks

    Facebook Tips & Tricks

    Facebook is the worlds best social networking site.We use facebook in daily life.We can use many tricks in facebook.Visit here and use tricks in your facebook.

  • Download & Play

    Download latest software, games, movies, music & many more. Play online latest movies & musics & games.

Subscribe For Free Updates!

We'll not spam mate! We promise.

Go To Top