Terwujud

Cara Membuat Kotak Profil Author dan Permalink Menarik



Jika bermanfaat, Mohon di Share ya !, jika ada unek-unek komen aja
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

Profil-Terwujud.com

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!!.


Artikelnya sudah di share, makasih ya !

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF

You Might Also Like:

Previous
Next Post »

Sudah ada 12 komentar

Saya akan sangat senang jika ada komentar yang membangun, tetapi:

*Jangan komentar SPAM
*Jangan menanam link
*Jangan ada unsur sara, Fornografi dan memojokkan

Komentar yang melanggar akan dimasukkan kedalam daftar SPAM dan tidak akan diijinkan lagi.

Klik dan Copy Icon di bawah:
:) :( hihi :-) :D =D :-d ;( ;-( @-) :P :o -_- (o) :p :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (y) (f) x-) (k) (h) cheer lol rock angry @@ :ng pin poop :* :v 100

By: Terwujud.com
Terima Kasih!!

  1. wah menarik juga ya mas kalau ada widget profil author nya. Jadi bisa ikut mejeng narsis di blog ya hehe :D

    ReplyDelete
    Replies
    1. Betul sekali buat mbak eka, silahkan dicoba langsung ya

      Delete
    2. blog saya sudah kebanyakan widget mas, takut nya nanti malah berat loading nya. Saya cek di Pagespeed Insight (http://developers.google.com/speed/pagespeed/insights/), sudah lumayan bagus sekarang

      Delete
    3. oooo gitu ya, tapi membuat profile author ini tidak berat kok mbak, apalagi sudah menggunakan kode css3, nah untuk meringankannya hilangkannya aja kode untuk twitter, facebook, google+ dan feedburnernya.

      Delete
  2. Selain memberikan kesan pengenalan sang admin ke pada para penginjungnya..
    Dari segi tampilannya pun keliat...lebih menarik dan nyentrik ya mas
    Terima kasih utk tutorialnya :)

    ReplyDelete
    Replies
    1. betul sekali mas purnomo, segera dipraktekkan ya :D

      Delete
  3. perlu diterapkan di blog nih, makasih atas sharenya

    ReplyDelete
    Replies
    1. dipersilahkan dengan segala hormat kepada mas ahmad, saya akan lihat segera

      Delete
  4. kalo cara membuat author link nya berbeda beda gimana ya mas? misalkan postingan yang satu buatan author si A... postingan kedua buatan author si B.. jadi profil author yang muncul tergantung siapa yang posting gitu.. makasih

    ReplyDelete
    Replies
    1. wah kalau itu dibuat secara manual saja mas :D

      Delete
Copyright © 2014 Terwujud.com - All Rights Reserved