28/04/2012

Membuat Kotak Admin

 http://2.bp.blogspot.com/-LHNgONkLH50/T5ry3MJqyJI/AAAAAAAAAfM/BxcPvKZHg5c/s1600/adinbox.jpg
AksFullShare-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='http://1.bp.blogspot.com/-oK__ZB8b10w/T5qjLzEp2uI/AAAAAAAAAdU/9Vjyv5hT4io/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://aksfullshare.blogspot.com/' target='_blank'>.::AKSFULLSHARE::.</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 :

http://1.bp.blogspot.com/-QO_QOmmsKh0/T5rzGuFe3dI/AAAAAAAAAfU/fJZGCymbAbI/s1600/admin.png

No comments:

Post a Comment

Ingat !!! Jangan Hanya Bisa Berkomentar, Berikanlah Solusi Dari Komentar Anda. Thanks