Cara Memasang Author Box Di Postingan Blog

Yo yo,Halo sob! Ketemu lagi sama ane si blogger ganteng nan tenar #sok banget dah Kali ini gua akan bagiin Cara Memasang Author Box Di Postingan Blog.Menurut ane sih ini cuman memudahkan aja ya sob.Jadi gk penting-penting amat sih :D Mau coba?Langsung aja yok!

Pemasangan Author Box

1. Beranda Blogger > Template > Edit HTML
2. Cari kode ]]></b:skin> Atau </style> Lalu Pasangkan Kode Berikut Tepat Dibawah Kode Tadi

/* CSS Author Box */
.articleAuthor{overflow:hidden;margin-bottom:10px}
.authorContent{overflow:hidden;background:#4db2ec;padding:0;margin:1px;margin-bottom:0;border:double #fff;}
.authorLeft{overflow:hidden;float:left;margin-right:10px;}
.authorLeft .authorAvatar{overflow:hidden;}
.authorLeft .authorAvatar img{background:#222;display:inline-block;}
.authorDetails{overflow:hidden;margin:10px 0 0 0;}
.authorDetails h2{font-size:14px;color:#fff;font-weight:400;text-transform:uppercase;}
.authorDetails h2 a{color:#fff;background:#71c5f6;padding:4px 8px;display:inline-block;font-size:14px;margin-left:5px;border:double #4db2ec;}
.authorDetails h2 a:hover{color:#71c5f6;background:#fff;border:double #4db2ec;}
.authorDetails span{display:block;padding-top:3px}
.articleAuthor .authorContent p{color:#fff;line-height:20px;margin:0 10px;font-size:12px;}
h2.authortitle{position:relative;overflow:hidden;margin:20px 0;font-size:120%;font-weight:700;padding:4px 8px;text-align:center;text-transform:uppercase;transition:all .5s ease-out}
h2.authortitle:before, h2.authortitle:after {position:absolute;top:51%;overflow:hidden;width:50%;height:2px;content:'\a0';background-color:#ccc;}
h2.authortitle:before{margin-left:-50%;text-align:right;}
h2.authortitle span{position:relative;display:inline-block;padding:5px 10px;margin:0 10px;}

Sobat bisa custom sendiri tampilannya sesuai selera

3.Simpan Template

Penerapan Author Box

Sobat dapat memasangnya di manapun sobat suka,kalo ane pasang di bawah <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h2 class='authortitle'><span>Penulis</span></h2>
        <div class='articleAuthor'>
<div class='authorContent'>
<div class='authorLeft'>
<div class='authorAvatar'>
<img alt='' class='avatar avatar-120 photo dontshowit showit' height='120' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqJoWOquCcefgs3gjItApZICtgNGpD26dGGaKEPm3JmEUJmzOCWstie6OBea_3k_j8W-hDUjw0ubShD3pp-PIMd2xEGbFnxSLRqzf2Zh0GS-EsGQ4EpM9Ns-Ugc6p0Z3dzjOy_NRa-Cmc/s1600/avatartahilalats.png' width='120'/>
</div>
</div>
<div class='authorDetails'>
  <h2>Tentang <a href='http://ferdirr.blogspot.com' rel='author' title='Dipublikasikan Oleh Admin'>Ferdi Rahmad Rizaldi</a></h2>
</div>
<p>Mulai Aktif Blogger Di Tahun 2012 Dengan Kemauan Sendiri Dan Usaha Sendiri.Saya Menjadikan Blog Sebagai Pekerjaan Luang Saya.Masih Pemula Yang Ingin Terus Belajar</p>
</div>
</div>
<div style='clear:both'/>
</b:if>

Terimakasih sob,Silahkan di kreasikan sesuai imajinasi anda.Jika ada kesulitan silahkan bertanya melalui kotak komentar