Membuat Notifikasi Popup Seperti Di Facebook Dengan Css

13 Nov 2017 02:35 • Post By

Membuat Notifikasi Popup Seperti Di Facebook Dengan Css

Jika Anda sedang jatuh cinta dengan facebook dan ingin menambahkan kotak dialog seperti facebook di website Anda maka saya memiliki dialog berbasis CSS yang sederhana dan mudah dari gaya facebook untuk Anda.

CSS

Gunakan css ini di file Anda untuk desain kotak.

.facebook_window
{
background-color:white;
width: 445px;
min-height: 120px;
border: 1px solid #535156;
border-top: 0px;
border-radius:2px;
box-shadow : 0px 0px 0px 10px rgba(115,115,115,0.8);
}

.facebook_title
{
font: 14px Verdana;
color: #fff;
background-color: #6d84b4;
border: 1px solid #3b5998;
font-weight: bold;
margin: -1px;
margin-bottom: 0;
padding: 5px 10px;
}

.facebook_message
{
width: 425px;
min-height: 30px;
padding: 10px;
margin: 0px;
font: 11px Verdana, Arial, Helvetica, sans-serif;
background-color: #fff;
}

.facebook_container
{
height: 42px;
line-height: 42px;
width: 100%;
margin: 0px;
margin-top: -1px;
padding: 0px;
background-color: #f2f2f2;
border-top: 1px solid #e6e6e6;
text-align: right;
}

.s_btn
{
border: 1px solid #666;
border-top-color: #e7e7e7;
border-left-color: #e7e7e7;
background-color: #f7f7f7;
padding-top:1px;
padding-left:4px;
padding-right:4px;
padding-bottom:2px;
cursor: pointer;
font-size: 13px;
font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
font-weight: bold;
border:1px solid gray;
text-align:center;
}

.b_btn
{
color:#FFFFFF;
background-color:#5c75a9;
padding-top:1px;
padding-left:4px;
padding-right:4px;
padding-bottom:2px;
cursor: pointer;
font-size: 13px;
font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
font-weight: bold;
border:1px solid black;
text-align:center;
}

.g_btn
{
background-color:#68a64c;
color:#ffffff;
padding-top:1px;
padding-left:4px;
padding-right:4px;
padding-bottom:2px;
cursor: pointer;
font-size: 13px;
font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
font-weight: bold;
border:1px solid black;
text-align:center;
}
HTML

HTML DIV untuk kotak dialog facebook

<div class="facebook_window">
<div class="facebook_title">Subscribe PHP Gang</div>
<div class="facebook_message">
If you are in love with <a href="http://www.tutorialku.net">facebook</a> and want to add dialog box like facebook in your website then i have a simple and easy css based dialog of facebook style for you.
</div>

<div class="facebook_container">
<input type="button" value="CSS" class="g_btn">&nbsp;
<input type="button" value="Friends" class="b_btn">&nbsp;
<input type="button" class='s_btn' value="Cancel">
&nbsp;
</div>
class="facebook_window"
Kelas untuk div luar utama.

class="facebook_title"
Judul kotak

class="facebook_message"
Kontainer pesan tempat Anda menambahkan pesan Anda.

class="facebook_container"
Kelas untuk wadah bawah dalam wadah ini kita tambahkan kancingnya.

Jangan lupa Subscribe ya !!

Membuat Notifikasi Popup Seperti Di Facebook Dengan Css | Tutorialku.Net | 4.5