Steam Community Widget Counter Strike

Witam,

IDEĄ TEGO POSTA, jest pokazanie najprostszego możliwego rozwiązania na zaimplementowanie wysuwanego paska bocznego z kanałem STEAM Community osadzonych w dowolnej przeglądarce internetowej, szczególnie przydatnego dla graczy CounterStrike.
Pasek boczny można wykorzystać w dowolny sposób! - bazuje częściowo na kodzie: patrz tutaj
Ja pokażę jak je połączyć z STEAM.

Każdy, nawet nie znający się na programowaniu, w 15 minut może mieć wysuwany pasek bocznych współpracujących z najpopularniejszymi grami korzystającymi z STEAM, np.: CounterStrike.

Narzędziem programistycznym będzie biblioteka jQuery w wersji 1.7.0 bazująca na JavaScript oraz język do tworzenia stron internetowych HTML w najnowszej wersji 5.



PONIŻEJ JEST W PEŁNI DZIAŁAJĄCY LINK DO TEGO CO OPISAŁEM POWYŻEJ - gotowe rozwiązanie, wystarczy kliknąć i masz:
Patrz tutaj



NO to zaczynamy!!!
Poniżej gotowy kod, który jest do wypróbowania w linku, który zamieściłem powyżej. Jest to ten sam kod.



KOD HTML 5 i jQuery:


<!DOCTYPE html>
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">

<!--
/*
Plugin Name: Steam Widget KatMPBSoft
Plugin URI: https://www.katmpbsoft.pl/Blog/Steam/steam.htm
Author: Mark Bilski (KatMPBSoft)
Version: 1.0
Author URI: https://katmpbsoft.blogspot.com
Author URI: https://www.katmpbsoft.pl/index_en.htm

ALL IS FREE FOR COMMERCIAL USE
*/
-->

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
    
<body>
<script type="text/javascript">
 //<[!CDATA[
  jQuery.noConflict();
  
  jQuery(document).ready(function() {   
           
   jQuery("#steam").hover(function(){    
    jQuery(this).stop(true,false).animate({right: "0px"}, 500 );   
   },
   function(){ 
    jQuery("#steam").stop(true,false).animate({right: "-170px"}, 500 );    
   });
  });   
 //]]>
</script>

<!--WIDGET STEAM-->
<div id="steam" style="right: -170px; z-index: 9997; background: #000000; padding: 0px; width: 170px; height: 398px; position: fixed; top: 264px; border: 0px solid #000000">
  <a href="#"></a><img style="position: absolute; left:-33px; top:3px" src="https://www.katmpbsoft.pl/BLOG/Paski/steam.png" />  
  <div style='background-color:#000000;'>     
  
  <script type="text/javascript" src="https://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('968cf80f-c1c6-423b-ba75-26275d84486e');</script>
  <noscript>Get the <a href="https://www.widgetbox.com/widget/steam-community-group-the-black-night-gamin">Steam Community :: Group :: The Black Night Gamin</a> widget and many other <a href="https://www.widgetbox.com/">great free widgets</a> at <a href="https://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="https://support.widgetbox.com/">More info</a>)</noscript>
  
  </div>
</div>
<!--END WIDGET STEAM-->

</body>
</html>
 



PODSUMOWANIE:

Wystarczy że wszystko to co jest w części HEAD i wszystko to co jest w części BODY skopiujesz na Swoją stronę WWW do HEAD i BODY - dzięki temu masz STEAM na Swojej stronie WWW.


Dołącz do Naszego klanu graczy Diablo 3:

Polski klan graczy Diablo 3


I to by było na tyle miłej zabawy, :)


Każdy mój post, dotyczący w mniejszym lub większym stopniu programowania internetowego jest zawsze kompatybilny z IE od wersji 7, z Firefox od wersji 3.6.3, z Opera od wersji 9.63, z Safari od wersji 5.x i z Chrome od wersji aktualnej