Kali ini saya akan share kepada sahabat Blogger tentang Cara Membuat Author Box Keren + Valid HTML5 , tentu anda sudah tahu kan keuntungan valid HTML 5 , selain itu author box ini juga dapat meningkatkan seo karena sudah saya pasang meta dikripsi di setiap gambar dan link
DEMONYA LIHAT BLOG SAYA YANG SATU DI ahmadsuyadi.blogspot.com
Jika anda berminat silahkan ikutin tutorial di bawah ini :
1. Masuk ke akun Blogger anda
2. Pilih Template > Edit HTML 5
3. Cari kode ]]></b:skin>
4. 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/AVvXsEh_yLHJnoNybtHlJ1ID5l01VPMvPyxkUJ2Y1WltvVnxPjpRbeq0-VSFX0LpmicJY12-IqoGmCvPyAqqZGn3H61u6KLI1w44vkIB6R8YlDR47oTfQgNYpLD9wzJivd7cMxyeHFUmoo9crbk/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 */
5. Cari kode <data:post.body/>
6. Copy pastekan kode berikut tepat di bawah kode <data:post.body/>
<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/AVvXsEhZi1oAUaSoMkEKbe9u8dXJ0xrMiaHCiq7XsjcBcI_UHKiPd9L2mUXS93pcs2yT9ifVNtZa7TIDMr_49seR20N48zcKuPVgOrvJ-Sem2043BTFqZwuIYYZNYkqjPKgaXXI5xOHfgRgK3R37/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>
keterangan : ganti tulisan yang berwarna hitam di atas sesuai identitas andaJika ada kendala atau masalah jangan sungkan-sungkan untuk bertanya .
Demikian dari saya wassalamualikum wr.wb.