Author box under Post

Author box κατω απο καθε αναρτηση στο blog

Σε αυτο το αρθρο θα δουμε πως μπορουμε να βαλουμε ενα author box (about the author) και να λεμε 2-3 πραγματακια για τον εαυτο μας κατω απο καθε αναρτηση στο blogger.

Μπορουμε να γραψουμε ποιοι ειμαστε να προσθεσουμε τη φωτογραφια μας και βεβαιως περιεχει κοινωνικα δικτυα ωστε να μπορει καποιος να συνδεθει μαζι μας.

για να το προσθεσουμε πρεπει να παμε στο προτυπο μας - επεξεργασια html και να βρουμε τον παρακατω κωδικο.

<div class=’post-footer-line post-footer-line-1′>
συνηθως υπαρχουν 2 εμεις θελουμε το δευτερο. Τωρα θα πρεπει να κανουμε επικολληση τον παρακατω κωδικο ακριβως κατω απο αυτη τη γραμμουλα

<style>
.wc-aboutauthor{
float:left;
width:500px;
padding:15px;
border:1px solid #ccc;
margin-bottom:15px;
margin-top:15px;
background:url('http://3.bp.blogspot.com/-t5gDiTb7yUc/UjiYfNUgBBI/AAAAAAAACXI/J1tb_tlU5-k/s1600/backgrounds.png');
color:#444444;
-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);
}
.wc-aboutauthor h2
{
color:#b6e026;font-family:Helvetica,Arial;font-weight:bold;text-shadow:#64665b 0px 1px 1px;font-size:28px;margin-bottom:-6px;
}
.wc-aboutpic{
float:right;
margin:0 0 0 10px;
}
.wc-aboutpic img{
border:1px solid #999999;
-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(+5deg);
-moz-transform:rotate(+5deg);-ms-transform:rotate(+5deg);
-o-transform:rotate(+5deg);transform:rotate(+5deg);float:left;
}
.wc-aboutpic img:hover{
background:#FFFFFF;
-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);
}
.wc-aboutsoc img
{
height:35px;
margin-bottom:-13px;
}
.wc-aboutsoc  p
{
font:16px georgia;
color:#ffffff;
background:#b6e026;
display:inline;
border-radius:5px;
padding:5px;
margin-right:30px;
}
</style>
<b:if cond='data:blog.pageType == "item"'>
<div class='wc-aboutauthor'>
<div class='wc-aboutpic'>
<img alt='Author image' height='150' src='profile picture address' width='150'/>
</div>
<h2 >About the Author :</h2>
<p>Μπλα Μπλα μπλα </p>
<div class='wc-aboutsoc'>
<p> Συνδεθείτε μαζι μας : </p><a href='Facebook address'><img src='http://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png' title='Facebook'/></a>    <a href='Twitter address'> <img src='http://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png' title='Twitter'/></a> <a href='Google plus address' > <img src='http://4.bp.blogspot.com/-l6tB4HfZcfY/UjdItwk9-7I/AAAAAAAACW4/iHklkLWO_Fs/s1600/google.png' title='Google plus'/></a></div>
</div>
</b:if>

Προσεχουμε να αλλαξουμε τα κοκκινα γραμματα με τα δικα μας στοιχεια στα κοινωνικα δικτυα και βεβαιως να γραψουμε κατι για τον εαυτο μας. Ακομα θα πρεπει να αλλαξουμε τα μπλε γραμματα με το link της δικης μας εικονα.

http://posftiaxnoblog.blogspot.gr/2015/03/author-box-blog.html#more