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/AVvXsEicdiTkh3QEvC3861GKy7HSLOuc3aTsDDI27jsDqvvJNSB-mVnKUaRpoqfNiaj3idF-Po8pSAaaFAZnoQF7uy7J8UI1GnEXRJWwbYZJ4BKEoW_WqJvJWiH6OuU6XA_xLcqLcTBuMa9glEfn/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/AVvXsEicdiTkh3QEvC3861GKy7HSLOuc3aTsDDI27jsDqvvJNSB-mVnKUaRpoqfNiaj3idF-Po8pSAaaFAZnoQF7uy7J8UI1GnEXRJWwbYZJ4BKEoW_WqJvJWiH6OuU6XA_xLcqLcTBuMa9glEfn/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 :>

Read More

Google+ commenting system for blogger

Since blogger is spreading their services among the whole world.They are making such incredible/wonderful changes in their blogger atmosphere,system and look.After a Unique and Stylish HTML editor they are launching G+ comment system for blogger. However it is not so friendly yet but i am sure it will make a great change in blogger word.It will also help you increase your traffic and making your comment system beautiful ever before.  Now today we are going to show you that How to add g+ commenting system to your blog.

What  are the features?

a perfect and unique look without any doubt. your readers don't need to choose any profile and don't need to wait for approval(in some blogs) as well.
Share option in comment system fast loading and also have recommendations is this comment is publicaly recommended or your circles.
All activities at one place such as Activity feed.
Reply and delete option in the comments system which best ever. and delete the comments permanently  without any backup such as comment is deleted by author or someone.

How to add Google plus comment box:

1. you need a account on Google plus.
2. Go to your blog click on Google+ as shown in the picture below:

Now after clicking on you just need to check the option "Use Google+ comments system on this blog" look at the picture below:

Just check it and congrats you are done :) .

Need help:

Not working? or having trouble while doing it just feel free to ask because by your question i also learn. Peace and blessing =) .

Read More