Membuat Author Box Responsive Dengan Css

Fungsi author box itu sendiri adalah pesan penulis untuk pembaca / pengunjung blog itu sendiri kalo untuk isi nya tergantung penulis ini sendiri biasa terletak pada bawah postingan. Ok mari terapkan ke dalam blog sobat ikutik tutorial di bawah ini.

sumber gambar

 Membuat Author Box Responsive Dengan Css. Itu adalah judul Artikel yang akan saya bagikan kepada para sobat yang selalu mengunjungi blog saya yang sederhana ini, Fungsi author box itu sendiri adalah pesan penulis untuk pembaca / pengunjung blog itu sendiri kalo untuk isi nya tergantung penulis ini sendiri biasa terletak pada bawah postingan. Ok mari terapkan ke dalam blog sobat ikutik tutorial di bawah ini.

• Masuk ke Blogger 
• Dashboard >> Template >> Edit Template 
• Cari kode ]]></b:skin> atau </style>
• Copy kode di bawah ini Diatas ]]></b:skin> atau </style> 

/* CSS Author Box */
.articleAuthor{overflow:hidden;margin-bottom:10px}
.authorContent{overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEN9WderpozsfYE5Ap0kB-LutnwOSwGXvtnVKQn69M0GZN3STPqBqmN2gpVKG_lvxyNeN1p0pT0BgC4uAqprbx5K_mi6Eq_YmqflLtc-uPJ7otKeEBqg2qZeLrLcgr51hWyieJE2XqMeug/s1600/author+ndigit%5Bkecil%5D.JPG);padding:20px;margin:1px;margin-bottom:0}
.authorLeft{overflow:hidden;float:left;margin-right:20px;}
.authorLeft .authorAvatar{overflow:hidden;}
.authorLeft .authorAvatar img{display:block}
.authorDetails{overflow:hidden;margin-bottom:5px;}
.authorDetails h2{font-size:16px;color:#ffffff}
.authorDetails span{display:block;padding-top:3px}
.articleAuthor .authorContent p{line-height:20px;margin-bottom:10px;margin:0;}
/* Selesai. Sumber: http://ndigit-media.blogspot.com */

• Lalu cari kode <data:post.body/> 
• Copy kode dibawah ini, lalu Paste dibawah kode <data:post.body/>

<!-- CSS Author Box -->
<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/AVvXsEi-5yumHFKdiVow-6LGykMZehjI4bs8qaUzxjNRwVpftK-21v6hWGTu51dBDxdQfIekJ_THLgrgCzNDe0GeQKnj1QGzcJBtnwqQD1ZFX9Yl6o6gsmAEY_SAsB4gKGdLR5EHfxYJ7Mht56P9/s1600/andimention.png' width='120'/>
    </div>
    </div>
    <div class='authorDetails'>
    <h2>About <a href='#' rel='author' title='Posts by Admin'>Admin Ndigit Media</a></h2>
    </div>
    <p>Saya hanya blogger biasa yang senang belajar dan berbagi pengetahuan dengan yang lain. Semoga Isi Blog Ini bisa bermanfaat, Pengunjung Yang Baik Selalu Meninggalkan Jejak.</p>
    </div>
<!-- selesai -->

Simpan Template dan lihat hasilnya. Terima kasih dan semoga bermanfaat.

Sumber artikel dengan bebera perubahan