Jak zrobić wysuwany likebox na MyBB: Różnice pomiędzy wersjami

Z ToProste
Skocz do: nawigacji, wyszukiwania
m (Utworzył nową stronę „Przedstawiam sposób '''jak zrobić wysuwany likebox na MyBB''' w oparciu o kod wysuwanego likebox'a. == Jak zrobić wysuwany likebox...”)
 
m (→‎Zobacz też)
 
(Nie pokazano 15 pośrednich wersji utworzonych przez tego samego użytkownika)
Linia 1: Linia 1:
 
Przedstawiam sposób '''jak zrobić wysuwany likebox na MyBB''' w oparciu o kod [[Jak zrobić wysuwany likebox| wysuwanego likebox'a]].
 
Przedstawiam sposób '''jak zrobić wysuwany likebox na MyBB''' w oparciu o kod [[Jak zrobić wysuwany likebox| wysuwanego likebox'a]].
 +
 +
Przed edycją szablonów zapoznaj się z '''[[Zasady bezpiecznej edycji stylów MyBB|Zasadami bezpiecznej edycji stylów MyBB]]'''
 +
<span style="color: red">'''Robisz to na WŁASNĄ odpowiedzialność!'''</span> Czyli, że ja nie ponoszę żadnej odpowiedzialności za ewentualne szkody!
  
 
== Jak zrobić wysuwany likebox na MyBB ==
 
== Jak zrobić wysuwany likebox na MyBB ==
 
* Zaloguj się jako administrator poprzez '''ACP'''.
 
* Zaloguj się jako administrator poprzez '''ACP'''.
  
−
<!--
+
 
 
=== Krok 1 ===
 
=== Krok 1 ===
 +
* Wybierz typ tła ([http://img841.imageshack.us/img841/5074/bglikeboxfacebookfanpag.png 1] [http://img17.imageshack.us/img17/5074/bglikeboxfacebookfanpag.png 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.
 
Modyfikacja stylu CSS.
 
* Przejdź do menu '''Style i szablony''' -> '''Style''' -> '''Styl twojego forum''' -> '''global.css''' -> '''Edytuj CSS: tryb zaawansowany'''
 
* 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:
 +
 +
 +
<syntaxhighlight lang="css">
 +
/* 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;
 +
}
 +
 +
</syntaxhighlight>
 +
 +
 +
* 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:
 +
 +
<syntaxhighlight lang="html4strict">
 +
  <!-- 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>
 +
</syntaxhighlight>
 +
 +
 +
* 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:
 +
<syntaxhighlight lang="html4strict">
 +
  <!-- 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>
 +
</syntaxhighlight>
 +
 +
 +
* Przejdź na koniec szablonu i przed znacznikiem '''</body>''' wstaw poniższy kod:
 +
<syntaxhighlight lang="html4strict">
 +
<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>
 +
</syntaxhighlight>
 +
 +
 +
* Zapisz i wróć do listy.
  
  
 +
Jeśli wszystko zostało wykonane bezbłędnie, powinno to wyglądać jak na [http://forumreklamowe.index-web.eu/ tym forum].
  
 +
== Zobacz też ==
 +
<htmlet>zobacz-tez</htmlet>
 +
* [[Jak zrobić wysuwany likebox]]
  
−
-->
+
[[Kategoria:Facebook]]
 +
[[Kategoria:MyBB]]

Aktualna wersja na dzień 17:38, 23 lut 2013

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>

Źródło „http://to.proste.info.pl/index.php?title=Jak_zrobić_wysuwany_likebox_na_MyBB&oldid=2496”