Cara Membuat Author di blogger yang Responsive Dengan Css

 Berikut ini akan saif share tentang Cara Membuat Author di blogger yang Responsive Dengan Css. lnl adalah judul posting 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 www.blogger.com
    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:#fafafa;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:#61BFE0}
.authorDetails span{display:block;padding-top:3px}
.articleAuthor .authorContent p{line-height:20px;margin-bottom:10px;margin:0;}

untuk mempermudah bisa dilihat pada gambar dibawah ini bila gambar kurang jelas bisa di open new tab bro :D

Lalu cari kode <data:post.body/>  biasanya ada 4 nama <data:post.body/> yang sama kalau ditemplate ane ada pada nomor 3 brother lalu Copy kode dibawah ini, lalu Paste dibawah kode <data:post.body/>

<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/AVvXsEhTxDfSQLRIorsepIGdCjeZCPsPm8qtbyugk39V80hXjusbI2HrcSYmfrXVGoEMfPEhYOelJ2Jccr5imz8nKk2lEZtz0ca4pIyVfUXi5ajop7Cp7gVwWcbciW5ecgvw3Qt82wBCVDq2nqI/w672-h673/saifdesain.jpg' width='120'/>
    </div>
    </div>
    <div class='authorDetails'>
    <h2>Penulis <a href='http://www.saifdesain.com' rel='author' title='Posts by Admin'>www.saifdesain.com</a></h2>
    </div>
    <p>Semoga Artikel blog ini bermanfaat bagi para pengunjung pada umumnya dan pada penulis khususnya, Amien...</p>
    </div> 

Gantilah warna biru diatas sesuai dengan kepunyaan anda brother.
Untuk mempermudah bisa dilihat pada gambar dibawah ini bila gambar kurang jelas bisa di open new tab bro :D

kemudian Save Template

Cara Membuat Author di blogger yang Responsive Dengan Css 2014-12-07T22:23:00-08:00 Rating: 4.5 Diposkan Oleh: Ebook Adsense