Membuat Author Box Blogger Dengan Sosial Media

Tutorial Blogger Membuat Author Box Di Bawah Postingan - Author Box pada blog memiliki banyak sekali manfaat, selain agar pengunjung dapat mengenali content creator nya, Author Box pun dapat mempercantik tampilan blog.

Kali ini saya akan membagikan cara membuat Author Box dengan sosial media nya. Jadi, pemilik blog dapat membagikan akun sosial media milik nya kepada para pengunjung blog.

Kurang lebih tampilan Author Box nya seperti pada gambar di atas. Yuk simak cara membuat nya.

CARA MEMBUAT AUTHOR BOX BLOGGER

Berikut step by step membuat Author Box dengan sosial media.

Pertama :

Buka dasbor blogger dan masuk ke halaman template, kemudian edit HTML.

Kedua :

Kemudian cari kode di bawah ini, gunakan CTRL + F agar lebih mudah mencari nya :

 <div class='post-footer-line post-footer-line-1'> 

Ketiga :
Copy kode di bawah ini dan paste tepat di bawah kode di atas.

 <div class="beh-entry-author">
<div class="author-header main-color-bg">
<h4 class="title">
<a rel="author" href="#">Author name Here</a>
</h4>
</div>
<div class="author-wrap">
<div class="author-avatar">
<img class="avatar avatar-80 photo" width="80" height="80" src="Author profile image link here" alt="">
</div>
<div class="author-description">
Author bio goes here.
<div class="author-link">
<a rel="author" href="#">
Facebook
<span class="meta-nav">?</span>
</a>
</div>
</div>
</div>
</div>

<div class="entry-social">
<div class="fb">
<a target="_blank" href="Your_Facebok_Page">Facebook</a>
</div>
<div class="twitter">
<a target="_blank" href="Your_twitter_Profile">Twitter</a>
</div>
<div class="gplus">
<a target="_blank" href="Your_Googleplus_Follow">Google+</a>
</div>
<div class="linkedin">
<a target="_blank" href="Your_Linkedin_Profile">Linkedin</a>
</div>
<div class="pinterest">
<a target="_blank" href="You_Pinterest_Page">Pinterest</a>
</div>
<div class="delicious">
<a target="_blank" href="Your_Delicious_Profile">Delicious</a>
</div>
<Script Language='Javascript'>
<!-- HTML Encryption provided by iWEBTOOL.com -->
<!--
document.write(unescape('%3C%70%20%73%74%79%6C%65%3D%22%20%6C%69%6E%65%2D%68%65%69%67%68%74%3A%30%70%78%3B%20%66%6F%6E%74%2D%73%69%7A%65%3A%37%70%78%3B%20%66%6F%6E%74%2D%77%65%69%67%68%74%3A%62%6F%6C%64%3B%20%74%65%78%74%2D%61%6C%69%67%6E%3A%72%69%67%68%74%22%3E%3C%61%20%73%74%79%6C%65%3D%22%63%6F%6C%6F%72%3A%23%44%33%44%33%44%33%3B%22%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%62%6C%6F%67%67%69%6E%67%65%68%6F%77%2E%63%6F%6D%22%3E%50%6C%75%67%69%6E%20%62%79%3A%20%42%6C%6F%67%67%69%6E%67%65%68%6F%77%2E%63%6F%6D%3C%2F%61%3E%3C%2F%70%3E%20'));
//-->
</Script>
</div>

<style>

