Beauty

Pływający pasek udostępniania w stylu Profilki.pl


Z pewnością znacie stronę Profilki.pl. Zawiera ona mnóstwo przydatnych generatorów różnych dodatków na blogi i strony, które są niezwykle pomocne, szczególnie dla początkujących blogerów. Nam jednak wpadł w oko różowy pasek z przyciskami udostępniania, który "pływa" podczas przewijania strony. Dodatkowo na dole posiada jakby ręcznie rysowane serduszko. Na pewno widżet ten spodoba się niejednej płci pięknej :) Może być również w wersji dla panów, poprzez zmianę koloru tła. Jako, że Blokotek lubi to, co ładne, specjalnie dla was stworzył takowy paseczek.
Zobacz demo

Umieszczanie widżetu na Bloggerze

W menu Układ => W pasku bocznym dodaj gadżet HTML/Javascript, do którego wklej poniższy kod:
<style type="text/css">
<style type="text/css">
  #social-buttons {
    background: #FF3363;
    position: fixed;
    bottom: 30%;
    margin-left: -60%;
    float: left;
    padding: 10px;
    z-index: 10;
    color: #fff;
    font-size: 10px;
    font-family: Arial, sans-serif;
    text-align: center;
}

#social-buttons .button-share {
    float: left;
    clear: both;
    margin: 5px;
}
</style>
<div id='social-buttons' title="Pobierz z Blokotek.pl">
  <h3>Podoba się?<br/>Wyraź to!</h3>
  <div class='button-share' id='like'>
    <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 class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false">
    </div>
  </div>
  <br />
  <br/>
  <div class='sbutton'>
    <br />
    <br/>
    <div class='button-share' id='gplusone'>
      <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      </script>
      <g:plusone size="tall">
      </g:plusone>
    </div>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100px" height="100px" style="width: 73px; height: 64px;shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewbox="0 0 431.394 204.322" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path style="fill:#ffffff" d="M0.688382 120.1c-0.452122,-0.837956 -0.688382,-1.86968 -0.688382,-3.13766 0,-1.89008 0.688382,-3.15806 2.04135,-3.84474 1.37506,-0.666286 5.45776,-1.05382 12.2464,-1.11841 8.35916,-0.0424927 15.8566,-0.363738 22.4956,-0.922942 6.66116,-0.559204 16.9087,-1.78299 30.7664,-3.67477 5.2419,-0.729175 10.2271,-1.07422 14.9761,-1.07422 2.38469,0 4.6623,0.151274 6.83113,0.430026 2.14843,0.300848 3.69517,0.5796 4.59771,0.860052 0.902545,0.278752 1.61132,1.03172 2.17053,2.25551 0.537108,1.24589 0.81586,2.19092 0.81586,2.87931 0,2.96429 -1.05212,4.46853 -3.15806,4.46853 -1.37506,0 -3.26514,-0.129178 -5.64983,-0.385834 -2.44928,-0.215863 -5.73652,-0.322945 -9.8838,-0.322945 -4.29686,0 -9.47417,0.322945 -15.5982,0.922942 -6.10195,0.601697 -9.47417,1.61302 -10.1626,2.98809 -0.666286,1.39546 -1.7609,9.56086 -3.28724,24.5574 -1.54673,14.9744 -2.29801,26.1466 -2.29801,33.4724 0,3.41641 0.515012,7.32744 1.56713,11.7739 0.17337,0.837956 0.258356,1.35467 0.258356,1.50424 0,1.84758 -0.515012,3.5235 -1.52464,5.00734 -1.00963,1.50254 -2.21302,2.23342 -3.65267,2.23342 -2.17053,0 -3.99601,-1.03172 -5.43567,-3.13596 -1.43965,-2.10594 -2.17053,-7.97163 -2.17053,-17.6192 0,-9.15123 1.7405,-27.0067 5.2215,-53.5833 0.171671,-1.41756 0.256656,-2.14843 0.256656,-2.19092 0,-1.43965 -0.773367,-2.14843 -2.3405,-2.14843 -2.51387,0 -7.32744,0.321245 -14.4169,0.945038 -7.09118,0.666286 -12.1393,1.00963 -15.1682,1.00963 -4.53482,0 -7.45662,-0.708778 -8.80959,-2.14843zm102.785 57.666c15.6203,-28.8338 28.4684,-43.2491 38.5885,-43.2491 2.68554,0 4.87646,1.54673 6.55237,4.59771 1.67591,3.07137 3.02888,9.86171 4.0827,20.3897 1.05212,11.2147 3.41471,19.3138 7.11158,24.299 1.89008,2.55636 2.83511,4.44814 2.83511,5.67193 0,1.09631 -0.622093,2.10594 -1.89008,3.02888 -1.24589,0.924641 -2.60055,1.37506 -4.01811,1.37506 -3.28724,0 -6.16654,-1.82549 -8.70081,-5.50026 -2.51387,-3.67307 -4.12519,-10.1184 -4.83397,-19.358 -0.710478,-8.7229 -1.48385,-14.4373 -2.27761,-17.1229 -0.795463,-2.68554 -2.10594,-4.04021 -3.95352,-4.04021 -4.40564,0 -13.2781,11.5376 -26.6412,34.5704 -3.97562,6.87532 -6.91951,11.3863 -8.80959,13.4923 -1.89008,2.12803 -3.61018,3.18015 -5.15691,3.18015 -1.84758,0 -3.39432,-0.537108 -4.6623,-1.63342 -1.24589,-1.09461 -1.89008,-2.42718 -1.89008,-4.01641 0,-1.183 0.343341,-3.46061 1.00963,-6.81073 5.15691,-26.6429 9.23791,-53.0054 12.2243,-79.067 0.666286,-6.07986 1.7405,-10.1184 3.22435,-12.1376 1.50254,-2.02095 2.74843,-3.03058 3.75975,-3.03058 1.80339,0 3.43681,0.752971 4.89856,2.21302 1.48215,1.46175 2.21302,3.5031 2.21302,6.10195 0,7.73537 -1.89178,18.328 -5.67193,31.7981 -1.84928,6.66116 -3.80395,15.1478 -5.8453,25.4174 -2.06175,10.2917 -3.09347,16.6503 -3.09347,19.0792 0,0.492915 0.236259,0.751271 0.688382,0.751271l0.256656 0zm92.0222 -4.53312c-9.56086,8.22829 -15.8787,16.5212 -18.9296,24.8582 -1.1813,2.77222 -2.38469,4.85607 -3.58638,6.23113 -5.00734,-0.280452 -7.49911,-2.62095 -7.49911,-6.9841 0,-6.4232 7.15407,-16.1557 21.4639,-29.1976l3.02888 -2.83511c-8.35747,-12.5489 -12.5251,-22.1727 -12.5251,-28.8984 0,-5.95068 2.51387,-8.93707 7.54161,-8.93707 1.43795,0 2.46968,0.622093 3.11387,1.82549 0.666286,1.22549 1.1609,3.99601 1.54843,8.31497 0.537108,6.65946 3.41471,13.7506 8.61412,21.2056 11.6243,-9.99088 19.4872,-18.928 23.5478,-26.8129 1.39716,-2.51387 2.44928,-4.1048 3.20225,-4.76938 0.773367,-0.688382 1.78299,-1.01133 3.02888,-1.01133 1.50424,0 2.9218,0.5813 4.25437,1.7626 1.31047,1.1609 1.97676,2.66344 1.97676,4.46853 0,4.18978 -10.1847,15.6849 -30.5947,34.4837 7.0045,8.98126 14.4815,15.7274 22.409,20.218 0.967134,0.537108 1.89008,1.09631 2.77052,1.69631 0.17337,0.365437 0.258356,0.967134 0.258356,1.7626 0,1.80509 -0.666286,3.41641 -1.97676,4.83397 -1.33087,1.43965 -2.9218,2.14843 -4.76938,2.14843 -5.64983,0 -14.609,-8.12121 -26.8775,-24.3636z">
    </path>
    <path style="fill:#ffffff" d="M409.176 36.7239l2.3269 1.1507c14.5716,7.21016 21.0866,25.3409 19.7132,54.3941 -0.571102,6.34161 -2.46968,12.8566 -5.72972,19.443l-1.54673 3.12746c-10.2849,17.1059 -31.4684,32.4627 -63.6779,46.176l-57.4705 14.2113 -10.098 6.68325 -3.11217 10.1371 -0.362038 0.732574c-2.54786,1.96826 -5.2691,2.27761 -8.128,0.863452 -4.31216,-7.01979 -5.00224,-13.4906 -2.03965,-19.4787 -3.89743,-19.2373 -10.0708,-34.8797 -18.4877,-46.9952 -10.7218,-16.1557 -21.5931,-36.0287 -32.546,-59.7515 -6.93311,-22.6435 -7.73197,-39.2735 -2.53087,-49.7845l0.394332 -0.797163c4.87306,-9.84641 15.7699,-15.469 32.5953,-16.8339 2.58866,-0.0441924 5.71442,0.839656 9.37389,2.64985 30.8021,15.2413 49.3017,41.2927 55.5618,78.0132 12.6441,-16.8492 26.1024,-29.6531 40.2406,-38.3097 18.7835,-9.50477 33.9466,-11.3591 45.5233,-5.63113zm-95.0324 66.5198c-2.19432,-1.08611 -3.28894,-8.7501 -3.21415,-22.958 -3.00508,-20.0379 -12.4062,-37.6927 -28.205,-52.798 0.75637,-1.52974 -6.63226,-6.18184 -22.2645,-13.9172l-0.732574 -0.362038c-4.0572,-2.00736 -10.7897,-0.120679 -20.2282,5.56145l-3.45551 6.9858c-3.30423,19.7319 1.05552,38.3709 13.047,55.9816 2.68724,7.62319 11.5461,23.0225 26.682,46.1641 6.55917,12.8549 11.5954,26.2775 14.9387,40.4395 5.42547,-4.43794 18.9874,-8.41186 40.7488,-11.8878 33.2242,-9.56596 54.066,-19.0469 62.5255,-28.278 10.0572,-8.43905 15.8413,-14.2724 17.4543,-17.5342l4.24757 -8.58183c4.83907,-9.77842 4.77958,-24.0543 -0.178469,-42.8224l-5.87419 -7.70988 -7.78466 -3.85154c-13.6385,-6.74954 -32.5239,1.95976 -56.721,26.2605 -7.20506,8.03112 -13.9036,17.7178 -20.0973,28.8984 -5.04133,1.31557 -8.69231,1.49574 -10.8883,0.40963z">
    </path>
  </svg>
<div style="clear: both;font-size: 9px;text-align:center;color: #fff">
      <a style="color: #fff" href="http://blokotek.pl/">
      Pobierz widżet
      </a>
    </div>
</div>

By zmienić kolor tła paska, edytuj kod zaznaczony na żółto.
Na koniec zapisz gadżet i gotowe!
Umieszczanie widżetu na innych platformach blogowych i stronach www

By umieścić pasek na własnej stronie www lub platformie blogowej innej, niż bloger, a nieposiadającej możliwości dodania widżetu HTML, kod wklej przed znacznik:
</body>

Instagram