Cara Membuat Kotak Pesan Disertai Tombol Close pada Blog - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Kotak Pesan Disertai Tombol Close pada Blog

Pilihan Editor :

Cara Membuat Kotak Pesan Disertai Tombol Close pada Blog
Penulis Bagus Surochman
4
Modus malam




KURAZONE ~ Halo sahabat Kurazer, pada kesempatan kali ini kita akan belajar mengenai Cara Membuat Kotak Pesan Disertai Tombol Close pada Blog, penampakan dari kotak pesan ini terlihat seperti pesan singkat pada sebuah halaman.


Cara Membuat Kotak Pesan Disertai Tombol Close pada Blog
Langkah - langkah :

1. Masuk ke Akun Blogger >> Pilih Tema >> Pilih Edit HTML
2. Copy kode CSS dibawah ini, lalu letakkan (paste) diatas kode </style> atau ]]></b:skin>
/* Close Button */
.tutupkura{position:absolute;top:5px;right:5px;width:17px;height:17px;line-height:20px;text-align:center;font-size:24px;font-weight:500;opacity:.3;cursor:pointer;}
.tutupkura b,.tutupkura a{font-weight:500;}
.tutupkura:hover{opacity:1;}
.tutupkura:focus,.tutupkura:active{outline:0;}
/* Note Icon Animation on Hover */
.kpkura1:hover:before,.kpkura2:hover:before,.kpkura3:hover:before,.kpkura4:hover:before,.kpkura5:hover:before,.kpkura6:hover:before,.kpkura7:hover:before,.kpkura8:hover:before,.kpkura9:hover:before,.kpkura10:hover:before{-webkit-animation:flash 1s linear 1s infinite normal;animation:flash 1s linear 1s infinite normal;}
@-webkit-keyframes flash{
0%,100%,50%{opacity:1;}
25%,75%{opacity:0;}
;}
@keyframes flash{
0%,100%,50%{opacity:1;}
25%,75%{opacity:0;}
;}
/* Kotak Pesan Kurazone */
.kpkura{position:relative;border-radius:4px;display:block;font-size:14px;margin:16px 0;padding:12px 24px 12px 60px;}
.kpkura:before{float:left;font-size:32px;font-family:FontAwesome;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;word-wrap:normal;margin-left:-46px;margin-top:12px;}
/* kotak pesan kura */
.kpkura1:before{color:#039be5;content:'\f005';}
.kpkura1{background:#e1f5fe;color:#0288d1;}

/* kotak pesan kura selanjutnya */
/* kotak pesan kura selanjutnya */

3. Simpan template

Kotak pesan yang kalian miliki masih memiliki 1 model, yaitu kpkura1. Cara pemanggilannya adalah dengan menggunakan kode dibawah ini :
<div class="kpkura kpkura1"> Isi pesan disini. </div>
Kode pemanggil tersebut bisa kalian letakkan didalam postingan blog maupun didalam widget blog.

Hasil :
Ini adalah contoh Kotak Pesan yang keberadaannya terkadang tidak dianggap dan hanya dimanfaatkan ketika pas ada maunya saja. Memang sakit sih, tapi gak berdarah (Pilek)

Dari sini kalian sudah berhasil menerapkan Kotak Pesan pada Blog, dikarenakan kode kotak pesan ini masih memiliki 1 model (yaitu : kpkura1), maka kalian bisa menambahkan model lain dengan membuat kpkura tambahan yang diletakkan dibawah kpkura1.

Untuk menambahkan model lain pada kotak pesan, kalian bisa menambahkan kode dibawah ini lalu meletakkannya dibawah selektor kpkura1 sebanyak yang kalian inginkan.
.kpkura%:before{color:#fff;content:'\f0eb';}
.kpkura%{background:#111;color:#fff;}


Keterangan :

  1. Tanda % bisa kalian ubah menjadi angka berikutnya
  2. Kode #fff dan #111 adalah warna teks, icon dan background. Silahkan diganti.
    Kode warna bisa dilihat disini >> Color Picker
  3. Kode \f0eb merupakan Unicode dari icon FontAwesome. Unicode inilah yang nantinya akan tampil sebagai icon dari Kotak Pesan tersebut. Unicode tersebut bisa diperoleh disini >> FontAwesome Icons
Cara mengambil Unicode FontAwesome :
1. Klik icon yang ingin digunakan
2. Copy Unicode yang ditampilkan


Contoh Settingan kpkura Tambahan :

.kpkura2:before{color:#536dfe;content:'\f0eb';}
.kpkura2{background:#e8eaf6;color:#3f51b5;}
.kpkura3:before{color:#039be5;content:'\f005';}
.kpkura3{background:#e1f5fe;color:#0288d1;}


Sedangkan untuk kode pemanggilnya masih sama seperti yang diatas tadi, yaitu menggunakan kode :
<div class="kpkura kpkura1"> Isi pesan disini. </div>
sebanyak kpkura yang kalian buat.

Selanjutnya tinggal mengubah angka pada kpkura nya, menjadi seperti ini :
<div class="kpkura kpkura1"> Isi pesan disini. </div>
<div class="kpkura kpkura2"> Isi pesan disini. </div>
<div class="kpkura kpkura3"> Isi pesan disini. </div>

Hasil :
Ini adalah contoh Kotak Pesan dari kpkura1. Terkadang cewek itu cuma nge-notice cowok yang dia sukai. Masalah muka mau ditaruh dimana urusan belakang, yang penting ngasih notice dulu buat cari perhatian.
Ini adalah contoh Kotak Pesan dari kpkura2. Terkadang cowok yang menerima notice pertama dari seorang cewek biasanya malah cuek dan berprasangka yang enggak - enggak sekaligus GR. Tumben nih cewek nge-notice, jangan - jangan dia ........ (mau nagih hutang).
Ini adalah contoh Kotak Pesan dari kpkura3. Faktanya, cewek yang nge-notice cowok duluan itu perhatiannya gede bangets, rasa sayangnya gak diragukan lagi. Tapi sayangnya, cowok yang di notice malah cueknya minta amvun, gak peka dan cuma menganggap sebagai adeg kakak.

Tambahan :
Apabila kalian ingin menambahkan tombol "Close" pada Kotak Pesan, gunakan kode dibawah ini lalu letakkan setelah "isi pesan" :
<div aria-label='Close Note' class='tutupkura' onclick='this.parentElement.style.display=&quot;none&quot;' role='button' tabindex='0'>&times;</div>

Contoh :
<div class="kpkura kpkura1"> Isi pesan disini. <div aria-label='Close Note' class='tutupkura' onclick='this.parentElement.style.display=&quot;none&quot;' role='button' tabindex='0'>&times;</div> </div>

Hasil :
Ini adalah contoh Kotak Pesan yang TIDAK DISERTAI tombol "Close", pesan yang tampil disini tidak bisa di "Close".
Ini adalah contoh Kotak Pesan yang DISERTAI tombol "Close", silahkan klik tombol "Close" untuk menghilangkan pesan ini.
×

Gimana? Gampang bangets kan bikin Kotak Pesan Disertai Tombol Close pada Blog, tinggal main copy paste aja. 

Duh, Nge-blog kok Copy Paste..
Nge-blog kok main HTML
Nge-blog kok main CSS
Nge-blog kok Analog
Hahahaaa.. 😆😅 


Kotak pesan ini juga sudah didukung animasi ikon, yang akan berkedip - kedip ketika kotak pesan tersentuh kursor (via desktop), atau tersentuh Tap 1x (via mobile). Sedangkan masalah warna dan isi teks bisa kalian kembangkan sendiri.


Apapun yang sedang kamu cari tidak akan datang dalam bentuk yang kamu harapkan. Kenyataan terkadang jauh lebih menyakitkan dari Ekspetasi.
×
Kepercayaan dari seseorang yang tak bersalah adalah alat yang paling berguna bagi seorang pembohong.
×
Barangkali kau yang tak pernah mau belajar dan enggan mengakui bahwa sikapmu memang salah.
×
Ada saatnya kau harus melepaskan seseorang, bukan karena tidak mencintainya, tetapi demi menjaga hati kita sendiri agar tidak terluka lagi oleh sikap yang sama dengan orang yang sama pula.
×
Menceritakan kebenaran dan membuat seseorang menangis lebih baik daripada menceritakan kebohongan dan membuat seseorang tersenyum.
×
Kejujuran adalah hadiah yang sangat mahal. Oleh sebab itu, jangan pernah mengharapkannya dari orang murahan.
×
Kata orang, saat kita berbohong satu kali, sebenarnya kita berbohong dua kali. Bohong yang kita ceritakan ke orang, dan bohong yang kita ceritakan ke diri kita sendiri.
×
Aku berbuat salah, sekarang aku hidup dengan menanggung konsekuensinya. Aku sungguh menyesalinya dan aku minta maaf.
×
Aku menyesali waktu ketika aku memilih berada di sisi gelap. Aku telah membuang cukup waktu untuk tidak bahagia.
×
Saat aku menangisi sesuatu, aku berakhir menangisi segalanya yang telah mengacaukan hidupku.
×

Itulah informasi mengenai "Cara Membuat Kotak Pesan Disertai Tombol Close pada Blog", selamat mencoba dan semoga bermanfaat. Goodluck !!
nanio
Cara Membuat Kotak Pesan Disertai Tombol Close pada Blog
Cara Membuat Kotak Pesan Disertai Tombol Close pada Blog Cara Membuat Kotak Pesan Disertai Tombol Close pada Blog Reviewed by Bagus Surochman on 10/06/2018

4 komentar:

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.