nah kali ini saya akan mencoba berbagi tips tentang
Cara Membuat Profil Admin Dibawah Postingan Blog
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 ini 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 -->
<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/AVvXsEit7z2ef3Ehvdy1Y069n-reIyw_2TtYiGsG4xlRuLy8CyEVeJm4JsDlymqdAnwBY2hDRWWXuGg8zML-gbFvZ8gKKbdUtGVwp5sQENAO_GCT6WLOEqZsoSQBd4JwMFx6HBG2JTzHhZ_hHm5L/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://ysf-crs.blogspot.com/2013/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 -->
Silahkan sobat ganti kode yang
berwarna merah dengan image profil sobat.
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 {
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;
}
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.
