How To Make Owner Bio Box Under Blog Post

Written by : Unknown | 11:29:00 AM | 0

♥ ASSALAMUALAIKUM ♥


If there is anyone who is interested, please follow all the instruction properly to get good results. Use this box to display information about the author's name, entry category, date when, How many times have commented and viewed by the viewer.Also to subsribe via email as well as other social accounts.

Author Bio
Owner Bio Box I Mean By Image Show As Above
1. Log In @ Click to Dashboard> Layout> Edit HTML> Tick Expand Widget Templates [make sure you first backup your template before  start of this tutorial ... if not so at least you already have backup template.

2. Find the code ]]></ b:skin by using the box find [Ctrl + F]

3. Copy and paste the code below, on or before the code ]]></b:skin.

/************************************************
* Owner Bio Box*
************************************************/
#authorinfo{
margin:0 0 5px;
padding: 4px;
background: #eee;
background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));
border: 1px solid #fff;
border-radius: 10px;
-webkit-border-radius: 10px;-moz-border-radius: 10px;
-webkit-box-shadow: #600 0 2px 12px;
-moz-box-shadow: #600 0 2px 7px;
width:auto;text-shadow:0 1px 0 #FFFFFF;
}
#authorinfo .informasi {
line-height: 16px;margin:0;
padding:2px;
height:120px;
}
#authorinfo .informasi a {
text-decoration:none !important;
}
#authorinfo img {
float:left;
margin: 2px 8px 2px 2px;
padding:0;
width:110px;
height:110px;
border:2px solid #999;
}
#authorinfo .informasi ul, #authorinfo .informasi ul li {
margin:0;
padding:0;
list-style-type:none;
}

This section should be changed according to your own creativity ... in terms of color, shape and everything ... If you do not want change any ,just use code above is already beautiful.

4. Next find the code <div class='post-footer-line post-footer-line-3'> this code below and paste it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='authorinfo'>
<div class='informasi'>
<a href='[Profile Link]'><img src='[Profile Picture]'/></a>
<ul>
<li>Article Written By : <a href='[Profile Link]' target='_blank'><b:if cond='data:top.showAuthor'><data:post.author/></b:if></a></li>
<li>Published On : <b:if cond='data:top.showTimestamp'><b:if cond='data:post.url'><a expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a></b:if></b:if></li>
<li>On Category : <b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if></b:loop></li>
<li>Have Read About <a expr:href='data:blog.homepageUrl'><script src='http://abu-farhan.co.cc/counter/counter.php' type='text/javascript'/></a> Times, <a href='#comment-form'><b:if cond='data:post.numComments == 1'>1<b:else/><data:post.numComments/></b:if></a> Comment</li>
<li>Subsribe <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> via <a href='http://feeds.feedburner.com/gurlalush' target='_blank' title='Langgan Artikel via RSS Feed'>RSS Feed</a></li>
Add As A Friend <a href='http://facebook.com/sweetiemie' target='_'>Facebook</a> dan <a href='http://twitter.com/sweetiemie' target='_'>Twitter</a>
</ul>
</div>
</div>
</b:if><br/>


The [Profile Link],you have to put a link on your personal information,@Bio Data

Part [Profile Photo], you have to put a link of your image that you want to look at the box .

Part I with the color RED. you change according to your desired section.

Finally, I share that with the GREEN colored, you need to add your own link.

5. You can save [make sure you save first if the preview does not seem right for this box will only be seen when the entry is opened] and see the result ... Happy Trying!

Credited To   Eriyza Qistina
Sharing The Love :)

Leave A Comment , Thank you! 😍

Note : All comments are moderated manually by real humans, so you won't see them appearing immediately.

For Non-Bloggers
Please select profile & click "Name/URL" If you do not have any profiles on any those listed. (Leave the URL empty).

It's harsh to call you Anonymous , So please Leave at least a Name.