Cara Membuat Author Box Di Bawah Postingan - Kali ini aku akan bagikan bagaimana cara membuat Author Box di bawah posting. Kalian tentu pernah melihat ada sebuah kotak profil penulis di bawah postingan, (contohnya di bawah postingan ku ini). Author Box ini juga sering disebut sebagai permalink. Mau tau cara buat dan cara pasangnya di blog kalian? langsung aja kita lihat gan...

Permalink adalah sebuah Link atau tautan yang merujuk ke Suatu blog atau forum tertentu masuk setelah berlalu dari halaman depan ke arsip. Kebanyakan pengguna Blogger memasang permalink pada bagian bawah postingan mereka. Dalam kotak Permalink tersebut dalam kota tersebut sudah ada tag atau kode html yang berisi permalink dari postingan yang sedang dibuka atau dibacanya. Permalink ini juga berfungsi untuk mempermudah pembaca atau pengguna blog lain agar mengetahui permalink dari postingan yang sedang dibacanya. Supaya Pengguna Blog lain bisa  menyematkan atau menaruh kode HTML permalink itu di blog mereka, sehingga memberikan tautan (backlink) ke halaman postingan tadi.

Cara Memasang Permalink Pada Blog :


  • Login Ke Dashboard Blog Sobat masing-masing
  • Pilih Menu Template
  • Pilih Menu Edit Html (Jangan lipa beri tanda centang Expand Template Widget)
  • Selanjutnya silahkan cari kode ]]></b:skin>
  • Kemudian Letakan kode Berikut Tepat diatas kode ]]></b:skin>

admin-tulisan{width:auto;background:#333;border:2px solid #aaa;margin:30px 0 10px 0;display:block;font-family:"julee";
color:#aaa;}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{background:#000000;border:none;border-bottom:1px solid #000000;color:#fff;font-family:"julee";text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);padding:5px 10px;margin:0 0 0 0;display:block;}.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{background:#000000;width:90px;height:100px;border:1px solid #000000;margin:3px 10px 0 0;float:left;padding:2px;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}

Keterangan : Angka 90 yang saya beri warna Kuning tersebut adalah Lebar dari permalink. dan angka 100 yang warna Kuning adalah tingginya. Sobat bisa menyesuaikanya dengan template sobat masing-masing.


  • Selanjutnya cari kode  <data:post.body/>
  • Jika Sobat menggunakan template yang menggunakan auto readmore, kemungkinan kode tersebut ada dua buah. silahkan pilih kode yang nomer dua.
  • Lalu Letakkan kode berikut tepat dibawah kode <data:post.body/> tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <b><data:post.author/></b>  ,Menjadi Lebih Baik</h4>
<div class='kontainer'>
<img alt='Dwi Pratama' src='http://lh3.googleusercontent.com/-0o3cJfWH_lo/AAAAAAAAAAI/AAAAAAAAAEs/uUfYHAZhj9k/s512-c/photo.jpg'/>
Anda sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Oleh Admin Menjadi Lebih Baik, Anda diperbolehkan mengcopy-paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
<textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='http://lhk-blogs.blogspot.com/' target='_blank'>:: Pasang Widget Ini ::</a></span></p><div style='clear:both;'/></div></div>
</b:if>

Keterangan : Kode yang saya beri warna Kuning adalah URL atau alamat Gambar yang akan Sobat gunakan pada permalink tersebut. jadi silahkan ganti dengan URL Gambar sobat masing-masing.
  • Silahkan Save Template kalian dan lihat hasilnhya.
Sekian Postinganku kali ini, semoga bisa bermanfaat bagi kita semua yang ingin menerapkan cara ini di blog masing-masing. Jangan lupa baca juga Editor HTML Blogger Baru 2013  . Terimakasih ;)
sumber

Anda menyukai artikel ini?

34 comments:

  1. wah saya coba dulu ya gan ,, and follback done atas nama bahar yusuf

    ReplyDelete
  2. akhirnya bisa juga,,, makasih mas

    ReplyDelete
    Replies
    1. siip gan, selamat ats keberhasilannya ^^b

      Delete
  3. Sob, ada cara menggan ti warna widgetnya nggak??? butuh warna orange nih ane

    ReplyDelete
    Replies
    1. bisa aja sih gan, tinggal di ganti code color di script yg paling atas aja..

      Delete
  4. makasih ya gan Tas Infonya
    Berhasil
    hehehe Mantap
    Sukses Untuk Blognya

    ReplyDelete
    Replies
    1. siipp gan, seneng banget dh ni artikel bisa berguna :D

      Delete
  5. mantab info nya sob sukses sellalu

    ReplyDelete
  6. hahah mantab bang, foto ku yang jeleg bisa masuk di bawah postingan kwkwokwok

    Kunjungan Rutin nihh, Saya Tunggu Kunjungan Anda Di Blog Sederhana saya ya :D

    ReplyDelete
    Replies
    1. siipp gan, aku pasti meluncur ke kediaman agan :D

      Delete
  7. terima kasih sob informasinya ,
    sudah saya follow mas , di tunggu ya follbacknya :D http://gieproject-course.blogspot.com/2013/07/daftar-harga-laptop-update-juli-lengkap.html

    ReplyDelete
    Replies
    1. sipp gan, tgu kunjungan aku :D
      thanks for visit n comment ^^b

      Delete
  8. Kunjungi Blog aku juga kawan

    www.ilmu-frontal.blogspot.com

    ReplyDelete
  9. Saya mencoba 2 kali belum bisa gan?? Please help me???

    ReplyDelete
    Replies
    1. gak bisa gimana gan??
      mungkin cuma kurang teliti aja naruh script.nya..
      temen2 yang lain semuanya bisa kok..
      terus berusaha gan, dicoba lagi aja langkah-langkahnya :D

      Delete
  10. thanks ya buat tips'a

    ditunggu kunjugannya di hamidah-21.blogspot.com

    ReplyDelete
    Replies
    1. sip gan, thanks juga udah berkunjung n comment.. :)

      Delete
  11. Thanks Gan Pencerahannya yoo ..
    Jangan lupa Follbeck my Blogs yoo ..

    ReplyDelete
    Replies
    1. makasi juga udah berkunjung gan, tp agan followers ke berapa? aku gak tau soalnya..
      tolong konfirmasi lagi yaa.. ^^b

      Delete
  12. Terimakasih untuk trik dan tipsnya sobat, mantab

    ReplyDelete
  13. waah...
    pengen banget ada box kayak gitu di postinganku dong kang, tolong ajarin aku ya..
    maklum masih newbie banget kang..
    aku udah follow #82 kang, jangan lupa mampir ke blogku yang masih sederhana banget yaa, follbacknya juga kang :)
    danakitridwiramania.blogspot.com

    ReplyDelete
  14. whahaha nice bnget bro... kga sia sia saya datang ke ini blog
    salam blog http://harafimulki.blogspot.com

    ReplyDelete
  15. matab gan .... visit back ya... wanda-awang.blogspot.com

    ReplyDelete
  16. Terima kasih mas (y) Berhasil nih di blog saya (y) Silahkan berkunjung jika berkenan (y)
    www.vektorkades.com

    ReplyDelete

Terimakasih telah berkunjung ke Blog ini dan silahkan memberikan komentar, komentar yang kalian berikan sangat mempengaruhi perkembangan blog ini. Tetapi diharap dengan teramat sangat untuk tidak menyertakan komentar yang berisikan spam. Terimakasih.

 
Top