Apakah sobat pernah melihat kotak kecil berisi keterangan dan pesan penulis disertai judul posting dan tanggal terbit yang biasa ditampilkan di bawah posting, ternyata cara membuatnya cukup mudah lho, untuk contohnya sobat bisa lihat di blog unik.bertuah.info seperti terlihat dibawah ini.
Nah, buat sobat yang ingin mencoba menampilkan profil atau biografi singkat tentang diri sobat, maka sobat bisa mengikuti langkah berikut ini.
Pertama-tama, masuklah ke halaman Design, pilih edit HTML template sobat, kemudian centang bagian Expand Template Widget agar seluruh elemen pembangun posting tampil.
Temukan kode ini:
<div class='post-footer'>
TIPS: Tekan CTRL + F lalu ketik class='post-footer' untuk mempermudah pencarian.
Salin kode ini, kemudian letakkan tepat di atas kode <div class='post-footer'> :
<!-- Profil Admin -->Silahkan sobat ganti kode yang berwarna merah dengan image profil sobat.
<b:if cond='data:blog.pageType == "item"'>
<div class='admin-penulis'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><b><data:post.author/></b></a></h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn0btmjZQ2FlehbkoZZtJ8W1HmED7_be1aVPRdxeFRtxGKudV-3-g6BBDVhOUs7doLXnjaQuf_OzuN0gi0k9wUVIVWlmD4AlHt1Rv4o28zkidpSqkQ-eeq37DwKU7NdnWkE1Rl9Bwhpyr2/s1600/favicon.png'/>
Artikel <a expr:href='data:post.url'><i><data:post.title/></i></a> ini ditulis oleh <b><data:post.author/></b> pada hari <i><data:post.dateHeader/></i>. Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang <b><data:post.title/></b> dapat Anda sampaikan melalui kotak komentar dibawah ini.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://www.wakrizki.net/2012/02/cara-membuat-profil-admin-dibawah.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Profil Admin -->
Kemudian cari lagi kode ]]></b:skin> pada template sobat. Kemudian copy kode CSS dibawah ini dan paste tepat diatas kode ]]></b:skin>. Jika gagal sobat bisa juga meletakkan kode CSS ini tepat dibawah kode <data:post.body/>.
.admin-penulis {Langkah terakhir Simpan template sobat. Untuk selanjutnya saya yakin sobat mempunyai kreasi sendiri untuk lebih mempercantik tampilan blognya, semoga tips singkat tentang Cara Membuat Profil Admin Dibawah Postingan Blog ini bermanfaat bagi para pembaca setia. Jika sobat berkenan, mohon jangan dihapus kredit link yang menuju ke tutorial ini. Terimakasih.
display:block;
width:auto;
background:#defdef;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#222;
border:2px solid #fff;
box-shadow:0 1px 3px #000;
-moz-box-shadow:0 1px 3px #000;
-webkit-box-shadow:0 1px 3px #000;
}
.admin-penulis .kontainer {
padding:5px;
}
.admin-penulis h4 {
background:#699019;
border:none;
border-bottom:1px solid #699019;
color:#fff;
text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 12px Arial,Sans-Serif;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-penulis h4 a {
color:#FEEA83;
}
.admin-penulis img {
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:1px solid #954B02;
padding:2px;
background:#ffffff;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}
24 comments:
tutorial yg menarik sob
nice tuto gan!
hmm tapi keknya kalo di template yang ane pake gak jalan gan, ane coba find yang "div class='post-footer'>" gak ada jwe
menarik banget mas!
tutorial yang bagus,,,
nanti sy cobain...
oh sudah gan, ternyata belom tak expand hehe
di follow back gan..
mantap gan...
ijin untuk mencobanya, salam kenal
Siip, siap di copy ke blog NCFCI, thx
Info menarik. Sdh sy cb tp sayang bgt gagal sob. Pa templatnya yg ga sesuai yh ?
oh,,,ini triknya
terima kasih sudah share,,ini sangat bermanfaat sekali
izin untuk mencoba tips trik membuat profil adminnya.
ditunggu kunjungan baliknya.
ane izin nyoba ya gan. :D
salam blogger bertuah. :D
oh,,,ini triknya
makasih sob
ternyata harus diedit secara manual ya script2 ini
trims atas ttutorialnya
akhirnya tau juga gua gimana buatnya. pertamaaxxx
kalau di wordpress gimna mas? masih bingung nich
mesti dicoba niihh
langsung dicoba gan,,top markotop bnget niihh gan..
ngikutt aj gan,,mksh yaa gan..
dicoba aj dulu gan,,mksh bnyak niihh gan informasinya..
mau coba gan
terima kasih atas infonya sangat bermanfaat sekali
terima kasih telah brbagi
terima kasih telah berbagi ilmu
Posting Komentar
Silahkan Berkomentar disini...