Script Note untuk Pesan Informasi pada Blog dengan Tombol Close


Membuat Kotak Catatan Dengan Tombol Close Di Blog - Terkadang kita sebagai admin blog perlu menyampaikan sesuatu hal kepada pengunjung, seperti sebuah pengumuman, catatan, atau sekedar ucapan selamat ketika hari-hari besar.

Pengumuman atau ucapan-ucapan tersebut sebaiknya kita tampilkan dengan sebuah kotak yang dibuat menarik perhatian, misal menggunakan background warna dan atau dengan border warna. Sehingga pengunjung tidak akan melewatkan pengumuman tersebut.

Namun kadang setiap orang itu berbeda. Mungkin saja kotak catatan tersebut tampilannya dianggap mengganggu. Untuk itu kita perlu memberikan sebuah tombol close agar mereka yang merasa terganggu dengan kotak catatan tersebut dapat dengan mudah menghilangkannya dari pandangan mereka.

Salin kode dibawh ini lalu tempelkan tepat di atas </style>
/* Kotak Informasi */
.note{
 padding:2px;
 margin:20px;
 font-size:12px;
 font-weight:300;position:
 relative;
 color:black
}
.note p{
 margin:0;
 padding:8px 30px 8px 10px;
 line-height:1.5;font-size:14px;
 font-weight:350;
 background:rgba(255,255,255,.8)
}
.note .close-note{
 position:absolute;
 top:5px;
 right:5px;
 width:20px;
 height:20px;
 line-height:20px;
 text-align:center;
 font-size:24px;
 font-weight:500;
 color:black;
 opacity:.2;
 cursor:pointer
}
.note b,.note a{
 font-weight:500;
}
.note .close-note:hover{
 opacity:1;
}
.note .close-note:focus,.note .close-note:active{
 outline:0;
}

.red{
 background:#E53935
}
.pink{
 background:#D81B60
}
.purple{
 background:#8E24AA
}
.indigo{
 background:#3949AB
}
.blue{
 background:#1E88E5
}
.cyan{
 background:#00ACC1
}
.teal{
 background:#00897B
}
.green{
 background:#43A047
}
.yellow{
 background:#FDD835
}
.orange{
 background:#FB8C00
}
.brown{
 background:#6D4C41
}
.grey{
 background:#546E7A
}


Setelah kode di atas di tempel, selanjutnya salin kode dibawah ini untuk menampilkan kotak catatan dengan tombol close di blog, lalu tempelkan pada bagian blog mana akan di pasang
<div class='note blue'>
  <p>Seseorang yang berusaha berguna bagi orang lain dengan berbagi pengetahuan yang dimiliki ~ad4msan <b>Selamat hari raya Idul Fitri, 1 Syawal 1439 H.</b></p>
<div aria-label='Close Note' class='close-note' onclick='this.parentElement.style.display=&quot;none&quot;' role='button' tabindex='0'>&times;</div>
</div>

Silahkan sobat ganti :
blue
&times;, untuk ditempel pada tambahkan Javascript/HTML . Atau ganti dengan
&amp;times;, untuk ditempel melalui Edit HTML.

Itulah script yang diperlukan untuk menampilkan Note untuk Pesan Informasi pada Blog dengan Tombol Close. Semoga bermanfaat.

0 Response to "Script Note untuk Pesan Informasi pada Blog dengan Tombol Close"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel