Membuat Author Box Responsive Dengan Css

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.

 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:#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;}


  • Lalu cari kode <data:post.body/>  
  • 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/AVvXsEjYyFkEnlNa-D9d0dhDoFCD5HZxxoYqQC_WFxAahViN7zK6VYoyBcWmrhA0504oleJUtN0IJWtLsHcb_u1cM993ZggwwvjBG1bKviAETUPwwQOYqTucpDStcodL8gS_uU8rZsCTIZ9n4aE/s1600/DSC_0526.JPG' width='120'/>
    </div>
    </div>
    <div class='authorDetails'>
    <h2>About <a href='#' rel='author' title='Posts by Admin'>Admin Lubang Pengetahuan</a></h2>
    </div>
    <p>Semoga Isi Blog Ini Ada Guna Nya Buat Anda, Pengunjung Yang Baik Selalu Meninggalkan Jejak</p>
    </div>
  • Simpan Template
Previous
Next Post »

11 komentar

Click here for komentar
Unknown
admin
November 21, 2014 at 12:27 AM

Jadi lebih unik ya gan,, makasih

Reply
avatar
Unknown
admin
November 21, 2014 at 12:34 AM

Ijin nyobain di blog ane vroh

Reply
avatar
LordKiller
admin
November 21, 2014 at 9:48 PM

wah ini seperti apa ya demonya? kog kayaknya bagus-bagus gituh

Reply
avatar
November 22, 2014 at 5:27 AM

wah keren gan author boxnya responsive lagi,, keren ane coba dulu

Reply
avatar
November 23, 2014 at 4:53 AM

biodata yang singkat di bawah postingan, agar member lebih mengenal blog yang merek kunjungi :) saya bookmark dulu, kalo dirasa cocok pasti saya pasang

Reply
avatar
Hidin
admin
November 23, 2014 at 8:46 PM

previewnya dong bang :(

Reply
avatar
Elzzs Man
admin
November 23, 2014 at 9:56 PM

Keren gan, ijin nyobak di manworo dot kom

Reply
avatar
YOGI ANDRIAN
admin
January 19, 2015 at 12:51 AM

Demo Demo donk gan ^_^
kayaknya bagus nih ^_^

Reply
avatar
February 22, 2015 at 6:24 AM

Nah ini dia tutornya. saya coba dulu mas tutorialnya...

Reply
avatar
April 1, 2015 at 3:04 AM

wah thanks nih gan mau coba dulu

Reply
avatar
Thanks for your comment