Cara Membuat Author Box Responsive

By Video Arsip

Author Box adalah sebuah kotak kecil yang berisi informasi mengenai admin blog. Kotak ini umumnya berada di bawah postingan agar mudah dilihat oleh pengunjung situs. Dalam perkembangannya, kotak mungil ini tidak hanya digunakan sebagai tempat menulis biografi saja melainkan juga digunakan sebagai media promosi secara tidak langsung.

Blogger mania yang memanfaatkan websitenya sebagai sarana mencari uang umumnya memakai teknik ini. Untuk membuat kotak author ini juga sangat mudah. Kita hanya perlu menyisipkan beberapa kode css ke dalam template yang kita gunakan. Karena tidak menggunakan javascript, saya pastikan loading blog anda akan tetap stabil.

Berikut cara membuat kotak profil admin di bawah postingan:
1. Login ke www.blogger.com
2. Klik template kemudian edit html
3. Cari kode ]]></b:skin> dengan bantuan CTRL + F
4. Sisipkan kode di bawah ini tepat di atas kode tersebut

/* CSS Author Box */
.box-author{background: #fff;color: #000;margin-top:15px;;padding: 0px border: 1px solid #ccc;box-shadow: 0px 0px 8px 0px rgba(163,163,163,1);}
.articleAuthor{overflow:hidden;margin:5px;border:3px solid #BABABA; }
.authorContent{overflow:hidden;background:#fafafa;padding:5px;margin:1px;margin-bottom:0}
.authorLeft{overflow:hidden;float:left;margin-right:15px;}
.authorLeft .authorAvatar{overflow:hidden;}
.authorLeft .authorAvatar img{display:block;margin:0;padding:8px;background:#e9e9e9;box-shadow:inset 0 0 0 1px transparent;transform:rotate(0) scale(0.95);transition:all 0.4s ease-in-out;}
.authorLeft .authorAvatar img:hover{overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px #fe6d46;transform:rotate(360deg) scale(1.0);}
.authorDetails{overflow:hidden;margin-bottom:5px;}
.authorDetails h2{font-size:18px;color:purple;font-family:'Courgette';font-weight:400;}
.authorDetails span{display:block;padding-top:3px}
.articleAuthor .authorContent p{line-height:20px;margin-bottom:10px;margin:0;}

5. Cari kode </article> atau <data:post.body/> dengan bantuan CTRL + F
6. Pastekan kode di bawah ini tepat di bawah kode tersebut

<div class='box-author'>
<div class='authorContent'>
<div class='authorLeft'>
<div class='authorAvatar'>
<img alt='' class='avatar avatar-120 photo dontshowit showit' height='110' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9orShotSD3bfOere1clML-2fH-usnI-uAegH3N-9HI9NkbrTRimeoEf5N-bRa0UNAU3uY4gM9ZR4RaU3ovBuptqKhqgedrHF46-K1E689fHoUSDzTCoGGZIQRcf3Jizv92DZDu5e06s1u/s1600/wp-profile.jpg' width='100'/>
</div>
</div>
<div class='authorDetails'>
...... isi dengan data biografi anda .......
</div>
</div></div>

7. Simpan template dan lihatlah hasilnya

Keterangan:
Ganti url yang berwarna biru dengan url foto profil anda
Ganti tulisan yang berwarna purple dengan data biografi lengkap anda

Demikianlah tutorial singkat cara membuat kotak biografi responsive di bawah artikel. Semoga tulisan sederhana ini bisa membantu anda dalam mendesain sebuah website yang profesional. Jika anda tidak mau repot dengan kode html yang lumayan rumit, gunakan saja template yang saya bagikan secara gratis di website ini.

Share :

Facebook Twitter Google+