tutoriale, szablony, web design

Pytania - Jeśli macie jakieś pytania lub uwagi, to zapraszam na nasz profil ask.fm. Postaramy odpowiedzieć na wszystkie pytania dotyczące szablonów, zamówień, jak również zaradzić conieco w sytuacji, gdzie szablon nie chce współpracować. Propozycje - Jeśli masz pomysł na ciekawą instrukcje, która mogłaby pomóc lub zainspirować wielu blogerów, daj nam znać! Z chęcią pomożemy! Propozycje możesz zostawić tutaj: Propozycje Pomoc - Gdyby ktoś desperacko szukał pomocy i wszystkie instrukcje go zawiodły, to jest e-mail tyler (bizarre1309@gmail.com ) i tam można pisać, mardzić na bloggera i resztę świata, no i ogólnie to też szukać pomocy. #idontjudge
Pokazywanie postów oznaczonych etykietą followers. Pokaż wszystkie posty
Pokazywanie postów oznaczonych etykietą followers. Pokaż wszystkie posty

piątek, 31 maja 2013

Przystosowywanie "Obserwatorów"

piątek, 31 maja 2013

Przystosowywanie "Obserwatorów"

17 komentarzy
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. 

Czytaj dalej