Widget zależny od wyszukiwanej etykiety



Ten widget jest zależny od etykiet i wyświetlany tylko podczas wyszukiwania wybranych - Zobacz opis

piątek, 8 marca 2013

Wydrukuj to...

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


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

Pierwszy wpis już się pojawił. Zapraszamy do oddawania kolejnych...
Już teraz przyłącz się do dyskusji i dodaj nowy komentarz


Podoba ci się modyfikacja sekcji komentarzy - opis znajdziesz tutaj: Tuning komentarzy

Asia asiscrapki pisze...

Bardzo sprytne rozwiązanie.

Prześlij komentarz

Zapraszam do komentowania i wyłapywania ew. błędów... Twoje IP:

Losowy post