Cara Cepat Hamil

Membuat Kotak Admin Yang Keren di bawah Posting



Membuat Kotak Admin Yang Keren di bawah Posting - Salah satu cara membuat tampilan blog menjadi lebih menarik informatif dan komunikatif adalah dengan menampilkan Kotak Admin atau Author Box dibawah posting yang berisi info tentang Penulis, judul artikel dan info lainnya. Soo… kali ini saya berbagi info tentang Cara Membuat Kotak Admin atau Author Box Dibawah Posting yang belakangan ini sedang ngetren.  Jika ada yang tertarik inilah Tutorial tentang Cara Membuat Kotak admin atau Author Box dibawah Postingan :
  1. Login ke account blogger atau dashboard anda , lalu Pilih template 
  2. Sebaiknya klik Backup/Restore dulu untuk membackup template anda
  3. Kemudian  klik  Edit HTML >> Lanjutkan/Proceed
  4. Centang Expand Template Widget
  5. Cari kode <div class='post-footer'> , untuk memudahkan mencarinya gunakan Ctrl +F atau kalau di Firefox klik Edit….> Find … ( di blog saya kodenya ada 2 dan saya simpan di atas kode yg pertama).
  6. Copy kode HTML dibawah ini dan pastekan sebelum / diatas kode <div class='post-footer'>.

<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Posted by : <a expr:href='data:blog.homepageUrl'>Gadis </a> ~ / Software Collections , Blog Tutorial , Internet Bisnis</h4>
<div class='kontainer'>
<img src='http://www.freeimagehosting.net/newuploads/f1cn6.jpg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> diposting oleh<b> Gadis </b>pada <data:post.dateHeader/>. Terima kasih atas kunjungannya.  Kritik dan saran dapat disampaikan via kotak komentar..  Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terima kasih. Happy blogging
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin selesai -->

  1. Catatan :
    • Yang warna merah silahkan ganti  dengan link gambar profil sobat. kata-katanya juga boleh diganti sesuai selera.
    • Gadis bisa juga diganti dengan <data:post.author/>
  2. Sebelum / diatas kode ]]></b:skin>, silahkan Copas kode CSS dibawah ini (Jika error coba letakkan tepat dibawah kode <data:post.body/>.
  3. Sekarang ketahap berikutnya , silahkan cari kode ]]></b:skin>  
/*--Mulai Kotak Admin --*/
.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;
}

  • Untuk jenis font, warna background dan border bisa diganti sesuai selera
  • Selesai jangan lupa Simpan template

  • Semoga artikel ini dapat membantu sobat semua yang suka ber-Blogging.
    Membuat Kotak Admin Yang Keren di bawah Posting 9out of 10 based on 10 ratings. 9 user reviews.


    Posted by : Gadis ~ / Software, Blog Tips and Trik, Tutorial , Internet, Bisnis

    Artikel Membuat Kotak Admin Yang Keren di bawah Posting diposting oleh Gadis . Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kotak komentar.. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terima kasih. Happy blogging

    0 komentar:

    Poskan Komentar