Cara Buat Author Box dengan Social Media Icons
 |
| Author Box With Social Media |
Selain itu, dengan adanya Author Box yang dilengkapi dengan sosial media icons juga sangat bermanfaat agar semua para pembacanya dapat menghubungi pemilik blog tersebut saat mereka memiliki keluhan ataupun pertanyaan seputar artikel yang mereka baca.
#CARA MEMBUAT AUTHOR BOX DENGAN SOSIAL MEDIA DI BLOGGER
Baiklah, yang sudah tidak sabar untuk memasang author box dengan social medianya silahkan ikuti langkah-langkah berikut ini.
Masuk ke Dashboard blogger seperti biasanya.
Kemudian, Silahkan masuk kemu Template dan klik Edit HTML
Selanjutnya cari kode <data:post.body/> dan letakkan kode dibawah ini tepat dibawah kode tersebut.
<!-- deskripsi penulis -->
<b:if cond='data:blog.pageType == "item"'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='#' rel='author'><data:post.author/></a></h4>
<p>
Seorang Blogger pemula yang sedang belajar
<data:post.authorAboutMe/>
</p>
<div class='authorsocial'>
<a class='img-circle1' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle2' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='img-circle3' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>
<!-- deskripsi penulis end -->
Kemudian masukkan kode CSS dibawah ini tepat sebelum kode ]]></b:skin> ataupun </style>
/* CSS Author Box */
.authorboxwrap{
background: #fff;
margin: 0px 0px -4px;
padding: 15px;
overflow: hidden;
border: 1px solid #f0f0f0;
}
.avatar-container {float:left;margin-right:20px;}
.avatar-container img{width:110px;height:auto;}
.author_description_container h4{font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#00b02a}
.author_description_container h4 a:hover{color:#333}
.author_description_container p{margin:0;color:#888;font-size:95%;margin-bottom:8px}
.authorsocial a{display:inline-block;text-align:center;margin-right:10px}
.authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:2px;transition:all .3s;}
.authorsocial a:nth-child(1) i {background:#2d609b;color:#fff; border-bottom: 4px solid #273d6b;
border-radius: 0px 15px 0px 15px;}
.authorsocial a:nth-child(2) i {background:#19bfe5;color:#fff; border-bottom: 4px solid #2a7bab;
border-radius: 0px 15px 0px 15px;}
.authorsocial a:nth-child(3) i {background:#eb4026;color:#fff; border-bottom: 4px solid #902319;
border-radius: 0px 15px 0px 15px;}
.authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) i {opacity:0.90;}
Jika sudah selesai simpan Templatenya dan silahkan lihat blognya, jika gak ada kesalahan saat pemasangan kode diatas, maka author box akan muncul.
Selesai
Itu saja tutorial cara buat author box semoga dapat membantu dan bermanfaat bagi semua para blogger. Jika ada pertanyaan silahkan tanyakan pada kolom komenta. Oh iya, tetap kunjungi XDTPD Blogs karena pada blog ini akan selalu mengupdate berbagai artikel menarik lainnya yang patut untuk dibaca.
Comments
Post a Comment