Membuat Author Box Dibawah Posting Blog dengan Permalink

Membuat Author Box Dibawah Posting Blog dengan Permalink – selama berselancar didalam internet mungkin anda pernah mengunjungi suatu blog dan terdapat kotak dibawah posting blog yang berisi tentang informasi atau biodata penulis atau bisa juga tentang peringatan kecil mengenai artikel yang di publikasikan, kotak itulah yang biasa disebut-sebut author box. Bahwa biasanya pada author box juga disisipi sejumlah link yang berkaitan dengan artikel posting blog dengan menaruh judul posting yang sudah tersetting secara otomatis agar setiap author box tersebut muncul di setiap akhir posting blog bisa memunculkan judul posting yang tidak lain hal tersebut biasa disebut sebagai permalink. Selain yang sudah saya terangkan di atas, pada author box agar lebih lengkap bisa juga kita custom agar disitu sekalian terdapa tombol social share. Untuk membuat author box muncul di setiap posting blog juga penerapannya tidak sulit, hanya dengan sedikit menambahkan kode yang terdapat dibawah kedalam edit HTML template blog maka author box sudah terpasang. Untuk langkah-langkah penerapannya, berikut tutorial cara Membuat Author Box Dibawah Posting Blog dengan Permalink

1. Login akun blogger.
2. Kemudian klik Template dan pilih Edit HTML.
3. Masukkan kode dibawah ini tepat sesudah tag <data:post.body/>

<style type='text/css'>
.boxauthor{position:relative;border:1px solid #000;background: #20B2AA;box-shadow:0 0 5px #444 inset;margin:25px 0 15px;padding:10px}
.boxtitle h3{color:#fff;font:bold 14px Electrolize;background:#008080;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:#222;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:gray;float:left;top:5px;left:0;display:block;position:relative;width:420px}
.boxsocial{background:#008080;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 #000;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 #333;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 #fff;border:1px solid #fff}
.boxsocial div{float:left;margin-right:6px;width:88px}
.boxsocial .boxsocialtitle{color:#000;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}
</style>

<div class='boxauthor'>
<div class='boxauthor_photo'>
<img alt='mas andes' src='https://m.ak.fbcdn.net/sphotos-c.ak/hphotos-ak-prn1/1525605_199725630218165_745551643_n.jpg'/>
</div>
<div class='boxtitle'>
<h3>Author : <a class='tooltip' expr:href='data:post.authorProfileUrl' rel='author' title='Jujur yang nulis ngganteng'><data:post.author/></a></h3></div>
<div class='boxcontent'>
gak tahu harus ngomong apa, Thanks ya atas kunjungannya brother, yang baru saja membaca artikel berjudul <b><a class='tooltip' expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></b>.
jika bermanfaat, silahkan tekan tombol <b>Share</b>.  Anda juga boleh menyalin / menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan <b><i>link dibawah ini sebagai sumbernya :</i></b>
<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>





</div>
<div class='boxsocial'>
<div class='boxsocialtitle'>
  share:
</div>
<div class='boxfb'>
<a class='tooltip' href='http://www.facebook.com/zaaky.a7x' rel='nofollow' target='_blank' title='Facebook Saya sob'>Facebook</a>
</div>
<div class='boxtwit'>
<a class='tooltip' href='http://twitter.com/zaaky_a7x' rel='nofollow' target='_blank' title='Twitter saya bro'>Twitter</a>
</div>
<div class='boxgplus'>
<a class='tooltip' href='https://plus.google.com/116220708413259140064' rel='nofollow' target='_blank' title='Google+ gue bang'>Google+</a>
</div>

</div></div>

4 Catatan: Ganti tag yang saya beri warna Merah denganURL gambar anda, Ganti warna Biru ID masing masing.
5. Simpan template anda.

Sekian cara Membuat Author Box Dibawah Posting Blog dengan Permalink