Saturday, 11 August 2012

Saturday, August 11, 2012
24

catatan admin di akhir postingan blog

Cara membuat/memasang catatan admin di bawah postingan | pada kesempatan kali ini, saya akan sedikit berbagi tentang apa yang saya terapkan pada blog saya yang sederhana ini, yaitu tentang catatan admin atau pemilik blog di bawah postingan. untuk contohnya, silahkan lihat di bagian paling bawah artikel ini. 
Apa guna dari catatan admin ini? Catatan admin ini bisa berguna untuk membuat atau menyampaika suatu pesan kepada pengunjung blog setia anda ataupun bisa juga hanya sebagai pelengkap untuk mempercantik tampilan blog anda.

Langsung saja caranya sebagai berikut ini:
  1. login ke blog anda {tentunya}
  2. pada dashboard, pilih template >> edit HTML
  3. Centag Expand Template Widget
  4. Cari kode <div class='post-footer'> {ctrl + f untuk mempercepat}, kemudian copy kode di bawah ini dan tempatkan di bawah kode <div class='post-footer'> tadi.
  5.  <div class='catatan-admin'> <div class='tulisan'> <div class='kiri-penulis'><h4> Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><b><data:post.author/></b></a> </h4> </div> <div class='kanan-penulis'/> </div> <div class='kotak-utama'> <img src='http://3.bp.blogspot.com/-EkDh4Svl7LM/UCU5GhaCkUI/AAAAAAAAA5k/lLt0TzJW560/s1600/contoh+gambar+dante.png'/> Artikel <a expr:href='data:post.url'><i><data:post.title/></i></a> ini ditulis oleh <b><data:post.author/></b>. Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang <b><data:post.title/></b> dapat Anda sampaikan melalui kotak komentar dibawah ini. Komentar anda adalah penyemangat untuk <b><data:post.author/></b>. <p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://yusrandante.blogspot.com' target=_blank'>:: Terima kasih sudah berkunjung ke blog sederhana ini ::</a></span></p> <div style='clear:both;'/> </div> </div>
  6. Jika tidak berhasil, maka coba paste kode di atas tadi di bawah <data:post.body/>
  7. setelah itu, cari kode ]]></b:skin>  dan paste kode di bawah ini tepat di atasnya.
    /*catatan admin*/
    .catatan-admin {display:block;width:auto;background:#defdef; padding:0;
    margin:30px 0 10px 0;
    font:normal 12px Arial, Sans-Serif;
    color:#222;
    border:2px solid #fff;
    box-shadow:0 1px 3px #000;
    -moz-box-shadow:0 1px 3px #000;
    -webkit-box-shadow:0 1px 3px #000;
    -webkit-border-radius: 70px;
    -moz-border-radius: 70px;
    border-radius: 70px;
    }
    .catatan-admin .kotak-utama {
    padding:5px 30px 5px 30px;
    }
    .catatan-admin h4 {
    background:#699019;
    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;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
    }
    .tulisan {border:none;margin:0 0 0 0;display:block;width:615px;height: 26px;}
    .kiri-penulis {width:170px;float:left}
    .kanan-penulis {width:400px;float:right}

    .catatan-admin h4 a {
    color:#FEEA83;
    }

    .catatan-admin img {
    width:70px;
    height:70px;
    margin:0 10px 0 0;
    float:left;
    border:1px solid #954B02;
    padding:2px;
    background:#ffffff;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
    }
  8. Kemudian simpan template dan lihat hasilnya.
ganti kode yang berlatar biru dengan gambar milik anda sendiri, silahkan utak atik sendiri sesuai selera anda.

sekian dan wassalam.
Jika anda menemukan blog ini dari search engine google dan anda merasa terbantu dengan informasi dari blog ini, silahkan klik tombol google plus di samping kanan. terima kasih partisipasinya.