.entry-social {
    margin-bottom: 20px;
    overflow: hidden;
}
.entry-social a {
    color: #FFFFFF !important;
    display: block;
    font-family: "Open Sans","Tahoma","Verdana","Arial",sans-serif;
    font-weight: 600;
    padding-left: 20px;
}
.entry-social div {
    float: left;
    margin-right: 10px;
    width: 138px;
}
.entry-social .fb a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwU78ViDMQuOWlqNtMOAVo6rUkPPMOo41kd5ed02lqs9UWLrKczXD74Cg7nrfokqU8oFSGoVhlGGRwx5Ahnv66iFMcysR6wRaboZ1lpNvKwCgUDeZO5UbQ-D91grrM-QbBMNWQcEz7P_je/s1600/fb14.png") no-repeat scroll 10px center #3B5999;
    padding: 7px 10px 7px 26px;
}
.entry-social .fb a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwU78ViDMQuOWlqNtMOAVo6rUkPPMOo41kd5ed02lqs9UWLrKczXD74Cg7nrfokqU8oFSGoVhlGGRwx5Ahnv66iFMcysR6wRaboZ1lpNvKwCgUDeZO5UbQ-D91grrM-QbBMNWQcEz7P_je/s1600/fb14.png") no-repeat scroll 10px center #324B81;
}
.entry-social .twitter a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBHoDCvnG6Ai8Kd92283fKXV8ogN8auCdzoHAcCwRnyEIx4rEi5neqbqC0wLqPpsBsB900Lwq7e26YCdWTeHkc6ByFzXvJ4ENNo87VI-1Ar35bJZ-4bMReV_OdF32GDfsvzc0FMXkaYcec/s1600/twitter14.png") no-repeat scroll 8px center #01BBF6;
    padding: 7px 10px 7px 32px;
}
.entry-social .twitter a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBHoDCvnG6Ai8Kd92283fKXV8ogN8auCdzoHAcCwRnyEIx4rEi5neqbqC0wLqPpsBsB900Lwq7e26YCdWTeHkc6ByFzXvJ4ENNo87VI-1Ar35bJZ-4bMReV_OdF32GDfsvzc0FMXkaYcec/s1600/twitter14.png") no-repeat scroll 8px center #01A7DE;
}
.entry-social .gplus a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifTwJFJ61VnnsYU7-PSSkYRrmKK2GcN6Mr5QXa241lmpegb8Vb8lP7wp_djnBFkQoV9jAX4HMjUu9-WHEUiaaBLdCgsOT-ZBC_X5BKkbiUo154CZ9QE2OLZHXS4TtFtik2IlixRVWIDdzU/s1600/gplus14.png") no-repeat scroll 10px center #D54135;
    padding: 7px 10px 7px 32px;
}
.entry-social .gplus a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifTwJFJ61VnnsYU7-PSSkYRrmKK2GcN6Mr5QXa241lmpegb8Vb8lP7wp_djnBFkQoV9jAX4HMjUu9-WHEUiaaBLdCgsOT-ZBC_X5BKkbiUo154CZ9QE2OLZHXS4TtFtik2IlixRVWIDdzU/s1600/gplus14.png") no-repeat scroll 10px center #BA3227;
}
.entry-social .linkedin a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPeW9yNUbbeiNUCcJoQ7PePtyyqiIRuaJ4OkKs-qIPDBEssu65g8tUfSlCDjeSYgNDdG3hGu7yNH0aft7780vqeYmTbs1AeiYZV1Yw2fu0B_w6hEbsD2Em40UM-gnlghJcGXU3dSmiXYdW/s1600/linkedin14.png") no-repeat scroll 10px center #167FB1;
    padding: 7px 10px 7px 35px;
}
.entry-social .linkedin a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPeW9yNUbbeiNUCcJoQ7PePtyyqiIRuaJ4OkKs-qIPDBEssu65g8tUfSlCDjeSYgNDdG3hGu7yNH0aft7780vqeYmTbs1AeiYZV1Yw2fu0B_w6hEbsD2Em40UM-gnlghJcGXU3dSmiXYdW/s1600/linkedin14.png") no-repeat scroll 10px center #136F9B;
}
.entry-social .pinterest a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqNCiICaM6Gw4ssjjjL8rclsmyLPfGki3FyCa-2-u9ETBtYw73B3FyDCvxauPvpl4olbVkxVEQRgOo1BMw4aK5b5K3LThwD2zT-bdXD47XdF3i1W03pxp45KK4xor7pnn6LkPFdLQTGRyO/s320/pinterest14.png") no-repeat scroll 10px center #CB2027;
    padding: 7px 10px 7px 32px;
}
.entry-social .pinterest a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqNCiICaM6Gw4ssjjjL8rclsmyLPfGki3FyCa-2-u9ETBtYw73B3FyDCvxauPvpl4olbVkxVEQRgOo1BMw4aK5b5K3LThwD2zT-bdXD47XdF3i1W03pxp45KK4xor7pnn6LkPFdLQTGRyO/s320/pinterest14.png") no-repeat scroll 10px center #B01C23;
}
.entry-social .delicious a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj5_CWMQwyYG1isTGgGQYFiLPtdElcoMBQa2wzRhlyFsPs8NTJiS-iXISYMOVUegewWCcBeFdeAPs6vZiRqwISaaMumXaVQdRMtJrBcB4SXjvM9j2dZOrKid0wP4HFngzkYrLimMRmOI8v/s320/delicious14.png") no-repeat scroll 10px center #3173D1;
    padding: 7px 10px 7px 32px;
}
.entry-social .delicious a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj5_CWMQwyYG1isTGgGQYFiLPtdElcoMBQa2wzRhlyFsPs8NTJiS-iXISYMOVUegewWCcBeFdeAPs6vZiRqwISaaMumXaVQdRMtJrBcB4SXjvM9j2dZOrKid0wP4HFngzkYrLimMRmOI8v/s320/delicious14.png") no-repeat scroll 10px center #2963B8;
}
.entry-social .delicious {
    margin-right: 0;
}

.beh-entry-author {
    margin-bottom: 20px;
}
.beh-entry-author .author-header {
    padding: 1px 15px;
}
.beh-entry-author .author-header h4 a:hover {
    color: #000000;
}
.beh-entry-author .author-header h4 a {
    color: #FFFFFF;
}
.beh-entry-author .author-header h4 {
    color: #FFFFFF;
    font-size: 15px;
    text-transform: uppercase;
}
.beh-entry-author .author-wrap {
    border: 1px solid #EEEEEE;
    overflow: hidden;
    padding: 12px 15px;
}
.beh-entry-author .author-avatar {
    float: left;
    height: 80px;
    margin-right: 30px;
    width: 80px;
}
.beh-entry-author .author-link {
    margin-top: 5px;
}
.main-color-bg {
    background: none repeat scroll 0 0 #2BBFF6;
}
.beh-entry-author a {
    color: #3A3A3A;
    outline: 0 none;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}
.entry-social a {
    color: #3A3A3A;
    outline: 0 none;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}

</style> 

Kostumisasi Author Box Blogger

Untuk mengedit Author Box nya silahkan ganti teks teks di atas, Ganti Nama Author, Foto Author atau link foto nya dan ganti link sosial media nya dengan link sosial media Anda. Selesai dan silahkan lihat hasil nya.