Update Terbaru, 15 April 2017
Membuat Kotak Catatan Info, Tips dan Peringatan – Sering kita melihat pada artikel blog atau website terdapat sebuah catatan penting yang harus diperhatikan oleh pembaca, ini bertujuan memberikan penjelasan dan catatan atau warning untuk diketahui oleh pengunjung blog.
Catatan penting dalam blog biasanya artikel tentang tutorial, tips dan trik juga beberapa informasi menarik lainnya. Untuk membuat blok catatan pada blog ternyata bukan hal sulit untuk pengguna platform blogger, karena dengan sentuhan sedikit dengan menambahkan html anda sudah bisa membuat kolom catatan pada artikel blog.
Contoh Catatan Tips, Info dan Peringatan
Baca Juga:
- Cara Membuat Widget Sidebar Melayang di Blogspot
- Cara Membuat Recent Post Keren di Blogspot
- Cara Membuat Widget Kotak Pencarian Responsive Keren
Daftar Isi:
Cara Membuat Catatan Info, Tips dan Peringatan
Ada 3 macam catatan dalam blog yang biasa digunakan yaitu tentag informasi, trik yang menarik, dan peringatan untuk menjalankan atau meninggalkan. anda bisa menggunakan sesuai dengan kebutuhan. ikuti tutorial berikut ini sampai selesai.
Pertama, Silahkan Login akun blogger anda dan pilih menu “Template” lalu klik “Edit HTML”,
Kedua, Letakkan kode berikut tepat DIATAS ]]></b:skin> atau </style>
.info,.tips,.warning{
line-height:22px;
min-height:38px;
padding:10px12px12px68px;
margin:5px0;}
.info{
background:#EDE3F2url('http://4.bp.blogspot.com/-BP9TREDmvOo/UQGNoVPG6DI/AAAAAAAADr4/8Heq0U9nPzY/s1600/TTB+notice.png')no-repeat12px8px;
color:#222}
.tips{
background:#7CADDEurl('http://2.bp.blogspot.com/-_Y9kuQODeBs/UlA4LwDUkhI/AAAAAAAAFtk/Rm0QwoddGLw/s1600/tips.png')no-repeat12px8px;
color:#fff;}
.warning{
background:#db6161url('http://2.bp.blogspot.com/-rgsBmdJYFkM/UlA4LyWCrqI/AAAAAAAAFtc/suIf3IwnpgE/s1600/warning.png')no-repeat12px8px;
color:#fff;}
jika sudah selesai klik simpan. kemudian ikuti tutorial berikutnya dibawah ini:
Cara Memasang Catatan Info, Tips dan Peringatan di Postingan
Apabila ingin memasang pada artikel blog, silahkan pilih mode HTML bukan Compose. masukkan kode berikut ini:
Catatan Info:
<div class='info'>
Kata-kata Informasi anda silahkan letakkan disini.
</div>
Catatan Tips:
<div class='tips'>
Catatan tips silahkan letakkan disini
</div>
Catatan Peringatan (Warning):
<div class='warning'>
Catatan peringatan pada artikel letakkan disini
</div>
Demikian Cara Membuat Kotak Catatan dan Peringatan di Blogspot, anda bisa edit warna dan tampilan sesuai selera.
Semoga bermanfaat dan selamat mencoba.
udah dicoba gak bisa bro
Coba diperhatikan lagi penempatannya, sudah saya uji coba dan lancar.
Kalau mau buat kayak gini di wordpress self hosting, pemanggilannya gimana ya gan?
Kalau di wp self host caranya cukup mudah, karena tinggal instal plugin WP Notification Bar. Dengan bantuan plugin tersebut untuk membuat kotak catatan dan peringatan sangat mudah.
kalau mau coba nya tanpa harus edit tema gmn ya ?
Harus edit tema dulu gan, kalau salah kan bisa dikembalikan dengan cara tekan CTRL+Z. Kode HTML tersebut yang nanti bisa dipanggil melalui halaman postingan.
cara nya gmn ya kalau boleh tau edit temanya ?
apa skrip url yang harus atau di tambah ??
terima kasih… mantap
Kalau di WordPress Bisa gak min?
Kalau wordpress sudah ada plugin notification penggunaannya juga sangat mudah.
ini yang saya cari. keren mas.