Cara Membuat Author Box Keren DiBawah Postingan

Redi

Seo

Senin, 16 September 2013

Belum ada komentar

Cara Membuat Author Box Keren DiBawah Postingan - Dimalam ini . kali ini saya akan membuat author box atau biasa yang dikenal dengan kotak tentang penulis yang cukup keren . setelah muter-muter nyari di mbah google akhirnya dapat juga turitorialnya . berikut screnshotnya.

Berikut Cara Membuat Author Box Keren Di Bawah Postingan :

1. Masuk ke akun Blogger sobat
2. Kemudian Pilih Menu Template => EDIT HTML
3.  Setelah itu cari kode  ]]></b:skin>
4. Salin kode dibawah ini tepat diatas kode tersebut

/* 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;}

5. Kemudian cari kode <data:post.body/> ( yang terakhir)

6. Letakan kode dibawah ini tepat di bawah kode tersebut.

<!-- Author Box ahmadsuyadi.blogspot.com Start --><div class='AHSadmin'><img alt='Alif Lo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqZXjB5v7In1fuwHwyTaMDFimVGyQVlxAeIcyIO88EOBCrBbpv6Q1oajaLyHE6OjNw7vg8io3gINvmTKqD83rXxxau39d3_B4sm0AASSk6_PnGxnRWvEpeohdTEevg258nyLuHJtIL5D8/s1600/kyuubi.jpg' title="Alif Lo" class='AHSadmin-gambar' /><a class='AHSfb' href='http://www.facebook.com/mozame.kryosyendz' rel='nofollow' target="_blank">f</a><a class='AHSgp' href='https://plus.google.com/104538829110848188070' rel='nofollow' target="_blank">G</a><a class='AHStw' href='http://twitter.com/KryosyEndz' rel='nofollow' target="_blank">t</a><div class='AHSdeskripsi'>Hai, Perkenalkan Nama Saya Alif Lo. Heheheh. <br/><a style="color:#888;" href="#" target="_blank"> Read More » </a></div></div><!-- Author Box ahmadsuyadi.blogspot.com Ends -->

7. Kemudian simpan Template dan lihat hasilnya

SElain itu sobat dapat menaruh kode yang ke - 6 di footer maupun di sidebar . jadi jika sobat mau membuat author box di sidebar maupun di footer silahkan sobat tambah widget HTML/JavaSript kemudian salin kode yang ke- 6 didalam kolom widget HTML/JavaSript