Responsive Author Bio widget Box Below Post For Blogger blog - Seoclive

Recent Posts

Responsive Author Bio widget Box Below Post For Blogger blog


How To Add Author Bio widget Box Below Post in Blogger blog
An Author box tells all about the information concerning the writer. This is a common method when it comes to blogs. Most blogger blogs integrate author bio widget bellow post to lead the visitors to their social profiles. Its a regard to the writer of the blog Posts. Without wasting time, let me give you the various types of responsive author bio widget box to use bellow post in blogger.

How To Add Default Author Bio Widget In Blogger

How To Add Default Author Bio Widget In Blogger

Step #1. Go to your Blogger Dashboard and Choose a blog.
Step #2. Now Go To The Lay out section and choose Edit For The post Widget-
Step #3. Once you click the edit button, a new windows will pop up where you’ll be allowed to tick on various option, scroll down and tick the”Show Author’s Profile After the post” option.
Step #4. If you are using a default Blogger template or a modified version of the default template, then you won’t have any problems in getting the author box, just go check any of your posts and you’ll see the Author Box.
Step #5. but, if you are using a custom Blogger template, you’ll have to add some codes to your Blogger template. Go to Template>Edit HTML, then find (use CTRL+F) –

[  [sourcecode language=”plain”]<div class=’post-footer-line post-footer-line-3>[/sourcecode]
Step #6. Paste the following code below the previously given code-
[sourcecode language=”plain”]<b:if cond=’data:blog.pageType == "item"’>
<b:if cond=’data:post.authorAboutMe’>
<div class=’author-profile’ itemprop=’author’ itemscope=’itemscope’ itemtype=’http://schema.org/Person’>
<b:if cond=’data:post.authorPhoto.url’>
<img expr:src=’data:post.authorPhoto.url’ itemprop=’image’ width=’50px’/>
</b:if>
<div>
<a class=’g-profile’ expr:href=’data:post.authorProfileUrl’ itemprop=’url’ rel=’author’ title=’author profile’>
<span itemprop=’name’><data:post.author/></span>
</a>
</div>
<span itemprop=’description’><data:post.authorAboutMe/></span>
</div>
</b:if>
</b:if>[/sourcecode]
]

Step #7. Thats all with Adding Author Box , Click Save!

Adding A Responsive Author Bio widget Box Below Post In Blogger.

Adding About the Author box below every blog post is fairly easy. It gives a professional look to the blog. Author box widgets give way to people who have written the articles for more clarity. Its an essential tool for SEO even for those who include guest writing.
Almost all WordPress websites have employed Author Box Widgets which blogger doesn't have. For that case you have to edit Your template to add some couple of codes to include the author bio box. Bellow i am attaching the available bio boxes examples to be used  or embedded bellow a post content. They have the following responsive properties.
 1 First Widget
Everyone wants to make his Blog or Website more Responsive and professional. Therefore, I thought to share this responsive author box widget for blogger platform users who want to change the look of his blog by using it bellow the post content.

Responsive Author Bio widget Box Below Post In Blogger With Blur Background.

Responsive Author Bio widget Box Below Post In Blogger With Blur Background.

  • Go to your blogger dashboard >> Template >> Edit HTML:
  • Search for the following code by pressing Ctrl+F
[ ]]></b:skin> ]
  • Now just before/above this code add the following piece of CSS code.
[  /*Professional Author Box CSS Code*/
.about-author {
width : 750px;
overflow : hidden;
margin:10px 0px;
border:0px;
    background: #f2f2ef;
    margin: 0 0 30px 0;
    padding: 10px;
    border: 1px solid #EAEDEF;
    overflow: hidden;
    color: #333333;
    font-size: 14px;
    font-family: Georgia, Tahoma, Verdana;
    line-height: 24px;
}
.about-author img {
display: block;
width: 90px;
height: 90px;
margin: 0 1.2em 0 0;
float: left;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-webkit-border-radius: 999em;
-moz-border-radius: 999em;
border-radius: 999em;
border: 2px solid #ddd;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.about-author h3{
font-family:georgia !important;
font-size:18px !important;
margin:9px 0px !important;
color:#666 !important;
border-bottom:2px solid #666 !important;
border-top:0px !important;
}
.about-author p {
margin:0px;
text-align:justify;
color:#666;
}
/*Professional Author Box CSS Code*/ ]
Now search for
[  <data:post.body/> ]
Now just after/below this code add the following piece of HTML code

<div class="about-author">
<h3>About Author:</h3>
<img align="left" src="Paste Your Image URL Here"/><p>Write Something About Yourself</p><br/>
<p>Let's Get Connected: <a href="http://twitter.com/seoclive_" rel="nofollow" target="_blank"><font color="#00aced">Twitter</font></a> | <a href="http://www.facebook.com/seoclive" rel="nofollow" target="_blank"><font color="#3b5998">Facebook</font></a> | <a href="http://plus.google.com/#" rel="nofollow"><font color="#dd4b39">Google Plus</font>
</a></p>
</div> ]

