Membuat Author Box

Tutorial kali ini kita akan membahas tentang Bagaimana membuat author box di blogspot yang biasanya terletak di bawah setiap postingan. Author box ini nantinya akan digunakan sebagai kolom About mengenai profil dari penulis dan pemilik blog itu sendiri atau yang lebih dikenal dengan sebutan Admin blog.

Untuk membuat kotak Admin blog ini caranya cukup sederhana, Langsung saja kita lihat dan perhatikan caranya dibawah ini :

1. Masuk/ Login ke blogger
2. Pilih menu Rancangan terus centang pada Expand Widget Template
3. Copy paste kode berikut sebelum kode ]]></b:skin>
   

   /*-----Author Box------*/
   #author-box{
   float:left;
   padding:10px;
   width:500px; /* Lebar dari Author Box */
   background:#E2F3FB; /* Warna Background dari Author Box */
   margin:0 0 0 -30px;
   position:relative;
   -moz-box-shadow:3px 3px 5px rgba(190, 200, 211, 0.5);
   box-shadow: 3px 3px 5px rgba(190, 200, 211, 0.5);
   -webkit-box-shadow: 3px 3px 5px rgba(190, 200, 211, 0.5);
   z-index: 100;
   }
   .author-corner{
   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYOpIqsy5Wy9AmTJ9AB9jWKLM2kCy455jASIpmqGy0SUJBQiV_YIXhnTprxlAq1egN5BA2sEzpFDLNYCR98vGocdN3V9p-_N5BSHR3V_m76mHpN_aPNhp9SdzUB2uiDH24TA-NowoBh3LV/s1600/corner.png) no-repeat left top; bottom:-13px;
   height:12px;
   left:2px;
   position:absolute;
   width:12px;
   }
   .author-avatar{
   float:left;
   margin:0 20px 0 0;
   }
   .author-avatar img {
   border: 3px solid #fff;
   }
   .author-text{
   float:left;
   width:350px;
   }
   .author-text p{
   margin: 0;
   padding: 0;
   }
   .author-text h3 {
   font-size:17px;
   }




4. Berikutnya cari (Ctrl + F) kode <data:post.body/>, Jika sudah ketemu copy paste kode berikut setelah kode di atas
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='author-box'>
   <div class='author-avatar'>
   
   <img alt='' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUz4b4QzSLFU97aqZouG9HAcbarfBnYI5MJdqz9x4Mu01Ji0WLHfgcIpqVT3G6pcE6TAUXSf6HfjS8R3WLT840GtJw_DeJ4q11Is3cb66QLcyW-lZIOOMmV7LOyd3NE4ypC8v34Y_RxeE/s1600/grav.png' width='50'/>
   </div>
   <div class='author-text'>
   <p><h3>About The Author : <a href='#YOUR LINKS HERE' title='Posts by admin'>Your Name</a></h3>
   Write something about yourself here. You can follow him on <a href='http://twitter.com/your link' target='_blank' title='Follow @Twitter'><b>Twitter</b></a> and you can connect with him on <a href='http://www.facebook.com/your link' target='_blank' title='Find me in Facebook'><b>Facebook</b></a><br/>
   </p>
   </div>
   <div class='author-corner'/>
   </div>
   </b:if>




5. Save Template dan lihat hasilnya!
6. Good Luck..

^^ CATATAN Edit pada kode yang berwarna orange, Edit sesuai kebutuhan anda!

Share and enjoy!

Tweet

Maybe you might also like