13/05/12

Cara Membuat Profil Admin Dibawah Postingan Blog

Haii, salam hangat buat para pembaca setia Blog Tutorial Bertuah. 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'> :
<!-- Profil Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 -->
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.

24 comments:

nofal-sama77 mengatakan...

tutorial yg menarik sob

Tehamz Marsogot mengatakan...

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

DANZWISH mengatakan...

menarik banget mas!

vaozy mengatakan...

tutorial yang bagus,,,

nanti sy cobain...

Tehamz Marsogot mengatakan...

oh sudah gan, ternyata belom tak expand hehe

Fajar Terbit mengatakan...

di follow back gan..

Sobat Dunia Maya mengatakan...

mantap gan...
ijin untuk mencobanya, salam kenal

NCFCI mengatakan...

Siip, siap di copy ke blog NCFCI, thx

Mas Lihin mengatakan...

Info menarik. Sdh sy cb tp sayang bgt gagal sob. Pa templatnya yg ga sesuai yh ?

obat herbal kanker payudara mengatakan...

oh,,,ini triknya
terima kasih sudah share,,ini sangat bermanfaat sekali

pondoklukman mengatakan...

izin untuk mencoba tips trik membuat profil adminnya.
ditunggu kunjungan baliknya.

dwi aulia rahman putra mengatakan...

ane izin nyoba ya gan. :D
salam blogger bertuah. :D

obat herbal kanker darah mengatakan...

oh,,,ini triknya
makasih sob

Jefry mengatakan...

ternyata harus diedit secara manual ya script2 ini
trims atas ttutorialnya

Kiran Yatmorejo mengatakan...

akhirnya tau juga gua gimana buatnya. pertamaaxxx

gita cinta mengatakan...

kalau di wordpress gimna mas? masih bingung nich

obat tradisional flu tulang mengatakan...

mesti dicoba niihh

obat tradisional penyakit herpes mengatakan...

langsung dicoba gan,,top markotop bnget niihh gan..

obat tradisional batu ginjal mengatakan...

ngikutt aj gan,,mksh yaa gan..

obat tradisional jantung bocor mengatakan...

dicoba aj dulu gan,,mksh bnyak niihh gan informasinya..

obat bius mengatakan...

mau coba gan

obat herbal kanker payudara mengatakan...

terima kasih atas infonya sangat bermanfaat sekali

Ace Maxs mengatakan...

terima kasih telah brbagi

Obat herbal kanker paru paru mengatakan...

terima kasih telah berbagi ilmu

Posting Komentar

Silahkan Berkomentar disini...