Jak zrobić wysuwany likebox na MyBB

Z ToProste
Wersja z dnia 16:38, 23 lut 2013 autorstwa Victor (dyskusja | edycje) (Zobacz też)

(różn.) ← poprzednia wersja | przejdź do aktualnej wersji (różn.) | następna wersja → (różn.)
Skocz do: nawigacji, wyszukiwania

Przedstawiam sposób jak zrobić wysuwany likebox na MyBB w oparciu o kod wysuwanego likebox'a.

Przed edycją szablonów zapoznaj się z Zasadami bezpiecznej edycji stylów MyBB
Robisz to na WŁASNĄ odpowiedzialność! Czyli, że ja nie ponoszę żadnej odpowiedzialności za ewentualne szkody!

Jak zrobić wysuwany likebox na MyBB

  • Zaloguj się jako administrator poprzez ACP.


Krok 1

  • Wybierz typ tła (1 2) dla likebox'a i pobierz je na swój dysk.
  • Załaduj je na serwer na którym masz pliki swojego forum do katalogu images.


Krok 2

Modyfikacja stylu CSS.

  • Przejdź do menu Style i szablony -> Style -> Styl twojego forum -> global.css -> Edytuj CSS: tryb zaawansowany
  • Przejdź na koniec pliku i wklej poniższy kod:


/* Styl dla wysuwanego likebox'a */
#fb_rozwin	{
   height: 402px;
   width: 235px;
   top: 50%;
   left: 0px;	
   position: fixed;
   margin-top: -201px; /* = wysokosc panelu / 2 (polozenie panelu w pionie) */	
   padding: 10px;
   background: url("images/bglikeboxfacebookfanpag.png") no-repeat scroll 0 0 transparent; 
}
 
.zwin	{background-position: 0px 0px -242px 0px;}
 
#fb_zawartosc	{
   height: 357px; 
   width: 182px;
   display: block; 
   float: left;
   background-color: #FFFFFF;
}


  • Zapisz zmiany i zamknij.


Krok 3

  • Przejdź do menu Style i szablony -> Szablony -> Styl twojego forum -> Niezgrupowane szablony -> otwórz szablon headerinclude
  • Przed {$stylesheets} wstaw poniższy kod:
  <!-- Zalaczenie biblioteki jquery do obslugi wysuwanego likebox'a -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


  • Zapisz i wróć do listy.


Krok 4

  • Przejdź do menu Style i szablony -> Szablony -> Styl twojego forum -> Strona główna - Szablony -> otwórz szablon index.
  • Za znacznikiem <body> wstaw poniższy kod:
  <!-- Obsluga wysuwania i chowania likebox'a -->
  <script type='text/javascript'>
   $(function(){
    $('#fb_rozwin').css('left','-205px');
    $('#fb_rozwin').hover(
     function () {
      $('#fb_rozwin').animate({left: '0px'}, 800 ); // szybkosc wysuwania
      $(this).addClass('zwin');
     },
     function () {
      $('#fb_rozwin').animate({left: '-205px'}, 700 ); // szybkosc ukrywania
      $(this).removeClass('zwin');
     }
    );
   });
  </script>


  • Przejdź na koniec szablonu i przed znacznikiem </body> wstaw poniższy kod:
<div id='fb_rozwin'><!-- Facebook -->
 <div id='fb_zawartosc'>
  <!-- Poniżej wstaw kod swojego likeboxa -->
 
  <!-- Kod mojego likeboxa jako przyklad - usun go --> 
  <script src="http://connect.facebook.net/pl_PL/all.js#xfbml=1"></script>
  <fb:like-box href="http://www.facebook.com/apps/application.php?id=444351772241962"
  width="182" height="340" colorscheme="dark" show_faces="true" stream="false" header="false"></fb:like-box>
  <!-- Kod mojego likeboxa jako przyklad - usun go --> 
  <!-- Tego nie wolno usuwac -->
  <div style="text-align:center; font-size:xx-small">
  <a target="_blank" title="Wysuwany likebox" href="http://skrypt.uni.me/news.php?readmore=6">likebox</a>
  </div>
  <!-- Tego nie wolno usuwac -->
 </div>
</div>


  • Zapisz i wróć do listy.


Jeśli wszystko zostało wykonane bezbłędnie, powinno to wyglądać jak na tym forum.

Zobacz też

<htmlet>zobacz-tez</htmlet>