Membuat Tentang Penulis Dibawah Posting

Membuat Tentang Penulis Dibawah PostingSudahkah anda melihat Tentang Penulis dibawah Postingan di Zokufo Tutorial ini? Sudah? Mau tahukah caranya? Sebenarnya banyak cara membuat box itu, tapi dari beberapa cara yang saya coba ada 1 cara ini yang berhasil. Oke mari kita mulai.

Cara Membuat Kotak Admin Di Blogspot :
  • Login ke akun blogger anda.
  • Pilih Rancangan >> Edit HTML, centang Expand template widget.
  • Cari kode <div class='post-footer'> pada template.
  • Copy  script kotak admin dibawah ini dan paste tepat di atas kode <div class='post-footer'>.
<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Deskripsi Blog Anda</h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPjEQSvUi0JJqGtrP_kmgxIYhl0ZCXeX9DUMa0bz-o3hyL-KkO_4EI0LCB-HezxBEVF-QYqp4vcvHYbt_jrfIaOQvIG1SJcI43G5ko2JBvY0pVVhcCwNd8Gvf1JujwjLsvBLlyc1rF-mQ/s220/AVATAR+KU-128.jpg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://zokufo.blogspot.com/2012/04/membuat-tentang-penulis-dibawah-posting.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->
  • Kemudian cari kode ]]></b:skin> pada template anda.
  • Copy kode dibawah ini dan paste tepat diatas kode ]]></b:skin>. Jika gagal sobat dapat juga meletakkan kode tadi tepat dibawah kode <data:post.body/>.
.admin-tulisan{
display:block;
width:auto;
background:#CFE2E0;
border:2px solid #fff;
box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#222;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#8A9C04;
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-tulisan h4 a{color:#FEEA83;}
.admin-tulisan img{
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:1px solid #954B02;
padding:2px;
background:#C36702;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}
  • Ganti Kode yang berwarna merah dengan milik anda.
    • Deskripsi Blog Anda = Sesuaikan
    • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPjEQSvUi0JJqGtrP_kmgxIYhl0ZCXeX9DUMa0bz-o3hyL-KkO_4EI0LCB-HezxBEVF-QYqp4vcvHYbt_jrfIaOQvIG1SJcI43G5ko2JBvY0pVVhcCwNd8Gvf1JujwjLsvBLlyc1rF-mQ/s220/AVATAR+KU-128.jpg = Ganti dengan Kode Gambar anda.
  • Selesai Simpan.
  • Jadi Deh! 

Comments

  1. wahhh,fhotonya bisa diganti gak sob.?

    ReplyDelete
    Replies
    1. Bisa kok link ini "http://4.bp.blogspot.com/-aJGLVA8QmCA/TkFsqEXMgKI/AAAAAAAAAPg/naQPOENy01E/s220/AVATAR%2BKU-128.jpg" dalam kode diatas adalah link gambar, jadi bisa diganti.

      Delete
  2. Trimak kasih broo...sudah saya coba and berhacil...hehehhe

    ReplyDelete

Post a Comment

Harap Tinggalkan Jejak Dengan Komentar.

Related Post