Kamis, 03 Mei 2012

Cara Membuat Profil Admin Dibawah Postingan Blog I Tutorial Blog

2 komentar




Tutorane -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/AVvXsEg7U1bBnJVO2oi5F1o97GntQBOKd46eW8NFN2cR349Vl6BdK3I3rVXgV5f0pjEAHtADMwNSyg5INbEpMJo43M0AWpTt1Eon0lP4PWXe-3u6GU-B9fyVDjH6yy4ypzADsTEoiuJGH0aH0Eir/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 :).




Ditulis Oleh : Ikhbal Gusri

Artikel Cara Membuat Profil Admin Dibawah Postingan Blog I Tutorial Blog ini ditulis oleh Ikhbal Gusri pada hari Kamis, 03 Mei 2012. Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang Cara Membuat Profil Admin Dibawah Postingan Blog I Tutorial Blog dapat Anda sampaikan melalui kotak komentar dibawah ini.

:: Dapatkan Widget Ini ! ::

2 Responses so far

  1. wah keren tuh sob kayanya, kapan2 saya perlu nyoba

  2. Anonim says:

    sipp.. sudah diterapkan di kokloo.blogspot.com thanks

Leave a Reply

Berkomentar dengan menggunakan bahasa yang baik dan santun,dilarang menautkan link hidup dan komentar yang admin anggap SPAM akan dihapus.