Entri Populer

Arsip Blog

Diberdayakan oleh Blogger.

ShoutMix chat widget
</div>
Jumat, 23 Mei 2014

Cara Membuat Profil Admin Dibawah Postingan Blog I Tutorial Blog

02.22 | Diposting oleh | | Edit Entri


 


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/web kamu seoerti 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 tekan Ctrl+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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzjryq60Xe_JHhTvxtkPkS8AbQt2q3_TryebpFYpJ_G2XR5QR6IBvcF-2TDhhswaXqx10C9USGGytVxiaQsmhQSVhCX16XS5ux5MSDUhRxFrOmnGJhIiWMxwO_XCRoW3QHQWgr1rvfuZYN/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://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 CSS dibawah 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 :).




0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)