Turtorial: Wysuwany like box

Wybaczcie, za nieobecność. Ten post miał ukazać się wczoraj, ale byłam tak zmęczona, że zasnęłam nad laptopem pisząc go... Mam nadzieję, że się na mnie nie pogniewacie za to :)
Prowadzę bloga i jego fanpage na Facebooku. Jak sprawić jednak, żeby inni bloggerzy wiedzieli o istnieniu mojego miejsca również w tym serwisie społecznościowym? Otóż najprostszą metodą jest wstawienie odnośnika do fanpage na bloga. Można zrobić to na wiele różnych sposobów.
Zaczynałam od wstawienia banera, który po kliknięciu przenosił Was na docelową stronę. Później ustawiłam podstronę, która wysyłała Was pod inny adres internetowy. Jaki był tego minus? Ktoś, kto przegląda wiele blogów, skupia się na czytaniu postów nie zawsze zwróci uwagę na tego typu odnośnik. Sposobem też jest wstawianie linków do fanpage w każdym poście, jednak czy to nie jest męczące? Widziałam już taką metodę u wielu blogerek, jednak po pierwsze: nie chciałoby mi się za każdym razem tego zamieszczać, po drugie nie chcę Was prześladować tym odnośnikiem. Dlatego postanowiłam znaleźć coś pomiędzy: nieatakującego, acz widocznego. Wysuwany like box! Przy najechaniu na niego kursorem automatycznie nam się wysuwa, można z miejsca zlajkować fanpage, podejrzeć innych lajkujących. 


Jak go wykonać taki bajer? Otóż sprawa jest bardzo prosta:

Wchodzimy w projekt bloga, a następnie w edycję kodu html

Przy pomocy F3 lub sami wyszukujemy frazy </head>

NAD tą frazą wklejamy pierwszy z dwóch kodów html.

KOD HTML nr 1
Żeby nie było wątpliwości zaczyna się od <style type="text/css">,
kończy <![endif]-->.

<style type="text/css">
#wys
{
background: url("http://dl.dropbox.com/u/106645823/facebook.png") no-repeat scroll 0 0 transparent;
padding: 10px;
width: 235px;
height:402px;
position: fixed;
margin-top: -100px; /*połowa wysokości panelu w górę */ left: 0px;
top: 50%;
}
.zamknij
{
background-position: 0px 0px -242px 0px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#wys").css("left","-216px");
$("#wys").hover(
function () {
$("#wys").animate({left: "0px"}, 400 );
$(this).addClass("zamknij");
}, function () {
$("#wys").animate({left: "-216px"}, 400 );
$(this).removeClass("zamknij"); }
);
});
</script>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->


Tak to powinno wyglądać:

Teraz pora na drugi krok. Tym razem będziemy szukać frazy </body>*

*Uwaga! W nietykanych wcześniej kodach html może nie być tej sekcji, jednak łatwo to naprawić ;)
Dokument html składa się z 2 sekcji head i body zawartych w sekcji html. Więc cała sztuka polega na dopisaniu po frazie </head> frazy <body>, a przed frazą </html> frazy </body> i ot, cała filozofia :)

Przed frazą </body> wklejamy kod html nr 2.

KOD HTML nr 2
Żeby nie było wątpliwości zaczyna się od <div id="wys">kończy scrolling="no"></iframe></div> </div>.

<div id="wys">
<div id="wewnatrz" style="float: left; width: 216px; margin-left: 0px;"> <iframe allowtransparency="true" src="//www.facebook.com/plugins/likebox.php?href=TUTAJ WKLEJ ADRES SWOJEGO FANPAGE&amp;width=190&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;height=378" style="border: medium none ; overflow: hidden; width: 190px; height: 378px; background-color: rgb(243, 247, 255);" frameborder="0" scrolling="no"></iframe></div> </div>


Powinno to wyglądać mniej więcej tak:


W tym miejscu TUTAJ WKLEJ ADRES SWOJEGO FANPAGE wklejcie adres skopiowany wprost z facebooka, żeby uniknąć pomyłek :)

Po wszystkim należy kliknąć już tylko zapisz szablon i możecie cieszyć się wysuwanym like boxem ;)

Czy ten post jest dla Was pomocny? :)

12 komentarzy:

  1. Świetny trik! Zabawa z html to dla mnie czarna magia i dziękuję wszystkim tym, którzy udostępniają tutoriale w tej tematyce :)

    OdpowiedzUsuń
  2. bardzo lubię takie tutoriale :) zawsze się można czegoś ciekawego dowiedziec

    OdpowiedzUsuń
  3. Dla mnie pomocny nie jest, bo irytują mnie takie wyjeżdżające okienka przy przewijaniu strony... Co nie zmienia faktu, że pewnie parę dziewczyn skorzysta z Twojego opisu step by step.

    OdpowiedzUsuń
  4. pomocny post:D
    http://rozaliafashion.blogspot.com/2013/11/black-maxi-skirt.html

    OdpowiedzUsuń
  5. pomocny pomocny - szkoda tylko, że mam coś popsuty kod html na swoim blogu i nie wiem czemu co i jak :D

    OdpowiedzUsuń
  6. bardzo pomocny :)
    Ale ja i tak kurcze boję się ruszać-znając mnie coś spaszczę.. :(

    OdpowiedzUsuń
  7. Dziękuję za komentarz :)
    Dzięki, właśnie szukałam takiego poradnika :)

    OdpowiedzUsuń
  8. Oooo super! W wolnej chwili zrobię tak u siebie! :)

    OdpowiedzUsuń

  9. Podziwiam za zaangażowanie, trochę czasu zajmuje blog a jeszcze funpage...

    Pozdrowionka

    OdpowiedzUsuń
  10. Fajnie to wygląda, swego czasu miałam to też u siebie ale zrezygnowałam na rzecz tradycyjnego odwołania do FB:) Jakoś tak bardziej mi pasuje:)

    OdpowiedzUsuń
  11. Dziękuję za dobrą instrukcję i kody !
    W końcu udało mi się podczepić Fb na bloga po długich poszukiwaniach dobrej i jasnej instrukcji :)
    Pozdrawiam serdecznie

    OdpowiedzUsuń

Dziękuję za odwiedziny i każdy komentarz ♥

Copyright © 2014 Maleńka bloguje , Blogger