OW Debug - Notice
Message: Trying to access array offset on value of type null
File: /home/romarekl/public_html/sosyallift.com/ow_plugins/forum/controllers/topic.php
Line: 136
Facebook Stili CSS ile pop-up nasıl oluşturulur? Forum | Sosyallift©
Loading...
 
tr
World History
World History Ocak 29 '18

Facebook Stili CSS ile pop-up nasıl oluşturulur?

Facebook aşık iseniz ve web sitenize facebook gibi iletişim kutusu eklemek istiyorsanız o zaman ben sizin için facebook tarzı bir basit ve kolay css tabanlı diyalog var.

CSS

Kutu tasarımları için dosyanızdaki bu css'yi kullanın.

.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

Facebook iletişim kutusu için HTML DIV

<div class="facebook_window">

<div class="facebook_title">Daha fazlasını <a href="https://www.sosyallift.com&quot;&gt;Sosyallift&lt;/a&gt;&nbsp;forum alanından .</div>

<div class="facebook_message">

Bu tür bir kutu tasarımı için yapmanız gerekenler <a href="https://www.sosyallift.com&quot;&gt;Sosyallift&lt;/a&gt; bu kodları yazdırmak ve sonuç aldığınız işlemi sayfanızda yazdırma.

</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>

Ana dış div için sınıf.

1

class="facebook_window"

Kutunun başlığı.

1

class="facebook_title"

İletilerinizi eklediğiniz ileti kapsayıcısı.

1

class="facebook_message"

Sınıfı alt konteynır için bu konteynere düğmeler ekliyoruz.

1

class="facebook_container"

Düzenlendi... World History (Ocak 29 '18)
Paylaş: