Add A Wordpress Style Author Profile Widget On Blogger

In present time, blogging is not only a passion. Currently it considered as an important career. A lot of people have changed their lives through Blogging.   

Author Profile widget helps you to branding your self among your blog readers. It also helps your site look like professional too. So in today's post I'm going to share with you how to add wordpress style widget in to your blog. Lets start:   

All of you may have to know Wordpress is the best CMS to create a blog. You are able to add whatever you want in Wordpress. But in Blogger, there are lot of limitation. You can add or change anything by using widget. Blogger is  a great Blogging platform. It supported their user to add or change any type of gadget on their site. In blogger, There are 900+ widget. But there are no including Author Profile widgets. You are just add Google+ profile.
So friends you may have seen About me, About author widgets on various blog. Author profile widget helps to introducing yourself and making a better sense in you blog reader. Currently almost every Blogger use Author profile widgets on their blog. 
Why do not you add Author profile on your Blogger blog. Let's see

Adding Author Profile Widget On Blogger. 

This is a very simple steps. Just follow the simple steps, which is given below 

•  Go to Blogger. And sign in your Blogger account. 
• Go to Layout> Add a Gadget> HTML/JavaScript 
• Paste the below code in HTML/ JavaScript box. [See screen shot]
  
  
  

<h2 class="title">Man Behind Techshoutme</h2>
    <div class="widget-content">
    <!--[if !IE]> -->
    <style>
    }
    #Techshoutme: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>
    #Techshoutme
    {
    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="Techshoutme" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsfd3kEVRfRPm_kN_Z9HF60vsaq-lbBz-XuguOmwK727XxjnQ2otc88HYvO3ef3CGfx7neVjPNAMIDJMal927mB29W2sWKMHHq6kVHH4Yvd6w95BweBatdSjY3XslXNh-s7JU3Mrp6XOGP/s1600/TAREQ@SALEK+(106).JPG" width="100" />
    <div style="font-family: Verdana, sans-serif;" font-size: 13px; text-align: justify; ">
    <b>Founder & Author:</b> Hi Friends, my name is Salek Ahmed student of  BBA, 21 years old SEO consultant & addicted web developer, the Entrepreneur of <a href="http://www.techshoutme.com"> <b>Techshoutme</b></a> who based out of the wonderful country name "Bangladesh". He is a problogger & running a number of sites from his living room</div>
  <a href="http://www.techshoutme.com/p/blog-page_76.html"> Read More</a></div>

Customization Widget 

1.  Change blue color link with your photo URL. 
2. Change red color with your own bio data. 
3.  Change orange color with your about me page link.
4. Here I'm use Man behind Techshoutme Change whatever you want. Like as About Me, About Author. 

So friends, Hopefully all of you have to add Author profile widget on your blogger blog. If any kind of problems share with me via comment.