Customize Author Profile In Blogger

Today i was working on my blog playing with the codes .. then i found some thing really unique ,stylish and attractive.It was a Great customization of "AUTHOR PROFILE WIDGET"as i started working upon it, i found it successful and something unique with some great features such as author profile picture style and as well as hover effect , border style, shadow box and a cool admin badge.So i thought why i should not share it with you all so take a look at new and customized official "AUTHOR PROFILE WIDGET".

Remember!!!: Don't forget to hover it .

Live Demo

How To Customize Author/Admin Profile Using Simple CSS

To add this effect to your personal profile follow these steps,

1. Go To Blogger > Layout
2. Click Add a Page element or Add a gadget
3. Select Author Profile Widget
4. Now Go to Edit HTML
5. Backup your template
6. Search For ]]></b:skin>
7. Just above ]]></b:skin> paste this code

/*--- OE Author profile widget --- */
.profile-img {
    float: left;
    margin: 5px 5px 5px 8px;
    padding: 4px;
    box-shadow: 0px 1px 9px rgb(102, 102, 102);
    border-radius: 50px 50px 50px 50px;
    border: 1px solid rgb(255, 255, 255);
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.profile-img:hover {
opacity: 0.5;
}
.profile-data {
    margin: 5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgb(0, 0, 0);
    font-weight: bold;
    line-height: 1.6em;
}
.profile-datablock {
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXFJjjvw79RQrMv-FX4AVw_CuIQG9kbo04vMV54tbLiVPQHx0jC9qhh2ApTgCUfwW3ZW7h7xdsNKH41m3gwtcWOusJCYxaumEql1EL4yR0Yj8aenKYsvrG4BerDGMj7mxCyoNrL85W_ydh/s1600/aDMIN.png');
    background-repeat:no-repeat;
    background-position:244px -5px;
    margin: 0.5em 0px;
    border: 1px solid rgb(221, 221, 221);
}

     8.    Save your template and Done!
Preview your blog to see your profile standing out!

Customization Guide 

(1) Customize border

    border-radius: 50px 50px 50px 50px;
    border: 1px solid rgb(255, 255, 255);

to change the border of Author profile Picture profile pic to the square shape just remove border-radius: 50px 50px 50px 50px; and to change the border color just change the code rgb(255, 255, 255) as your wish.

(2)  Change author Badge
to change the author badge image just replace your image code with

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXFJjjvw79RQrMv-FX4AVw_CuIQG9kbo04vMV54tbLiVPQHx0jC9qhh2ApTgCUfwW3ZW7h7xdsNKH41m3gwtcWOusJCYxaumEql1EL4yR0Yj8aenKYsvrG4BerDGMj7mxCyoNrL85W_ydh/s1600/aDMIN.png

(3) Customize the content block

      border: 1px solid rgb(221, 221, 221);

To  change the border change the rgb(221, 221, 221) as you like and to change the style of border just change solid to Dashed or Dotted .

How to show or hide the link in Author Profile

 To Hide the Author profile Link Just add

.profile-link {
display:none;
}

That’s All!

I hope you will find it easy and interesting. Any question is welcomed :>