piątek, 31 maja 2013

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. 

17 komentarzy:

  1. Aaaa :D dziękuję, hihi. o to mi chodziło, o to :) nie pomyślałabym nawet, żeby wrzucić ich przez skrypt, aj.

    OdpowiedzUsuń
    Odpowiedzi
    1. Cieszę się :) Ja również nigdy bym nie pomyślała o skrypcie, ale są ludzie w internecie, którzy na takie pomysły wpadają i się tym, na szczęście, dzielą ;>

      Usuń
  2. Na pierwszy rzut oka to, co opublikowałaś tutaj wydało mi się czarną magią. Z mniej więcej taką o_O miną przeczytałam to jednak na spokojnie drugi raz, potem trzeci i już powoli zaczynam wszystko przyswajać. Jeśli tylko dodam gadżet z obserwatorami, na pewno opanuję go z pomocą twojej instrukcji. Jesteś wielka! <3 xoxo

    OdpowiedzUsuń
    Odpowiedzi
    1. No tak, niekiedy w instrukcjach trzeba wrzucać całe masy kodów i faktycznie nie idzie się do końca połapać co i jak :) Jednak cieszę się, że udało się to opanować, przynajmniej teoretycznie ;> W tym wypadku praktyka będzie już dużo łatwiejsza ;)
      Dziękuję za odwiedziny! ;)

      Usuń
  3. Witaj!
    Ostatnimi czasy powstaje coraz więcej wspaniałych blogów, na których można znaleźć równie wspaniale wyglądające szablony, dodatki i inne przydatne każdemu Bloggerowi elementy. Nie zawsze jednak każdy blog ma okazję do zaprezentowania swojej twórczości szerszemu gronu, a wiele bloggerów nie wie, gdzie i czego konkretnie szukać, żeby znaleźć to, czego właśnie potrzebuje.
    Dlatego powstało sKatalogowane - nowy blog segregujący blogi graficzne, mający na celu zebranie wszystkich szabloniarni, czy to prywatnych, czy grupowych w jednym miejscu tak, by inni szybko i sprawdzie mogli się odnaleźć w graficznym świecie blogspota.
    Zaczęcamy serdecznie do zgłoszenia się. Spis nie jest generowany przez nas automatycznie, ponieważ w regulaminie widnieje zapis, że każdy zgłaszający się blog wyraża zgodę na cytowanie treści bloga w celach promocyjnych oraz na umieszczanie go w pojawiających się na stronie sondach, czego właściciele mogą sobie z jakiś powodów nie życzyć.

    Pozdrawiamy serdecznie,
    ekipa sKatalogowane

    OdpowiedzUsuń
  4. Oj, kochana, uwielbiam Twoje komentarze - no matter what, zawsze motywują mnie do dodania nowego postu :D Hm, też mam sporo nauki, ale częściowo dałam sobie już spokój z niektórymi przedmiotami, doszłam do wniosku, że one pochłaniają zbyt wiele nerwów :D leniem się nie przejmuj, wytępimy go!
    co do zgłoszenia - fajnie je było tam zobaczyć; obyśmy z Chouette były na tyle wytrwałe, żeby jakiś ślad po sKatalogowanych został na dłużej, hihi

    OdpowiedzUsuń
  5. Ja jeszcze mam rok do matury, ale na moje studia głównie języki: polski, niemiecki i angielski, chwała wszystkim świętościom - więc nie ma nawet takiego problemu, bo języki dość łatwo mi idą, ale z drugiej strony też nie przepadam za tym, żeby jechać na samych dwójach :D
    coś poradzimy na brak weny, hihi. Ja ostatnio przez ponad tydzień nie mogłam ruszyć ani jednego szablonu, co było po prostu s t r a s z n e.

    Co do skryptu: przyznam szczerze, że to Chouette się nim bawiła, moja wspaniała wiedza tak daleko nie wybiega, haha! Ale kochana Chouette powiedziała, że jeśli wytrzymasz do... jutra, to Ci go wtedy podeśle, bo dziś, niestety, uczy się na jutrzejszy egzamin :P Pasuje? Damy radę do jutra?

    [W]

    OdpowiedzUsuń
  6. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  7. Jejku, ogromne dzięki ci za ten post! Właśnie chciałam coś takiego u siebie przerobić, zaraz biorę się do roboty :) Jeszcze raz dzięki. Aa i czytam sobie od początku tą serię z dostosowaniem szablonu, może coś kiedyś popróbuję, ale na razie jeszcze nie jestem na siłach :)

    Powiem ci, że odwalasz tu kawał świetnej roboty, każdy znajdzie coś dla siebie, więc tylko pozazdrościć znajomości HTMLa i CSSa ;D Pozdrawiam <3

    OdpowiedzUsuń
    Odpowiedzi
    1. Oj, aż łzy w oczach mam czytając tak piękne komentarze :) Do dostosowywania zachęcam, mam nadzieję, że znajdziesz tam parę ciekawych rzeczy ;>
      I naprawdę bardzo dziękuję, takie słowa jak nic każą mi zabierać się do pracy, ale w tym tygodniu będzie chyba z tym gorzej niż kiedykolwiek ;3
      Ach, to przez to że człowiek już zdążył się zaprzyjaźnić i z HTML'em i CSS'em, ale nadal mase fajnych rzeczy ta dwójka zostawia dla siebie <3

      Usuń
  8. No to jutro dostaniesz wiadomość od Ch. :D Hm, francuski... kiedyś marzyłam o tym, żeby się go nauczyć, ale nie każdy język jest w takiej samej mierze przyswajalny. Np. podstawy niemieckiego znałam już po roku, a z angielskim było zupełnie inaczej, potrzebowałam więcej czasu (choć to może dlatego, że jak zaczynałam z ang, to byłam dzieciakiem?)
    Oj, to nie mogę się go doczekać już :> Ja teraz muszę jakiś nowy, jasny i przejrzysty, trochę pedantyczny wręcz szablon na Wanilijową zrobić, bo w tym tygodniu razem z Ch. ruszamy jeszcze z jednym blogiem i powołanie W. trochę się zmieni :p hihi

    OdpowiedzUsuń
  9. Sorry, że daję linki tak o :) Pierwsze z tumblra, sorrka ;/
    http://knockturn-alley-13.tumblr.com/post/52068999323
    http://knockturn-alley-13.tumblr.com/post/52068969978/only-i-can-live-forever
    http://knockturn-alley-13.tumblr.com/post/52068881332/i-was-in-the-bathtub-my-dad-came-in-and
    http://knockturn-alley-13.tumblr.com/post/51950951629/hogwarts-is-waiting-for-you-to-come-home-from
    http://img22.otofotki.pl/obrazki/hk168_tumblr_mhk9nt5KID1qeijvdo1_500.png
    http://img22.otofotki.pl/obrazki/uu801_tumblr_lncs27P3hA1qfsgkmo1_500_large.png
    http://img22.otofotki.pl/obrazki/ea636_dddddddddddddddddddddddddddTI4U_u1272764261.jpg
    http://img22.otofotki.pl/obrazki/sy809_521708_544959148851666_686553357_n.jpg
    http://img22.otofotki.pl/obrazki/hz465_46302_354622174624562_956910140_n.jpg
    http://img22.otofotki.pl/obrazki/sf344_28738_410365039036098_260987908_n.png
    http://img22.otofotki.pl/obrazki/ij953_6a00e54ecca8b98833017ee877d31f970d.jpg
    Nie mam pojęcia jakiego rodzaju chciałabyś te zdjęcia :) Jak coś, to przepraszam

    OdpowiedzUsuń
  10. mam jedno pytanko. jak wiesz, wstawiłam jeden z twoich szablonów do siebie na bloga (fluorsims.blogspot.com) i chciałabym zmienić kolor linku tam, gdzie mam komentarze na troszke ciemniejszy. jaki jest kod do tego linku, żebym mogła zmienić? z góry dziękuję za pomoc :)

    OdpowiedzUsuń
  11. Wpadłam na Twój blog i chciałam z tego skorzystać niestety gdy otwieram tą stronę "źródlo strony" nie mogę nic wkleić ani nic. Proszę o pomoc :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie można nic zmieniać w źródle, bo tym samym mogłabyś każdemu namieszać na stronie internetowej :D Musisz to wkleić na swojego bloga do htmla

      Usuń
  12. A ja mam problem.. Wkleiłam script do htmla, bo chcę zmienić kolor "Obserwatorzy (100)" z białego (mam białe tło) na czarny.. I zmieniłam i nie działa. Coś jeszcze muszę zrobić? :( Mój blog: turkusowa-sowa.blogspot.com. POMOCY

    OdpowiedzUsuń

- +
Szablon wykonany przez Tyler