Cara Membuat Author Box / Kotak Tentang Penulis Di Bawah Postingan - cara membuat author box , cara membuat author box dengan tombol jejaring sosial , author box keren ,author box seo mungkin sahabat blogger sudah pernah melihat author box atau dalam istilah lain kotak tentang penulis , dengan cara membuat author box , maka pengunjung dapat mengetahu siapa di balik blog tersebut.
Ikuti langkah-langkah Cara Membuat Author Box / Kotak Tentang Penulis Di Bawah Postingan di bawah ini :
1. Masuk ke akun Blogger anda
2. Pilih Template > Edit HTML 5
3. Cari kode <data:post.body/> gunakan CTRL+F untuk memudahkan pencarian kode tersebut4. Copy pastekan kode berikut tepat di bawah kode <data:post.body/> , jika kode tersebut ada 4 atau lebih sobat pilih saja yang terakhir .
<b:if cond='data:blog.pageType == "item"'>
<div class='tbiauthorbox'>
<div class='tbiauthoravatar'>
<img alt='Penulis Artikel' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtq88yegq1nCleLssPB82YuIqGqY4Vp-pLHK5lAmNmEDGr0VDGyugj8CQ2mcbMc7-FYdWA2SQzB7kxfQaX89xasOFDPRNPleqesEk66nNMWzmQSB5dUBQSVnVcfk9t3eXshtc_UOuvP382/s1600/pizap.com13671396279611.jpg' title=' Siswa MAN 1 Semarang '/>
<span class='tbiauthorlabel'>Penulis</span>
</div>
<div class='tbiauthorcontent'>
<div class='tbiauthorhead'>
<h3><a href='http://ahmadsuyadi.blogspot.com/' target='_blank' title='Ahmad Suyadi'>Ahmad Suyadi</a></h3>
<ul class='tbiauthorsocial'>
<li><a class='authorBlog' href='Link Blog anda' target='_blank' title='Blog'>Blog</a></li>
<li><a class='authorFacebook' href='Link Facebook anda' target='_blank' title='Facebook'>Facebook</a></li>
<li><a class='authorGooglePlus' href='Link Google plus anda' target='_blank' title='GooglePlus'>GooglePlus</a></li>
<li><a class='authorTwitter' href='Link Twitter anda' target='_blank' title='Twitter'>Twitter</a></li>
</ul>
</div>
<p class='bio'>Terimah Kasih telah membaca artikel <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>. Yang ditulis oleh <strong> Ahmad Suyadi </strong> .Pada hari <data:post.dateHeader/>. Jika anda ingin sebarluaskan artikel ini, mohon sertakan <strong>sumber link asli.</strong> Kritik dan saran dapat anda sampaikan melalui kotak komentar. Trimakasih</p>
</div>
</div>
</b:if>
5. Cari kode ]]></b:skin>
6. Copy pastekan kode di bawah ini tepat di atas kode ]]></b:skin>
/* Kotak Author keren By ahmadsuyadi.blogspot.com */
.tbiauthorbox {
position: relative;
margin: 20px auto;
border: 10px solid #3E999E;
padding: 5px;
min-height: 115px;
max-width: 650px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.tbiauthorbox:hover {
border: 10px solid #32BBC2;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.tbiauthoravatar {
background: #fff;
border: 1px solid #ccc9bd;
float: left;
height: 100px;
padding: 2px;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 4px 0 #d9d9d9;
-moz-box-shadow: 0 0 4px 0 #d9d9d9;
box-shadow: 0 0 4px 0 #d9d9d9;
width: 100px;
}
.tbiauthoravatar img {
height: 100px;
width: 100px;
}
.tbiauthorlabel {
font-family: 'lucida sans unicode', 'lucida grande', sans-serif;
background: #333;
color: #fff;
display: block;
font-size: 11px;
font-weight: bold;
line-height: 20px;
height: 20px;
margin-left: -43px;
position: absolute;
bottom: -10px;
left: 50%;
text-align: center;
width: 86px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.tbiauthorcontent {
margin-left: 120px;
}
.tbiauthorhead {
border-bottom: 1px solid #ddd;
margin-bottom: 12px;
padding: 0 160px 3px 0;
position: relative;
}
.tbiauthorbox h3 {
font-family: georgia, serif;
color: #302E29;
font-size: 26px;
font-weight: normal;
line-height: 30px;
margin: 0;
border: none;
text-transform: none;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tbiauthorbox h3:hover {
color: #E65002;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tbiauthorbox h3 a {
color: #302E29 !important;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tbiauthorbox h3 a:hover {
color: #E65002 !important;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tbiauthorsocial {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 4px;
right: 0;
}
.tbiauthorsocial li {
float: left;
margin-right: 4px;
padding: 0;
}
.tbiauthorsocial li a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs07UFHYWmamUSaQpzorfyT_N-hn8Xun3N34B5C8l4b9k89SyCezjKnB4RA-dsA1bPYeZbFUqVF20c2UX_Dzs-yCasVldGY5ZG-GnUHCkLaZhuEzc5VlIdmwUJKcatLvOQG_miLabXrU8/s75/icons_user_links.png) no-repeat 0 0;
color: #C1B7A3;
display: block;
height: 20px;
font-size: 0;
text-indent: -99999px;
width: 20px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tbiauthorsocial li a.authorFacebook {
background-position: -20px 0;
}
.tbiauthorsocial li a.authorGooglePlus {
background-position: -40px 0;
}
.tbiauthorsocial li a.authorTwitter {
background-position: -60px 0;
}
.tbiauthorsocial li a.authorBlog:hover {
background-position: 0 -20px;
}
.tbiauthorsocial li a.authorFacebook:hover {
background-position: -20px -20px;
}
.tbiauthorsocial li a.authorGooglePlus:hover {
background-position: -40px -20px;
}
.tbiauthorsocial li a.authorTwitter:hover {
background-position: -60px -20px;
}
.tbiauthorbox p.bio {
font-family: 'lucida sans unicode', 'lucida grande', sans-serif;
font-size: 12px;
line-height: 18px;
}
.tbiauthorbox p a {
color: #E65002;
}
/* Kotak Author keren By ahmadsuyadi.blogspot.com */
7.Simpan Template dan lihat hasilnya
Itulah penjelasan saya mengenai artikel Cara Membuat Author Box / Kotak Tentang Penulis Di Bawah Postingan , semoga cara yang saya tulis ini anda dapat memahaminya , apabila anda kurang paham atau masih kesulitan anda dapat bertanya melalui form komentar.
Baca Juga Artikel Terkait Lainnya
Silahkan bertanya sesuai dengan artikel yang telah anda baca diatas.
Link aktif otomatis terseleksi ke SPAMMER.
Alasan komentar anda tidak terjawab adalah OOT atau diluar kemampuan Admin.