Cara Membuat Profil Admin Dibawah Postingan Blog

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'> :
<!-- 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.

22 Komentar "Cara Membuat Profil Admin Dibawah Postingan Blog", Baca atau Masukkan Komentar

Olira said...

Ok than's berhasil juga

Adi said...

Nice share. komentar balik yah gan. ditunggu. :)

kampret666 said...

thx gan infonya
http://kampret80.blogspot.com

Sambureki said...

Kalo untuk WordPress caranya gimana gan?? :)

MasTer Q said...

@Sambureki kalau WP ane kurang ngerti kang, maaf tidak bisa membantu,,

jalz said...

Keren bang ^_^

Masa Depan Sukses said...

ok gan , makasih infonya
jangan lupa man ke blog ane ya gan, http://bisnisonlinbebaya.blogspot.com

Adamssein [Penulis Buku] said...

Makasih sobat, ini yang saya cari kebanyakan cara yang ada di blogger lain, tidak berfungsi, tapi yang ini berfungsi di template saya, makasih banyak.

Mariana sihombing said...

keren

fajar juli awan said...

oke ditunggu kunjung baliknya ke http://fajar-juli.blogspot.com

goez said...

Patut di coba,ne tipsnya. Oh ya background template comentnya ne bgus bgt sob,..

Putupunyablog said...

kode ini ada pengaruhnya gak gan,, dengan loading blog?

CID Alex said...

Mantab Gan.. Thx Infonya :D
Mampir Gan Ke Blog Saya:

7-Wins-Share.Blogspot.com

ADI Musik™ said...

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 Musik™ said...

@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/

ADI Musik™ said...

ok mntap..

Ahmad Bakri said...

salam kenal semua.
Mantap bro tutorialnya, ane sudah coba dan berhasil, thank's so much and sukses selalu.
salam.

Aditia Novit said...

sob klo cara memperkecil fotonya gmana?

isnaidi bangka said...

terima kasih banyak share informasinya, scriptnya jalan dan sukses. Salam Kenal

bu punsu said...

Keren tutor nya .. Thanks .. udah perpasang dengan sukses di Blog baru gue ..

Kunjungi dan beri masukan blog gue ..
http://g4lax1.blogspot.com/

Hidayat Firmansyah said...

Trima kasih Gan!

bocahblogs said...

kodenya baxak amat ya
hehehhee

Followers