Haii, salam hangat buat para pembaca setia wakrizki.net. Mungkin kalian sudah bosan dengan artikel yang saya sajikan selalu tentang cerita motivasi, 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 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'> :
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/>.
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='http://4.bp.blogspot.com/_VRwISTiabbk/TUPGgYerH2I/AAAAAAAAAwU/kgqbN-jgWw4/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;
}
22 Komentar "Cara Membuat Profil Admin Dibawah Postingan Blog", Baca atau Masukkan Komentar
Ok than's berhasil juga
Nice share. komentar balik yah gan. ditunggu. :)
thx gan infonya
http://kampret80.blogspot.com
Kalo untuk WordPress caranya gimana gan?? :)
@Sambureki kalau WP ane kurang ngerti kang, maaf tidak bisa membantu,,
Keren bang ^_^
ok gan , makasih infonya
jangan lupa man ke blog ane ya gan, http://bisnisonlinbebaya.blogspot.com
Makasih sobat, ini yang saya cari kebanyakan cara yang ada di blogger lain, tidak berfungsi, tapi yang ini berfungsi di template saya, makasih banyak.
keren
oke ditunggu kunjung baliknya ke http://fajar-juli.blogspot.com
Patut di coba,ne tipsnya. Oh ya background template comentnya ne bgus bgt sob,..
kode ini ada pengaruhnya gak gan,, dengan loading blog?
Mantab Gan.. Thx Infonya :D
Mampir Gan Ke Blog Saya:
7-Wins-Share.Blogspot.com
sangat bermanfaat sekali di postingan anda" Membuat Profil Admin Dibawah Postingan Blog
"..
gan pada kode class='post-footer'> itu agan setting lagi, soalnya ada dua kode class='post-footer'> jadi pilih yang pertama sya coba yg class='post-footer'> yg kedua tidak bisa..maav kawan DIV SENGAJA Tak bisa di bawa karena apabila masang div tidak bisa komentar jadi agar pengunjung jelas kawan.. :D SALAM HORMAT..
Blog kami gan,, kunjungi yea:
http://adi-cyber4rt.blogspot.com/
http://cool-mp3.blogspot.com/
http://aw-07.blogspot.com/
@Adi : itu pada code pertama ada dua jadi pilih yg pertama dan setting lg yea gan..
blog ane gan,, kunjungi yea:
http://aw-07.blogspot.com/
http://adi-cyber4rt.blogspot.com/
http://cool-mp3.blogspot.com/
ok mntap..
salam kenal semua.
Mantap bro tutorialnya, ane sudah coba dan berhasil, thank's so much and sukses selalu.
salam.
sob klo cara memperkecil fotonya gmana?
terima kasih banyak share informasinya, scriptnya jalan dan sukses. Salam Kenal
Keren tutor nya .. Thanks .. udah perpasang dengan sukses di Blog baru gue ..
Kunjungi dan beri masukan blog gue ..
http://g4lax1.blogspot.com/
Trima kasih Gan!
kodenya baxak amat ya
hehehhee
Post a Comment