Cara membuat profil Admin dibawah postingan

Assalamualaikum wr. wb

Profil Admin dibawah postingan itulah yang akan saya share buat sobat blogger sekarang. Pernakah sobat melihat kotak kecil dibawah postingan yang berisikan tulisan tentang keterangan dan pesan penulis beserta judul posting dan tanggal penerbitan yang biasanya ditampilkan dibawah postingan.
kalo sobat penasaran seperti apa sih bentuknya, sobat bisa lihat priviewnya dibawah ini :

Previewnya



Nah itu dia previewnya, kalo sobat blogger ingin menampilkannya di blog sobat.
caranya gapang ko ! teman tinggal ikuti saja langkah-langkahnya di bawah ini :

langkah-langkah pemasangan profil admin di blog :
  • Sobat masuk ke blogger sobat, >> Rancangan >> Pilih Edit HTML >> dan jangan lupa centang yang bertuliskan Expand widget templates.
  • Kalo udah cari kode <div class='post-footer'> Tekan CTRL + F lalu ketik class='post-footer' untuk mempermudah pencarian. Kalo udah ketemu copykan code dibawah ini 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA0kmqITSBfzEhh5wbyT93Ka32gc5m8p8HLQc43gUIqGEeNBh_7J6qHjsNTbMEnZNJA0NT-iSDQTOMF_brEJnAdFo9GOkeOa1LbUFG_tQ1M9vLQQZM7xVL46mCMw0pviuWbgsMPDePLUCZ/s220/hahabcbnjfd.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.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://wong3ndeso.blogspot.com/2012/02/profil-admin-di-bawah-postingan.html' target='_blank'>::! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Profil Admin -->

Silahkan sobat ganti kode yang berwarna orange dengan url image yang sobat ingin tampilkan.
  • Kemudian anda cari lagi kode ]]></b:skin> Tekan CTRL + F lalu ketik  ]]></b:skin> untuk mempermudah pencarian, Kalo udah ketemu copykan kode dibawah ini tepat di atas kode  ]]></b:skin>. 
.admin-penulis {
   display:block;
   width:auto;
   background:#000000;
   padding:0;
   margin:30px 0 10px 0;
   font:normal 14px Arial, Sans-Serif;
   color:#ffffff;
   border:1px solid #fff;
   box-shadow:0 1px 1px #000;
   -moz-box-shadow:0 1px 3px #000;
   -webkit-box-shadow:0 1px 3px #000;
   }

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

.admin-penulis h4 {
   background:#000000;
   border:none;
   border-bottom:1px solid #000000;
   color:#ff9900;
   text-transform:normal;
   text-shadow:2 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:#ff9900;
   }

.admin-penulis img {
   width:90px;
   height:90px;
   margin:0 10px 0 0;
   float:left;
   border:1px solid #ffffff;
   padding:2px;
   background:#000000;
   box-shadow:none;
   -moz-box-shadow:none;
   -webkit-box-shadow:none;
   }

  • Langkah terakhir Save/simpan template


Selamat mecoba dan Semoga bermanfaat


   Terimakasih
Diterbitkan