Customization :

  • Paste Your Image URL Here : Add Your Profile Picture
  • Write Something About Yourself picture url to display in the Author Box Widget
  • http://twitter.com/seoclive_ : Replace with your Twitter page URL
  • http://www.facebook.com/seoclive : Replace with your Facebook page Profile URL
  • http://plus.google.com/# : Replace with your Custom Google Plus page URL
 
 1 First Widget

Responsive Author Bio widget Box Below Post In Blogger With Social Share Buttons.

Responsive Author Bio widget Box Below Post In Blogger With Social Share Buttons.

How To Install Your Bio Box Widget Bellow Post.

  • Follow The Easy Steps Bellow To Include The Code To Your Template.
  • Choose Your Blog From The Ones You have That you Want To Include the Widget.
  • Click On Theme On the Lest Side Bar.
  • Select Edit HTML. [ Please Back Up Your Template If You Are A Beginner ]
  • Press on command Ctrl & F .  [ To Display Search Module On The Right Corner ]
  • Now Search for the bellow Code.
 [ <div class='post-footer-line post-footer-line-1'> ]
 You may find the Code Twice In Your Template Codes. But we are after the second code that corresponds the first Paste The Below author Box Code Bellow It. To know if your code is twice in your template, Press on the enter button the second time after showing the first one. If the highlighting color doesn't move then you are going to use the first one.
