Cara Menciptakan Author Box Di Bawah Postingan

Cara Membuat Author Box Di Bawah Postingan - Kali ini saya akan bagikan bagaimana cara menciptakan 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? eksklusif aja kita lihat gan...

Permalink yaitu sebuah Link atau tautan yang merujuk ke Suatu blog atau forum tertentu masuk sehabis berlalu dari halaman depan ke arsip. Kebanyakan pengguna Blogger memasang permalink pada bab bawah postingan mereka. Dalam kotak Permalink tersebut dalam kota tersebut sudah ada tag atau arahan html yang berisi permalink dari postingan yang sedang dibuka atau dibacanya. Permalink ini juga berfungsi untuk mempermudah pembaca atau pengguna blog lain biar mengetahui permalink dari postingan yang sedang dibacanya. Supaya Pengguna Blog lain dapat  menyematkan atau menaruh arahan HTML permalink itu di blog mereka, sehingga memperlihatkan 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 arahan 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 yaitu Lebar dari permalink. dan angka 100 yang warna Kuning yaitu tingginya. Sobat dapat menyesuaikanya dengan template teman masing-masing.

• Selanjutnya cari arahan  <data:post.body/>
• Jika Sobat memakai template yang memakai auto readmore, kemungkinan arahan tersebut ada dua buah. silahkan pilih arahan yang nomer dua.
• Lalu Letakkan arahan berikut sempurna 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>  ,</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 perihal <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Oleh Admin , 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 yaitu URL atau alamat Gambar yang akan Sobat gunakan pada permalink tersebut. jadi silahkan ganti dengan URL Gambar teman masing-masing.

• Silahkan Save Template kalian dan lihat hasilnhya.

Sekian Postinganku kali ini, semoga dapat 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?

Share this post