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&width=190&colorscheme=light&show_faces=true&border_color&stream=false&header=false&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? :)
.jpg)
Świetny trik! Zabawa z html to dla mnie czarna magia i dziękuję wszystkim tym, którzy udostępniają tutoriale w tej tematyce :)
OdpowiedzUsuńbardzo lubię takie tutoriale :) zawsze się można czegoś ciekawego dowiedziec
OdpowiedzUsuńFajna sprawa :D
OdpowiedzUsuń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ńpomocny post:D
OdpowiedzUsuńhttp://rozaliafashion.blogspot.com/2013/11/black-maxi-skirt.html
pomocny pomocny - szkoda tylko, że mam coś popsuty kod html na swoim blogu i nie wiem czemu co i jak :D
OdpowiedzUsuńbardzo pomocny :)
OdpowiedzUsuńAle ja i tak kurcze boję się ruszać-znając mnie coś spaszczę.. :(
Dziękuję za komentarz :)
OdpowiedzUsuńDzięki, właśnie szukałam takiego poradnika :)
Oooo super! W wolnej chwili zrobię tak u siebie! :)
OdpowiedzUsuń
OdpowiedzUsuńPodziwiam za zaangażowanie, trochę czasu zajmuje blog a jeszcze funpage...
Pozdrowionka
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ńDziękuję za dobrą instrukcję i kody !
OdpowiedzUsuńW końcu udało mi się podczepić Fb na bloga po długich poszukiwaniach dobrej i jasnej instrukcji :)
Pozdrawiam serdecznie