Membuat kotak keren dibawah positng serti About Author dahulu aku pernah posting tentang cara membuiat About Author dengan css.
dan jika anda tertarik ingin membuatnya anda tinggal mengikuti langkah-langkah dibawh ini
1. Login blogger Anda
2. Masuk rancangan.
3. Pilih edit html
4. Jangan lupa centang Expand Template Widget
5. Cari kode ]]></b:skin> dan untuk memudahkan pencarian Anda tinggal tekan CTRL + F atau F3
6. Dan kalau sudah menemukan kode ]]></b:skin>copy kode dibawah ini tepat diatas kode ]]></b:skin>
/*---------------------------
kotak admin
---------------------------*/
.hisam-learning{
    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;
    }
    .hisam-learning .kontainer{padding:5px;}
    .hisam-learning h4{
    background:#000000;
    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;
    }
    .hisam-learning h4 a{color:#FEEA83;}
    .hisam-learning img{
    width:70px;
    height:70px;
    margin:0 10px 0 0;
    float:left;
    border:1px solid #0000FF;
    padding:2px;
    background:#000000;
    box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
    }

Kemudian silahkan cari kembali kode script ini <div class='post-footer'> jika di template sobat ditemukan dua kode yang sama silahkan sobat pilih yang pertama kemudian silahkan Copy Paste script di bawah ini dan simpan di atas kode <div class='post-footer'>
<!-- Kotak Admin -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='hisam-learning'>

<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a></h4>

<div class='kontainer'>

<img src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/370697_100000450229512_569825105_n.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 kalian semua serta kesediaan Anda membaca artikel ini, Kritik dan saran dapat Anda sampaikan melalui kotak komentar . Terimakasih Anda sudah mau membaca
<p><span style='float:right;font:italic 10px Comic Sans Ms;'><a href='http://his4myahya.blogspot.com/2012/01/membuat-kotak-diitulis-oelh-dibawah.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->
CATATAN:
untuk tulisan yang berwarna aqua silhakan Anda Ganti dengan code warna anda yang Anda inginkan.
Untuk code yang berwarna merah silahkan Anda ganti dengan url gambar Anda.
Dan untuk tulisan yang berwarna kuning silahkan anda ganti dengan kata-kata Anda sendiri

Post a Comment Blogger Disqus

  1. terimakasih sob tutornya,, cek eotika.blogspot.com..

    followan blog yuk :bye:

    ReplyDelete
  2. sngt brmnfaat gan! di tunggu kunjung baliknya.
    http://alif-unique.blogspot.com
    Thanks Before.

    ReplyDelete
  3. bro, gemana cara dapatkan url alamat foto frofil tu>????????

    ReplyDelete
  4. mantap mas bro sy sudah coba kemarin setelah baca artikel ini,dan berhasil dengan dengan sedikit kreasi

    ReplyDelete
    Replies
    1. terima kasih telah berkunjung di blog saya .. :)

      Delete
  5. saya gak tahu letak dari
    4. Jangan lupa centang Expand Template Widget


    tolong bantuannya

    ReplyDelete
    Replies
    1. untuk blogger yang sekrang tidak usah pakek centang expand template widget ..
      langsung saja cari codenya ..

      Delete

 
Top