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 11.16

wah rumit sekali ya....

Mahfid Mayanto delete 19 Desember 2013 13.05

Rumit nya yang bagian mana mas ..?

Ruly Jenar Nakula delete 24 Desember 2013 20.38

Rumit apa tinggal nempelin aja ko hehe

Muhammad Luthfi delete 28 Desember 2013 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

Mahfid Mayanto delete 28 Desember 2013 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>

Friska Lee delete 29 Desember 2013 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

Mahfid Mayanto delete 29 Desember 2013 18.27

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

Ruly Jenar Nakula delete 30 Desember 2013 21.46

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

Aulia MP delete 31 Desember 2013 09.22

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

Leony Li delete 3 Januari 2014 22.32

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

Leony Li delete 3 Januari 2014 22.34

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

Mahfid Mayanto delete 4 Januari 2014 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 ..

Fian MT delete 4 Januari 2014 18.36

Tinggal di gantung saja kok rumit

Aziezie Maihendra Lubis delete 6 Januari 2014 07.41

mantap om, ijin coba ya :\

cupin synyster vegeance delete 26 Januari 2014 01.22

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

Roni Nyul delete 20 Februari 2014 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

Ash Nareswari delete 22 Februari 2014 04.27

tambah ilmu..thx a lot B)

Carlos A. Soza delete 10 April 2014 04.53

:\

Marvox bloodygore delete 17 Juni 2014 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

Andre Lee delete 20 Oktober 2015 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>