ILKOMSIANTAR [ILMU KOMPUTER SIANTAR]

Pages

Home » Tutorial Blog » Cara Membuat Profil Admin Dibawah Postingan

Cara Membuat Profil Admin Dibawah Postingan

Admin

Cara Membuat Profil Admin Dibawah Postingan
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 bisa dilihat pada gambar di bawah 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'> :

<b:if cond='data:blog.pageType == "item"'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <b><data:post.author/></b> ~ Tips dan Trik Blogspot</h4>
<div class='kontainer'>
<img alt='Christian angkouw' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7FJIYVIETrDmSgMdAiXqx4lrw5ZrzpxW9QxyxhRGfyHYq61z56spM9H96j7YkwX6GFlemIYYSu-w0CTJEvLDE5IZTL1t0YgkR5WqQNycq_2WBdS2hprVsdxWTpyyTz7CWHt0AC2ooeSsx/s400/Administrator+security+password+change.jpg'/>
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. Bagi Shobat yang ingin mengcopy paste atau menyebar-luaskan artikel ini, tolong letakkan link dibawah ini sebagai sumbernya
<textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a></textarea>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='http://ilkomsiantar.blogspot.com/2013/09/cara-membuat-profil-admin-dibawah.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>

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>

.admin-tulisan{

width:auto;

background:#f2f2f2;

border:2px solid #000000;

margin:30px 0 10px 0;

display:block;

font-family:"julee";

color:#000;

}

.admin-tulisan .kontainer{padding:5px;}

.admin-tulisan h4{

background:#FF0000;

border:none;

border-bottom:1px solid #000000;

color:#fff;

font-family:"julee";

text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);

padding:5px 10px;

margin:0 0 0 0;

display:block;

}

.admin-tulisan h4 a{color:#000000;}

.admin-tulisan img{

background:#000000;

width:90px;

height:100px;

border:1px solid #000000;

margin:3px 10px 0 0;

float:left;

padding:2px;

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

Ditulis Oleh : Admin ~ SIANTARMAN

Artikel Cara Membuat Profil Admin Dibawah Postingan ini ditulis oleh Admin pada hari Minggu, 15 September 2013. Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang Cara Membuat Profil Admin Dibawah Postingan dapat Anda sampaikan melalui kotak komentar dibawah ini. Bagi Shobat yang ingin mengcopy paste atau menyebar-luaskan artikel ini, tolong letakkan link dibawah ini sebagai sumbernya

<a href="http://ilkomsiantar.blogspot.com/2013/09/cara-membuat-profil-admin-dibawah.html" target="_blank">Cara Membuat Profil Admin Dibawah Postingan</a>

:: Get this widget ! ::