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