Monday 11 February 2019

Jadi Terpelajar Cara Menciptakan Memo / Catatan Keren Dibawah Postingan Blogger


Cara Membuat Memo / Catatan Keren Dibawah Postingan Blogger. Dalam dunia blogger sering kali kita temui ada catatan kecil di bawah postingan yang berfungsi sebagai peringatan atau hanya sekedar gosip kepada pengunjung, hal ini sangat bermanfaat biar pengunjung dapat eksklusif mengetahui apa yang diinginkan oleh admin blog tersebut. Berbeda dengan pesan diatas kolom komentar blogger / disqus yang yang berisi peringatan kepada para komentator biar tidak nyepam dan lain-lain. Yah setiap blogger pastinya berbeda-beda dalam memberikan sesuatu kepada pengunjung.

Bagaimana anda tertarik ingin mencoba menciptakan memo / catatan di bawah postingan? Silahkan copy paste arahan berikut ini:

Kode CSS
.warning{border:1px solid;margin:0 20px;padding:10px 20px 10px 50px;font:bold 12px verdana;box-shadow:0 0 5px #888;text-shadow:2px 2px 2px #ccc;}
.warning{color:#9F6000;background:#FEEFB3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdpol914FuJWXmjHtfmf5AuaZ1095nki4Lg9MIergvSy6ceLy2b7EnVObrRsbYZ0_v8ldfdnRdKq-KSqHTcyDryQwUM72Nx4fGzqyHK02ROS_wkLcrL02dl6ahhVVVIcTt-cBXdM1kHYY5/s1600/warning.png')no-repeat 10px center;}
anda dapat mengubah iconnya (yang ditandai)

Kode HTML
<div class='warning'>
Dilarang mengcopy paste isi postingan ini kecuali menyertakan sumber berupa link aktif ke url postingan ini, terima kasih.
</div>

Pasang dimana arahan tersebut? Mungkin bagi yang sudah bau tanah di blogger sudah hafal tempat-tempatnya, tapi bagi yang masih muda (pemula) rada resah ya.

Oke untuk arahan css paste diatas </style> atau */]]></b:skin>, sedangkan arahan html paste dibawah arahan postingan. Masih bingung? tiap template beda-beda tentunya, maka disini kita harus teliti. Jika anda menampilkan iklan dibawah postingan, arahan html dapat diletakkan dibawah arahan iklan tersebut, atau diatas arahan post-meta (yang menampilkan profil admin) menyerupai arahan dibawah ini atau yang menyerupai ya:

<div class='postmeta'>
<h3 class='date-header'>
........................
........................
........................
</h3>
</div>

Praktis kan? Selamat mencoba...

No comments:

Post a Comment