How To Add Author Box Or About Me In blogger
Before adding a author bio box widget, You just need to add below code in your blog site home page footer. Please follow the simple tutorial step by step.
1. Go to Blogger > Layout.
2. Add a gadget > Add HTML/JavaScript.
3. Copy the below code and Paste into HTML/JavaScript widget.
<div class="widget-content">
<!--[if !IE]> -->
<style>
}
#bbc:hover
{
border:2px solid #ccc;
cursor:pointer;
}
.opacity
{
opacity: 0.5;
margin-right: 50px;
-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);
}
.opacity:hover
{
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
</style>
<!--[endif]---->
<style>
#bbc
{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profileAditya:hover
{
border:2px solid #ccc;
cursor:pointer;
}
.opacity:hover
{
opacity: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
</style>
<img class="opacity" id="bbc" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaXcpMdNU7rrDp-FMaEJByN8sl5B5XlKmBg55mVgZkm9MZYtkkt7vCHtXHcIMYe5oGry6RFMsUgaO3uYuZtSebsZMrbzEJcUSMpOwP50P4e3f5EhU_Q16UuJqSo0Iz9yJtjJdqWWveTMSy/s1600/63943_521688851207047_20876973_n.jpg" />
<div style="font-family: Arial Tahoma Verdana; font-size: 13px; text-align: justify; margin-top:-110px; padding-left:120px;">
<b>Founder & Author:</b> The Guy behind this blog is called <b>"ADIL"</b>. I am 24 years old. Currently, I am living in Karachi, Pakistan. I can speak two Languages Urdu and English. I am managing blog myself & I love to..<a style="color:#5634;" href="http://www.earnbloggercafe.blogspot.com/p/about-me.html" target="_blank">...Read More</a></div></div> <!--Please Do not Remove the Credits --><p style=" float:left; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.thebloggercafe.blogspot.com"><strong>Blogger Widgets</strong></a></p></div></div></div>
Customization
- Replace the Blue Color image URL with your image URL.
- Replace the Red Color about me page link with your about me page link.
- Replace the Green Color author description with your author description.
Need Help
If you are facing any problem to add author bio box please let me know in the below comments section.
