2015. szeptember 26., szombat

Előcsúszó chat html kód

Halihó!
Elég sokan kerestétek azt a kódot, amellyel a chat a képernyő alján helyezkedik el, és csak a címe látszik, viszont ha ráviszed, az egeret, előcsúszik az egész. Ezt a kódot hoztam el most nektek :)
Ha bármi kérdésetek van, írjátok meg kommentben.

Fontos, hogy azokat az adatokat, amiket én vastagon kijelöltem, a saját kódotokra cseréljétek ki, különben a mi chat-ünk fog megjelenni a blogotokon!




<div id="chatbox">
    <div id="chatbox-modulehead">
       Chat</div>
    <div id="chatbox-text">
        </div>
    <div id="cboxdiv" style="text-align: center; line-height: 0">
        <div>
            <iframe allowtransparency="yes" frameborder="0" height="200" id="cboxmain3-3490407" marginheight="2" marginwidth="2" name="cboxmain3-3470120" scrolling="auto" src="http://www3.cbox.ws/box/?boxid=3470120&boxtag=78h2ww&sec=main" style="border: 0px solid;" width="210"></iframe></div>
        <div>
            <iframe allowtransparency="yes" frameborder="0" height="75" id="cboxform3-3490407" marginheight="2" marginwidth="2" name="cboxform3-3470120" scrolling="no" src="http://www3.cbox.ws/box/?boxid=3470120&boxtag=78h2ww&sec=form" style="border: 0px solid;border-top:0px" width="210"></iframe></div>
    </div>
</div>
<style type="text/css">
#chatbox { /* a teljes doboz kinézete */
    width: 220px;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
    position: fixed;
    bottom: -300px;
    right: 10px;
    background-color: #EDF3F7;
    padding:5px 5px 5px 5px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
#chatbox:hover { /* a teljes doboz kinézete, ha ráviszed az egeret */
    width: 220px;
    height: 330px;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
    position: fixed;
    bottom: 0px;
    right: 10px;
    background-color: #EDF3F7;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
#chatbox-modulehead { /* a dobozod fejléce */
    font-family: Book Antiqua;
    font-size: 16px;
    text-align: center;
    color: #f0eaec;
    background-color: #452754;
    padding:5px 5px 5px 5px;
}
#chatbox-text { /* a dobozban a tartalom */
    font-family: Book Antiqua;
    font-size: 14px;
    text-align: justify;
    color: #c27ba0;
    background-color: #452754;
    line-height: 17px;
    padding:5px 5px 15px 5px;
}
--></style>

Remélem tudtam segíteni! :)





forrás: aranymeli, 
Eternal Wonderland Design,
összerakta: Rosa Roblesk

2 megjegyzés:

  1. Sziasztok!
    Nagyon szépen köszönöm a chat-kódot! Már annyit kerestem :)
    Köszi a segítséget,
    Üdvözlettel, Nashua S.

    VálaszTörlés
    Válaszok
    1. Szia!
      Örülök, hogy segíthettem :)

      Ölel,
      Nicolette

      Törlés