Witaj szanowny Gościu na forum Odjechani.com.pl. Serdecznie zachęcamy do rejestracji. Tylko u nas tak przyjazna atmosfera. Kliknij tutaj, aby się zarejestrować i dołączyć do grona Odjechanych!

Strona odjechani.com.pl może przechowywać Twoje dane osobowe, które w niej zamieścisz po zarejestrowaniu konta. Odjechani.com.pl wykorzystuje również pliki cookies (ciasteczka), odwiedzając ją wyrażasz zgodę na ich wykorzystanie oraz rejestrując konto wyrażasz zgodę na przetwarzanie swoich danych osobowych w ramach funkcjonowania serwisu. Więcej informacji znajdziesz w naszej polityce prywatności. Pozdrawiamy!


Ikonki społecznościowe - gotowy skrypt
#1
Witam,

Ponieważ sporo ludzi o to pyta, a w Internecie nigdzie nie znalazłem gotowego pluginu,
modułu do stworzenia takiego dodatku pod skrypt mybb, opiszę go teraz tutaj.
Autorem mechanizmu "animacji" jest Sławomir Kokłowski , twórca popularnego
kursu html dla początkujących Webmasterów (http://www.kurshtml.boo.pl)
Reszta to już zwykły html.

A zatem przejdźmy do rzeczy:
Jak wykonać "animowane" ikonki portali społecznościowych, za pomocą których
będzie można polecać Wasze forum?


Wchodzimy do:
ACP » Style i szablony » Szablony » Twój styl forum » Widok wątku - Szablony » showthread

Szukamy fragmentu kodu:
</head>

Przed znalezionym znacznikiem wstawiamy:
<script type="text/javascript" src="jscripts/podzielsie.js"></script>

W tym samym miejscu szukamy takiej linii kodu:
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both; margin-bottom: 5px;">

Zaraz nad nią wstaw:
<!--PODZIEL SIĘ-->
<div align="right">
    <a id="facebook" href="Facebook" title="Podziel się ze znajomymi na Facebooku" onclick="window.open('http://www.facebook.com/share.php?u='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title), 'Facebook'); return false;"></a>
    <a id="blip" href="Blip" title="Podziel się na Blipie" onclick="window.open('http://blip.pl/dashboard?body='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title), 'Blip'); return false;"></a>
    <a id="flaker" href="Flaker" title="Podziel się na Flaker.pl" onclick="window.open('http://flaker.pl/add2flaker.php?url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title), 'Flaker'); return false;"></a>
    <a id="gg" href="GG" title="Ustaw opis w swoim komunikatorze Gadu Gadu" onclick="window.open('gg:/set_status?description='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title), 'GG'); return false;"></a>
    <a id="myspace" href="MySpace" title="Podziel się na MySpace" onclick="window.open('http://www.myspace.com/Modules/PostTo/Pages/?u='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title), 'MySpace'); return false;"></a>
    <a id="naszaklasa" href="Sledzik" title="Podziel się z przyjaciółmi na naszej klasie" onclick="window.open('http://nasza-klasa.pl/sledzik?shout='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title), 'Śledzik'); return false;"></a>
    <a id="wykop" href="Wykop" title="Wykop ten temat!" onclick="window.open('http://www.wykop.pl/dodaj?url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title), 'Wykop'); return false;"></a>
    <a id="odjechani" href="Odjechani" title="Podziel się na Odjechani.com.pl" onclick="window.open('http://odjechani.com.pl/newthread.php?fid=306'); return false;"></a>
    <a id="grono" href="Grono" title="Podziel się na Gronie!" onclick="window.open('http://grono.net/pub/page/link/urlfetch/?url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title), 'Grono'); return false;"></a>
    </div>
<!--PODZIEL SIĘ-->

Dalej wchodzimy do:
ACP » Style i szablony » Style » Twój styl forum » Global.css » Edytuj CSS: tryb zaawansowany

i na samym końcu wklej:

a#facebook { 
   display: table-cell; width: 37px; height: 30px; 
    background: url("images/podzielsiena/facebook.png") top left no-repeat; 
}
a:hover#facebook { 
   background-position: 0 -30px;
}

a#odjechani {
   display: table-cell; width: 37px; height: 30px; 
    background: url(images/podzielsiena/odjechani.png) top left no-repeat;
}

a:hover#odjechani {
   background-position: 0 -30px;
}

a#grono {
   display: table-cell; width: 37px; height: 30px; 
    background: url("images/podzielsiena/grono.png") top left no-repeat;
}

a:hover#grono {
   background-position: 0 -30px;
}

a#blip {
   display: table-cell; width: 37px; height: 30px; 
    background: url("images/podzielsiena/blip.png") top left no-repeat;
}

a:hover#blip {
   background-position: 0 -30px;
}

a#flaker {
   display: table-cell; width: 37px; height: 30px; 
    background: url("images/podzielsiena/flaker.png") top left no-repeat;
}

a:hover#flaker {
   background-position: 0 -30px;
}

a#gg {
   display: table-cell; width: 37px; height: 30px; 
    background: url("images/podzielsiena/gg.png") top left no-repeat;
}

a:hover#gg {
   background-position: 0 -30px;
}

a#myspace {
   display: table-cell; width: 37px; height: 30px; 
    background: url("images/podzielsiena/myspace.png") top left no-repeat;
}

a:hover#myspace {
   background-position: 0 -30px;
}

a#naszaklasa {
   display: table-cell; width: 37px; height: 30px; 
    background: url("images/podzielsiena/naszaklasa.png") top left no-repeat;
}

a:hover#naszaklasa {
   background-position: 0 -30px;
}

a#wykop {
   display: table-cell; width: 37px; height: 30px; 
    background: url("images/podzielsiena/wykop.png") top left no-repeat;
}

a:hover#wykop {
   background-position: 0 -30px;
}

a#podzielsie {
   display: table-cell; width: 165px; height: 33px; 
    background: url("images/podzielsiena/podzielsie.png") top left no-repeat;
}

Teraz pozostaje wgrać tylko pliki na serwer z załącznika i gotowe :)


Załączone pliki
.rar   Działające ikonki społecznościowe.rar (Rozmiar: 40.96 KB / Pobrań: 3)
  Odpowiedz


Podobne wątki
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  Dobry skrypt na katalog internetowy adam-as 0 1 344 24.02.2013, 16:43
Ostatni post: adam-as

Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości