Author box Responsive

: 23.16 20 comments

Author box
mungkin sobat pernah melihat Author Box yang terpasang pada sebuah blog,dan yang kita tahu blog/website tersebut sudah responsive sayang sekali saat kita lihat dengan menggunakan resulusi tertentu (dibawah 320px)Author box tersebut sengaja di hilangkan karena Author-box yang dia pasang tidak responsive.Nah kali ini Admin akan memberi solusi buat sobat blogger yang templatenya sudah responsive dan ingin juga pasang Author box yang responsive.Untuk demonya sudah saya gunakan pada blog kesayangan saya ini dan jika sobat ingi tahu cara membuatnya silahkan ikuti petunjuk Admin secara lengkap :
  1. Cari kode ]]></b:skin> atau </style> letakkan css berikut tepat di atasnya 
    #author-box {
        background: none repeat scroll 0 0 #98B7DB;
        box-shadow: 2px 3px 2px #000000;
        margin: 8px 5px;
        min-height: 120px;
        padding: 5px 2px;
        position: relative;
        text-align: justify;
        width: 98%;
    }
    
    #title-content {
        padding: 5px 30px;
        text-align: left;
        text-transform: uppercase;
        color: #fff;
        background: #1274B5;
        position: relative;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        box-shadow: 1px 2px 1px#000;
    }
    
    #title-content:before {
        content: &quot;
        \f040&quot;;font-family: fontAwesome;
        color: red;
        background: blue;
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 5px;
    }
    
    .avatar {
        clear: left;
        float: left;
        margin-bottom: 0.5em;
        margin-right: 0.2em;
        margin-top: 0.2em;
        text-align: justify;
        width: 80px;
        height: 80px;
        position: relative;
        background: red;
    }
    
    .avatar:before {
        content: &quot;
        ADMIN&quot;;position: absolute;
        bottom: -10px;
        left: 7px;
        background: #000;
        color: #fff;
        padding: 0 6px;
    }
    
    .photo-avatar {
        width: 70px;
        height: 70px;
        margin: 5px;
    }
  2. Selanjutnya cari kode <data:post.body/> letak kan html dibawah ini tepat di bawah kode <data:post.body/>berikut kode Html nya
    <div id='author-box'>
        <div id='title-content'>Judul Artikel :<a expr:href='data:post.url' expr:title='data:blog.pageName'><data:blog.pageName/></a></div>
    <div class='avatar'>
      <img alt='photo-avatar' class='photo-avatar' src='http://4.bp.blogspot.com/-C1DZ4OM3orA/Uq6DJNy4bxI/AAAAAAAAC24/cuDF3UPr6cE/s200/mahfid.jpg' title='Mahfid Mayanto'/></div>Terima Kasih Sobat sudah membaca Artikel saya Tentang <i style="color:red;"><data:blog.pageName/></i> Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. 
        Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih</div>
  3. Silahkan sobat ubah bagian Narasi pada html dengan kata kata sobat sendiri lakukan preview dulu jika jika sudah tidak ada error kode silahkankan Save Template..Selamat mencoba
Judul Artikel :Author box Responsive
photo-avatar
Terima Kasih Sobat sudah membaca Artikel saya Tentang Author box Responsive Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih

20 komentar

joe delete 19 Desember 2013 pukul 11.16

wah rumit sekali ya....

Unknown delete 19 Desember 2013 pukul 13.05

Rumit nya yang bagian mana mas ..?

Sopala Multapa delete 24 Desember 2013 pukul 20.38

Rumit apa tinggal nempelin aja ko hehe

Blog Kampret delete 28 Desember 2013 pukul 16.58

Nanti saya terapkan nih author box nya :) koneksi lagi lelet banget.
Oh ya mas saya mau nanya satu lagi nih hehe tapi [OOT]

1. Bagaimana cara komentar ada title? contoh saya mouse saya di arahkan pada Rully Jenar terus muncul muncul title yaitu Rully jenar.

Nah bagaimana agar seperti itu? terima kasih yak pak sebelumnya. Di antos :D

Unknown delete 28 Desember 2013 pukul 18.20

cari kode <div class='comment_name'> terus di bawahnya dikit ada kode seperti ini
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a> silahkan hapus kode <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
kemudian ganti dengan
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a>

Unknown delete 29 Desember 2013 pukul 18.07

keren kang tapi saya nyari yang autor box nya otomatis dengan akun google plusnya jadi disana lengkap nama beserta nama sipenulis.. ada gak ya tutorial seperti ini

Unknown delete 29 Desember 2013 pukul 18.27

http://www.kompiajaib.com/2013/12/membuat-author-box-dengan-google-badge.html

Sopala Multapa delete 30 Desember 2013 pukul 21.46

mampir malam mas ... sambil; kembali membaca ulang karena sempet tertunda hehe

abitalita delete 31 Desember 2013 pukul 09.22

keren kang..sy izin coba coba ya kang... :)

Admin delete 3 Januari 2014 pukul 22.32

sebenarnya untuk responsive Author box kita tinggal memberi tinggi dan lebar dengan persentase bukan berupa px, kalau tidak salah ya kang mahfid.

Admin delete 3 Januari 2014 pukul 22.34

kalau bikin itu yang rumit, kalau tinggal pasang saja rasanya cukup gampang kok mas joe heheh :)

Unknown delete 4 Januari 2014 pukul 07.31

sip...tapi bisa juga dengan px asal kita bisa mengatur media queries nya ,tapi untuk author box cukup pake persentase saja yang agak sulit jika dalam author box itu ada juga social medianya kadang saat kita lihat (Ctrl + Shift+M) bisa jadi berantakan ngak enak di lihat ..

Unknown delete 4 Januari 2014 pukul 18.36

Tinggal di gantung saja kok rumit

Unknown delete 6 Januari 2014 pukul 07.41

mantap om, ijin coba ya :\

Unknown delete 26 Januari 2014 pukul 01.22

keren oom....terimakasih mau berbagi....

Unknown delete 20 Februari 2014 pukul 18.34

tanya om, di template saya koq authornya kadang2 muncul kadang ngak, total kalo saya buka satu2 hanya artikel saja yang ada authornya. itu kenapa ya? <3

Erna Ayuning Nareswari delete 22 Februari 2014 pukul 04.27

tambah ilmu..thx a lot B)

lm_blog delete 10 April 2014 pukul 04.53

:\

Unknown delete 17 Juni 2014 pukul 11.16

Keren Kang tutorial nya, sekalian mau tanya nih, setelah tulisan judul artikel pada author tersebut agar dirubah warnanya sesuai keinginan, bagaimana caranya kang? mohon petunjuknya. Terimakasih

Unknown delete 20 Oktober 2015 pukul 04.44

Keren banget gan.... simak dulu.. kunbal balik jika di respon makasih.

Posting Komentar


Terima Kasih Sobat Sudah:
1. Berkomentar Dengan Sopan
2. Tidak Memasukkan Link Aktif Dalam Form Komentar
3. Berkomentar Sesuai Artikel/Postingan
4. Berilah Informasi Kepada Admin Jika ada script yang Sudah tidak berfungsi
5. komentar Jorok/kasar /berbau Sara/Porno /saya anggap sebagai SPAM
6.untuk memasukkan gambar gunakan <i rel="image">URL Gambar</i>