MEMBUAT PROFIL ADMIN DI BAWAH POSTINGAN.
Haii..!!
salam hangat buat para pembaca, 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, untuk contohnya sobat bisa lihat Screenshot di bawah ini :
Screenshot yang akan tampil
Nah, buat sobat yang ingin mencoba menampilkan profil atau biografi singkat tentang diri sobat, maka sobat bisa mengikuti langkah berikut ini.
1. Login/masuk blogger kalian
2. Masuk rancangan dan pilih Edit HTML
3. Jangan lupa kasih centang ( Expand Templaate Widget )
4. Lali cari code <div class='post-footer'>
5. Simpan JavaScript di bawah ini di atas code <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='http://2.bp.blogspot.com/-P-LBkpGM8B8/T4s39Siei3I/AAAAAAAABnY/L1D-gaTKJCU/s200/Graphic2.png'/>
Artikel <a expr:href='data:post.url'><i><data:post.title/></i></a> ini ditulis oleh <b><data:post.author/></b> INVADES <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'/></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Profil Admin -->
Silahkan ganti code yang berwarna Biru dengan image kalian.
6. Kemudian cari lagi kode ]]></b:skin> pada template sobat.
Kemudian copy 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:# ;
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:#ffcc00;
border:none;
border-bottom:1px solid #ffcc00;
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:#660000;
}
.admin-penulis img {
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:1px solid # ;
padding:2px;
background:# ;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}
7. Save/Simpan template kalian
Akhirnya beres juga cara memasang Profil Admin di bawah Postingan .
Selanjutnya kalian bisa mengedit kata-katanya sesuai keinginan kalian.
>
Show
0 Comments
prev
next