Paste The below code below the code searched above
[ <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>/*crawlist.net CSS starts*/
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
    .ks-author{
    margin: auto;
    padding: 10px 10px;;
    height:130px;
    width:500px;
    background:#fff;
    border:1px solid #999;
    -moz-box-shadow:0px 0px 15px #999;
    -webkit-box-shadow:0px 0px 15px #999;
    box-shadow:0px 0px 15px #999;}
    .ks-author p {font-size:12px;
    font-family: 'Droid Serif', serif;
    font-weight:100; padding-top:-4px;}
    .ks-author h3{font-size:16px;
    font-family: 'Droid Serif', serif;
    font-weight:600;}
    .ks-avatar img{
        float:left;
    width:100px;height:100px;
    margin: 0px 3px 0px 0px;
    padding: 6px;border:1px solid #ABB7B7;    -moz-box-shadow:0px 0px 5px #999;
    -webkit-box-shadow:0px 0px 5px #999;
    box-shadow:0px 0px 5px #999;}
    .ks-parti { height:130px; float:right; width:380px; }
.ks-sosi { width:300px;}
.ks-sosi img { float:left; margin-left:5px; height:24px; width:24px;}
.ks-sosi img:hover { opacity:.7;      -webkit-transition: all .3s ease;
         -moz-transition: all .3s ease;
           -o-transition: all .3s ease;
          -ms-transition: all .3s ease;
        transition: all .3s ease;float:left; margin-left:5px; height:24px; width:24px;}
/*crawlist.net CSS ends*/ </style><!--crawlist.net widget starts-->
    <div class='ks-author'><div class='ks-avatar'>
<img src='Image Link'/></div>
<div class='ks-parti'>
    <h3 align='left'>About the author :</h3>
    <p align='left'>My name is _ _ _, Ceo of this site.www.seoclive.com enthusiast and have passion to share my idea and creativity with this blog and provide tricks, tips and information for visitors. Thanks for visiting.</p>
<div class='ks-sosi'>
<a href='http://www.facebook.com/your profile' target='_blank'><img src='http://4.bp.blogspot.com/-eGaKlnZU1Io/U1Ss7qyo6zI/AAAAAAAADuc/hbHpSxvb-Dw/s1600/1.png'/></a>
<a href='http://www.twitter.com/your profile' target='_blank'><img src='http://2.bp.blogspot.com/-vjJUkwvSh6M/U1Ss8HnOiUI/AAAAAAAADuo/0fRIEQpEJQc/s1600/2.png'/></a>
<a href='http://plus.google.com/your profile' target='_blank'><img src='http://3.bp.blogspot.com/-o2ChlbwBv70/U1Ss85Q08UI/AAAAAAAADu0/XABHOb3Siss/s1600/3.png'/></a>
<a href='http://www.linkedin.com/your profile' target='_blank'><img src='http://1.bp.blogspot.com/-jp3n48X1aac/U1Ss-MXN8II/AAAAAAAADu8/rOeDyJOUmhs/s1600/4.png'/></a>
<a href='http://www.pinterest.com/your profile' target='_blank'><img src='http://3.bp.blogspot.com/--m7sMpphLW4/U1Ss-Spf50I/AAAAAAAADvE/GNlttVB3yO8/s1600/5.png'/></a>
<a href='http://www.dribbble.com/your profile' target='_blank'><img src='http://1.bp.blogspot.com/-WUr92WT5VFI/U1Ss_xyHRII/AAAAAAAADvM/HONC4X51k40/s1600/6.png'/></a>
<a href='http://www.instragram.com/your profile' target='_blank'><img src='http://4.bp.blogspot.com/-8QvbrNs0-JM/U1StATa16oI/AAAAAAAADvU/w_Zf9TAHrxg/s1600/7.png'/></a>
<a href='http://www.youtube.com/your Chanel' target='_blank'><img src='http://4.bp.blogspot.com/-vbDAC9mElbQ/U1StAim2lBI/AAAAAAAADvY/AnD9Z6Hw0Aw/s1600/8.png'/></a>
</div></div></div><!--crawlist.net widget ends--></b:if>
]
Change The above highlighted code to the  Social profile URL to be included. The above code can also be used straight away to your template by using widget HTML or Javascript Plugin in Blogger layout pannel.
2. Second Widget

Author Box Widget Below Post With Subscribe Button.

Author Box Widget Below Post With Subscribe Button.

How To Install Your Bio Box Widget With Subscribe Bellow Post.

Login to Blogger - Theme  - Edit HTML.
Click on Ctrl & F command and search for ending of head </head>
Copy the CSS code and Paste Right Above It.
Now Search for the bellow Code.
 [ <div class='post-footer-line post-footer-line-1'> ]
 You may find the Code Twice In Your Template Codes. But we are after the second code that corresponds the first Paste The Below author Box HTML Code Bellow It. To know if your code is twice in your template, Press on the enter button the second time after showing the first one. If the highlighting color doesn't move then you are going to use the first one.
CSS 
[
<style>
.mdauthor_info{
float:left;
width:550px;
padding:15px;
border:1px solid #ccc;
margin-bottom:15px;
margin-top:15px;
background:#eee;
color:#000;
}
.mdauthor_info:hover{
background:#eee;
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("http://2.bp.blogspot.com/-IMM_B7aaLQA/T7ObAft4GbI/AAAAAAAADN0/mT6xK72Xe9I/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> ]

HTML

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='mdauthor_info'>
<div class='mdauthor_photo'>
<img alt='author' height='150' src='https://3.bp.blogspot.com/-nd7xDGw9k6E/WowwIdDTlHI/AAAAAAAAAdc/nMkQhgcIje0dKPV4Py3-E_20UuyruyE2ACK4BGAYYCw/s1600/Untitled-1.png\ width='150'/>
</div>
<h2>This post was written by:</h2>
<p>Write here the author short Bio or introduction. The author profile may be maximum 250-300 characters with spaces or 40-55 words long. I Love seoclive.com alot.</p>
<div class="mdlinediv"></div>
<div class="mdemail">
<small style="text-align:center;">Get Free Email Updates to your Inbox!</small>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Seoclive, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="mdemailform">
<input value="MakingDiffrent" 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="mdemailinput" type="text"/>
 <input class="mdemailbutton" value="SignUp" title="" type="submit"/>
</form>
</div>
<ul class="mdsocial">
<li class="rssicon">
<a href="http://feeds.feedburner.com/Seoclive">Rss</a>
</li><li class="twicon">
<a href="http://twitter.com/seoclive_">Twitter</a>
</li><li class="fbicon">
<a href="http://facebook.com/seoclive">FaceBook</a>
</li><li class="gicon">
<a href="#">Google +</a>
</li>
</ul>
</div>
</b:if> ]

How To Display Author Profile and Picture Below Posts Of Blogger Mobile View

  • Ensure it’s already displaying on the desktop view.
    Log in to your Blogger dashboard Area
    Back up your template [ Beginners ] and go to Template & Edit HTML.
  • Click inside the HTML and use CTRL F to find <b:if cond=’data:top.showMobileShare’>
  • Carefully find the ending </div> as seen in the screenshot below:
  • Below the third </div>, copy and paste the code below:

[  <p style=”font-size: 18px; border-bottom: 2px solid #333;”>About Author</p>
<b:if cond=’data:post.authorAboutMe’>
        <div class=’author-profile’ itemprop=’author’ itemscope=’itemscope’ itemtype=’http://schema.org/Person’>
          <b:if cond=’data:post.authorPhoto.url’>
            <img expr:src=’data:post.authorPhoto.url’ itemprop=’image’ width=’50px’/>
          </b:if>
          <div>
            <a class=’g-profile’ expr:href=’data:post.authorProfileUrl’ itemprop=’url’ rel=’author’ title=’author profile’>
              <span itemprop=’name’><data:post.author/></span>
            </a>
          </div>
          <span itemprop=’description’><data:post.authorAboutMe/></span>
        </div>
      </b:if> ]
Thank You for being Part of this good article.I hope that i have impacted some good SEO information that can help you Design your Blogger Blog Best for ranking. Incase you face any difficulty while implementing the following fields please reach me by Commenting bellow Or Contact Me.

No comments

Powered by Blogger.