Cara Membuat Memo / Catatan Keren Dibawah Postingan Blogger

Cara Membuat Memo / Catatan Keren Dibawah Postingan Blogger

Cara Membuat 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 info kepada pengunjung, hal ini sangat bermanfaat supaya pengunjung bisa langsung mengetahui apa yang diinginkan oleh admin blog tersebut. Berbeda dengan pesan diatas kolom komentar blogger / disqus yang yang berisi peringatan kepada para komentator supaya tidak nyepam dan lain-lain. Yah setiap blogger pastinya berbeda-beda dalam menyampaikan sesuatu kepada pengunjung.

Bagaimana anda tertarik ingin mencoba membuat memo / catatan di bawah postingan? Silahkan copy paste kode 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://4.bp.blogspot.com/-54qrjbeC2VA/WSBkJGgqK8I/AAAAAAAAEwA/0M0RAtI0p087X1f-KD3QUj1grECZod8UgCLcB/s1600/warning.png')no-repeat 10px center;}
anda bisa 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 kode tersebut? Mungkin bagi yang sudah tua di blogger sudah hafal tempat-tempatnya, tapi bagi yang masih muda (pemula) rada bingung ya.

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

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

Mudah kan? Selamat mencoba...

Share On :

Copyright © | Proudly powered by Blogger