poniedziałek, 19 marca 2012

Facebook, Twitter, Google+, Youtube, NK - wysuwany pasek boczny kombajn

IDEĄ TEGO POSTA, jest pokazanie najprostszego możliwego rozwiązania na zaimplementowanie wysuwanych pasków bocznych osadzonych w dowolnej przeglądarce internetowej.
Paski boczne można wykorzystać w dowolny sposób!
Ja pokażę jak je połączyć z Facebook, Twitter, Google+, Youtube i NK.

Każdy, nawet nie znający się na programowaniu, w 15 minut może mieć 5 wysuwanych pasków bocznych współpracujących z najpopularniejszymi serwisami społecznościowymi: facebook, twitter, google+, youtube i nasza-klasa.

Narzędziem programistycznym będzie biblioteka jQuery w wersji 1.7.0 bazująca na JavaScript oraz język do tworzenia stron internetowych HTML w najnowszej wersji 5.

Kod jest powtarzalny dla każdego serwisu społecznościowego, nie ma znaczenia czy jest to: facebook, twitter, youtube, google+, czy też nasza-klasa.
Co więcej może służyć dla innych serwisów społecznościownych jak: linkedin (http://www.linkedin.com), flickr (http://www.flickr.com), myspace (http://www.myspace.com), fotka (http://www.fotka.pl), wykop (http://www.wykop.pl), czy goldenline (http://www.goldenline.pl) oraz wielu innych.
Kod można go również wykorzystać do zamieszczania Swoich wstawek programistycznych.



PONIŻEJ JEST W PEŁNI DZIAŁAJĄCY LINK DO TEGO CO OPISAŁEM POWYŻEJ (tylko: HTML5 i XHTML - po najechaniu. Uwaga: Jak wykorzystujesz HTML 4.01 to skorzystaj z linku dla HTML 4.01) - gotowe rozwiązanie, wystarczy kliknąć i masz:
Patrz tutaj



PONIŻEJ JEST W PEŁNI DZIAŁAJĄCY LINK DO TEGO CO OPISAŁEM POWYŻEJ (dla wszystkich: HTML5 i XHTML oraz HTML 4.01 - po kliknięciu) - gotowe rozwiązanie, wystarczy kliknąć i masz:
Patrz tutaj






Ważne - Zademonstruję w tym post-cie również jak umieścić wysuwane paski boczne na Swoim blogu w serwisie internetowym: blogger.com oraz jak na tym blogu używać biblioteki JQuery, które jest niezbędna do funkcjonowania wysuwanych pasków bocznych.
Jak sami widzicie u mnie już to funkcjonuje i nic nie stoi na przeszkodzie, aby u Was to też funkcjonowało.
Uwaga - gdy używamy pasków bocznych na blogger.com, w Swoim blogu, przeglądarka Internet Explorer, nie ma płynnej animacji wysuwania pasków, ale dotyczy to tylko serwisu blogger.com.



NO to zaczynamy!!!
Poniżej gotowy kod, który jest do wypróbowania w linku, który zamieściłem powyżej. Jest to ten sam kod.
Pod spodem kodu jest jego dokładny opis oraz inne zagadnienia, które stanowią jego rozszerzenie.



KOD HTML 5 i jQuery:


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<!--WIDGET GOOGLE+-->
<!-- Place this tag in the <head> of your document -->
<link href="https://plus.google.com/108803486747646510695" rel="publisher" /><script type="text/javascript">
window.___gcfg = {lang: 'pl'};
(function() 
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();</script>
<!--KONIEC WIDGET GOOGLE+-->
</head>
    
<body>
<script type="text/javascript">
 //<[!CDATA[
  jQuery.noConflict();
  
  jQuery(document).ready(function() {   
      
   jQuery("#googleplus2_2").hover(function(){    
    jQuery(this).stop(true,false).animate({right: "0px"}, 500 );   
   },
   function(){ 
    jQuery("#googleplus2_2").stop(true,false).animate({right: "-304px"}, 500 );
    
   });   
         
   jQuery("#facebook2_2").hover(function(){    
    jQuery(this).stop(true,false).animate({right: "0px"}, 500 );   
   },
   function(){ 
    jQuery("#facebook2_2").stop(true,false).animate({right: "-304px"}, 500 );    
   });
      
   jQuery("#twitter2_2").hover(function(){    
    jQuery(this).stop(true,false).animate({right: "0px"}, 500 );   
   },
   function(){ 
    jQuery("#twitter2_2").stop(true,false).animate({right: "-300px"}, 500 );    
   });
         
   jQuery("#youtube2_2").hover(function(){    
    jQuery(this).stop(true,false).animate({right: "0px"}, 500 );   
   },
   function(){ 
    jQuery("#youtube2_2").stop(true,false).animate({right: "-304px"}, 500 );    
   });
       
   jQuery("#nk2_2").hover(function(){    
    jQuery(this).stop(true,false).animate({right: "0px"}, 500 );   
   },
   function(){ 
    jQuery("#nk2_2").stop(true,false).animate({right: "-300px"}, 500 );    
   });
  });   
 //]]>
</script>

<!--WIDGET FACEBOOK-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pl_PL/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="facebook2_2" style="right: -304px; z-index: 9999; background: #ffffff; padding: 0px; width: 300px; height:550px; position: fixed; top: 50px; border: 2px solid #3B95D8">
  <a href="#"></a><img style="position: absolute; left:-33px;" src="facebook.png" />  
  <div class="fb-like-box" data-href="http://www.facebook.com/pages/KatMPBSoft/145582058840684" data-width="300" data-height="550" data-show-faces="true" data-stream="true" data-header="false"></div>
</div>
<!--KONIEC WIDGET FACEBOOK-->

<!--WIDGET TWITTER-->
<div id="twitter2_2" style="right: -300px; z-index: 9998; background: #ffffff; padding: 0px; width: 300px; height: 437px; position: fixed; top: 157px; border: 0px solid #FFFFFF">
  <a href="#"></a><img style="position: absolute; left:-33px; top:3px" src="twitter.png" /> 
  <div style='background-color:#809EFF;'>  
  <!-- STARY KOD TWITTER - już nie wspierany przez Twitter Widget
  <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
  <script>
  new TWTR.Widget({
        version: 2,
        type: 'profile',
        rpp: 20,
        interval: 6000,
        width: 300,
        height: 350,
        theme: {
            shell: {
                background: '#809EFF',
                color: '#ffffff'
            },
            tweets: {
                background: '#ffffff',
                color: '#000000',
                links: '#ff0000'
            }
        },
        features: {
            scrollbar: true,
            loop: false,
            live: true,
            hashtags: false,
            timestamp: true,
            avatars: true,
            behavior: 'all'
        }
  }).render().setUser('KatMPBSoft').start();  
  </script>
  -->

  <!-- NOWY KOD TWITTER - wspierany przez Twitter Widget-->
  <a class="twitter-timeline" href="https://twitter.com/KatMPBSoft" data-widget-id="278760694994837504">Tweets by @KatMPBSoft</a>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

  </div>
</div>
<!--KONIEC WIDGET TWITTER-->

<!--WIDGET NASZA-KLASA-->
<div id="nk2_2" style="right: -300px; z-index: 9997; background: #ffffff; padding: 0px; width: 300px; height: 398px; position: fixed; top: 264px; border: 0px solid #FFFFFF">
  <a href="#"></a><img style="position: absolute; left:-33px; top:3px" src="nk2.png" />
  <div style='background-color:#2B608C;'>
  <script type="text/javascript" src="http://0.s-nk.pl/script/nk_widgets/nk_widget_core"></script>
  <script type="text/javascript" src="http://0.s-nk.pl/script/nk_widgets/nk_widget_code"></script>
  <script type="text/javascript">
  new  NkWidgetSledzikShoutList({
   user: {
   uid: 4807950
   },
   theme: {
   widget_border_color: '#2B608C',
   widget_background_color: '#ffffff',
   header_text_color: '#ffffff',
   header_background_color: '#2b608c',
   stripe_background_color: '#a1d262',
   shout_text_color: '#475058',
   shout_date_color: '#9aa7b2',
   shout_link_color: '#2b74b0',
   shout_border_color: '#e1e7ed'
   },
   count: 10,
   width: 300,
   height: 400
  }).init()
  </script>  
  </div>
</div>
<!--KONIEC WIDGET NASZA-KLASA-->

<!--WIDGET YOUTUBE-->
<div id="youtube2_2" style="right: -304px; z-index: 9996; background: #ffffff; padding: 0px; width: 300px; height: 104px; position: fixed; top: 367px; border: 2px solid #3C3C3C">
  <a href="#"></a><img style="position: absolute; left:-33px;" src="youtube.png" />  
  <iframe id="fr" src="http://www.youtube.com/subscribe_widget?p=KatMPBSoft" style="overflow: hidden; height: 105px; width: 300px; border: 0;" scrolling="no" frameBorder="0"></iframe>
</div>
<!--KONIEC WIDGET YOUTUBE-->

<!--WIDGET GOOGLE+-->
<div id="googleplus2_2" style="right: -304px; z-index: 9995; background: #ffffff; padding: 0px; width: 300px; height: 118px; position: fixed; top: 474px; border: 2px solid #00569F">
  <a href="#"></a><img style="position: absolute; left:-33px;" src="google.png" />  
  <!-- Place this tag where you want the badge to render -->  
  <div class="g-plus" data-href="https://plus.google.com/108803486747646510695" data-width="300" data-height="131" data-theme="light"></div>
</div>
<!--KONIEC WIDGET GOOGLE+-->

</body>
</html>
 



FACEBOOK - przygotowany dla paska bocznego
Linie kodu odpowiadające za połączenie z facebook dla HTML w wersji 5 (aby działało to dla Twojej strony facebook podmieniasz linię 14 [widoczną poniżej], a dokładnie atrybut data-href=""):
[Pamiętaj także o ścieżce do pliku ze zdjęciem dla wysuwanego paska bocznego]
Tylko w części BODY:
<!--WIDGET FACEBOOK-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pl_PL/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="facebook2_2" style="right: -304px; z-index: 9999; background: #ffffff; padding: 0px; width: 300px; height:550px; position: fixed; top: 50px; border: 2px solid #3B95D8">
  <a href="#"></a><img style="position: absolute; left:-33px;" src="facebook.png" />  
  <div class="fb-like-box" data-href="http://www.facebook.com/pages/KatMPBSoft/145582058840684" data-width="300" data-height="550" data-show-faces="true" data-stream="true" data-header="false"></div>
</div>
<!--KONIEC WIDGET FACEBOOK-->



Nastąpiła zmiana kodu Twitter Widget - globalnie w całym Internecie dla Twitter - nasz skrypt już jest do niego dostosowany.
Informacja dla Wszystkich tych, którzy korzystają ze starej wersji skryptu dla Twitter.


TWITTER - przygotowany dla paska bocznego
Linie kodu odpowiadające za połączenie z twitter dla HTML w wersji 5 (aby działało to dla Twojej strony twitter podmieniasz linię 36 [widoczną poniżej], a dokładnie atrybut setUser('')):
[Pamiętaj także o ścieżce do pliku ze zdjęciem dla wysuwanego paska bocznego]
To jest dla starej wersji widget twitter już nie wspieranej przez twitter widget.
Dla nowych wersji twitter widget stosujesz linie 40,41 i 42.
Oraz korzystasz z tego linku: patrz - warunek musisz być zalogowany na Swoim konto twitter i musisz utworzyć Swój własny widget twitter na Swoim koncie twitter.
Tylko w części BODY:
<!--WIDGET TWITTER-->
<div id="twitter2_2" style="right: -300px; z-index: 9998; background: #ffffff; padding: 0px; width: 300px; height: 437px; position: fixed; top: 157px; border: 0px solid #FFFFFF">
  <a href="#"></a><img style="position: absolute; left:-33px; top:3px" src="twitter.png" /> 
  <div style='background-color:#809EFF;'>  
  <!-- STARY KOD TWITTER - już nie wspierany przez Twitter Widget
  <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
  <script>
  new TWTR.Widget({
        version: 2,
        type: 'profile',
        rpp: 20,
        interval: 6000,
        width: 300,
        height: 350,
        theme: {
            shell: {
                background: '#809EFF',
                color: '#ffffff'
            },
            tweets: {
                background: '#ffffff',
                color: '#000000',
                links: '#ff0000'
            }
        },
        features: {
            scrollbar: true,
            loop: false,
            live: true,
            hashtags: false,
            timestamp: true,
            avatars: true,
            behavior: 'all'
        }
  }).render().setUser('KatMPBSoft').start();  
  </script>
  -->

  <!-- NOWY KOD TWITTER - wspierany przez Twitter Widget-->
  <a class="twitter-timeline" href="https://twitter.com/KatMPBSoft" data-widget-id="278760694994837504">Tweets by @KatMPBSoft</a>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

  </div>
</div>
<!--KONIEC WIDGET TWITTER-->




GOOGLE+ - przygotowane dla paska bocznego
Linie kodu odpowiadające za połączenie z google+ dla HTML w wersji 5 (aby działało to dla Twojej strony google+ podmieniasz linię 4 i 19 [widoczną poniżej], a dokładnie atrybuty href="" i data-href=""):
[Pamiętaj także o ścieżce do pliku ze zdjęciem dla wysuwanego paska bocznego]
W części HEAD:
<!--WIDGET GOOGLE+-->
<!-- Place this tag in the <head> of your document -->
<link href="https://plus.google.com/108803486747646510695" rel="publisher" /><script type="text/javascript">
window.___gcfg = {lang: 'pl'};
(function() 
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();</script>
<!--KONIEC WIDGET GOOGLE+-->

W części BODY:
<!--WIDGET GOOGLE+-->
<div id="googleplus2_2" style="right: -304px; z-index: 9995; background: #ffffff; padding: 0px; width: 300px; height: 118px; position: fixed; top: 474px; border: 2px solid #00569F">
  <a href="#"></a><img style="position: absolute; left:-33px;" src="google.png" />  
  <!-- Place this tag where you want the badge to render -->  
  <div class="g-plus" data-href="https://plus.google.com/108803486747646510695" data-width="300" data-height="131" data-theme="light"></div>
</div>
<!--KONIEC WIDGET GOOGLE+-->




YOUTUBE - przygotowany dla paska bocznego
Linie kodu odpowiadające za połączenie z youtube dla HTML w wersji 5 (aby działało to dla Twojej strony youtube podmieniasz linię 5 [widoczną poniżej], a dokładnie atrybut src=""):
[Pamiętaj także o ścieżce do pliku ze zdjęciem dla wysuwanego paska bocznego]
Tylko w części BODY:
<!--WIDGET YOUTUBE-->
<div id="youtube2_2" style="right: -304px; z-index: 9996; background: #ffffff; padding: 0px; width: 300px; height: 104px; position: fixed; top: 367px; border: 2px solid #3C3C3C">
  <a href="#"></a><img style="position: absolute; left:-33px;" src="youtube.png" />  
  <iframe id="fr" src="http://www.youtube.com/subscribe_widget?p=KatMPBSoft" style="overflow: hidden; height: 105px; width: 300px; border: 0;" scrolling="no" frameBorder="0"></iframe>
</div>
<!--KONIEC WIDGET YOUTUBE-->




NK - przygotowana dla paska bocznego
Linie kodu odpowiadające za połączenie z nasza-klasa dla HTML w wersji 5 (aby działało to dla Twojej strony nasza-klasa podmieniasz linię 11 [widoczną poniżej], a dokładnie atrybut uid:):
[Pamiętaj także o ścieżce do pliku ze zdjęciem dla wysuwanego paska bocznego]
Tylko w części BODY: 
<!--WIDGET NASZA-KLASA-->
<div id="nk2_2" style="right: -300px; z-index: 9997; background: #ffffff; padding: 0px; width: 300px; height: 398px; position: fixed; top: 264px; border: 0px solid #FFFFFF">
  <a href="#"></a><img style="position: absolute; left:-33px; top:3px" src="nk2.png" />
  <div style='background-color:#2B608C;'>
  <script type="text/javascript" src="http://0.s-nk.pl/script/nk_widgets/nk_widget_core"></script>
  <script type="text/javascript" src="http://0.s-nk.pl/script/nk_widgets/nk_widget_code"></script>
  <script type="text/javascript">
  new  NkWidgetSledzikShoutList({
   user: {
   uid: 4807950
   },
   theme: {
   widget_border_color: '#2B608C',
   widget_background_color: '#ffffff',
   header_text_color: '#ffffff',
   header_background_color: '#2b608c',
   stripe_background_color: '#a1d262',
   shout_text_color: '#475058',
   shout_date_color: '#9aa7b2',
   shout_link_color: '#2b74b0',
   shout_border_color: '#e1e7ed'
   },
   count: 10,
   width: 300,
   height: 400
  }).init()
  </script>  
  </div>
</div>
<!--KONIEC WIDGET NASZA-KLASA-->




Mając tak przygotowane serwisy społecznościowe umieszczone na odpowiednia spreparowanych warstwach (div-ach), przystępujemy do użycia JQuery.
Linie kodu odpowiadające za obsługę jQuery dla HTML w wersji 5 służą do animacji wysuwanych poszczególnych pasków bocznych - każdego z osobna:
W części HEAD:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

W części BODY:    
<script type="text/javascript">
 //<[!CDATA[
  jQuery.noConflict();
  
  jQuery(document).ready(function() {   
      
   jQuery("#googleplus2_2").hover(function(){    
    jQuery(this).stop(true,false).animate({right: "0px"}, 500 );   
   },
   function(){ 
    jQuery("#googleplus2_2").stop(true,false).animate({right: "-304px"}, 500 );
    
   });   
         
   jQuery("#facebook2_2").hover(function(){    
    jQuery(this).stop(true,false).animate({right: "0px"}, 500 );   
   },
   function(){ 
    jQuery("#facebook2_2").stop(true,false).animate({right: "-304px"}, 500 );    
   });
      
   jQuery("#twitter2_2").hover(function(){    
    jQuery(this).stop(true,false).animate({right: "0px"}, 500 );   
   },
   function(){ 
    jQuery("#twitter2_2").stop(true,false).animate({right: "-300px"}, 500 );    
   });
         
   jQuery("#youtube2_2").hover(function(){    
    jQuery(this).stop(true,false).animate({right: "0px"}, 500 );   
   },
   function(){ 
    jQuery("#youtube2_2").stop(true,false).animate({right: "-304px"}, 500 );    
   });
       
   jQuery("#nk2_2").hover(function(){    
    jQuery(this).stop(true,false).animate({right: "0px"}, 500 );   
   },
   function(){ 
    jQuery("#nk2_2").stop(true,false).animate({right: "-300px"}, 500 );    
   });
  });   
 //]]>
</script>



I to już wszystko, pozostaje jeszcze do omówienia kwestia osadzenia pasków bocznych w serwisie blogger.com, na Swoim blogu.

Robimy to w głównym szablonie Swojego bloga i postępujemy identycznie jak dla zwykłej strony www.
Blog w serwisie blogger.com jest zawsze zgodny z HTML w wersji 5, więc opisane powyższe kody sa jak najbardziej kompatybilne.

Wszystko co było opisane i co znajduje się w części HEAD umieszczamy w naszym szablonie bloga tuż przez końcem znacznika </head>.
Wszystko co było opisane i co znajduje się w części BODY umieszczamy w naszym szablonie bloga tuż przez końcem znacznika </body>.
Wyjątek stanowi część kodu jQuery, która na stronie www, nie powiązanej z blogger.com, była umieszczona tuż za znacznikiem <body>, w serwisie blogger.com na naszym blogu musi być w części HEAD, tuż przez końcem znacznika </head>

I to by było na tyle miłej zabawy, :)


Każdy mój post, dotyczący w mniejszym lub większym stopniu programowania internetowego jest zawsze kompatybilny z IE od wersji 7, z Firefox od wersji 3.6.3, z Opera od wersji 9.63, z Safari od wersji 5.x i z Chrome od wersji aktualnej



405 komentarzy:

  1. Chocbym sie nie wiem jak starała, nie wiem jak nad tym upociła - nie chce mi działac. Nie ogarniam co robie źle :/

    OdpowiedzUsuń
    Odpowiedzi
    1. Proponuję zacząć od tego:
      patrz
      A następnie napisać co nie działa.
      Proponuję też ograniczyć się na początek do jednego np. tylko do facebook.
      Kod HTML jest w linku, po skróceniu go tylko do facebook, stanie się krótszy i prostszy do zrozumienia.

      W tym post-cie pokazałem co trzeba ustawić w moim kodzie, aby kod odnosił się do Twojego konta facebook i innych kont: twitter, nk, youtube i google+.

      Usuń
    2. a czy jest szansa zeby taki tlanslator jak ze strony http://demo.joomlavi.com/extensions16/ jest to moduł do joomla.umieścić w takim bocznym sówaku

      Usuń
    3. Tak możemy to dla Państwa zrobić. Nie ma problemu zrobimy to w jedną godzinę potrzebujemy tylko login i hasło wysłane na prywatnego maila.

      Usuń
    4. Oczywiście nie odpłatnie za darmo.

      Usuń
  2. Co zrobić żeby działało na WebPlus X5 ?

    OdpowiedzUsuń
    Odpowiedzi
    1. Aby mój skrypt działał tam gdzie się go umieszcza (obojętnie gdzie i na czym) muszą być spełnione trzy warunki:
      Obsługa: HTML 5;
      Obsługa: jQuery;
      Obsługa: JavaScript.

      Jestem pewien, że JavaScript i jQuery są obsługiwane na WebPlus X5.
      Dowodem jest między innymi jedna z wielu strona WWW wykonana w WebPlus i korzystająca z jQuery i co za tym idzie z JavaScript:

      patrz
      i artykuł:
      patrz

      Co do HTML 5 nie jestem pewien, najprawdopodobniej nie obsługuje tego standardu nawet wersja X5.
      Dopiero od X6 miał standard HTML 5 zostać wprowadzony, czego dowodem jest np. ten artykuł:
      patrz

      Oczywiście już na to zaradziłem tu jest poniżej link (SKRYPT) kompatybilny z WebPlus X5 i X6:
      patrz i pobierz

      Uwaga - Na blogger nie trzeba się martwić o wspieranie standardu HTML5, bo jest on wspierany.

      Usuń
  3. Czy możliwe jest zeby w zakładce youtube pojawiał się też film?

    OdpowiedzUsuń
    Odpowiedzi
    1. Co dokładnie Pan/Pani rozumie przez, "...żeby pojawił się film?..."

      Jest to warstwa i na tej warstwie div można wsadzić plik z youtube, a nawet klika filmów, lub cokolwiek innego.

      Usuń
  4. Czy będzie to działać na MyBB?

    Ponieważ wrzuciłem w szablon index wszystko tak jak kazano, jednak nic mi się nie rozsuwa. Jquery wstawiłem zaraz po rozpoczęciu sekcji body.

    OdpowiedzUsuń
    Odpowiedzi
    1. Czy wstawił Pan/Pani część potrzebną do sekcji head, np.:

      skrypt:
      http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js

      Poniższy kod jest kompatybilny z różnymi kombajnami do tworzenia stron WWW.

      patrz i pobierz.

      Ja jak wstawiałem w szablon Blogger, to też musiałem troszkę pozmieniać.

      Na pewno będzie działało!, jak ma Pan/Pani jakieś konkretne pytania programistyczne dotyczące tego POST-a, proszę pytać.

      Usuń
    2. Tak dodałem ten kawałek kodu do sekcji head.

      A być może muszę zainstalować wszystkie te serwisy? Bo mnie interesuje tylko facebook i youtube, być może to jakoś ze sobą koliduje?

      Usuń
    3. Poniżej ma Pan/Pani link tylko do facebook i youtube:

      patrz i pobierz

      Jak ma Pan/Pani jakieś konkretne pytania programistyczne to proszę pytać.

      Usuń
    4. Proszę pamiętać o:

      Kodzie, na samym początku strony definiującej dokument HTML w wersji XHTML.

      Wymagany jest przynajmniej XHTML-1.0-Strict, lub tak jak ja podaję w przykładzie dla Pana/Pani: XHTML-1.0-Transitional.
      Można też używać HTML5, tak jak w przykładzie na samym początku post-a.

      Usuń
  5. Witam
    Śiwetna robota działa pięknie :)
    ale mam pytanko jak zrobic by na NK zamiast śledzika było dołącz do grupy?
    na NK http://nk.pl/#widgets
    są dostępne kody do widgetów więc jak to zmodyfikować ?
    dodam że zajmuję sie tym od tygodnia i nie wszystko wiem ... :)
    pozdrawiam
    Marek

    OdpowiedzUsuń
    Odpowiedzi
    1. Po to jest ten blog, aby ułatwiać a nie szkodzić, -:)

      Proszę a masz:

      patrz i pobierz

      Usuń
    2. Witam,

      Widzę, że trochę pozmieniał Pan kod na Swojej stronie:
      http://pl.digitaltvsolutions.net/
      do wysuwanej naszej klasy.

      Wszystko działa pięknie na Firefox, Opera, Safari i Chrome.

      Jednak nie przetestował Pan tego Swojego zmodyfikowanego skryptu dla Internet Explorer, proponuję to zrobić, :).

      Przyczyny są dwie, przez pomyłkę wstawił Pan podwójnie ten sam kod javascript, oraz zapomniał Pan o kodzie, na samym początku strony definiującej dokument HTML w wersji XHTML.

      Wymagany jest przynajmniej XHTML-1.0-Strict, lub tak jak ja podaję w przykładzie dla Pana: XHTML-1.0-Transitional.
      Można też używać HTML5, tak jak w przykładzie na samym początku post-a.

      P.S.: Pan używa zwykłego HTML 4.0.1, co więcej bez nagłówka dokumentu, który jest niezbędny przy poważnych stronach WWW.

      Usuń
    3. witam
      dziękuję za zwrócenie uwagi :)
      zmieniono co należało i teraz ładnie lata
      fakt że nie sprawdziłem tego dokładnie, ale ...
      pozdrawiam i dziękuję

      Usuń
    4. Aby wszystko było idealnie z moimi paskami, to powinien Pan jeszcze zmniejszyć wysokość paska, aby nie było widać białego na samym dole.

      Usuń
    5. Witam ponownie
      teraz wygląda ładnie :)
      jak widać diabeł tkwi w szczegółach
      pozdrawiam i dziękuje

      Usuń
  6. Siemka. Mam problem z dodaniem ścieżki do zdjęcia (facebook.png, twitter.png itd). Może ktoś pomóc?

    OdpowiedzUsuń
    Odpowiedzi
    1. Cieszę się, że mój post dotyczący paska cieszy się dużym zainteresowaniem.

      Ścieżki do plików o które Pan/Pani pyta są umieszczone na serwerze FTP w miejscu (w katalogu), gdzie jest cały skrypt (strona WWW z paskiem).

      Czyli jak Pan/Pani umieszcza sobie, gdzieś pasek (obojętnie gdzie może być lokalnie u siebie na komputerze), to powinien Pan/Pani w miejscu gdzie umieszcza skrypt z paskiem (stronę WWW z paskiem) zgrać potrzebne pliki.

      Aby temu zaradzić można, albo u siebie tam gdzie Pan/Pani umieszcza swój skrypt (stronę WWW z paskiem) je zgrać (pobrać z Internetu z mojego serwera FTP), albo wpisać ścieżki do zdjęć bezpośrednio do mojego serwera FTP, np. dla facebook ścieżka wygląda tak:

      http://www.katmpbsoft.pl/BLOG/Paski/facebook.png

      Powyższy link może Panu/Pani posłużyć także do pobrania wszystkich pozostałych zdjęć, które są Panu/Pani potrzebne, odpowiednio dla każdego serwisu:

      twitter.png
      nk2.png
      youtube.png
      google.png

      Powodzenia!

      Usuń
  7. Witam chciałbym wstawić te kod na Serif WebPlus X5 starter jak było pokazane na powyższym komentarzu z linkiem do pobrania próbowałem wkleić ale za każdych moich przeróbkach nie działało. Czy istnieje sposób żeby ten kod zadziałał ?

    OdpowiedzUsuń
    Odpowiedzi
    1. Proszę pamiętać o:

      Wymagany jest przynajmniej XHTML-1.0-Strict lub XHTML-1.0-Transitional.
      Można też używać HTML5, tak jak w przykładzie na samym początku post-a, ale:
      Co do HTML 5 nie jestem pewien, najprawdopodobniej nie obsługuje tego standardu nawet wersja WebPlus X5.
      Dopiero od WebPlus X6 miał standard HTML 5 zostać wprowadzony, czego dowodem jest np. ten artykuł:

      patrz

      Oczywiście już na to zaradziłem tu jest poniżej link (SKRYPT) kompatybilny z WebPlus X5 i X6:

      patrz i pobierz

      Jak Pan uważnie wklei kod oraz użyje nagłówka HTML: XHTML-1.0-Strict lub XHTML-1.0-Transitional, podany dla Pana link ruszy.

      Proszę pamiętać o plikach graficznych i je sobie pobrać, więcej na temat plików graficznych w tym post-cie w komentarzach innych użytkowników.

      Jak ma Pan jakieś konkretne pytania programistyczne proszę pytać, może też mi Pan podać link do Pana strony WWW w WebPlus X5 i ja sprawdzę czy wszystko Pan dobrze zaimplementował.

      Usuń
    2. Próbowałem działać jak Pan kazał,na stronie, którą mi Pan padał skopiowałem kod, ale mi nie wyszło więc pobrałem obrazki i umieściłem je w folderze wpimages i dałem link wpimages\facebook.png lub facebook.png z zagłówkami też kombinowałem, ale bez efektu. Podam panu moją stronę testową ,a oryginalna będzie pod innym adresem. Na testowej będzie kod z widgetami i obrazek. http://testwebplus.cba.pl Serdecznie dziękuję za wszelkie pomoce udzielone w tym problemie.

      Usuń
    3. Po pierwsze to ścieżki do plików Pan na Swojej stronie nie uwzględnił.

      Po drugie ten nagłówek ma Pan umieścić na samym początku strony, teraz wsadził go Pan w środek head, a powinien być w miejscu tego z HTML 4.0.1. – pierwsza linia całego pliku html.

      To są podstawy.

      Usuń
  8. Dziękuje za pomoc już wszystko działa. Mam ostatnie pytanie, czy w zakładce facebook mogą być wyświetlane posty ?

    OdpowiedzUsuń
    Odpowiedzi
    1. Mogą.

      Jednak zauważyłem, że odkąd wprowadzono linie czasu na facebook, nie dla wszystkich stron www (facebook) posty się wyświetlają.

      Nie było problemów gdy nie było linii czasu, być może facebook nie długo wprowadzi nowe kody dla linii czasu.

      Więcej poniżej i można też testować swoje strony www (facebook):

      patrz

      Usuń
  9. Witam,

    Bardzo zadowolony jestem z pańskich pasków bocznych. Chciałbym prosić o wykonanie dodatkowego paska "Steam". Moja strona jest o tematyce Counter Strike, bardzo przydatne (nie tylko dla mnie) byłoby to rozwiązanie. Jest możliwość poinstruowania jak to wykonać?

    Pozdrawiam

    OdpowiedzUsuń
    Odpowiedzi
    1. Sam jestem zawodowym graczem, więc postaram się pomóc.
      Proszę rozwinąć temat Steam, wiem co to jest i do czego służy sam gram poprzez Stream, ale co konkretnie chce Pan/Pani osiągnąć?

      Przy okazji jako Właściciel tego bloga pozwolę się Panu/Pani pochwalić, że są gry w których osiągam sukcesy w skali Polski.

      Np. tu wygrałem 2000 zł (drużyny: katmpb[...]):

      patrz

      A w najnowszej edycji:

      patrz

      - moja drużyna: kwiat3, zajmuje 4 miejsce po 4 kolejkach, dwie pierwsze drużyny nie przeszły weryfikacji kont i już nie biorą udziału w grze, są pozostawione tylko dlatego, bo organizator konkursu nie może ich usunąć, ale zablokował graczowi możliwość zarządzania drużynami.

      Piszę o tym dlatego, że z chęciom nawiązał bym znajomość z kimś kto gra, ale gra zawodowo i odnosi korzyści materialne w dowolnej formie, tak jak ja.

      Obecnie przygotowuję się powoli do osiągania sukcesów w Europie w grze Diablo 3 i czerpania z tego korzyści majątkowych.

      P.S.: Niech się Pan/Pani pochwali stroną WWW o Counter Strike (zobaczymy co da się dla Pan/Pani zrobić), zawsze byłem pełen podziwu dla osób grających w tego rodzaju gry, bo nigdy nie byłem w nich mocny.

      PRZEPRASZAM WSZYSTKICH ZA NIESKROMNOŚĆ, ale takie są fakty!

      Usuń
    2. A więc tak,
      Pasek steam przydałby się do poszerzania naszej społeczności na platformie steam.

      Prowadzę własną stronę: [forum dla moich serwerów] http://3mod.pl

      Na ten moment mamy tylko serwery gry Counter Strike 1.6. W przyszłości myślę też o innych typach gier.

      Usuń
    3. Potrzebuję Pana/Pani:

      SteamID
      CommunityGameName
      customURL
      GroupID

      i wtedy można zrobić taki własny widget, na bazie poniższej strony:

      patrz

      Jak poda mi Pan/Pani potrzebne dane to wtedy wyślę Panu/Pani szkic, aby zobaczył Pan/Pani czy wszystko się pobiera i jak tak to zamieszczę za jakiś czas nowego post-a na blogu z utworzonym widget-em.

      Będzie fajna zabawa.

      Usuń
    4. STEAM_0:0:39420559
      http://steamcommunity.com/groups/gracze3mod/
      identyfikator: 3734326

      Czegoś brakuje? Tylko te informacje udało mi się znaleźć.

      Usuń
    5. Teraz to brakuje czasu, za ok. 1 miesiąc się odezwie poprzez bloga w tym post-cie, w komentarzu dla Pana/Pani.

      Jak czegoś będzie brakować, to też dam znać.

      Stworzenie takiego Widget-u jest bardzo pracochłonne, na chwilę obecną najprawdopodobniej będzie trzeba korzystać z AJAX i PHP.

      Ale zainwestuje mój czas w stworzenie takiego Widget-u, bo przyniesie on wiele korzyści mi i Panu/Pani. W szczególności, że nie ma gotowych: Widget-ów Steam, darmowych do zastosowań komercyjnych .

      Jako, że jesteśmy ZAWODOWYMI graczami wypada taki Widget stworzyć, a nie tylko grać w gry - :).

      P.S.: Jeszcze dwie sprawy:
      1. Niech Pan/Pani zerknie na adres [okienko po prawej stronie]: patrz
      2. I niech mi Pan/Pani powie co ma się w nim wyświetlać, czy:
      a) Członkowie;
      b) Liderzy;
      c) Komentarze;
      d) Grupy;
      e) itp.

      Usuń
    6. Jeszcze jedno,
      Z poniższej strony WWW:
      http://steamcommunity.com/groups/gracze3mod/
      można łatwo wyciągnąć ilu graczy jest online, offline, itp.,
      oraz można wyciągnąć członków grupy.

      patrz

      Z tym nie ma żadnego problemu, ale kto to jest:
      http://steamcommunity.com/profiles/76561198039106846
      oraz
      Jednak, żeby wyciągnąć Liderów (Leaderboards) i Zawodników (Player Game Stats) potrzebne jest: CommunityGameName.

      Jakie jest Pana/Pani CommunityGameName, inaczej jak nazywa się gra w Steam w Grupie: „gracze3mod”.

      Usuń
    7. Na razie zrobiłem coś takiego:

      Patrz tutaj

      Jest to dla Diablo 3, wkrótce dla Steam.

      Usuń
  10. Dziękuje za pomoc udało mi się. Posty działają. Jeszcze raz dziękuję.

    OdpowiedzUsuń
    Odpowiedzi
    1. Na stronie:

      http://testwebplus.cba.pl/

      są błędy, np. dołączył Pan dwa razy bibliotekę jQuery raz w wersji 1.3, a raz w wersji 1.7 tego robić nie wolno.

      Rozumiem, że jest ona w trakcie budowy, bo ogólnie to strona WWW się rozjeżdża.

      P.S.: Jak Pan zrobił wyświetlanie postów?

      P.S.2: Z przyjemnością zobaczę jak będzie skończona, :)

      Usuń
    2. Dziękuje o przypomnieniu o błędach, a jeśli chodzi o posty to miałem kod zanim facebook zaczął robić z html5 i podmieniłem linijkę i dodałem szerokość i wyszło mogę Panu podać skrypt jak Pan chce.
      PS: Zaraz jak skończę tworzyć stronę od razu dam Panu link do nowego adresu.
      PS2: Ostanie pytanie wstawiłem nazwę do twitter i nk i tylko te nie działają.

      Usuń
    3. Tak proszę o ten skrypt.

      W Twitter, identyfikator użytkownika bez znaku "@".

      A w NK, identyfikator powinien mieć 7 znaków u Pana ma 6, być może podał Pan zły identyfikator.

      Usuń
    4. Kod przerobiłem na Pana fanpage i wysłałem do Panu na e-mail marekbilski@katmpbsoft.pl, bo tu miałem problemy. Mam jeszcze jedno pytanie, a mianowicie nie do końca wyświetla mi się widget nk na pasku i bez paska. Na pustej stronie bez niczego działa, a ze stroną nie do końca.

      Usuń
    5. Dzięki za kod -
      Jakie tu miał Pan problemy.

      Co do NK i Twitter, bo te dwa się u Pana źle wyświetlają.
      Przyczyn może być wiele, ale jak dla mnie:
      W przypadku NK, przyczyną jest dodanie przycisku Fajnie i załadowanie niepotrzebnie jeszcze raz skryptów, która są przy pasku.

      Kod do wstawienia Fajnie daje Panu poniżej:

      patrz i pobierz

      To samo pewnie będzie z Twitter, tu ma Pan kod którego ja używam:

      patrz i pobierz


      Trzeba pilnować! - kodu programistycznego przy serwisach społecznościowych, bo lubią się one gryźć ze sobą w szczególności jak używa się na stronie WWW dwa razy tego samego serwisu społecznościowego. Chociażby raz do dodania Fajnie w NK, a raz do dodania profilu NK lub grupy NK.

      Usuń
    6. Moje kody są wolne od "GRYZIENIA" !!!

      Usuń
  11. witam,
    Bardzo dziękuję za ten skrypt. Mam jednak problem z nk. Ponieważ na nk mam założoną "grupę" a nie "profil". A po kliknięciu na widget odsyła do profilu, który oczywiście nie jest mój. Jak mam temu zaradzić?

    OdpowiedzUsuń
    Odpowiedzi
    1. Dodam, że adres do grupy to: http://nk.pl/#grupy/431775 a w tym wigdecie adres jest" http://nk.pl/profile/nr profilu - i to właśnie nie wiem jak zmienić :) kombinuję jak koń pod górę i nic. Ale Google+ i facebook działa super :)

      Usuń
    2. Tu ma Pan/Pani link jak umieszczać grupę NK zamiast profilu NK:

      patrz i pobierz

      Wystarczy w atrybucie data-nk-group-id, wstawić Pana/Pani numer.

      Usuń
    3. nie wiem jak Tobie dziękować! Pomodlę się za Ciebie! i jeszcze raz dzięki

      Usuń
  12. zastanawiam się, czy taki panel może istnieć, ale nie jako jakiś skrypt, tylko np. zwykły prostokątna tablica z jakimiś ogłoszeniami;)? Mam już button przygotowany (ogloszenia) i byłoby super jakby się wysuwał jak widgety, a w środku mógłbym pisać kilka aktualnych info...

    OdpowiedzUsuń
  13. WITAM aa to wszystko ale na lewą stronę jak zrobić ?

    OdpowiedzUsuń
  14. Nie wiem co robię źle, ale nie wychodzi mi :(
    Męczę się z zakładką facebook na www.podworko-wroclaw.blogspot.com

    :(

    OdpowiedzUsuń
    Odpowiedzi
    1. Interesuje mnie tylko zakładka 'facebook'.
      - zmieniam atrybut data-href="" na właściwy, ale gdzie mam "dodać odnośnik do zdjęcia".
      - mam cały Pana kod (ze naniesionymi zmianami) skopiować i wkleić do szablonu bloga?
      - nie mogę znaleźć w moim szablonie 'body' (jest tylko 'body expr:class='"loading" + data:blog.mobileClass')
      - nie rozumiem też: "Wyjątek stanowi część kodu jQuery, która na stronie www, nie powiązanej z blogger.com, była umieszczona tuż za znacznikiem 'body', w serwisie blogger.com na naszym blogu musi być w części HEAD, tuż przez końcem znacznika '/head'"

      Miła zabawa przerodziła się w istny koszmar! :))
      Proszę o pomoc :)

      Usuń
    2. Już wszystko tłumaczę.
      Jest to proste, lecz praca programisty jest czasami koszmarem i tu się z Panią zgadzam.

      W szablonie bloga, tuż przed poniższym znacznikiem:
      [/head]

      Umieszczamy:

      [script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/]
      oraz
      WIDGET GOOGLE+
      Tylko ta cześć od google+, która dotyczy HEAD
      KONIEC WIDGET GOOGLE+
      i
      [script type='text/javascript']
      Skrypt z mojej strony.
      [/script]


      Natomiast, tuż przed znacznikiem:
      [/body]

      Umieszczamy pozostały kod:

      WIDGET FACEBOOK
      KONIEC WIDGET FACEBOOK
      WIDGET TWITTER
      KONIEC WIDGET TWITTER
      WIDGET NASZA-KLASA
      KONIEC WIDGET NASZA-KLASA
      WIDGET YOUTUBE
      KONIEC WIDGET YOUTUBE
      WIDGET GOOGLE+
      KONIEC WIDGET GOOGLE+


      Proszę wszystko umieścić na blogu zgodnie z moimi wytycznymi, a ja zerknę na Pani kod i ewentualnie powiem co poprawić.


      P.S.:
      1. Odnośniki do zdjęcia są w tej postaci:
      http://www.katmpbsoft.pl/BLOG/Paski/facebook.png
      2. Instrukcje dałem na samym początku tego komentarza
      3. Pani musi znaleźć [/body], nie rozpoczynający tylko kończący to samo z [/head]
      4. Szuka Pani w szablonie bloga znacznika [/head] i tam Pani umieszcza kod o który Pani się pyta, instrukcje dałem na samym początku tego komentarza.

      Usuń
  15. Wydaje mi się, że zrobiłam wszystko jak trzeba. Na moim blogu pojawił się znacznik Facebook z boku strony i tylko o niego mi chodziło, bo Twittera już mam, ale niestety on się nie wysuwa. Nie mogę na niego kliknąć i nie wiem czemu tak jest.
    W czym tkwi problem?

    OdpowiedzUsuń
    Odpowiedzi
    1. Uff poradziłam sobie, ale trochę mi to zajęło:)
      Tylko teraz przycisk FB nachodzi mi na Twittera. Można zmienić by był wyżej lekko?

      Usuń
    2. Witam,

      Cieszę się, że wszystko sie Pani udało.
      Co do nachodzenia Twittera na FB, to już chyba jest wszystko ok. Przynajmniej na moje - ptaszek od Twit-a, jest poniżej facebook.

      P.S.: Gratuluję naprawdę innowacyjnego bloga.

      Usuń
    3. Troszkę mi to zajęło, ale jakoś sobie poradziłam:) Jestem laikiem, ale dałam radę i jestem z siebie dumna!:)
      Jeszcze teraz kombinuje jak zrobić by wysuwał się obrazek z linkiem do jakiejś strony, nie społecznościowej. Mam nadzieję, że mi się uda.
      Pana post bardzo mi pomógł!
      Dziękuję.
      Pozdrawiam
      Magda

      Usuń
  16. Bardzo fajne, ale niestety niekompatybilne z IPB, po umieszczeniu kodu blokuje on elementy IPB, np zmianę skórki, skok do góry i inne elementy

    OdpowiedzUsuń
    Odpowiedzi
    1. Jest kompatybilne ze wszystkim co wspiera: przynajmniej XHTML-1.0-Strict lub XHTML-1.0-Transitional.
      Można też używać HTML5, tak jak w przykładzie na samym początku post-a.

      http://www.invisionpower.com/ -
      to wszystko wspiera, ale nie należy np. dołączać dwa razy jQuery, które to domyślnie jest już w IPB.

      Proszę podać Pana/Pani adres www z zainstalowanym IPB i moim skryptem postaram się pomóc.

      Usuń
    2. Napisałem Panu maila, nie wiem czy powinienem, no, ale...

      Same boksy działają wspaniale, ale tak jak napisałem w mailu, wyłącza mi to inne elementy www.

      Pozdrawiam

      Usuń
    3. Proszę Pana/Pani niech Pan/Pani przeczyta mój opis.

      Po pierwsze skrypt jQuery z mojego skryptu jest niepotrzebny, gdy jest już dołączony z innej biblioteki, w Pana/Pani przypadku IPB 3. - CHODZI MI, ŻE NIE UMIESZCZA SIĘ jednej linijki odpowiedzialnej za załadowanie (pobranie) biblioteki jQuery, pozostał część musi być.
      Po drugie dlaczego w head umieszcza Pan/Pani, np. kod od facebook, ten kod umieszcza się w części body, jest to dokładnie opisane w moim post-cie.

      Proszę zmodyfikować to o czym napisałem, powinno pomóc w razie czego służę dalszą pomocą.

      Usuń
  17. Ale bez tego kodu nie wysuwa się nic. Obecnie jest ustawione bez Pańskiego jQuery, można zobaczyć.

    W < head> nie mam nic, wszystko jest zawarte nad samym < /body>.

    Proszę dokładnie popatrzeć.

    OdpowiedzUsuń
    Odpowiedzi
    1. Jeżeli to jest ten adres url:
      http://torrentinvite.org


      To na samym początku jest:

      [head]
      [div id="fb-root"][/div]
      [script](function(d, s, id) {
      ...


      P.S.: Proponuję też testować od razu na Internet Explorer.
      Służę dalszą pomocą.

      Usuń
    2. To czy jest 1.7.0, czy 1.7.1 nie ma znaczenia.

      Usuń
    3. Hmm, owszem, jest taki kod jak Pan podaje wyżej do FB, ale to nie ten skin ;) Na skinie gdzie jest ten kod, działa inny box, wysuwany z lewej i dostępny z Opery czy FF.

      Trzeba na dole zmienić na drugi.
      Na nim jest wrzucony kod z tego tutoriala i mówimy cały czas o drugim skinie, nie tym głównym, który jest widoczny po wejściu.

      Na mailu skopiowałem cały head i body.


      Mylimy skiny teraz :)

      Usuń
    4. Ok, zajrzałem.

      Po pierwsze są i tak dwa razy dołączane biblioteki jQuery, a tego nie wolno robić.

      Linia 2231:
      Topic HoverCards
      [script type='text/javascript' src='http://torrentinvite.org/public/js/jquery-1.8.2.min.js'][/script]

      Linia 76:
      [script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"][/script]


      Po drugie to niech Pan/Pani spróbuje umieścić mój skrypt w jQuery przed:
      [div id="fb-root"][/div].

      W razie czego służę dalszą pomocą.
      P.S.: Sam zajrzę do kodu po zmianach i zobaczę czy coś jeszcze jest nie tak. – CIEKAWE.

      Usuń
    5. A jeszcze jedno:

      Linie:

      jQuery.noConflict(); - usuwamy, gdy nadal po zmianie poniższej drugiej linii nie będzie się wysuwało.

      a linię:

      jQuery(document).ready(function()
      {
      ...
      }

      zamieniamy na:

      $(document).ready(function()
      {
      ...
      }

      Usuń
    6. i jeszcze to:

      $("#bannersBottom").css( 'height', '60px' ); $("#bottomBanner").simplyScroll({pauseOnHover: true, customClass: 'bottomBanners'});

      zamiast jQuery("#bannersBottom") i JQuery"#bottomBanner").

      To wszystko na pewno pomoże, ale trzeba zrobić to umiejętnie.

      Usuń
    7. Trzeci raz Pana proszę aby przełączył Pan na DRUGI skin a Pan dalej pisze mi o skinie głównym gdzie NIE MA Pańskiego kodu.

      Proszę na dole strony po lewej przełączyć na drugi skin, tam jest wrzucony kod i tam nie wysuwa się box.

      Nie mam w tym skinie czegoś takiego jak

      [div id="fb-root"][/div]

      ani tego drugiego.

      Usuń
    8. Już się przełączyłem i widzę facebook i youtube.

      I to co napisałem dotyczy drugiego skina.

      P.S.: Używam znaków [ ], zamiast prawdziwych otwierających i zamykających taki html, bo w postach bloga ich nie można umieszczać.

      Usuń
    9. W nowym skinie jest [div id="fb-root"][/div] i co więcej we właściwym miejscu.

      Proszę wykonać to co napisałem, a na pewno wszystko pójdzie.

      Usuń
    10. Ale w < body>, nie w < head> jest ten fb-root

      Niestety, ale oryginalnego kodu IPB nie mogę poprawiać bo z tego może być niezły młyn później. Skoro Invision Power tak to napisali to albo oni nie wiedzą co piszą albo nie wiem.

      Usuń
    11. No niestety tak jest, że trzeba kod dostosować chociaż w minimalnym miejscu.

      Tak jak pisałem problem jest w tym, że raz jest użyte
      jQuery(document).ready(function()

      chodzi o jQuery, a ja w moim skrypcie używam
      $(document).ready(function()

      chodzi o znak dolara.
      Proszę zmienić mój skrypt w minimalny sposób, jak Pan/Pani nie może ruszać Swojego.

      P.S.: tak w body jest ok.
      Na chwilę obecną nic już Panu/Pani poza to co napisałem nie jestem wstanie pomóc, jak Pan/Pani wykona to co pisałem we wszystkich post-ach do Pana/Pani w różnej konfiguracji to pomoże, a jak nie to może Pan/Pani do mnie nadal pisać.

      Usuń
    12. Ok, zrobiłem za Pana/Panią:

      tu ma Pan/Pani rozwiązanie:

      Proszę a masz

      Usuń
    13. Dziękuję za pomoc.

      IPB się nie chwytam bo jak coś zepsuję to rozsypie się wszystko i może braknąć wiedzy aby później dojść do ładu.

      Pozostaje przytoczyć pierwszy komentarz, że z IPB3 nie jest to kompatybilne a wielka szkoda bo boxy wyglądają bardzo imponująco.

      Przeróbki tych boxów też się nie chwycę bo niestety nie wiem jak.

      Pozdrawiam i jeszcze raz dzięki za czas i chęci.

      Usuń
    14. Rozminęliśmy się komentarzami.

      Kurcze, teraz działa perfekcyjnie!

      No ideał :) Dzięki wielkie

      Usuń
  18. Witam, po dłuższej przerwie znów się odzywam, aby pokazać Panu stronę oto adres: http://biblioteka-jarocin.cba.pl/

    OdpowiedzUsuń
    Odpowiedzi
    1. Witam,

      Powiem tak, zastosował Pan wszystko to co Panu pisałem i teraz jest lepiej.

      Ale pozostają dwie kwestie - jedna związana z moim skryptem, a druga związana z Pana stroną.

      Jeżeli chodzi o mój skrypt to nie wysuwa się u Pana pasek z facebook, pewnie to jakaś drobnostka, ale wypadało by to dobrze zrobić.

      Po drugie Pana strona nie wyświetla się poprawnie w Internet Explorer, nie chodzi mi o mój skrypt tylko o całą stronę.

      Pozdrawiam i życzę dalszej owocnej pracy.

      Usuń
  19. Witam - nie mogę sobie poradzić z zamianą profilu nk na grupę... czy mógłby Pan napisać jak to mam zrobić?
    Wcześniej podał pan rozwiązanie-e - zobacz i pobierz, ale nie zabardzo to rozumiem.

    OdpowiedzUsuń
    Odpowiedzi
    1. Proszę - poniżej link do kodu jak to zrobić:

      patrz i pobierz

      Usuń
    2. Proponuję też podnieść Pana/Pani paski wyżej na Pana/Pani stronie www, aby były widoczne na mniejszych monitorach.

      Z tego co zauważyłem to ma Pan/Pani już grupę zamiast profilu.

      Usuń
  20. Witam.
    Mam sklep na shoper.pl próbuje skorzystać z Pana kodu do like box-a facebook. wszystko działa, ale gdy wprowadzam w części head linie

    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"

    przestaje mi działać slider który zmienia banery i zmienia sie wygląd opcji przeglądania produktów (są cały czas rozwiniete gdzie poprzednio były częściowo zwiniete)

    Mam kilka możliwości modyfikacji strony albo przez integracje własne gdzie mam sekcje head i body albo własny styl css i własny styl js (javascript)
    Nie wiem co robię źle. To jest moja pierwsza styczność z kodami stron html. Proszę o pomoc. Strona www.perfumerianiebieska.pl

    OdpowiedzUsuń
    Odpowiedzi
    1. Witam,

      Widzę, że już Pan/Pani poradził sobie z problemem, czy tak?

      Usuń
    2. Niestety nie. Jak pisałem nie działa mi slider zdjęć.
      Teraz usunę skrypt likeboxa i zobaczy Pan o co mi chodzi.
      baner gdzie jest 13 lat doświadczenia powinien sie zmieniać na inny a stoi w miejscu.
      Pozdrawiam.

      Usuń
    3. Proszę usunąć zobaczę, potem ponownie powrócimy do skrypt likeboxa i dam Panu/Pani odpowiedź co trzeba zrobić.

      Usuń
    4. Skrypt usunąłem. Jest teraz poprawnie czyli slider na środku strony przewija zdjęcia. Proszę zwrócić uwagę w lewej kolumnie gdy wejdziemy do menu i wybierzemy perfumy, rozwiną się opcje przeglądania gdzie część z producentami jest częściowo schowana, a gdy zastosowałem skrypt likeboxa lista była całkowicie rozwinięta.

      Usuń
    5. Ok, proszę z powrotem przywrócić cały mój kod poza tą jedną linią z jQuery, potem będziemy działać dalej, być może Pana/Pani strona już gdzieś taką linię z jQuery ma i nie trzeba jej dodawać drugi raz.

      Usuń
    6. Przywróciłem kod tak jak wcześniej wysłałem na e-mail. Teraz strona działa poprawnie ale nie wysuwa się widget (oczywiście bez wpisania w sekcji head linii jQuery)

      Usuń
    7. Na stronie zauważyłem, że skrypt jest w części head, a powinien być w body, proszę to zmienić i będziemy działać dalej.

      Usuń
  21. Zrobione. skrypt i skrypt widget facebook umieszczone w body.

    OdpowiedzUsuń
    Odpowiedzi
    1. Bardzo ciekawe.
      Przychodzi mi jeszcze jeden pomysł.
      Proszę skorzystać z poniższego mojego skryptu, ale na razie nie dodawać tej nieszczęsnej linii.

      patrz

      Usuń
    2. Nie wiem za bardzo jak go zapisać w formie czytelnego kodu?
      i jeszcze jedno znalazłem coś takiego, może coś podpowie

      Mario05/11/2012 at 08:24
      Witam,
      Znalazłem takiego slidera
      http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
      tylko nie wiem jako go wgrać żeby działał poprawnie. Możę wspólnymi siłami damy radę coś stworzyć.

      Kudzu15/11/2012 at 14:40
      Mam pytanie – czy jest jakas wtyczka/modyfikacja która by produktu ktorych nie ma na stanie wyświetlały się na koncu kategorii/listingu?

      Grzegorz Rusin17/11/2012 at 17:26
      efekty parallax są bardzo fajne w sumie ten slajder używamy na naszej nowej stronie. Problem w tym że Shoper bazuje na bibliotece MooTools a ten slajder na bibliotece jQuery. Łączenie obu bibliotek nie jest zbyt dobrym pomysłem. Postaram się poszukać podobnego slajdera opartego na mootools

      Grzegorz Rusin17/11/2012 at 17:27
      niestety nie znam takowej ale podpytam w tym temacie bezpośrednio w shoperze

      Usuń
    3. Dokładnie właśnie dlatego dałem Panu/Pani mój nowy skrypt.

      Chodzi o zamianę: znaku $ na jQuery i dodaniu jednej linii (jQuery.noConflict();). - powinno pomóc, teraz to będzie mógł od razu Pan/Pani dołączyć tę nieszczęsną linię.

      Tu jest ciekawy artykuł:
      czytaj

      Usuń
    4. dobrze dałem rade, jednak nie jestem taki głupi jak myślałem :) Dziękuję bardzo za pomoc. Jak można wiedzieć to jaki był konflikt? Serdecznie pozdrawiam.

      Usuń
    5. Były dwa konflikty:

      pierwszy to, że muszę szybko przerobić mój skrypt na znak jQuery zamiast znak $, bo często się to gryzie z płatnymi serwisami internetowymi, nie jest Pan/Pani pierwszy, to samo jest na IPB (http://www.invisionpower.com), przykład: http://torrentinvite.org - problem rozwiązany.
      Drugi konflikt, był pierwszym konfliktem, :).

      Usuń
  22. Witam, Otoz jestem zielony w temacie programowania lecz chcialbym sie nauczyc co nieco :) wkleilem podamy kod html na swoja strone internetowa i wyglada to tak(www.transport-pomorze.manifo.com.) Widze ze wszystkim dal Pan rade pomoc wiec mam nadzieje ze ja rowniez dolacze do tego grona. Czy moze mi pan podpowiedziec jak i co zmienic :D Pozdrawiam

    OdpowiedzUsuń
    Odpowiedzi
    1. Witam,

      1:
      Ścieżki do plików z grafiką są umieszczone na serwerze FTP w miejscu (w katalogu), gdzie jest cały skrypt (strona WWW z paskiem).

      Czyli jak Pan/Pani umieszcza sobie, gdzieś pasek (obojętnie gdzie może być lokalnie u siebie na komputerze), to powinien Pan/Pani w miejscu gdzie umieszcza skrypt z paskiem (stronę WWW z paskiem) zgrać potrzebne pliki.

      Aby temu zaradzić można, albo u siebie tam gdzie Pan/Pani umieszcza swój skrypt (stronę WWW z paskiem) je zgrać (pobrać z Internetu z mojego serwera FTP), albo wpisać ścieżki do zdjęć bezpośrednio do mojego serwera FTP, np. dla facebook ścieżka wygląda tak:

      http://www.katmpbsoft.pl/BLOG/Paski/facebook.png

      Powyższy link może Panu/Pani posłużyć także do pobrania wszystkich pozostałych zdjęć, które są Panu/Pani potrzebne, odpowiednio dla każdego serwisu:

      twitter.png
      nk2.png
      youtube.png
      google.png

      2:
      Należy w kodzie programu ustawić Swoje identyfikatory do facebook, twitter, youtube, nk i google+ - jest to dokładnie opisane w moim post-cie.

      Powodzenia!

      Usuń
    2. co do pkt pierwszego to zapisac zdjecie na komputerze ?? gdzie je wstawic ?? Fajnie by bylo jak by mi sie powiodlo :P (chociaz z facebookiem :D )

      Usuń
    3. W skrypcie wstawia Pan/Pani zamiast facebook.png, coś takiego: http://www.katmpbsoft.pl/BLOG/Paski/facebook.png

      Analogicznie dla pozostałych.

      Usuń
    4. ok dziala :) Dziekowac. wiem ze dla pana to podstawy ale dla mnie to kosmos czasem. dopiero wchodze w ten swiat :P A co do pkt 2 moge prosic jasniej jak to zrobic ? potrzebuje do tego jakis program czy na stronie zmodyfikowac kod ?? i takie prywatne pytanko jest Pan samoukiemm czy po jakiejs szkole informatycznej ?

      Usuń
    5. Punkt 2 jest dokładnie opisany w tym post-cie na samym początku.

      Np. Na facebook-u, należy mieć konto i na nim stronę facebook, potem podać w parametrze w skrypcie adres tej strony facebook, u mnie jest to:
      data-href=" http://www.facebook.com/pages/KatMPBSoft/145582058840684"

      Analogicznie dla pozostałych.

      P.S.: UAM - mgr. Ale prywatnie Panu/Pani powiem, że nie ma to żadnego znaczenia. Znam inż, znacznie lepszych od mgr.

      Usuń
    6. ok jakos dalem rade. dziekuje za pomoc :) apropo Pana kwalifikacji tez juz przeczytalem calkiem ladne "CV " nic tylko sie ksztalcic :D Postaram sie jakos odwdzieczyc. chcialem polubic Panski blog ale cos nie dziala. jak pan moze to niech to sprawdzi. Pozdrawiam raz jeszcze

      Usuń
    7. Blog działa wybornie, o co chodzi?

      Na Pana/Pani stronie są do facebook, źle dobrane parametry width i height. Powinny być takie jak w moim skrypcie tam gdzie dodawał Pan/Pani stronę facebook - tego zmieniać nie wolno.

      Usuń
  23. Witam, mam takie pytanie czy da rade to podpiąć pod strone na wordpressie??

    OdpowiedzUsuń
    Odpowiedzi
    1. Jest kompatybilne ze wszystkim co wspiera: przynajmniej XHTML-1.0-Strict lub XHTML-1.0-Transitional.
      Można też używać HTML5, tak jak w przykładzie na samym początku post-a.

      Tak można podpiąć pod wordpress-a.

      Najlepiej używać tego linku:
      Patrz

      Usuń
  24. Witam

    Mam problem z ustawieniem Naszej Klasy, YouTube i Google+... prosze o wskazówki do konfiguracji...
    http://www.inforpartner.pl

    OdpowiedzUsuń
    Odpowiedzi
    1. Witam,

      Co do Youtube to w tej formie: http://www.youtube.com/subscribe_widget?p=InforPartner

      Co do NK wygląda poprawnie ale jest brak wpisów dlatego nic się nie wyświetla, co do zdjęcia powinno się też wtedy pojawić.

      Co do Google+, też jest wszystko poprawnie, twarze dodadzą się jak ktoś da do obserwowanych. Można co jedynie zmienić kolejność, aby zamiast dodaj do kręgów było obserwuj.

      Usuń
    2. Sprawdziłem jeszcze to Google+, nie macie utworzonej strony WWW w Google+ (wewnątrz Google+) - po utworzeniu należy dodać link do niej w moim skrypcie, czyli adres www: http://...
      Należy też w Google+ uaktywnić 1+

      Usuń
    3. problem jest z naszą klasą... wpisałem różnego rodzaju wpisy i dalej nic sie nie wyświetla...

      Usuń
    4. Na tej stronie wygeneruje sobie Pan/Pani kod do wstawienia w moim skrypcie dla Pana/Pani konta NK:
      http://nk.pl/#widgets

      Proszę tylko pamiętać, że szerokość to 250px, a wysokość 390px.

      Wygenerowany kod umiejętnie wstawić do mojego skryptu.

      Usuń
    5. Zauważyłem na Waszej stronie, że macie już dołączony plik jQuery 1.7.0, więc nie musicie go już drugi raz dołączać.

      Usuń
    6. Dziekuje! i Życze Wesołych Świąt!

      Usuń
  25. Jeśli ktoś ma bloga postawionego na WordPress i chciałby zrobić wysuwanego likeboxa to polecam zastosowanie bardzo prostej wtyczki, a mianowicie wtyczki Free Social Slider By ARScode. Wymagane jest podanie URL Twojego funpage, ustawienie pozycji: w lewo lub w prawo, pokazywanie twarzy lub nie, pokazywanie strumieni lub nie i gotowe. Szybko, darmowo i skutecznie :) Pozdrawiam.
    Zobacz jak działa ta wtyczka na blogu http://pracabezszefa.pl

    OdpowiedzUsuń
    Odpowiedzi
    1. Witam,

      Ale ta wtyczka ma jedną podstawową wadę, działa tylko na WordPress, a moja wtyczka działa na wszystkim: wszystkich blogach (blogger.com, WordPress i wielu innych) i stronach WWW (PHP, HTML i innych: [forach, serwisach internetowych, portalach]).
      Co więcej nie jest tylko do Facebook, ale do wszystkiego: NK, Facebook, Twitter, Youtube, Goolge+ i wszystkiego innego co tylko potrzeba.
      I co więcej nie trzeba uczyć się wiele razy jak programować skrypt z moimi paskami, wystarczy raz, że się nauczysz i wszędzie możesz korzystać.

      Usuń
  26. A czy mógłby Pan łopatologicznie wyjaśnić jak wkleić ten kod do forum opartym na myBB? Ponieważ jestem kompletnie zielony i nie wiem gdzie wkleić kody, by dział sam slidebox facebooka?

    Pisał Pan już odnośnie myBB i podawał link, ale nic z niego dla mnie nie wynika ;/

    OdpowiedzUsuń
    Odpowiedzi
    1. Witam,

      Poniżej specjalnie dla Pana/Pani przygotowany skrypt tylko z Facebook, kompatybilny z myBB.

      Patrz

      Ten skrypt jest z samymi twarzami Facebook.
      Gdy chce mieć Pan/Pani jeszcze stream należy ustawić:
      data-stream="true";

      Co do wyjaśnień, są dwa:
      1. w części HEAD podaje Pan/Pani link do biblioteki jQuery, tak jak ja to zrobiłem o ile nie ma Pan/Pani już jej dodanej;
      2. w części BODY wstawia Pan/Pani kod, żywcem w formie co w skrypcie, zmieniając jedynie atrybut: data-href="...", w którym należy podać adres Pana/Pani strony WWW w Facebook.

      Myślę, że pomogłem.

      Usuń
    2. Przybliżył Pan do rozwiązania, lecz nie do końca pomógł, gdyż ktoś kto zna się trochę na tym, wie co zrobić. Ja dopiero zaczynam i stworzenie samego skryptu nie bardzo pomaga. Przejrzałem kod i pytanie brzmi: jak to zaimportować do myBB? Co gdzie wkleić?

      Usuń
    3. Wkleja Pan/Pani żywcem to co podałem (jeszcze udoskonaliłem dla Pana/Pani kod, aby było jeszcze prościej).

      Pyta się Pan/Pani, gdzie to wkleić, a no tam gdzie w myBB wkleja się kod HTML.

      Usuń
    4. W gwoli ścisłości, jestem Pan, nie Pani :)

      Co do wklejania całości w miejsce gdzie, w myBB wkleja się kod HTML, to... można wkleić go wszędzie :) W niezgrupowane szablony, w Headera, W nagłówki i Index - opcji jest mnóstwo.

      Usuń
    5. To niech Pan poda adres WWW na którym jest odpalony myBB, to powiem dokładnie gdzie wkleić.

      Usuń
    6. adres, to kolodziejczyk.ugu.pl

      Usuń
    7. Cały kod z pliku (podkreślam cały):

      pobierz - pomoc3.htm

      wstawia Pan w linie numer 124, w Pana kodzie kolodziejczyk.ugu.pl, przed:
      -- start: header --

      Usuń
  27. Witam

    U mnie wszystko jest ok. Jednak mam jeden problem z FB, mianowicie wysuwa mi się ślicznie pasek ,ale nic w nim nie ma.
    Pewno wychodzi moje laictwo ,ale z niczym innym nie miałem problemu.
    Jeśli znajdzie Pan chwilę proszę o jakieś sugestie.
    Pozdrawiam

    OdpowiedzUsuń
    Odpowiedzi
    1. Proszę o adres strony WWW - na którym są paski, to od razu pomogę.

      Jeżeli chodzi o facebook, to czy nie wyświetlają się twarze, czy też nie wyświetlają się wpisy ze strony WWW facebook?

      Usuń
  28. Docelowa constanza.pl Jednak teraz mam to na swoim WebServ-ie http://89.68.139.139/ Strona testowa:P

    OdpowiedzUsuń
    Odpowiedzi
    1. Na constanza.pl jest pusto od pasków;
      Na http://89.68.139.139/ - nie odpowiada teraz o 00:28, więc sprawdzę jutro.

      Usuń
    2. Witam ponownie - sprawdziłem Pana kod na 89.68.139.139, wydaje mi się, że problem leży w tym, że użył Pan CDATA, w dwóch a nie w jednym miejscu.
      CDATA umieszczamy tylko w części powiązanej z jQuery i wysuwanymi paskami, a Pan dodatkowo wpakował to CDATA w skrypt js od facebook, ja nigdzie tego nie robiłem, skrypt facebook, nie może się właściwie przez to zainicjalizować.

      To powinno pomóc, zważywszy na fakt, że Pana strona WWW facebook jest prawidłowa - sprawdziłem tutaj: like-box.

      Usuń
    3. Dziękuję za odpowiedź.Jednak coś jest nie tak gdyż nawet Pana wzorcowy kod ma problem z Facebookiem na mojej stronie.
      Coś delikatnie mówiąc przeoczyłem.

      Usuń
    4. Panie tu chodzi o CDATA, które Pan nie potrzebnie wstawia, linia kodu 80 i 88 na: 89.68.139.139.
      Niech Pan usunie linię 80 i 88 i będzie dobrze, a jak nie to działamy dalej.

      Usuń
    5. Wcześniej też z CDATA kombinowałem,ale jest to samo.

      Usuń
    6. Co jest w tym pliku: jquery.js, czy przypadkiem nie ma drugiego dołączenia biblioteki jQuery?

      W linii 82 ma być tak:
      var js, fjs = d.getElementsByTagName(s)[0];
      -jeden a nie dwa średniki.

      Oraz proszę spróbować tego skryptu dla wysuwania pasków:
      patrz

      INNYM ZAWSZE TO POMAGAŁO!

      Usuń
    7. Serdecznie dziękuję za pomoc.
      Okazało ,że program Artisteer nadpisuje mi jakieś bzdury w szablonie.

      Usuń
    8. Jeszcze małe zapytanie.
      Co zrobić by ikony nie chowały mi się tak bardzo jak to ma miejsce na tej stronie: http://89.68.139.139/ ?

      Usuń
    9. Już znalazłem. Wystarczy zmienić wartość w "absolute; left:"
      Super strona.Pozdrawiam.

      Usuń
    10. Witam, podczepie się do tematu. Ponieważ jak wkleje Pana cały kod wszystko ładnie pięknie.
      Jednak jak zmienie adres facebooka na swój, to wysuwany pasek jest pusty i nic w nim nie ma. Jak zmienie adres na pana facebooka, to jest ok.
      Prosiłbym o pomoc. Pozdrawiam

      Usuń
    11. Witam,

      A czy podaje Pan/Pani adres WWW Facebook, czy tylko profil.
      Należy również założyć stronę WWW na Facebook.

      Proszę o link do Pana/Pani strony WWW na którym są paski.

      Usuń
    12. Szczerze powiem, że robię to dla kogoś to po pierwsze, po drugie nie mam sam facebooka i ja osobiście z niego nie korzystam i się na nim nie znam oraz na jego funkcjonalności.
      https://www.facebook.com/chata.gieda
      Tak też właśnie myślałem że pewnie jest to zwykły profil, a musi to być tzw. fanpage?
      Oczywiście dziękuję za tak szybką odpowiedź.

      Usuń
    13. Tak musi to być fanpage.

      Ale na paskach może Pan/Pani umieszczać co tylko chce.

      Usuń
  29. JAK MOGE UZYSKAĆ NUMER KONTA Z NK CZYLI UID ?

    OdpowiedzUsuń
    Odpowiedzi
    1. Po zalogowaniu się do swojego konta nk, i wybraniu na pierwszej stronie WWW -> PRZEJDŹ DO PROFILU (nie chodzi o górne menu, tylko o kliknięcie w prawej stronie swojego głównego obrazka) - trzeba poszukać.
      Jak przejdziemy do "PRZEJDŹ DO PROFILU" - uid będzie widnieć w adresie WWW w pasku przeglądarki internetowej.

      Lub druga prostsza metoda:
      Po zalogowaniu wchodzimy na adres WWW: http://nk.pl/#widgets i dalej wybieramy "Widżet z wpisami" klikamy DALEJ, i znów klikamy DALEJ - w wygenerowanym kodzie mamy nasz UID.

      Usuń
  30. Witam
    Może Pan napisać jak dodać obrazek by wypełniał całą zakładkę wewnątrz? : http://katmpbsoft.pl/BLOG/Paski/puste.htm

    OdpowiedzUsuń
    Odpowiedzi
    1. W tym skrypcie jest taki komentarz:
      //TU PISZEMY
      w linii 30;

      Jak ma być tam wstawiony obrazek czyli img, to należy podać: width: 300px; height: 398px; i wstawić w linię 30.

      To samo np. jak chcemy tam wstawić np. film Youtube, czy coś innego.

      Usuń
    2. Faktycznie, działa.
      Bardzo dziękuje.

      Usuń
  31. Można zapytać dlaczego po zmianie zakładki na stronie zmienia mi się całkowicie pasek boczny? http://89.68.139.139/

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie bardzo wiem o którą zakładkę chodzi.

      Na moje wszystko jest ok na podanej stronie WWW.

      Usuń
    2. A już chyba wiem,

      proszę używać tego skryptu:
      patrz

      A cała reszta zgodnie z moimi wcześniejszymi uwagami i Pana wnioskami.

      Usuń
    3. Oraz na 89.68.139.139 jest ustawione: left:-75px, na pozostałych stronach (plikach html) jest ustawione left:-33px.

      Usuń
    4. To jest to.Na każdej podstronie trzeba oddzielnie wpisać każdą wartość px,

      Usuń
  32. Robię wszystko jak Pan napisał, ale na stronie wyskakują błędy po dodaniu kodów:

    syntax error: unrecognized tag: right: "0px" (Smarty_Compiler.class.php, line 446)

    syntax error: unrecognized tag: jQuery("#facebook2_2").hover(function(){ jQuery(this).stop(true,false).animate({right: "0px" (Smarty_Compiler.class.php, line 446)

    Mam sklep postawiony na Click Shopie. Proszę o jakąś pomoc

    OdpowiedzUsuń
    Odpowiedzi
    1. Witam,

      Proszę podać adres stron WWW, to powiem co w kodzie jest nie tak.

      Na pewno damy radę, :)

      Usuń
    2. Jeszcze jedna uwaga - te błędy nie są błędami mojego skryptu, to wiem na pewno. Proszę o adres WWW.

      Usuń
  33. Adres sklepu rowerowego: www.mpbike.pl
    Dziękuję za zainteresowanie :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Adres sklepu rowerowego: www.pmbike.pl
      Dziękuję za zainteresowanie :)

      Usuń
    2. Adres WWW: www.mpbike.pl - nie istnieje.

      Pod adresem WWW: www.pmbike.pl - nie ma wstawionego mojego kodu ze skryptami.

      Służę dalszą pomocą.

      Polecam mój adres WWW do tematyki Waszej strony - 100% free:
      patrz

      Usuń
    3. Nie mogę mieć całego kody bo wówczas pojawia się błąd:

      syntax error: unrecognized tag: jQuery("#facebook2_2").hover(function(){ jQuery(this).stop(true,false).animate({right: "0px" (Smarty_Compiler.class.php, line 446)

      i strona się blokuje. Dobry adres to www.pmbike.pl , a kod którego nie wstawiłem (za body ) z powodu błędu to ten z jquery który wstawia się przed kodem

      Za adres dziękuję :) Proszę o pomoc z tym facebookiem...

      Usuń
    4. Tu jest dla Pan/Pani kod:
      patrz

      Wystarczy to wstawić i będzie działać, innym działa.

      Jak Pan/Pani wstawi to niech Pan/Pani da sygnał to sprawdzę co i jak na Pan/Pani stronie WWW.

      Usuń
    5. Jeszcze jedna uwaga - powiem szczerze, że jestem zaskoczony.

      Na Państwa stronie nie ma dołączonego skryptu jQuery i dlatego wyskakuje ta linijka błędu, gdyż jQuery nie jest rozpoznane.

      Należy dołączyć skrypt jQuery do Państwa strony WWW.

      To również jest opisane w tym temacie (w tym post-cie).

      Poniższe powinno być w części HEAD, a nie w BODY:
      [script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"] [/script]

      Usuń
  34. Witam,

    wstawiłem kod facebooka do mojego sklepu i wszystko się wyświetla z tym, że pasek się nie wysuwa po najechaniu na obrazek. Co robie zle?? byłbym bardzo wdzięczny za wprowadzenie zamian w moim kodzie. Poniżej zamieszczam link do aktualnego z wprowadzonymi przeze mnie kodami:

    http://sendfile.pl/279517/kod.txt

    Pozdrawiam

    -

    OdpowiedzUsuń
    Odpowiedzi
    1. O mam ten sam problem

      Usuń
    2. Proszę wstawić ten cały poniższy kod TO CO W SEKCJI BODY do sekcji body, a TO CO W SEKCJI HEAD do sekcji head.

      pobierz

      Usuń
    3. Nie piszę co Pan/Pani robi źle, bo jest dużo błędów, gdyż nie jest to w całości ten sam kod co ja umieściłem na blogu w tym post-cie, ale przygotowałem dla Pana/Pani powyżej skrypt z facebook, który w całości Pan/Pani wstawia.

      Usuń
    4. działa! super, dzieki!!!

      Usuń
    5. Można prosić o adres WWW, abym zajrzał czy wszystko jest tak jak powinno.

      Usuń
  35. Nie potrafię, jakiś malutki obrazeczek widnieje, kurcze czarna magia dla mnie, pomocy

    OdpowiedzUsuń
    Odpowiedzi
    1. Proszę wstawić ten cały poniższy kod TO CO W SEKCJI BODY do sekcji body, a TO CO W SEKCJI HEAD do sekcji head.

      pobierz

      Usuń
    2. Sama przeoczyłam tą ramkę z jQuery i nie wkleiłam kodów, dziękuję za pomoc

      Usuń
    3. Proszę poprawić linię kodu 1459
      z:
      Tylko w części BODY: !--WIDGET FACEBOOK--
      na:
      !--WIDGET FACEBOOK--

      Usuń
  36. Witam,

    istnieje możliwość dodania widgetu, ale bez użycia jquery? tak aby po kliknięciu lub po najechaniu na zakładkę, automatycznie pojawiała się ona rozwinięta?

    Pozdrawiam

    OdpowiedzUsuń
  37. Witam!

    Chciałem wrzucić Pana skrypt na stronę http://znalezionewsieci.ayz.pl/joanna1/ za raz po body, lecz rozjeżdża mi to slidera, którego mam za raz za nim.

    OdpowiedzUsuń
    Odpowiedzi
    1. Witam,

      Widzę, że już sobie Pan poradził z problemem, :)

      Usuń
  38. Witam , przychodzę z takim zapytaniem czy istnieje możliwość zastosowania takiego wysuwanego widgetu dla jakiegoś music playera , nie mam zabardzo możliwości umieszczenia go gdzie indziej , aby nie psuł wizualizacji strony ,a takie zastosowanie pasowało by mi idealnie

    OdpowiedzUsuń
    Odpowiedzi
    1. Tak może Pan umieścić music playera na poniższym pasku.
      Wystarczy podmienić rysunek i w linii 33 wstawić music playera lub cokolwiek innego.

      patrz

      Usuń
    2. A TAK TO WSZYSTKO WYGLĄDA NA PANA STRONIE:

      http://p4you.pl/

      Usuń
    3. witam
      Czy byłby ktoś w stanie mi pomuc z utwozeniem takiego dodatku do joomla 2.5 jak na stronie p4you.pl chodzi mi o odtwarzać muzyczny i ten tlanslator prosze o pomoc

      Usuń
    4. a jak wstawić takiego playera i tlanslator w joomla

      Usuń
    5. Aby wstawić to do joomla (odpowiadamy z pamięci, bo już coś takiego robiliśmy klientowi) - należy założyć panel i wstawić cały kod, oraz założyć katalog na serwerze FTP do którego będziemy kopiować pliki mp3 z muzyką.
      Najlepiej jak dostaniemy login i hasło do Państwa joomli i zrobimy to w 1 godzinę.
      Login i hasło proszę wysłać na maila.

      Usuń
  39. Witam. Bardzo podoba mi się pana tutorial. Chce mieć takie menu boczne na swojej stronie,z tym że chciałbym mieć tam skrypt windguru. Mam problem gdyż nie mogę tego dopasować, chodzi tu o wielkość wysuwanego okna itd. Może by mi pan pomógł stworzyć takie menu jak na stronie www.go2hel.pl

    OdpowiedzUsuń
  40. lub skrypt ze strony http://www.windguru.cz/pl/webfcst.php

    OdpowiedzUsuń
    Odpowiedzi
    1. Witam,

      Na jutro będzie miał Pan gotowy pasek z Windguru.
      Proszę jeszcze tylko podać adres Pana strony WWW.

      Usuń
  41. witam :) mój adres www.klimacold.pl

    OdpowiedzUsuń
    Odpowiedzi
    1. Witam,

      Oto pasek dla Pana:

      Patrz i pobierz

      Jest ustawiony dla Warszawy, jak Pan będzie chciał zmienimy na Katowice.

      Usuń
  42. No witam dzięki wielkie udało się, ale mam pytanko jeszcze jak zrobić żeby fb i windguru były na tym samym poziomie tylko po różnych stronach. Widzę że pan też zaadoptował sobie pasek :) pozdrawiam

    OdpowiedzUsuń
    Odpowiedzi
    1. W Pana kodzie w linii: 117 w atrybucie top wpisuje Pan 50.

      Usuń
  43. a mam jeszcze jedno troche głupie pytanie, czemu avatary lubiących z fb wyświetlają się podwójnie?

    OdpowiedzUsuń
    Odpowiedzi
    1. Bo jest Pan zalogowany na swoim koncie Facebook.
      Jak Pan się wyloguje z Facebook, to podwójne Pana własne kliknięcia Facebook znikną.

      Usuń
  44. Również nie poradziłem sobie z jQuery pod Joomle.Nie wysuwa się slider :( Bliższe szczegóły wysłałem na @ ponieważ mam stronę zainsatlowaną na komputerze.

    Pozdr
    Jacek (żeby ktoś nie pomyślał, że Pani :) )

    OdpowiedzUsuń
    Odpowiedzi
    1. Bo zapomniał Pan o liniach: 260-283, które Panu wstawiłem do pliku.

      Zmodyfikowany plik template.php

      Usuń
    2. Wielkie dzięki !! Na twarzy pojawił mi sie wielki banan z radości. Małe a cieszy. Raczej nie zapomniałem ponieważ brałem kod z pociętej wersji myśląc, że jest to gotowiec.
      Nie wiem czy nie zaśmiecę komentarzy ale dla potomności część kodu, którego nie wstawiłem jest od linii zapisana 22 do 65.

      Usuń
  45. witam serdecznie,
    chciałam ustawić wysuwający się z boku widget facebooka na sklep na shoper.pl i jedyne co udało mi się zrobić to zamieścić nieakywny obrazek "fb" z boku strony... czy mogę prosić o pomoc?

    OdpowiedzUsuń
    Odpowiedzi
    1. Prosimy o link do Pani sklepu zobaczymy kod HTML i powiemy co gdzie wstawić w kod HTML - w które linie Pani kodu HTML wstawić odpowiednie linie naszego skryptu.

      To na początek.

      Usuń
  46. witam,
    chciałbym miec widget fecebooka i naszej klasy na grze i czy jest to mozliwe oto strona www.kansascitymafia.com a jak jest to czy ktos pomoze mi to zrobic?

    OdpowiedzUsuń

No flash player!

It looks like you don't have flash player installed. Click here to go to Macromedia download page.