Własny gadzet Candy

Candy na bloga - co to jest i jak to zrobić...
Candy to nic innego jak kod odsyłacza który umieszcza na własnym blogu osoba promująca nasz blog. /i wyszło masło maślane masłem smarowane/ Jednym słowem jeśli chcecie by ktoś dodał waszą reklamę u siebie to albo musi on wkleić kod HTML tej reklamy do gadżetu Html/JavaScript lub przygotować odpowiednio guzik dodaj do bloga jako widget.


Typowym Candy jest grafika z odsyłaczem /obrazek/ czyli:

<a href="http://adres.naszego.bloga.blogspot.com">
<img src="http://adres.do.grafiki.jpg" /></a>

rys.1

Zacznijmy od wysłania grafiki do internetu. Polecam Imgur.com na darmowy hosting bannerów. Jest lepszy od Picassy bo wszelkie animowane grafiki z niego będą działać. Pomimo iż tego typu u pstrokaceń nie popieram, ale niech wam będzie kochane blogowiczki... W końcu Dzień Kobiet...
Przeciągamy grafikę do okna przeglądarki i klikamy Start Upload - po zakończeniu przesyłania system wygeneruje nam gotowce na blog, forum, itd.. [rys.1]

Klikając w + i wybierając serwis Blogger możemy dodać link textowy do naszego bloga i opublikować go na dowolnym blogu. W bardzo prosty sposób możemy mieć taki przycisk u siebie na blogu. Teraz każdy kto w niego kliknie będzie mógł łatwo dodać nowy gadżet z naszym Candy. Więc do roboty. Co potrzebujemy adres bezpośredni do pliku /Direct link/ kopiujemy go. Mój kod gadżetu będzie miał zatem postać:

<a href="http:/edytuj.blogspot.com">
<img src="http://i.imgur.com/1QorhhG.png" /></a>

Nic nie stoi na przeszkodzie by dodać bardziej skomplikowany kod i umieścić animacje flash lub xHtml5 lub nawet JavaScript - to już info dla zaawansowanych deweloperów ;)

Kolejnym krokiem jest przygotowanie kodu przycisku na nasz blog. Nie jest to skomplikowane zadanie. Nasz kod gadżetu czyli w tym przypadku odsyłacz graficzny doklejamy do poniższego i ewentualnie zmieniamy jego nazwę:

<form action="http://draft.blogger.com/add-widget" method="GET" target="n">
<input name="widget.title" value="Nazwa Gadzetu" type="hidden">
<textarea name="widget.content" style="display: none;">
----------------- kod gadżetu -------------------------
</textarea>
<input class="addBlog" name="go" value="Dodaj gadżet" type="submit">
</form>

Otrzymamy taki fajny kod HTML który publikujemy w poście na stronie lub w gadżecie HTML/JavaScript jak kto woli i gdzie kto chce :)

<form action="http://draft.blogger.com/add-widget" method="GET" target="n">
<input name="widget.title" value="Moje Candy :)" type="hidden">
<textarea name="widget.content" style="display: none;">
<a href="http://edytuj.blogspot.com">
<img src="http://i.imgur.com/1QorhhG.png" /></a>
</textarea>
<input class="addBlog" name="go" value="Dodaj gadżet" type="submit">
</form>

Dla chcących uzyskać efekt taki jak u mnie zamiast kanciastego przycisku arkusz CSS

.addBlog, .addBlog:hover {
text-align:left;
border:none;
width:350px;
padding: 8px 55px;
background: url(http://i.imgur.com/AOBBVOE.png) no-repeat left center;
cursor: hand;
cursor: pointer;
}

Arkusz CSS dodajemy przy pomocy projektanta szablonów, a oto i przykład działania:


Jeśli chcesz mieć u siebie na blogu moje logo

<center><a href="http:/edytuj.blogspot.com"> <img src="http://i.imgur.com/1QorhhG.png" /></a></center>

PS. Wszystkiego dobrego miłe panie... żeby nie było że nie było... 10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110