Προσθήκη author box κάτω από τα posts στον blogger

Αυτό το θέμα είναι για να μας βοηθήσει να προσθέσουμε ένα κομψό author box widget ( κουτί συγγραφέα )κάτω από τις αναρτήσεις στο Blogger. Αυτό το κουτί περιέχει πηροφορίες συγγραφέα εικόνα και εισαγωγή στις διευθύνσεις των κοινωνικών δικτύων. Παρέχει μικρή εισαγωγή του συγγραφέα του blog στους επισκέπτες του κάτω από κάθε ανάρτηση. Αυτό θα συμβάλλει επίσης στην αύξηση οπαδών στα κοινωνικά δίκτυα.

 Αν σε κάποιον αρέσει το blog σας ή το προφίλ σας, τότε αυτός / αυτή μπορεί να σας ακολουθήσει άμεσα στα κοινωνικά δίκτυα σας με τη βοήθεια αυτού του widget. Με τον τρόπο αυτό θα βοηθειθητε ώστε να πάρετε καλύτερη έκθεση στα κοινωνικά δίκτυα. Πως το κάνουμε:
 Βήμα 1: Στο πρότυπο κώδικα του blog σας πατήστε ctrl+f και στο πλαίσιο αναζήτησης που θα ανοίξει βρείτε το  <div class=’post-footer-line post-footer-line-1′>
 Βήμα 2: Επικόλληση ακόλουθου κώδικα ακριβώς από κάτω και αποθηκεύστε το πρότυπο.
 Βήμα 3: Τροποποίηστε τον κόκκινο χρωματιστό κώδικα σύμφωνα με τις ανάγκες σας.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<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" data-pin-nopin="true">
</div>
<h2>
About the Author :</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. <br>
<div class="wc-aboutsoc">
Connect with him on : <br>
<a href="https://www.blogger.com/Facebook%20address"><img src="http://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png" title="Facebook"></a>    <a href="https://www.blogger.com/Twitter%20address"> <img src="http://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png" title="Twitter"></a> <a href="https://www.blogger.com/Google%20plus%20address"> <img src="http://4.bp.blogspot.com/-l6tB4HfZcfY/UjdItwk9-7I/AAAAAAAACW4/iHklkLWO_Fs/s1600/google.png" title="Google plus"></a></div>
</div>
</b:if>


ΚΑΝΕ ΚΙ ΕΣΥ LIKE ΣΤΗ ΣΕΛΙΔΑ ΜΑΣ
×?

Δημοσίευση σχολίου

Νεότερη Παλαιότερη