Cara Membuat Author Box Di Bawah Postingan

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?