Cara Mudah Membuat Kotak Admin

Cara Mudah Membuat Kotak Admin

Kotak Informasi admin adalah kotak yang berisi tentang informasi penulis dari admin blog yang mengelola suatu situs atau blog. Bagaimana cara membuatnya berikut langkahnya:

1. Login ke Blog Anda
2. Klik Rancangan => Edit HTML, & Centang Expand template widget
3. Carilah Kode <div class='post-footer'>
4. Copy Kode Script Berikut :

<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Penulis : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Berbagi Itu Indah dan Menyenangkan</h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp-gUVo66MFoQo5Le_r4qrRVpbwWWp6829xgXgVfK4yQ1KhT_YpVdXWQjb5idT0sri2tfHu5g1TZcT3IA88VwfJ0fB1uOzo28988ntgRJY6RGWTA58m7cW3UT1PFFV0nTdeXd5Lq06ilU/s220/iecon2.png'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini Tulis oleh <data:post.author/> Pada: <data:post.dateHeader/>
<br/>Semoga artikel ini dapat bermanfaat dan menambah wawasan kita bersama khususnya admin sendiri. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini.
<br/><br/><br/>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://ahmadkurniawansiddik.blogspot.com/' target='_blank'>.::AHMAD KURNIAWAN SIDDIK::.</a></span></p>
<p><span style='float:left;font:italic 10px Arial, Sans-Serif;'>
<a class='twitter-follow-button' data-show-count='true' href='https://twitter.com/ahwansi'>Follow @ahwansi</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->

6. Paste Tepat di atas kode yg di no.3 = <div class='post-footer'>
7. Selanjutnya cari Kode ]]></b:skin>
8. setalah ketemu kode yang di no.7 = ]]></b:skin> .

Copy Paste Script/Kode di bawah ini tepat di atasnya :

.admin-tulisan{
    display:block;
    width:auto;
    background:#FFFFFF;
    border:2px solid #F5FFFA;
    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:#9ACD32;
    border:none;
    border-bottom:1px solid #D3D3D3;
    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:#FF100%0;}
    .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;
    }

9. Selesai.

Jika berhasil tampilanya akan seperti ini :