Membuat Profil Admin Di Bawah Postingan

Posted by


Mungkin kamu pernah menjumpai sebuah web/blog yang dibawah postingannya terdapat data profil seperti gambar diatas. Nah, pada kali ini ane akan membagikan cara membuat blog/webkamu seperti diatas :), tentunya dengan ini akan membuat web/blog kamu lebih menarik dan bagus.



 Ok, berikut Cara Membuat Profil Admin Dibawah Postingan Blog I Tutorial Blog :
  • Login ke akun blogger kamu>Dashboard>Template>Edit html>>Lanjutkan.
  • Setelah itu Centang  EXPAND WIDGET TEMPLATES
  • Kemudian kamu cari kode <div class='post-footer'>, untuk memudahkan pencarian tekanCtrl+F lalu cari kode tadi.
  • Setelah ketemu, letakkan kode dibawah ini tepat di atas kode <div class='post-footer'>tadi
<!-- 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://i1169.photobucket.com/albums/r501/syafiqsynyster/favi.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://tutorane.blogspot.com/2012/05/cara-membuat-profil-admin-dibawah.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Profil Admin -->


nb : ganti kode yang berwarna merah dengan direct link image foto kamu. 
  • Kemudian cari lagi kode ]]></b:skin>, setelah ketemu letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin> tadi, atau jika gagal kamu juga bisa meletakkan kode CSSdibawah ini tepat dibawah <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;
   } 


  • Terakhir kamu simpan/save template kamu dan blog kamu pun telah menjadi keren dengan widget ini :).
 Itulah Cara Membuat Profil Admin Dibawah Postingan Blog I Tutorial Blog dari ane, jika ada kritik dan saran koment ya di kotak komentar :).


Blog, Updated at: 22:26

1 Comment :

Ayo Sobat jangan jadi SILENT READER ya, ? bagi dong komentarnya
jika Sobat tidak punya akun silahkan pilih Anonymous...
Dan gunakan kata-kata yang sopan ....

Search This Blog

Popular Posts