Author Box Widget With Awesome Social Media Icons For Blogger Blog

I have seen many Author box widgets for blogger blogs and WordPress blog templates, but I was never satisfy with all of  them. Some author box widgets had great designs and awesome style but no effects and some were over styled with borders and colors and all that. 
Fancy Author Box Widget for blogger blogs is one of my favorite Blogger Widget.Today I'm going to share  How to Add  Awesome and fancy Author Box Widget For Blogger blogs.Here is how!

Author Box Widget With Awesome Social Media Icons For Blogger Blog

Step No. 01:
First Off, Go To Blogger Dashboard.

Step No. 02:
Select "Template" Tab From Blogger Dashboard.
Author Box Widget With Awesome Social Media Icons For Blogger Blog
Author Box Widget With Awesome Social Media Icons For Blogger Blog
Step No. 03:
Head Over To "Edit HTML' Button.

Step No. 04:
Now You Are At Blogger Coding Area.

Step No. 05:
Here, Just Find </b:skin> Tag Using Ctrl+F.

Step No. 06:
After Finding That Piece Of Tag, Just Copy The Below CSS Code Before The </b:skin> 

.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 4px solid #E6E6E6;
overflow: auto;
.author-box p {
margin: 0;
padding: 0;
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
border:1px solid #fff !important;
.author-box img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;

Step No. 07:
Now Again Find  <data:post.body/>  Piece Of Short Code In Your Blogger Coding Area.

Step No. 08:
After finding That Short Piece Of Code, Just Copy the Below Code And Paste It To Below
The <data:post.body/> Short Code.
      <div class="author-box">
      <img class="avatar avatar-70 photo" src="https://lh4.googleusercontent.com/-OJtP326bXVA/VUi8jnSNqPI/AAAAAAAABU4/R1HD_hXlYlg/w667-h669-no/208961_470671342958812_238527768_n.jpg" alt="" width="70" height="70" /><b>Author</b>
      <div style="text-align: justify; font-family: verdana; color: #000000;"> Write Something About You .
      <a style="text-decoration: none; font-size: 70%;" href=" Your Blog link ">Shouted Blog</a></center></div>
      <a href="http://facebook.com/ShoutedBlog"><img style="width: 16px; height: 17px;" src="https://www.facebookbrand.com/img/fb-art.jpg" alt="Like Shouted Blog On Facebook" /></a><a href="http://twitter.com/Ghulam__Haider">
      <img style="width: 16px; height: 17px;" src="http://cdn.business2community.com/wp-content/uploads/2015/07/Twitter-icon.png.png" alt="Follow Ghulam Haider On Twitter" /></a>
      <a href="http://pinterest.com/Ghulam_Haider"><img style="width: 16px; height: 17px;" src="http://vignette2.wikia.nocookie.net/carebears/images/c/c4/Pinterest-icon.png/revision/latest?cb=20140925232226" alt="Follow Ghulam Haider On Pinterest" /></a>

      <a href="http://linkedin.com/pub/ghulam-haider/ab/80a/7a6"><img style="width: 16px; height: 17px;" src="https://riandrake.files.wordpress.com/2015/04/linkedin.png" alt="Connect Ghulam Haider On LinkedIn" /></a>

      <a href="http://youtube.com/GhulamHaider"><img style="width: 16px; height: 17px;" src="http://icons.iconarchive.com/icons/danleech/simple/512/youtube-icon.png" alt="Subscribe Ghulam Haider On YouTube" /></a>

      <a href="https://plus.google.com/+GhulamHaiderProfile"><img style="width: 16px; height: 17px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Google_plus.svg/1047px-Google_plus.svg.png" alt="Follow Ghulam Haider On Google +" /></a></div>

Step No. 09:
Save Your Template.

That's It.


Don't Forget To Replace All The Bold Blue Highlighted Color With Your Own In Code.
Author Box Widget With Awesome Social Media Icons For Blogger Blog Reviewed by Ghulam Haider on 00:38:00 Rating: 5

No comments:

All Rights Reserved by Shouted Blog © 2014 - 2015
Designed by Ghulam Haider

Contact Form


Email *

Message *

Powered by Blogger.