seo How To Customize Author Profile Widget in Blogger /Blog New Style 2013

on Saturday, March 30, 2013 | 0 Comment

Seo Master present to you:

This Tutorial All About How To Customize Your Own blogger/blog "Author Profile" widget from blogger, So you can add or edit "Author Profile" widget you want To Change, but in this script I just add a simple CSS hover, so letter will change if your mouse cursor on it.and your author pitcher will be move arount Left and Write.its Beautiful Css Style For your Blogger.i Hope you Enjoy this New look style Use your Blog And Site.

Add Author Profile widget in Blogger

1. Goto Blogger > Layout
2. Select Add a Gadget where you want to place "Author Profile" widget
3. Search and select Profile then Save

Ok your "Author Profile" have made. Now you can add your story in google+ setting, you know google+ know have new view.

Customize Author Profile Widget in Blogger

1. Go to Blogger > Template > Edit HTML

2. Backup your template

3. Search this code ]]></b:skin>

4. Now paste code below just above ]]></b:skin>

/*############################
Author Profile
#############################*/
.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 5px 7px 5px 5px;
border-left:2px solid #0073FF;
border-top:2px solid #0073FF;
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}
.profile-img:hover {
padding: 5px 5px 5px 5px;
border:2px dotted #00B309;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.profile-data {
padding:0 10px 20px 20px;
padding:0;
font: bold 15px verdana,Arial;
color: #0073FF;
text-align:center;
}
.profile-data:hover {
color:#00B309;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-datablock:hover {
background: transparent url(http://www.matrixar.com/-in_oyhuIL30/UTh4PK728BI/AAAAAAAABGc/QJQsa2x01tY/s1600/admin.png) no-repeat bottom right ;
}
.profile-textblock {
color:#FFFFFF;
margin: 0.5em 0;
line-height: 1.5em;
padding:8px 8px 5px 0;
border-bottom:2px solid #0073FF;
border-right:2px solid #0073FF;
}
.profile-textblock:hover {
color: #00B309;
border-bottom:2px dotted #00B309;
border-right:2px dotted #00B309;
}
.profile-link {
display:none;
}

5. Now And save your template.

If You Want To change color in profile description you can change #FFFFFF with color code you want.
To change color your google+ profile name you can replace #0073FF with color code you want.
i Hope You Will Done it.

2013, By: Seo Master

Labels: Blogger tricks, Css Styles, Tips And Trick, Widget