Beautiful Author Box Widget Below Every Post

Beautiful Author Box Widget Below Every Post

Every Blogger have its Author data which he gives below every post in the author box.Many blogger have simple author box.But now i share Beautiful Author Box Widget Below Every Post With Social Sharing And Subscribing Option.Its look amazing on mouse hover effect...

So Lets Start...

Beautiful Author Box Widget Below Every Post

Step 1
Go To Your Blogger Template
Now Firstly Backup Your Template
Now Edit Your Template
And Search </head>
And Paste Below Code Above It.

<!-- Author Box Start--><style>.mdauthor_info{float:left;width:550px;padding:15px;border:1px solid #474645;margin-bottom:15px;margin-top:15px;background:#ffffff;color:#000;}.mdauthor_info:hover{background:#ffffff;border:1px solid #ccc;-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);}.mdauthor_info h3{color:#000;margin-bottom:10px;}.mdauthor_info h3:hover{border : 1px solid #EEEEEE;-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);}.mdauthor_photo{float:right;margin:0 0 0 10px;}.mdauthor_photo img{border:1px solid #666;-webkit-transition:-webkit-transform .15s linear;-moz-transition:-moz-transform .15s linear;-o-transition:-o-transform .15s linear;transition:transform .15s linear;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);box-shadow:0 3px 6px rgba(0,0,0,.25);padding:5px 5px 5px 5px;-webkit-transform:rotate(+2deg);-moz-transform:rotate(+2deg);-ms-transform:rotate(+2deg);-o-transform:rotate(+2deg);transform:rotate(+2deg);float:left;}.mdauthor_photo img:hover{background:#FFFFFF;border : 1px solid #EEEEEE;-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);-webkit-transform:rotate(-1deg);-moz-transform:rotate(-1deg);-ms-transform:rotate(-1deg);-o-transform:rotate(-1deg);transform:rotate(-1deg);}ul.mdsocial{list-style:none;margin:10px;overflow:hidden;}.mdsocial li{float:right;background:none !important;padding:0 !important;margin:0 8px;}.mdsocial li a{display:block;width:40px;height:40px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF7Ya2YPvC64rSqKoR61_pbPx-thqgo1NWkfbytOi0D9vxfLIXmv9-_g3rF-Dpzfw6rYPWTBC8_4KIfTCOMHKS-UQJ96qmSmQ9BikJHtezvLM5SgZUc7Rq3AOXGfJ21RUlJs2iecm8Qtoe/s1600/social.png") no-repeat transparent;text-indent:-99999em !important;}.mdsocial li a:hover{padding:0 !important;}.mdsocial li.rssicon a{background-position:0 0;}.mdsocial li.twicon a{background-position:-50px 0;}.mdsocial li.fbicon a{background-position:-100px 0;}.mdsocial li.gicon a{background-position:-150px 0;}.mdsocial li.rssicon a:hover{background-position:0 -50px;}.mdsocial li.twicon a:hover{background-position:-50px -50px;}.mdsocial li.fbicon a:hover{background-position:-100px -50px;}.mdsocial li.gicon a:hover{background-position:-150px -50px;}.mdlinediv{margin-top:25px;height:0px;clear:both;display:block;border-top:1px solid #fefefe;border-bottom:1px solid #CCCCCC;}.mdemailbutton{background:#f7f8f9;background:-webkit-gradient(linear,left top,left bottom,color-stop(#f7f8f9,0),color-stop(#e9e9e9,1));background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);color:#888;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;}.mdemailbutton:hover{background:#f1f1f1;background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1f1f1,0),color-stop(#e0e0e0,1));background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );text-decoration:none !important;}.mdemail{clear:both;width:250px;margin:10px 0;float:left;}.mdemailform{position:relative;width:250px;margin:0 auto;}.mdemailinput{width:200px;height:18px;margin:0 auto;padding:8px 40px 8px 10px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;font-family:georgia;font-style:italic;-webkit-box-shadow:1px 1px 2px #dfdfdf;-moz-box-shadow:1px 1px 2px #dfdfdf;box-shadow:1px 1px 2px #dfdfdf;font-size:14px;color:#666;}.mdemailbutton{-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;-webkit-border-top-left-radius:0px;-webkit-border-bottom-left-radius:0px;-moz-border-radius-topleft:0px;-moz-border-radius-bottomleft:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;padding:9px;position:absolute;right:-2px;top:0;display:block;line-height:16px;}.mdemailbutton{padding:8px !important;}.mdemailform, .mdemailinput{width:98% !important;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:auto;}</style><!-- Author Box End-->

You May Also Like: Beautiful 125*125 Banner Ad Slot With Hover Effect

Step 2

Now Search For
<div class='post-footer-line post-footer-line-1'>

<!-- Author Box Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='mdauthor_info'><div class='mdauthor_photo'><img alt='author' height='150' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYaiK-KErM19rK0cA-Kn7kZ2hLR8LaoBymtZXx5Gf-Nte1l2Dv3RhQ-vL4WUNY5BS7dVJGZMfhX1NVmjwNk0gYWNA-rNYw3Mc1FVjAzR73axKpvSI5u7lWXlAnW0kbTWHMv3pmlBRZ9mc/s1600/mughees+ahmed.jpg' width='150'/></div>  <h2><font color='blue'>About Author:</font></h2><p>Hi! I am 17 years old now. Currently, I live in Islamabad, Pakistan. I can speak Urdu and English language. By Profession I&#39;m a Web Designer, Blogger and SEO. <a href='http://www.f4uonlinecourses.com/2013/03/about-me.html'>Read More</a>...</p><div class='mdlinediv'/><div class='mdemail'>  <small style='text-align:center;'><h4>Get Free New Updates to your Inbox!</h4></small>  <br/><form action='http://feedburner.google.com/fb/a/mailverify' class='mdemailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=f4uonlinecourses&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input name='uri' type='hidden' value='f4uonlinecourses'/> <input name='loc' type='hidden' value='en_US'/><input class='mdemailinput' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/> <input class='mdemailbutton' title='' type='submit' value='SignUp'/></form></div><ul class='mdsocial'><li class='rssicon'><a href='http://feeds.feedburner.com/f4uonlinecourses'>Rss</a></li><li class='twicon'><a href='http://twitter.com/f4uonline'>Twitter</a></li><li class='fbicon'><a href='http://facebook.com/f4uonlinecourses'>FaceBook</a></li><li class='gicon'><a href='https://plus.google.com/108479529524557669415'>Google +</a></li></ul></div></b:if>

<!-- Author Box End-->

You May Also Like: Best Seo Tips For Blogger Blogspot Blogs

Instruction

Replace                   with your Image Url
Replace                   with your Author Bio
Replace                   with the Text you want to show
Replace                   with your FeedBurner Id
Replace                   with your Twitter Username
Replace                   with your Facebook Username/Page
Replace                   with your Google+ Id

Note
If you find any problem regarding 'Beautiful Author Box Widget Below Every Post' feel free to comment below.