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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitLTtZ4rpSwEpt49U0sjH76J8VQsVO_phZgTAjNBSBeSPcBhNC9V3xAEapoveFPW1o5jBAAtnaX-C5BcT6Fre8Ne5u2zGnxKSW63O1kEIDw31hPh0jqRv92HvzzBLb88_L0S0AIb8_VFR7/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.

24 komentar:

  1. Bisa dicoba nih gan. Terima kasih

    BalasHapus
  2. wah, tampilan catatan admin nya ada yang baru nih. lain dari yang lain. save dulu biar bisa dipraktekin nanti. he.

    BalasHapus
    Balasan
    1. silahkan sobat..

      jngan lama2 di save ya.. nanti basi.. di praktekkan lebih cepat akan lebih baik.. wkwkw

      Hapus
  3. contohnya seperti yang terpasang di blog sobat yach?? wah terlihat keren juga yach klo ada cacatan kaki seperti ini sob...

    BalasHapus
    Balasan
    1. iya sob, itu juga yang terpasang di blog ini..

      Hapus
  4. ini yang namanya permalink apa ya? saya lupa, saya juga masang tapi ga semenarik ini. tenkyu gan :D

    BalasHapus
    Balasan
    1. iya kayaknya sob permalink namanya..

      Hapus
  5. wah kayanya keren sob, trims ntar bisa coba

    BalasHapus
    Balasan
    1. sama-sama mas..silahkan di coba...

      Hapus
  6. ini mas yg saya cari tapi kemarin2 saya gk ngerti ini namnya apa
    nanti saya praktekan

    BalasHapus
  7. ternyata ada to cara seperti ini hehehehe mkshhh

    BalasHapus
  8. boleh di coba ni sob...

    BalasHapus
  9. makasih sob, langsung diciba

    BalasHapus
    Balasan
    1. silahkan sobat..... di coba saja..

      Hapus
  10. . . oalachhhhhhhhhhhhhhh,, aq kira catatan kayak gimana kawan. he..86x . .

    BalasHapus
    Balasan
    1. hehehe.. ya catatan kayak di blog saya mbak..

      Hapus
  11. silaturahmi sob....

    master juga nih kayanya masalah blog...
    ijin nimba ilmunya sob...

    BalasHapus
  12. pengen pasang tapi kalo dah masuk html pusing hehehe

    BalasHapus