Jumat, 03 Februari 2012

Membuat Kotak Admin | Author Box dibawah postingan

Diantara ciri ke familiaran sebuah blog yang supel adalah mempunyai Kotak Admin atau seringkali disebut sebagai Author Box (menurut saya , engga tahu menurut anda mah), nah contohnya ya seperti yang ada di blog saya ini, gampang cara membuatnya mah , ikuti aja deh tutornya ya sob, jangan lupa komentarnya kalo sudah berhasil...

Caranya:

  • Seperti biasa masuk dan login ke akun blogger mu
  • lalu pilih rancangan dan masuk ke edit html, jangan lupa centang expand widgetnya
  • kemudian cari kode <div class='post-footer'> dengan mengaktifkan menu pencarian mudah CTRL+F. 
  • Lalu taruh kode ini diatasnya :
<!-- 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> ~ Blog Pribadi Abu Iram Al-Atsary</h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD3U4miIlWtdDDz0OgqHvqgH8sr6Yjej4MNUHzruqpwVrJl4Crz41rcXKURp9y6277bg-E6MPWGVVcyw2zhwefXLU7qdusr4zvMcfsNzDg_d1O1gApwUbSppaufOnUMMxC_m8vVj8ARrI/s200/i+love+herbacenter+subang.jpg'>
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 Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui Buku Tamu Kami. By. Abu Iram Al-Atsary.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'/></p></img>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->

Edit tulisannya sekehendak hatimu sob

  • Selanjutnya cari kode ]]></b:skin>
  • Lalu taruh kode ini diatasnya :
&lt;div class='post-footer'&gt;
.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;
}

  • Simpan dan lihat hasilnya, mantebs kan gan? 

Label:

0 Komentar:

Posting Komentar

Tinggalkan pesan anda :

Berlangganan Posting Komentar [Atom]

<< Beranda