Przystosowywanie "Obserwatorów"

Post na życzenie Wanilijowej. 
Niewątpliwie wielu z Was mogło uważać, że "Followersów" nie da się w żaden znany sposób opanować. Zależy też co oznacza według Was opanować. Jeśli jeśli macie na myśli zmianę wielkości zdjęcia, wysokości, wszelkie tła, kolory tekstów i linków w powyższym gadżecie to ten post jest dla Was. 

Zaczniemy standardowo od lekkiego przekombinowania,... w pewnym sensie. Obserwatorów nie dostosuje się w kodzie HTML, a przez kody CSS możemy dodawać efekty w bardzo ograniczonym, można by tak powiedzieć, stopniu. Dlatego dodamy followersów jako skrypt.

Na sam początek jednak musimy dodać nasz gadżet w sposób standardowy, czyli klikamy układ > dodaj gadżet > więcej gadżetów > obserwatorzy. 

Następnie musimy skądś wziąć ten nieszczęsny kod. A więcej wchodzimy na stronę główną naszego bloga, klikamy prawy przycisk myszy, a następnie wybieramy wyświetl źródło strony. Wyszukujemy "followers" lub "obserwatorzy" w zależności od tego jaką nazwę ma nasz gadżet. 

Pomijamy część:

<td class='columns-cell'>
<div class='foot section' id='footer-2-3'><div class='widget Followers' id='Followers1'>
<h2 class='title'>Followers</h2>
<div class='widget-content'>
<div id='Followers1-wrapper'>
<div style='margin-right:2px;'>

Nie ma tu nic interesującego, jednak tuż pod tym zaczyna nam się właściwy kod ( jest dosyć długi, ale bez paniki; ) kopiujemy kod od <script> do </script>, czyli:

<script type="text/javascript">
        if (!window.google || !google.friendconnect) {
          document.write('<script type="text/javascript"' +
              'src="http://www.google.com/friendconnect/script/friendconnect.js">' +
              '</scr' + 'ipt>');
        }
      </script>
<script type="text/javascript">
      if (!window.registeredBloggerCallbacks) {
        window.registeredBloggerCallbacks = true;
     
     
        gadgets.rpc.register('requestReload', function() {
          document.location.reload();
        });
     
        gadgets.rpc.register('requestSignOut', function(siteId) {
       
          google.friendconnect.container.openSocialSiteId = siteId;
          google.friendconnect.requestSignOut();
        });
      }
    </script>
<script type="text/javascript">
 
    function registerGetBlogUrls() {
      gadgets.rpc.register('getBlogUrls', function() {
        var holder = {};
     
       
       
       
            holder.postFeed = "http://www.blogger.com/feeds/1963577186215401607/posts/default";
       
       
       
            holder.commentFeed = "http://www.blogger.com/feeds/1963577186215401607/comments/default";
       
          holder.currentBlogUrl = "http://graphical-thoughts.blogspot.com/";
          holder.currentBlogId = "1963577186215401607";
     
        return holder;
      });
    }
  </script>
<script type="text/javascript">
  if (!window.registeredCommonBloggerCallbacks) {
    window.registeredCommonBloggerCallbacks = true;
    gadgets.rpc.register('resize_iframe', function(height) {
      var el = document.getElementById(this['f']);
      if (el) {
        el.style.height = height + 'px';
      }
    });
 
    gadgets.rpc.register('set_pref', function() {});
    registerGetBlogUrls();
  }
  </script>
<div id="div-11xbop33uyvrc" style="width: 100%; "></div>
<script type="text/javascript">
    var skin = {};
    skin['FACE_SIZE'] = '32';
    skin['HEIGHT'] = "260";
    skin['TITLE'] = "Followers";
    skin['BORDER_COLOR'] = "transparent";
    skin['ENDCAP_BG_COLOR'] = "transparent";
    skin['ENDCAP_TEXT_COLOR'] = "#000000";
    skin['ENDCAP_LINK_COLOR'] = "#000000";
    skin['ALTERNATE_BG_COLOR'] = "transparent";
 
    skin['CONTENT_BG_COLOR'] = "transparent";
    skin['CONTENT_LINK_COLOR'] = "#000000";
    skin['CONTENT_TEXT_COLOR'] = "#000000";
    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#FFFFFF";
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#000000";
    skin['CONTENT_HEADLINE_COLOR'] = "#000000";
    skin['FONT_FACE'] = "Arial";
    google.friendconnect.container.setParentUrl("/");
    google.friendconnect.container["renderMembersGadget"](
    {id: "div-11xbop33uyvrc",
     height: 260,
   
   
   
     site: "09409080114536521804",
   
     locale: 'en' },
     skin);
  </script>

Przewińcie sobie ten kod, a pod sam koniec zobaczycie bardzo ważną rzecz, która odpowiada za dostosowywanie gadżetu. Oczywiście powyższy kod wklejamy do gadżetu HTML/JavaScript! W całości!
Gdy już wkleimy skupiamy się na tej ostatniej części kodu, czyli:

skin['FACE_SIZE'] = '32';
    skin['HEIGHT'] = "260";
    skin['TITLE'] = "Followers";
    skin['BORDER_COLOR'] = "transparent";
    skin['ENDCAP_BG_COLOR'] = "transparent";
    skin['ENDCAP_TEXT_COLOR'] = "#000000";
    skin['ENDCAP_LINK_COLOR'] = "#000000";
    skin['ALTERNATE_BG_COLOR'] = "transparent";
 
    skin['CONTENT_BG_COLOR'] = "transparent";
    skin['CONTENT_LINK_COLOR'] = "#000000";
    skin['CONTENT_TEXT_COLOR'] = "#000000";
    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#FFFFFF";
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#000000";
    skin['CONTENT_HEADLINE_COLOR'] = "#000000";
    skin['FONT_FACE'] = "Arial";

To są rzeczy, które możemy zmieniać, a podstawowe wartości powinny być mniej więcej jednakowe dla każdego, a teraz krótkie wyjaśnienie co jest co :

•  skin['FACE_SIZE'] - chodzi tutaj o wielkość avatarów obserwujących.
• skin['HEIGHT'] - zmiana wysokości, gadżet może być dłuższy lub krótszy w zależności od Waszych upodobań;
• skin['TITLE'] - tytuł. 
• skin['BORDER_COLOR'] - tutaj chodzi o obramowanie oddzielające "Join this site" od "Membersów"; jest to jedna linia, a nie całe obramowanie;
• skin['ENDCAP_BG_COLOR'] - tło części z "join this site"
• skin['ENDCAP_TEXT_COLOR'] - kolor tekstu z części "join this site"
• skin['ENDCAP_LINK_COLOR'] - kolor linku z części "join this site"
• skin['ALTERNATE_BG_COLOR'] - alternatywny kolor tła;
• skin['CONTENT_BG_COLOR'] - kolor tła z obserwatorami ( tam gdzie są avatary obserwujących )
• skin['CONTENT_LINK_COLOR'] - kolor linków części obserwatorów;
• skin['CONTENT_TEXT_COLOR'] - kolor tekstu części obserwatorów;
• skin['CONTENT_SECONDARY_LINK_COLOR'] - drugi kolor linków;
• skin['CONTENT_SECONDARY_TEXT_COLOR'] - drugi kolor tekstu;
• skin['CONTENT_HEADLINE_COLOR'] - kolor napisu "obserwatorzy(21)" lub "members(21)"
• skin['FONT_FACE'] - czcionka w gadżecie;

Przypominam, abyście w całości zapoznali się z powyższymi kodami, abyście poprawnie dodali je na swoje blogi. Również nie kopiujcie powyższych kodów, bo są one tylko i wyłącznie dla mojego bloga.

Jeśli macie jakieś pytania, które można by wyjaśnić czy krócej czy w formie postu, piszcie śmiało, a postaram się pomóc.
Nie wiem czy dokładnie o to chodziło Wanilijowej, ale jest to jedyna możliwość, którą znalazłam pozwalająca na dostosowywanie tego gadżetu. Mam nadzieję, że okaże się pomocna. 

źródło