07 września 2013

023. Instrukcja na chatbox + nagłówek

Postanowiłam dodać instrukcję, jak stworzyć własny, wysuwany chatbox. Jest to dość proste, jednak jeden mały błąd i nic z tego nie wyjdzie, więc uważajcie, bo może to czasem wyprowadzić kogoś z równowagi.

Informacje: komentarze już działają, ale niestety poprzestawiały się inne rzeczy... Już nie mam do tego siły. Wszystko mnie już denerwuje w htmlu i cssie. Nie mam na nic czasu. Zaniedbuję wszystko. Ojej, przepraszam.

nagłówek

Krok 1
Należy założyć tutaj konto. {klik} Jest to bezpieczne, bez obaw. Potrzebne jest to do pobrania kodu oraz edycji naszego chatboxa.

Krok 2
Kliknij na tamtej stronie "Look&Fell", następnie "Layout options", a później "Publish!"

Krok 3
Wejdź do arkusza CSS i wklej ten kod na samej górze:
<link href='http://fonts.googleapis.com/css?family=Codystar'
rel='stylesheet' type='text/css'>


Krok 4
Wejdź do html'u i wklej po komendzie: "<style type=”text/css”>" to:

#cboxdiv {
z-index: 9999;
position: fixed;
bottom: -300px;
left: 20px;
-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;
}

#cboxdiv:hover {
bottom: 0px;
}

#cboxtitle {
text-align: center;
font-size: 20px;
font-family: codystar;
letter-spacing: 8px;
color: #fff;
text-shadow: 1px 1px 1px #fff;
width: 180px;
background-color: #aaa;
padding: 3px 5px 5px 5px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

Krok 5
Ten kod wklej po </head>:

<div id="cboxdiv">
<div id="cboxtitle">CHATBOX</div>
YOUR CBOX CODE
</div>


tutaj gdzie pisze YOUR CBOX CODE wklejasz kod ze strony gdzie wcześniej się logowałeś/aś. Linijkę na czerwono należy wyciąć
Tak ma to wyglądać:

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="190" height="225" src="http://www4.cbox.ws/box/?boxid=4227283&amp;boxtag=xytgt&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4227283" style="border:#340001 1px solid;" id="cboxmain4-4227283"></iframe></div>
<div><iframe frameborder="0" width="190" height="75" src="http://www4.cbox.ws/box/?boxid=4227283&amp;boxtag=xytgt&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4227283" style="border:#340001 1px solid;border-top:0px" id="cboxform4-4227283"></iframe></div>
</div>
<!-- END CBOX -->




3 komentarze:

  1. Hej.

    Nie wiem, czy jest tak tylko u mnie, czy nie, ale odkąd masz nowy szablon, gdy wchodzę na przykład w jakąś zakładkę albo notkę na twoim blogu, na której są komentarze, to zamiast pod spodem, wyświetlają się one na notce, w sensie, że pokrywają się z treścią notki.

    Pozdrawiam
    Agnes Mording

    OdpowiedzUsuń
  2. Albo jestem głupia, albo serio nie czaję tego wstawiania CB :O

    OdpowiedzUsuń
    Odpowiedzi
    1. Ale czego nie rozumiesz? Wszystko jest opisane krok po kroku. Jeśli czegoś nie wiesz, to postaram się wytłumaczyć jeszcze.

      Usuń

Będę bardzo wdzięczna, jeśli docenisz moją pracę, zostawiając komentarz :)

Obserwatorzy