Membuat Author Box Responsive Dengan Css

Membuat Author Box Responsive Dengan Css

23:27
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
Next
« Prev Post
Previous
Next Post »
Subscribe to: Post Comments (Atom)