Tips Membuat Kotak Info Penulis Otomatis Author Box

1403 Views

Tips Membuat Kotak Info Penulis Otomatis Author Boxpada kesempatan kali ini wongcungkup akan berbagi tentang tips membuat kotak info penulis otomatis /author box dibawah setiap postingan. pasti sobat blogger sering berkunjung ke para master blogger yang mencantumkan author box.

bagi sobat blogger pemula seperti penulis pasti ingin kan membuat tampilan blogger kita secantik dan semenarik mungkin. tips membuat kotak info penulis otomatis /author box dibawah setiap postingan ini juga salah satu langkah untuk mempercantik blog kita dan dengan adanya info penulis dibawah setiap postingan juga akan membuat blog kita lebih rapi kayak blogger profesional. hehehe…

kalau dulu mungkin sobat berfikir kapan ya blogku bisa kayak mereka sekarang mimpi itu bisa menjadi kenyataan, asal mengikuti langkahnya dengan seksama.

contoh screenshoot author box :

Tips Membuat Kotak Info Penulis Otomatis Author Box

adapun langkah Tips Membuat Kotak Info Penulis Otomatis Author Box :

  • pertama: Masuk Ke akun blog kalian—> template-> Edit HTML
  • kedua: Cari kode ]]></b:skin> lalu copas kode CSS berikut tepat diatas ]]></b:skin>
.admin-tulisan{
display:block;
width:auto;
background:#FF0000;
border:2px solid #0000CD;
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:#000000;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#FF0000;
border:none;
border-bottom:1px solid #FFFAF0;
color:#000000;
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:#00FFFF;}
.admin-tulisan img{
width:80px;
height:80px;
margin:0 10px 0 0;
float:left;
border:1px solid #000000;
padding:2px;
background:#000000;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}
  • ketiga: cari  kode <div class=’post-footer’> <div class=’post-footer-line post-footer-line-1′><span class=’post-timestamp’>
  • kalau udah ketemu lalu Copas Kode Berikut dan Letakkan diatas kode <div class=’post-footer’>
<!– Kotak Admin –>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div class=’admin-tulisan’>
<h4>Ditulis Oleh : <a expr:href=’data:blog.homepageUrl’><data:post.author/></a> ~ WONGCUNGKUP BERBAGI</h4>
<div class=’kontainer’>
<img src=’http://i1313.photobucket.com/albums/t551/curvasudsansiro/images12_zps3a51957e.jpg?t=1367951142‘/>
Artikel <a expr:href=’data:post.url’><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan sobat serta kesediaan Anda membaca artikel ini.tinggalkanlah komentar baik itu kritik ataupun saran karena komentar anda sangat berarti bagi penulis demi perkembangan blog ini.
<p><span style=’float:right;font:italic 10px Arial, Sans-Serif;’><a href=’ http://www.wongcungkup.com/tips-membuat-kotak-info-penulis-otomatis-author-box.html ‘ target=’_blank’>:: klik untuk membuat kotak seperti Ini ::</a></span></p>
<div style=’clear:both;’/>
</div>
</div>
</b:if>
<!– Kotak Admin –>
keterangan :
ganti Tulisan Warna coklat dengan judul blog sobat
ganti Tulisan Warna merah  dengan URL Foto sobat
ganti Tulisan Warna ungu dengan kata-kata sesuka hati anda
  • keempat: simpan tempate dan lihat hasilnya.
demikian tips membuat kotak info penulis otomatis /author box dibawah setiap postingan. semoga bermanfaat.
salam,

BURSA MEMBER

Kategori:edit htmlTag

Written by: Yanto Cungkup

Title: Tips Membuat Kotak Info Penulis Otomatis Author Box
saya hanya manusia biasa yang berusaha berguna bagi sesama dan terbuka untuk menjalin persahabatan dengan siapa saja.
449 Artikel
10 Comments
  1. komentar
  2. komentar
    • komentar
  3. komentar
  4. komentar
  5. komentar
  6. komentar
    • komentar

Add a Comment

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *