Cara Membuat Kotak Profil Author dan Permalink Menarik

Biodata merupakan salah satu hal yang penting untuk dipaparkan, hal ini berguna kepada pengunjung yang ingin mengetaui identitas penulis sekaligus pendiri sebuah blog/website. Untuk membuat Kotak Profile sebenarnya telah disediakan secara default dalam widget bawaan blogger, namun sedikit kreasi tentunya akan menampilkan gaya baru dan menarik apalagi jika dipadukan dengan Permalink pada blog/website.

Artinya cukup dengan mengikuti cara ini sekaligus akan terjalin hubungan erat antara profile dan permalink dari tulisan setiap artikel pada blog anda, bagaimana? menarik bukan!!. sebelum melangkah jauh, sebaiknya luangkan waktu anda untuk membaca Cara Membuat Slide Panel Cantik dan Menarik serta Cara Membuat Tampilan Spoiler Box Terbaru (ya !!! buat menambah pengetahuan). Berikut:

Cara Membuat Kotak Profil Author dan Permalink Menarik
Klik Gambar untuk memperbesar

1. Log In ke akun blogger anda di www.blogger.com
2. Pilih menu Template kemudian klik edit HTML
3. Simpan dahulu kode seluruh template anda (buat jaga-jaga)
4. Cari kode atau tekan ctrl+F ]]></b:skin>
5. Copy dan Paste kode Css di bawah ini tepat di atas ]]></b:skin>

/* Profile Author and Permalink
----------------------------------------------- */
.evolutions-authorbox { position: relative; margin: 15px auto; padding: 10px 10px 10px 10px; width:auto; border: 2px solid #000000; background: #F4FF91;height:auto;overflow:auto; }
.evolutions-avatar {background: #1D1E1D; float: left; height: 145px; width: 135px; left: -5px; padding: 5px 5px 5px 5px; position: relative; }
.evolutions-avatar img { height: 135px; width: 125px; border: 2px solid #fff; }
.evolutions-authorcontent { margin-left: 150px; }
.evolutions-titlebox {box-shadow:7px 7px 7px rgb(174, 185, 195);border-radius:17px 17px 17px 17px;-webkit-border-radius:17px 17px 17px 17px;background: #FEFFFE; width:auto; left: -2px; margin-bottom: 7px; padding: 5px 0px 5px 20px; position: relative; }
.evolutions-authorbox h3 { font:bold 14px Verdana; color: #000; line-height: 20px; margin: 0; }
.evolutions-info { font:12px Trebuchet MS; text-align:justify; color:#000; }
.evolutions-info a { color: #000; text-decoration: none; }
.evolutions-footerbox{ padding:10px 0 0 0; font:12px Trebuchet MS; }
.evolutions-social{ overflow: hidden; }
.evolutions-social a{ display: block; color: #FFFFFF !important; font-weight: 600; font-family: "Tahoma",Verdana,Arial; text-decoration: none; transition: border-radius 0.50s; }
.evolutions-social a:hover{ border-radius: 10px 0px; } .evolutions-social div{ float: left; margin-right: 6px; width: 79px; } .evolutions-social .evolutionsfacebook a{ padding: 7px 0px; text-align: center; background: #3B5999; } .evolutions-social .evolutionsfacebook a:hover{ background: #52e052; }
.evolutions-social .evolutionstwitter a{ padding: 7px 0px; text-align: center; background: #01BBF6; }
.evolutions-social .evolutionstwitter a:hover{ background: #52e052; }
.evolutions-social .evolutionsgoogleplus a{ padding: 7px 0px; text-align: center; background: #D54135; } .evolutions-social .evolutionsgoogleplus a:hover{ background: #52e052; }
.evolutions-social .evolutionsrss a{ padding: 7px 0px; text-align: center; background: #fb8938;} .evolutions-social .evolutionsrss a:hover{ background: #52e052; }
.evolutions-social .evolutionsmenu a{ padding: 7px 0px; text-align: center; background: green; } .evolutions-social .evolutionsmenu a:hover{ background: #52e052; }

6. Cari kode atau tekan ctrl+F <data:post.body/>
7. Copy dan Paste kode di bawah ini dan letakkan di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='evolutions-authorbox'>
<div class='evolutions-avatar'><img alt='silahkan ganti' src='Ganti dengan gambar anda seperti (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTkzQPxnj9jInY0TbRDkkq9AbEuq8EaXx_ov-GYPEgNeeGpyFXA9jDOrXw8ypTKkqXDn3D2wdjf-UBGcSC4HorbsxZRgCohoz98Y0lwmwoZOS1zgXT9yll4opZERi3LlJrgw4JhJc0h-37/s1600/backround-terwujud.jpg' title='ganti titlenya'/>
</div>

<div class='evolutions-authorcontent'>
<div class='evolutions-titlebox'>
<h3>Penulis: <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a></h3></div>

<div class='evolutions-info'>
Judul <a expr:href='data:post.url'><span style='color:red;font-weight:bold;'><data:post.title/></span></a><br/>Jika ingin menyalin (copy-paste) artikel ini, sertakan link dibawah ini sebagai sumbernya :
<br/>
<textarea cols='45' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='3'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
</div>

<div class='evolutions-footerbox'>
<div class='evolutions-social'>
<div class='evolutionsfacebook'>
<a href='https://www.facebook.com/ID-facebook-anda' target='_blank' title='Join To Facebook'>Facebook</a>
</div>

<div class='evolutionstwitter'>
<a href='https://twitter.com/ID-Twitter-anda' target='_blank' title='Join To Twitter'>Twitter</a>
</div>

<div class='evolutionsgoogleplus'>
<a href='https://plus.google.com/ID-Google+ anda' target='_blank' title='Join To Google+'>Google+</a>
</div>

<div class='evolutionsrss'>
<a href='http://feeds.feedburner.com/feedburner-anda' target='_blank' title='Join To RSS'>RSS</a>
</div>

<div class='evolutionsmenu'>
<a href='http://url-blog-anda.blogspot.com' target='_blank' title='judul-anda'>silahkan ganti</a>
</div>
</div></div></div></div>
</b:if>

Keterangan:

• Silahkan Ganti warna merah sesuai dengan keinginan anda
• Jika anda kesulitan menemukan posisi kode <data:post.body/>, anda dapat meletakkan kode HTML nya setelah atau sesudah keterangan kode yang sudah ada pada Template anda seperti kode share, related post atau yang lainnya.
• Silahkan atur sesuai keinginan anda pada warna, backround atau tampilan pada kode Css

Demikianlah artikel tentang Cara Membuat Kotak Profil Author dan Permalink Menarik, jika ada kendala atau kesalahan dalam menerapkannya, silahkan tinggalkan pesan dalam kolom komentar. Terima Kasih!!.