How to Install a Cool Author Box on Blogger website

How to Add a Custom Author box Widget in Blogger website. How to Install a Cool Author Box on Blogger website - Peak Fiction. Blogger website tips

How to Install a Cool Author Box on Blogger - In general, bloggers use the built-in blogger facilities to display their profile badge, so on this occasion I will provide a tutorial on How to Add a Custom Author box Widget in Blogger website. This Author Box is similar to the appearance of the Google Plus Badge, but this author box has several additional features, such as social media profile buttons, follow this blog buttons and other buttons that you can change according to your needs.

How do I add an author box to Blogger?

To install this Author Box on your blog is quite easy, why is that? Because just by adding a little CSS and JavaScript code, you will see this cool author box display on your blog. Follow these steps to add cool author box in blogger:

Step 1:

First , make sure you have installed awesome fonts on your blog. If not, please copy the code below and place it after the code <head>.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

Step 2:

Second , copy and save the following CSS code above/before the code </head>.

 <style type='text/css'>

.sosmed-author,a.authorname,h2.author-title,a.authorname-url{display:block;text-align:center}

.authorbox{width:300px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSm2Z9aZ0reqjvhhqsA95uuPSTkyAxOMEgX26a9nLHhPfTyRO5whHnbznEdOBeAZSF-R1rhbqvsHup5hmN37ap6VYJWh_vZUs1AAT9XGA59TBR1X3MZS2-PgOCRfJvD3u-IIBt8VBeA7g/s300-fcrop64=1/,00001ad4fffff235) top center no-repeat #fff;border:1px solid #dedede;border-radius:3px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:16px 0 0;margin:0 auto;}

h2.author-title{font-weight:bold;text-decoration:none;margin:0 auto 10px;font-size:22px;color:#fff!important}

.authorbox img{margin:55px auto 0;border-radius:100%;display:block}

a.authorname{margin:10px auto;font-weight:400;font-size:20px!important;text-decoration:none;}

a.authorname-url{margin:0 auto 10px;font-weight:400;font-size:16px!important;text-decoration:none;}

.sosmed-author li,.sosmed-author ul{list-style:none}

.sosmed-author ul{margin:0!important;padding:0!important}

.sosmed-author{margin:0 auto!important;padding:10px 0;background:#dfdfdf;border-top:1px solid #dedede}

.sosmed-author li{display:inline-block;margin-right:10px}

.sosmed-author li:last-child{margin-right:0}

.sosmed-author li a,a.authorname,a.authorname-url{color:#555!important;transition:all .4s ease-out}

.sosmed-author li a:hover,a.authorname:hover,a.authorname-url:hover{color:#111!important}

a.button-author{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:bold;font-size:16px!important;margin:10px 10px 0;padding:5px;text-align:center;border-radius:3px;transition:all .4s ease-out;text-decoration:none}

a.button-author:hover{background:#357ae8;border:1px solid #2f5bb7}

</style>

Replace the URL of the image in 3rd line marked above with the URL of your G+ profile background image.

Step 3:

Thirdly , Add the below HTML code in the HTML/JavaScript sidebar gadget in Layout.

 <div class="authorbox">

  <h2 class="author-title">

Author

</h2>

  <img alt="author" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://lh3.googleusercontent.com/-Q55pKJrgnXs/AAAAAAAAAAI/AAAAAAAAh9M/ae9EthU2__8/s120-c/photo.jpg" width="120" height="120" />

  <a class="authorname" href="https://plus.google.com/+ProfilUnikAnda" rel="author" target="_blank" title="Nama Profil G+ Anda">Nama Profil G+ Anda</a>

  <a class="authorname-url" href="https://plus.google.com/+ProfilUnikAnda" rel="author" target="_blank" title="google.com/+ProfilUnikAnda">google.com/+ProfilUnikAnda</a>

  <div class="sosmed-author">

    <ul>

          <li><a href="https://www.facebook.com/Username" target="_blank" title="Facebook" rel="nofollow"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>

          <li><a href="https://twitter.com/Username" target="_blank" title="Twitter" rel="nofollow"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a></li>

          <li><a href="https://www.google.com/+Username" target="_blank" title="Google+" rel="nofollow"><i class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i></a></li>

      <li><a href="https://www.youtube.com/c/Username" target="_blank" title="Youtube" rel="nofollow"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li>

      <li><a href="https://www.linkedin.com/in/Username" target="_blank" title="LinkedIn" rel="nofollow"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i></a></li>

      <li><a href="https://www.instagram.com/Username" target="_blank" title="Instagram" rel="nofollow"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>

    </ul>

    <div class="clear"></div>

<a class="button-author" href="URL FOLLOWER BLOG" target="_blank" title="Follow This Blog">Follow This Blog</a>

<a class="button-author" href="URL FEEDBURNER" rel="nofollow" target="_blank" title="Subscribe This Blog">Subscribe This Blog <i aria-hidden="true" class="fa fa-paper-plane"></i></a>

  </div>

</div>

To replace the photo I marked above with your G+ profile photo, please go to your G+ Profile page then right click on the G+ profile photo and Copy the image address then replace the URL of the photo I marked above with the URL of the G+ profile photo you just added. copy. Please adjust the profile name and G+ profile URL as well as other social media profile URLs.

Step 4:

The next step is to copy and place the following javascript before the code </body>.

<script>

//<![CDATA[

var imgDefer = document.getElementsByTagName("img");

for (var i = 0; i < imgDefer.length; i++) {

    if (imgDefer[i].getAttribute("data-src")) {

        imgDefer[i].setAttribute("src", imgDefer[i].getAttribute("data-src"));

    }

}

//]]>

</script>

This code is for deferring the profile photo, if your blog already has this code then you don't need to add the following code again.

Step 5:

Save your theme and check the results.

So this is how you can add an awesome author box in blogger website.