Cara Membuat Author Box dibawah Postingan

Cara Membuat Author Box dibawah Postingan - Ficri Pebriyana
Cara Membuat Author Box dibawah Postingan - Author box atau kotak penulis merupakan suatu pesan yang disampaikan author atau penulis blogg kepada pembaca blog, entar apa pesan yang akan disampaikan tergantung kita sendiri sebagai pemilik blog tersebut. Dengan menggunakan Author Box seperti ini biasanya foto kita bisa tampil di hasil pencarian google. Author box dibawah postingan ini sudah ada fitur share artikel yang akan mempermudah pembaca blog membagikan artikel Anda ke berbagai social media sperti Facebook, Twitter, Google+ dan Lintasme.

Cara membuat author box dibawah postingan blog seperti ini memang cukup mudah Anda hanya perlu memasang kode CSS dan juga HTML setelah itu mengganti beberapa kode yang diperlukan lalu selesai. Author Box ini juga sudah valid html5 jadi Anda tidak usah takut kalau blog Anda tidak akan valid html5 dengan kode ini. Langsung saja bagi Anda yang ingin memasang author box dibawah postingan blog silahkan baca tutorialnya dibawah ini :

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode dibawah ini, lalu Paste diatas kode ]]></b:skin>
/*BOX AUTHOR*/
.boxauthor{position:relative;border:1px solid #000;background:#eee;box-shadow:0 0 5px #444 inset;margin:25px 0 15px;padding:10px}
.boxtitle h3{color:#000;font:bold 14px Electrolize;background:#eee;width:103.3%;display:block;position:relative;border:1px solid #000;box-shadow:0 0 5px #444 inset,0px 0 5px #000;margin:0 0 0 -22px;padding:7px 0 7px 25px}
.boxtitle h3:before{content:&#39;&#39;;position:absolute;bottom:-10px;left:0;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px}
.boxtitle h3:after{content:&#39;&#39;;position:absolute;bottom:-10px;right:0;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}
.boxauthor_photo{float:right;background:#eee;position:relative;z-index:999;box-shadow:0 0 5px #000;margin:-21px 0 5px;padding:30px 5px 5px}
.boxauthor_photo:before{content:&#39;&#39;;position:absolute;top:0;right:135px;width:0;height:0;border-color:transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}
.boxauthor_photo:after{content:&#39;&#39;;position:absolute;top:0;right:-10px;width:0;height:0;border-color:transparent transparent #333;border-style:solid;border-width:0 10px 10px 0}
.boxauthor_photo img{width:120px;height:120px;border:2px solid #444}
.boxcontent{font:12px/18px Electrolize,sans-serif;text-align:justify;color:#000;float:left;top:5px;left:0;display:block;position:relative;width:420px}
.boxsocial{background:#eee;margin-left:-22px;width:100%;overflow:hidden;border:1px solid #000;box-shadow:0 0 5px #444 inset,0px 0 5px #000;padding:5px 5px 5px 40px}
.boxsocial :before{content:&#39;&#39;;position:absolute;bottom:0;left:-12px;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px}
.boxsocial :after{content:&#39;&#39;;position:absolute;bottom:0;right:-12px;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}
.boxsocial a{text-align:center;background:#111;display:block;color:#fff!important;font:bold 12px Electrolize,sans-serif;text-decoration:none;border:1px solid #000;transition:all 1s ease;box-shadow:2px 2px 0 0 rgba(51,51,51,1)inset;padding:7px 0}
.boxsocial a:hover{box-shadow:0 0 5px #000;border:1px solid #fff}
.boxsocial div{float:left;margin-right:6px;width:88px}
.boxsocial .boxsocialtitle{font:bold 12px Electrolize,sans-serif;text-align:center;text-transform:uppercase;display:block;width:107px;border:1px solid #000;box-shadow:0 0 5px #444 inset;padding:7px 22px}
5.  Lalu cari kode <data:post.body/>
6. Copy kode dibawah ini, lalu Paste dibawah kode <data:post.body/>
<div class='boxauthor'>
<div class='boxauthor_photo'>
<img alt='Ficri Pebriyana' src='https://lh6.googleusercontent.com/-5KuwPTR39qI/AAAAAAAAAAI/AAAAAAAAA3k/jdTIAylw8IA/photo.jpg' title='Ficri Pebriyana'/>
</div>
<div class='boxtitle'>
<h3>Author : <a expr:href='data:post.authorProfileUrl' rel='author' target='_blank' title='Ficri Pebriyana'><data:post.author/></a></h3></div>
<div class='boxcontent'>
Terimakasih, telah membaca artikel mengenai <b><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></b>. Semoga artikel tersebut bermanfaat untuk Anda. Mohon untuk memberikan 1+ pada <a href='https://plus.google.com/+FicriPebriyana?rel=author' rel='author' target='_blank' title='Google+'>Google+</a>, 1 Like pada <a href='https://www.facebook.com/FicriPebriyana' rel='me' target='_blank' title='Facebook'>Facebook</a>, dan 1 Follow pada <a href='https://twitter.com/FicriPebriyana' rel='me' target='_blank' title='Twitter'>Twitter</a>. Jika ada pertanyaan atau kritik dan saran silahkan tulis pada kotak komentar yang sudah disediakan.
</div>
<div class='boxsocial'>
<div class='boxsocialtitle'>
Share Artikel
</div>
<div class='boxfb'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'>Facebook</a>
</div>
<div class='boxtwit'>
<a expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'>Twitter</a>
</div>
<div class='boxgplus'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'>Google+</a>
</div>
<div class='boxltsme'>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' target='_blank' title='Share ke Lintasme'>Lintasme</a>");
//]]>
</script>
</div>
</div>
</div>
7. Klik Simpan Template

Catatan :
- Ganti kode Ficri Pebriyana dengan Nama Anda.
- Ganti kode FicriPebriyana dengan ID Anda (Facebook, Google, dan Twitter).
- Untuk mengganti warna kotak penulis atau author box silahkan pilih warnanya disini Kode Warna.
- #eee adalah warna dasar (background).

Sekian artikel mengenai Cara Membuat Author Box dibawah Postingan. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

50 Komentar untuk "Cara Membuat Author Box dibawah Postingan"

  1. berkunjung dikamis sore, salam persahabatan ya

    BalasHapus
    Balasan
    1. Makasih mas ficri visit ya ... http://wanda-awang.blogspot.com/ :))

      Hapus
  2. Ini nih yang bikin membedakan komen admin dg yang laen

    BalasHapus
    Balasan
    1. bukan mbak hehe :D
      kalau membedakan komentar admin itu di edit dibagian css komentar, kalau ini kotak kecil untuk profil si penulis atau admin blog :)

      Hapus
  3. wahhhhh .. kerennnnn :D jadi kpengen make author Box nihh hehe

    BalasHapus
  4. Keren mas bentuknya kayak design robot

    BalasHapus
  5. waw, keren mas author box nya, ijin comot kodenya mas, buat ngeganti author box di blog saya

    BalasHapus
  6. Bagus dan keren nih Mas Ficri author box nya, saya coba nih
    Pas buat di pajang di blog saya, ijin pakai scriptnya yah Mas? makasih

    BalasHapus
  7. waduh ternyata kodenya panjang juga ya mas, jadi puyeng deh saya, nanti ah kalau sudah tidak puyeng saya praktekan di belog saya

    BalasHapus
  8. wah keren mas tutorialnya

    BalasHapus
  9. Keren Nih.. Nanti Ku Pasang Makasih Dah Share !! :D

    BalasHapus
    Balasan
    1. iya silahkan dicoba,
      oke sama-sama, semoga bermanfaat.... =D

      Hapus
  10. keren mas, saya sudah praktekin dan pasang di blog saya..

    BalasHapus
  11. mas saya masih belom berhasil nih author lama bawaan blogger coba mas cek di http://jcowbesaba.blogspot.com/2013/06/bagaimana-agar-template-anda-seo.html#comment-form

    BalasHapus
    Balasan
    1. tinggal pasang aja mas,,,

      Hapus
    2. mas saya dah ikutin tutor nya dah saya taro di edit html persis kaya yg ente tulis tapi. ga muncul nih gan:-(

      Hapus
    3. code nya dah saya tarodi blog tapi author blog nya ga muncul. apa itu bentrok dengan code yg lain?

      Hapus
    4. gan please bantuin dong

      Hapus
    5. 1. pasang dulu cssnya
      2. cari kode < data: post.body/ > (tanpa spasi)
      3. biasanya kode post.body/ lebih dari satu, bisa dicoba satu per satu

      Hapus
    6. Komentar ini telah dihapus oleh pengarang.

      Hapus
    7. thx gan berhasil(y) terus berkarya gan|o|

      Hapus
    8. syukur deh kalau sudah bisa (y)

      Hapus
    9. gan klo saya mau nanya OOT dimana

      Hapus
    10. saya belum menyiapkan tempat untuk itu, jadi dimana saja juga boleh

      Hapus
  12. Terima kasih infonya sekarang ilmu blogging saya jadi bertambah. :)

    BalasHapus
  13. keren min blognya, jd semangat edit" blog nih
    salam kenal.


    ttd
    softwikia

    BalasHapus
    Balasan
    1. silahkan mas di kembangkan lagi ilmu ngeblognya...

      Hapus
  14. makasih gan http://blog-medianet.blogspot.com/

    BalasHapus
  15. wah thx artikelnya gan, bermanfaat banget

    BalasHapus
  16. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  17. Siip ini keren...makasih atas ilmunya mas!

    BalasHapus
  18. Tahnks Infonya.. Work Sempurna |o|

    BalasHapus
  19. it's work gan, makasih walau sempet gagal karena data:post.body di template saya ada empat biji. jadi harus cobain satu-satu..hehe

    BalasHapus
  20. Thanks atas tutorialnya mas :D

    BalasHapus
  21. kenapa ngak work ya mas di blog ane ?

    BalasHapus
  22. kok ane ngk muncul sih mas

    BalasHapus

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel