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:
- login ke blog anda {tentunya}
- pada dashboard, pilih template >> edit HTML
- Centag Expand Template Widget
- 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.
- Jika tidak berhasil, maka coba paste kode di atas tadi di bawah <data:post.body/>
- 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;
} - Kemudian simpan template dan lihat hasilnya.
<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>
ganti kode yang berlatar biru dengan gambar milik anda sendiri, silahkan utak atik sendiri sesuai selera anda.
sekian dan wassalam.
Bisa dicoba nih gan. Terima kasih
BalasHapusMampir buat baca-baca lagi. :)
Hapusterima kasih sobat...
Hapuswah, tampilan catatan admin nya ada yang baru nih. lain dari yang lain. save dulu biar bisa dipraktekin nanti. he.
BalasHapussilahkan sobat..
Hapusjngan lama2 di save ya.. nanti basi.. di praktekkan lebih cepat akan lebih baik.. wkwkw
contohnya seperti yang terpasang di blog sobat yach?? wah terlihat keren juga yach klo ada cacatan kaki seperti ini sob...
BalasHapusiya sob, itu juga yang terpasang di blog ini..
Hapusini yang namanya permalink apa ya? saya lupa, saya juga masang tapi ga semenarik ini. tenkyu gan :D
BalasHapusiya kayaknya sob permalink namanya..
Hapuswah kayanya keren sob, trims ntar bisa coba
BalasHapussama-sama mas..silahkan di coba...
Hapusini mas yg saya cari tapi kemarin2 saya gk ngerti ini namnya apa
BalasHapusnanti saya praktekan
silahkan sobat...
Hapusternyata ada to cara seperti ini hehehehe mkshhh
BalasHapussama-sama.. mbak..
Hapusboleh di coba ni sob...
BalasHapussilahkan... sobat...
Hapusmakasih sob, langsung diciba
BalasHapussilahkan sobat..... di coba saja..
Hapus. . oalachhhhhhhhhhhhhhh,, aq kira catatan kayak gimana kawan. he..86x . .
BalasHapushehehe.. ya catatan kayak di blog saya mbak..
Hapusdi cicip dulu,,, :D
BalasHapussilaturahmi sob....
BalasHapusmaster juga nih kayanya masalah blog...
ijin nimba ilmunya sob...
pengen pasang tapi kalo dah masuk html pusing hehehe
BalasHapus