Hello guys! I’m back for how many days now I will give you the easiest way on how to Add Author Bio Widget at Bottom of Each Post for Blogger with the help of this widget generator. The main things that this widget takes your Gravatar profile picture so you don`t need to upload any other photo. With help of this, Its look like a pro author widget. As you know, Blogger updates guest author features so I am also working on it for guest blogger but still you can it in your blog.
STEP 1
CSS CODE
<style>.bhauthor_info{float:left;width:550px;padding:15px;border:1px solid #cccb;margin-bottom:15px;margin-top:15px;background:#eeeb;color:#000;}.bhauthor_info:hover{background:#eeeb;border:1px solid #cccb;-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);}.bhauthor_info h3{color:#000;margin-bottom:10px;}.bhauthor_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);}.bhauthor_photo{float:right;margin:0 0 0 10px;}.bhauthor_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;}.bhauthor_photo img:hover{background:#FFFFFFborder : 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.bhsocial{list-style:none;margin:10px;overflow:hidden;}.bhsocial li{float:left;background:none !important;padding:0 !important;margin:0 8px;}.bhsocial li a{display:block;width:40px;height:40px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja3I_P3CPqCco-gBDX0rWmJPgmAF9kGE327MwQCY8Hh1SEQAUXssHrK0oPUTHUFwFZEaB-4iPhOU6EE5eHfgBmHXFRqew-_AMMT8-c5BI56uKT367XvTGAVY29xEdivolmE_U8LXMCQYdo/s1600/social.png") no-repeat transparent;text-indent:-99999em !important;}.bhsocial li a:hover{padding:0 !important;}.bhsocial li.rssicon a{background-position:0 0;}.bhsocial li.twicon a{background-position:-50px 0;}.bhsocial li.fbicon a{background-position:-100px 0;}.bhsocial li.gicon a{background-position:-150px 0;}.bhsocial li.rssicon a:hover{background-position:0 -50px;}.bhsocial li.twicon a:hover{background-position:-50px -50px;}.bhsocial li.fbicon a:hover{background-position:-100px -50px;}.bhsocial li.gicon a:hover{background-position:-150px -50px;}.bhlinediv{height:0px;clear:both;display:block;border-top:1px solid #fefefe;border-bottom:1px solid #CCCCCC;}.bhemailbutton{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;}.bhemailbutton: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;}.bhemail{clear:both;width:100%;margin:10px 0;}.bhemailform{position:relative;width:250px;margin:0 auto;}.bhemailinput{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;}.bhemailbutton{-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;}.bhemailbutton{padding:8px !important;}.bhemailform, .bhemailinput{width:98% !important;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:auto;}</style>
HTML CODE
<b:if cond='data:blog.pageType == "item"'><div class='bhauthor_info'><div class='bhauthor_photo'><img alt='author' height='150' src='http://4.bp.blogspot.com/-DvAMSPqX04I/U7tTzMSwQtI/AAAAAAAAADw/4DpImYDUk5U/s1600/1978667_1425596594359843_2008863210_n.jpg' width='150'/></div><h2>This post was written by:</h2><p>I love sharing my knowledge with others. Feel free to <a href="http://bishalcreations.blogspot.com/p/blog-page_23.html" rel="nofollow">contact me</a> with any questions you may have. Please subscribe to the newsfeed and <a href="https://feedburner.google.com/fb/a/mailverify?uri=bishalcreationsweb&loc=en_US" rel="nofollow">get updates through email</a>, share this article with friends, or leave a comment below. New users can read about me <a href="http://bishalcreations.blogspot.com/p/document.html" rel="nofollow"> HERE</a></p><div class="bhlinediv"></div><table width="100%"><tr><td><p style="text-align: center;"> <small>Get Free Email Updates to your Inbox!</small></p><div class="bhemail"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bishalcreationsweb', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="bhemailform"> <input value="Bloggerheroe" name="uri" type="hidden"> <input name="loc" value="en_US" type="hidden"> <input onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' value="Enter your email..." name="email" class="bhemailinput" type="text"> <input class="bhemailbutton" value="SignUp" title="" type="submit"></form></div></td><td><ul class="bhsocial"><li class="rssicon"><a href="http://feeds.feedburner.com/bishalcreationsweb">Rss</a></li><li class="twicon"><a href="http://twitter.com/bishalcreations">Twitter</a></li><li class="fbicon"><a href="http://facebook.com/bishalcreations">FaceBook</a></li><li class="gicon"><a href="https://plus.google.com/1069572602612769b64704">Google +</a></li></ul></td></tr></div></b:if>
STEP 2
- Login to blogger —>Template—>Edit HTML
- Tick on Expand Widget Template check box
- Search for in your blogs HTML
- Copy above CSS code and paste Just Above ]]></b:skin>
- Next Add HTML Code Where You Want To Show It in your blog.
- You have done !!!
- Change Yello olour With Your Social Profiles.Red With Your Bio And Green With Your Image Link.
0 comments:
Post a Comment