.

JQuery սոցիալական ցանցերի կոճակներ Blogger-ի համար

Քանի որ շատ-շատ հարցեր են տրվում կապված՝ սոցիալական ցանցերում, բլոգը տարածելու համար նախատեսված կոճակների մասին, որոշեցի ևս մեկ նյութ տեղադրել այս թեմայով: Հիշեցնեմ, որ արդեն մեկ անգամ խոսել եմ սոցիալական ցանցերի կոճակների մասին (այդ նյութը կարող եք գտնել այստեղ), սակայն այս անգամ այդ կոճակները կրել են որոշակի փոփոխություն և դարձել են «ավելի շարժունակ»՝ jQuery-ի կախարդական միջամտության շնորհիվ: 

Գադջիթի առանձնահատկությունները՝

  • Արագ տեղադրում, ընդամենը մեկ քայլ
  • բոլոր տեսակի սոցիալական կայքերի առկայություն(300-ից ավել)
  • Գեղեցիկ դիզայն
Գադջիթի տեղադրում
    Գադջիթը ավելացնելու համար պետք է մուտք գործեք բլոգի կարգավորումների էջը և մտնեք «Дизайн» բաժինը: Ապա սեղում եք՝ «Добавить гаджет» և ընտրում՝ «HTML/JavaScript»:Բացվելուց հետո տեղադրում եք ներքևում նշված :
    <style type="text/css">
      #sharedock { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; z-index: 999; }
      #dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }
      .dock-container { position: relative; background:url(https://lh5.googleusercontent.com/-P3vkg2GM6nQ/T0-E1pmV-iI/AAAAAAAAAHo/TK_g_-hURv4/s400/widget-bg-+copy.JPG) no-repeat bottom center; height: 50px; padding: 20px 0 20px 0; }
      .dock-container .custom_images a { display: block;  position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; }
      .dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
      .dock-container .custom_images img { border: 0; margin: 5px 0px 10px 0px; width: 100%; }
      </style>
    
    <div id="sharedock">
      <div id="dock">
      <div class="dock-container">
    
    <div class="addthis_toolbox"> 
    
     <div class="custom_images">
    
     <a class="addthis_button_facebook"><span>Facebook</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_facebook.png" alt="Share to Facebook" /></a>
      <a class="addthis_button_twitter"><span>Twitter</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_twitter.png" alt="Share to Twitter" /></a>
    <a class="addthis_button_myspace"><span>MySpace</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_myspace.png" alt="Share to MySpace" /></a>
    <a class="addthis_button_stumbleupon"><span>Stumble</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Stumble It" /></a>
    <a class="addthis_button_reddit"><span>Reddit</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_reddit.png" alt="Share to Reddit" /></a>
    <a class="addthis_button_delicious"><span>Delicious</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_delicious.png" alt="Share to Delicious" /></a>
      <a class="addthis_button_more"><span>More...</span><img src="http://addthis.com/cms-content/images/gallery/addthis_64.png" alt="More..." /></a>
      </div>
      </div> 
      </div>
      </div>
      </div>
    
      <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>
      <script type="text/javascript">
      $(function () { 
      // Dock initialize
      $('#dock').Fisheye(
      {
      maxWidth: 30,
      items: 'a',
      itemsText: 'span',
      container: '.dock-container',
      itemWidth: 50,
      proximity: 60,
      alignment : 'left',
      valign: 'bottom',
      halign : 'center'
      }
      );
      });
      </script> 
    Քայլը կատարելուց հետո սեղմում ենքՊահպանել և ստուգում ենք բլոգը:

    0 коммент.:

    Отправить комментарий

    Технологии Blogger.

    GosuBlogger