Cara Membuat Author Box di Blog



Cara Membuat Author Box di Blog, cara membuat widget profil di blog

Halo sobat Blog Krizeer, apa kabarnya baik kan ?, yaudah kalo baik. Kali ini saya akan membagikan tutorial tentang Cara membuat Author Box di Blog.

penasaran kan seperti apa?, yuk kita lihat dulu screenshotnya :

Nah udah tau kan?, yuk langsung aja kita mulai tutorialnya
Tutorial Membuat Author Box di Blog :
1. Loggin ke Blogger
2. klik ke template
3. Edit HTML
4. Lalu,tambahkan kode di bawah ini di atasnya ]]></b:skin>
/* Author Blog */
.AHSadmin {width:auto; height:83px;padding:5px}
.AHSadmin-gambar {float:left;width:75px;height:75px;margin:4px 1px 0px 0px;border-radius:90em;opacity:0.8;border-top:2px solid #cf2031;border-right:2px solid #0f7dc8;border-bottom:2px solid #2eb31a;border-left:2px solid #eab823;}
.AHSdeskripsi{width:auto; padding:1%;font-family:arial,sans-serif; margin:-85px 0 0 110px; font-size:11px; color:#fff;}
.AHSfb, .AHSgp, .AHStw {color:#fff!important; display:block;font-weight: bold; line-height: 14px; height: 14px; width: 14px; border: 3px solid #444;text-align: center;padding:3px;border-radius:15px;font-size: 13px;text-decoration:none!important;margin: 1px;position:relative;margin-right:0px}
.AHSfb {background: #3B5998;margin-left:73px}
.AHSfb:hover {border-color: #4F77CC; box-shadow: 0 0 3px #4F77CC;}
.AHSgp {background: #D34836;font-size:11px;margin-left:85px}
.AHSgp:hover {border-color: #EB503C; box-shadow: 0 0 3px #EB503C;}
.AHStw {background: #4099FF;margin-left:73px}
.AHStw:hover {border-color: #36D0FF; box-shadow: 0 0 3px #36D0FF;}
nah, setelah itu menuju ke tata letak
lalu, add gadget > HTML/Javascript
tambahkan kode di bawah ini di kotak yang besar itu :v
<!--Author Blog Start --><div class='AHSadmin'><img alt='Yoga Pratama' src='httphttp://lh3.googleusercontent.com/-MRkIW9aCKqk/AAAAAAAAAAI/AAAAAAAAAAA/EdZwfzUCDB4/s96-c/photo.jpg' title="Yoga Pratama" class='AHSadmin-gambar' /><a class='AHSfb' href='http://www.facebook.com/Twish4' rel='nofollow' target="_blank">F</a><a class='AHSgp' href='https://plus.google.com/7049530791492749265' rel='nofollow' target="_blank">G</a><a class='AHStw' href='http://twitter.com/Yoga_TC' rel='nofollow' target="_blank">t</a> <div class='AHSdeskripsi'>Hai, saya <a href=https://plus.google.com/7049530791492749265 title="Yoga Pratama" rel='nofollow' target="_blank">Yoga Pratama</a><br/> saya seorang lelaki yang pendiam, agak malas, tetapi bertanggung jawab. Dan saya ingin belajar tentang CSS.<br/><a style="color:#888;" href="#" target="_blank"> Read More &#187;</a></div></div><!-- Ends -->
Nah,sekarang anda sudah selesai,tetapi itu belum anda setting !

Perhatikan tulisan yang saya warna itu
Ganti tulisan warna merah itu dengan kepunyaan anda sendiri
Untuk Foto,bebas ukuran berapapun,karena udah di atur secara otomatis di cssnya, Untuk yang warna biru juga sama,ganti itu dengan kepunyaan anda sendiri
Nah ini yang agak susah,untuk yang warna orange,juga anda ganti itu,tetapi anda harus menyesuaikan dengan width/lebar footer anda. Untuk demonya anda bisa lihat sendiri di sidebar blog saya.Semoga bermanfaat -_-

Sumber kode : http://ah-shared.blogspot.com/

13 komentar untuk "Cara Membuat Author Box di Blog"

  1. Thx sob ....
    Kunjung balik

    artadeo.blogspot.com

    BalasHapus
    Balasan
    1. Iya sama-sama, trimakasih atas kunjungannya sob :D

      Hapus
  2. Beuh ini dia yang saya ari-cari sob. terimakasih atas share nya :) Izin pasang mas bro

    BalasHapus
    Balasan
    1. Komentar ini telah dihapus oleh pengarang.

      Hapus
  3. gue ngadain award nih http://sky-street.blogspot.com/2013/06/award-best-design-template.html

    BalasHapus
  4. mantap sob....
    . kunbal :) http://indonesiaanonymous.blogspotcom

    BalasHapus
  5. Keren Gan ! Kalau Berkenan Comment Back Ya !
    http://ronald-grant.blogspot.com

    BalasHapus
  6. tk coba gan,,...jgan lupa kunbalnya!!
    http://bagasipedia.blogspot.com/

    BalasHapus
  7. Demonya mana om? apa sama hasilnya kayak di gambar?
    http://www.dailymotion.com/video/x23w4g9_obat-mata-minus-paling-ampuh-087880311822_lifestyle

    BalasHapus
  8. Thanks informasi nya gan jangan lupa berkunjung kesini ya

    BalasHapus

Untuk menyisipkan kode, gunakan tag <i rel="code">Kode disini...</i> atau <i rel="pre">Kode disini...</i>
Untuk menyisipkan gambar, gunakan <i rel="image">URL gambar disini...</i>
Untuk menyisipkan catatan, gunakan <b rel="quote">Tulis catatan disini...</b>
Untuk menciptakan efek tebal, gunakan tag <b>Teks anda disini...</b>
Konversi Kode Back to Top

Back to Top