Blogger has lots of features as like as blogger widgets, today our topic is how to add Author Profile Widget for blogger blog. As a blogger, you may have to know Profile Widget is so essential for a blogger identity carrying. It helps you to touch off yourself between your blog readers and It also helps your site look like the bourgeois.
Recommended: How to add Social Media Widget for Blogger.
Blogger is the best platform for a blogger and it is also powerful. It has many features and day by day it is increasing for easily blogging. Even though blogger is strong for blogging but it is critical also. There is no plugin for customizing it If you want to customize blogger template you should use HTML, CSS or Blogger Widgets. It supports their user to add or change any type of gadgets on their sites. You can add any design or feature system by using a widget in blogger platform. When you visit other blog or website you may have seen many Widgets For Blogger like About Author, About Me, Author Profile Widget and so many. In Blogger, There is 900+ widget in blogger platform but there are no including Author Profile Widget. Today now I am showing you how to do it easily by using some HTML/JavaScript code in a widget.
Recommended: How to add Page Number Navigation Widget In Blogger Blog.
System Of Adding Author Profile Widget In Blogger.
Follow these steps which are given bellow.
- Log in to your Blogger Account.
- Go to Layout> Add a Gadget> HTML/JavaScript.
- Paste the below code in HTML/JavaScript Content box.
<h2 class=”title”>Author of Megaupdate24</h2>
<div class=”widget-content”>
<!–[if !IE]> –>
<style>
}
#Megaupdate24:hover
{
border:2px solid #34a853;
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 #34a853;
-webkit-box-shadow: 1px 1px 4px #34a853;
box-shadow: 1px 1px 4px #34a853;
}
</style>
<!–[endif]—->
<style>
#Megaupdate24
{
border:2px solid #34a853; margin:2px 5px 0px 0px; padding:2px;
}
#profileAditya:hover
{
border:2px solid #34a853;
cursor:pointer;
}
.opacity:hover
{
opacity: 1;
-moz-box-shadow: 1px 1px 4px #34a853;
-webkit-box-shadow: 1px 1px 4px #34a853;
box-shadow: 1px 1px 4px #34a853;
}
</style>
<img class=”opacity” id=”Megaupdate24″src=”http://www.mediafire.com/view/36e72bw2hbudw86/10430838_1496936187186553_6035573851561696573_n.jpg” width=”100″ />
<div style=”font-family: Verdana, sans-serif;” font-size: 13px; text-align: justify; “>
<b>Founder & Author:</b> Hello Friends, my name is Luthfar Rahman(Mithun), I am a professonal blogger and computter engineer, the Entrepreneur of <a href=”http://www.megaupdate24.com”> <b>Megaupdate24</b></a> who interested in traveling and programing.</div>
<a href=”http://www.megaupdate24.com/p/blog-page_17.html“> Read More</a></div>
Customize Author Profile Widget.
- Change Red Collor what you want as like as About me, About author or others.
- Change Orange Collor URL with your own picture URL which you want to set in the widget.
- Change Green Collor Text with your own bio.
- Change Blue Collor URL with your contract Page URL.
Hopefully, now you are completely done for setting Author Profile in your blogger blog. If face, any problems for setting it must inform me via comment. I will try to solve it and don’t forget to share this post in your social media timeline as like Facebook, Twitter, and Google Plus.