Terwujud
KomTer,Komik Online
Smartphone Mainbitcoin

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

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 (http://3.bp.blogspot.com/-4nQ8VWCoILA/UwnWSNK9y_I/AAAAAAAAAbs/vwoiXBGI6l4/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!!.

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF
Next
« Prev Post
Previous
Next Post »

12 komentar

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

Balas

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 :)

Balas

perlu diterapkan di blog nih, makasih atas sharenya

Balas

Betul sekali buat mbak eka, silahkan dicoba langsung ya

Balas

betul sekali mas purnomo, segera dipraktekkan ya :D

Balas

Terima Kasih bung penho

Balas

dipersilahkan dengan segala hormat kepada mas ahmad, saya akan lihat segera

Balas

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

Balas

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.

Balas

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

Balas

wah kalau itu dibuat secara manual saja mas :D

Balas

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.

Icon:
:) ^_^ :D =D (smile dan tertawa)
:( =( (marah dan Bingung)
:-bd :-d (oke)
|o| (tepuk tangan)

By: Terwujud.com
Terima Kasih!!

Copyright © 2014. Terwujud.com | Sumber Informasi Terpercaya - All Rights Reserved | Template Created by Kompi Ajaib | Modified by Ibrahim Lubis