Connecting Dots Of Knowledge

Wednesday, February 18, 2015

How to Add Author Box Widget for Blogger

No comments :
about author box widget
This article is about adding "about the author box" widget in blogger. This author box contains author image , introduction and social network addresses. It will help you in increasing your social network followers. If anybody likes your blog or your profile then he/she can directly follow you on your social networks with the help of this widget.
In this way this widget will help you in getting good social network exposure.

Screenshot from MMT website
about author box widget @ MMT

Follow the steps given below

1. Login to Blogger account and go to Layout. 

 2. Click on add gadget.


 3. Choose to add HTML/JavaScrit

4. Copy the following code
<style>
#bgt-profile{
border:2px solid #888;
margin:2px 5px 0px 0px;
padding:2px;
}
#bgt-profile:hover {
border:2px solid #ccc;
cursor:pointer;
}
.bgt-opacity  {
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-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;
opacity: 0.5;
margin-left: 50px;
}
.bgt-opacity:hover  {
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
}
</style>
<img class="bgt-opacity" id="bgt-profile" src="http://2.bp.blogspot.com/--U6t2oBGu4E/VL-5zKA6IqI/AAAAAAAABHQ/NbcmFKWJGjk/s1600/ramesh.jpg" align="left"/><a href="https://fb.com/imrameshojha" target=""> Ramesh Ojha </a>is pursuing computer science engineering from Indore, India. He is founder and editor at Make My Tricks.<br/>
5. Simply replace the highlighted text with yours detail.

Replace: Red = your image link, Blue = your facebook URL, Green = your name, Purple = your detail

You have successfully installed your own floating Facebook Like Box for Blogger!!!! 

No comments :

Post a Comment