Sunday, 28 April 2013

Cara Membuat Kotak Tulisan dibawah Postingan

Kali ini hanif's Blog akan sedikit memberikan sebuah postingan tentang cara membuat kotak tulisan dibawah postingan.

Untuk contohya sobat bisa lihat dibawah postingan ini ( Yang kotak berwarna biru ).


Kalau itu yang dimaksud sobat, berarti sobat pintar karena sudah menemukan postingan yag tepat di Mesin pencari.

Langsnug saja...

1.Masuk ke akun blogger sobat.

2. Klik Template Edit HTML.

3. Cari kode ]]></b:skin> pakai CTRL + F

4. Sudah ketemu ? kalau sudah letakkan kode dibawah ini di atas kode tersebut

 

.admin-tulisan{
    display:block;
    width:auto;
    background:#FFFFFF;
    border:2px solid #000000;
    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 Comic Sans Ms;
    color:#222;
    }
    .admin-tulisan .kontainer{padding:5px;}
    .admin-tulisan h4{
    background:#0000FF;
    border:none;
    border-bottom:2px solid #000000;
    color:#fff;
    text-transform:normal;
    text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
    font:bold 12px Comic Sans Ms;
    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 #000000;
    padding:2px;
    background:#000000;
    box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
    }
5. Sudah ?? Kalau sudah cari kode <div class='post-footer> 

6. Setelah itu copy tulisan dibawah ini tepat diatas kode tersebut


<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Di Posting Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ http://hanifadzkiy.blogspot.com/</h4>
<div class='kontainer'>
<img src='https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/303179_289883747698234_100000298329635_1149230_562699087_n.jpg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/> Thank you for coming. Kritik dan saran sangat diperlukan untuk kemajuan blog ini... <data:post.title/> Bermanfaat .. :)
<p><span style='float:Center;font:bold 12px Comic Sans Ms;'><a href='http://hanifadzkiy.blogspot.com/2013/04/cara-membuat-kotak-tulisan-dibawah.html/' target='_blank'><b><blink>Klik Untuk Memasang Widget Ini!</blink></b></a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->
( Ganti tulisan berwarna hijau sesuka sobat. )

7. Simpan Template

No comments:

Post a Comment