Kada se primijeni na vašu internetsku stranicu, Code for Croatia traka izgledat će ovako:
CSS
Dodajte kod u nastavku u <head> odjeljak svoje internetske stranice, kako biste uključili malu datoteku s definicijom stilova:
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/codeforcroatia/assets/assets/html/cfc/panel/assets/css/frontend.css"/>JavaScript
Dodajte JavaScript prikazan ispod:
<script src="//cdn.jsdelivr.net/gh/codeforcroatia/assets/assets/html/cfc/panel/assets/js/frontend.js" type="text/javascript"></script>HTML
Na kraju, tu je HTML. Gdje i kako ćete to dodati malo ovisi o vašoj internetskoj stranici, ali postoje dvije osnovne opcije.
Fiksni položaj
Ovo je vjerojatno najjednostavniji način, samo dodajte sljedeći isječak odmah nakon otvorene oznake <body>:
<div id="cfc-panel-wrapper" class="fixed-cfc-panel"><div id="cfc-panel" class="closed"><div class="container"><iframe src="//a.codeforcroatia.org/assets/html/cfc/panel/panel.html" scrolling="no"></iframe></div></div><a class="cfc-ribbon" href="//codeforcroatia.org/"><img src="//a.codeforcroatia.org/assets/html/cfc/panel/assets/images/cfc-ribbon.png" alt="Code for Croatia"></a></div>Napomena: to će uzrokovati da se vrpca pojavi ispred svega što se nalazi na stranici. Da biste to izbjegli, pogledajte drugu metodu u nastavku.
Relativni položaj
Ovo će dodati vrpcu unutar dokumenta. Prvo dodajte sljedeće odmah nakon otvorene oznake <body>:
<div id="cfc-panel" class="closed"><div class="container"><iframe src="//a.codeforcroatia.org/assets/html/cfc/panel/panel.html" scrolling="no"></iframe></div></div>Zatim dodajte ovo gdje želite da se vrpca prikazuje (treba biti pri vrhu stranice):
<div id="cfc-panel-wrapper"><a class="cfc-ribbon" href="//codeforcroatia.org/"><img src="//a.codeforcroatia.org/assets/html/cfc/panel/assets/images/cfc-ribbon.png" alt="Code for Croatia"></a></div>Opcije boja
Uz gornju, zadanu implementaciju, vrpca će biti zelena. Postoje i crno-bijele opcije. Za bijelo na crnom dodajte black u klasu cfc-ribbon, ovako:
<a class="black cfc-ribbon" href="//codeforcroatia.org/"><img src="//a.codeforcroatia.org/assets/html/cfc/panel/assets/images/cfc-ribbon.png" alt="Code for Croatia"></a>a za crno na bijelo dodajte white:
<a class="white cfc-ribbon" href="//codeforcroatia.org/"><img src="//a.codeforcroatia.org/assets/html/cfc/panel/assets/images/cfc-ribbon.png" alt="Code for Croatia"></a>