Wysuwany LikeBox

środa, września 02, 2015

Człowiek leniwą istotą jest, to wiadomo nie od dziś. 
Mamy FanPage bloga, ale niestety nie jest on tak popularny jak Nasz blog. Co zatem zrobić by choć trochę zwiększyć ilość Like'ów na Naszej stronie? Otóż odpowiedź jest banalnie prosta. Wystarczy dodać mały gadżet, który ułatwi polubienie strony. Często jesteśmy zbyt leniwi by używać przekierowania na FanPage bloga, dlatego też ja uważam, że danie możliwości polubienia Naszego FP prosto z bloga jest mega ułatwieniem. Przyznaję się nienawidzę jak jakiś pop-up (okienko polubienia) atakuje mnie na stronie, tym bardziej na tej na której jestem pierwszy raz, wtedy zawsze opuszczam taką witrynę, ale subtelny LikeBox to już inna sprawa. Mam i polecam tym bardziej, że wiele osób woli obserwować blogi poprzez ich FanPage iż G+ czy samego bloggera.
Ok, tyle wprowadzenia, a teraz przejdźmy do rzeczy. Pokaże Wam jak zrobić wysuwany Like Box Naszej strony, taki jak u mnie wysuwany od lewej strony.

Wiem, że ostatnio były poradniki tylko dla początkujących, którzy boją się samodzielnie grzebać w HTML, ale uwierzcie mi wszystkie rzeczy na początku są trudne. Sama każdego dnia uczę się nowych rzeczy by moje miejsce w sieci było nie tylko przyjazne dla mnie, ale przede wszystkim dla odwiedzających.

Podstawy kodów CSS już poznaliście w poprzednich postach, a dziś przyszedł czas na zapoznanie się z kodami HTML.

Tak, więc już bez zbędnych komentarzy Instrukcja jak zrobić Wysuwanego Facebooka dla Naszej strony.

Pamiętajcie!
Zaczynając zabawę z kodami, nie ważne czy CSS czy HTML zróbcie kopie zapasową całego szablonu by razie wypadku wrócić do wersji przed Naszą pracą.

Przypominam w jaki sposób zrobić kopie zapasową.
Blogger>Szablon>Utwórz/Przywróć kopie zapasową

 

Pojawi się okienko dzięki, któremu pobierzemy obecny szablon, w tym miejscu możemy wgrać również zewnętrzny szablon pobrany z Internetu.

 

No dobrze, kopie zapasową na wszelki wypadek mamy już na dysku, więc możemy zacząć zabawę i grzebanie w kodzie.
Wchodzimy kolejno:
Blogger>Szablon>Edytuj kod HTML
Jesteśmy w kodzie nie ma już odwrotu. Nie, no żartuje jeszcze możecie zrezygnować.
Potrzebne będą Nam dwa kody HTML oraz link do Twojego FanPage.
HTML nr 1

<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]-->



HTML nr 2

<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=TU_WKLEJ_ADRES_TWOJEGO_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>  
No dobra mamy dwa potrzebne kody, mam nadzieje że URL swojego FP też już masz.
Zaczynamy edycję kodu HTML.
Wchodząc w Edycja Kodu HTML ukaże Nam się okienko cyferek i literek, które nie zawsze wyglądają na logiczne.



W całym szablonie czasem trudno się połapać, dlatego też jest bardzo przydatna funkcja, która ułatwi Nam szukanie w kodzie.
Klikamy w dowolne miejsce w kodzie, by pojawił się kursor pisania, następnie wciskamy (jednocześnie) CTRL+F i mamy okienko szukania, tam wpisujemy frazę.
 Najpierw szukamy </head> i NAD nią wklejamy Kod HTML nr 1.
Mamy? Super!
Teraz w okienko wpisujemy </body> i również NAD nią wklejamy kolejny kod, w tym przypadku HTML  nr 2. 

Pamiętaj o URL swojego FanPage w drugim kodzie, jeśli tak będzie Ci łatwiej skopiuj oba kody do WORDA bądź innego programu tekstowego, jeden z nich zmodyfikuj tak jak w instrukcji i dopiero te kody przekopiuj do swojego szablonu.

I kolejny techniczny poradnik bloggera za Nami, jeśli chcecie bym zrobiła dla Was konkretną instrukcję piszcie e-mail, kontaktujcie się poprzez FanPage lub piszcie w komentarzach.

Pozdrawiam   

You Might Also Like

0 komentarze

Kamila K.. Obsługiwane przez usługę Blogger.

Archiwum bloga

Prawa Autorskie

Wszystkie publikowane na blogu zdjęcia oraz treści są mojego autorstwa. Jeśli jest inaczej wyraźnie to zaznaczam.
Nie zezwalam na ich kopiowanie bez mojej zgody.

Jeśli chcesz skopiować coś z bloga proszę o kontakt - e-mail: wtrampkachdocelu@gmail.com lub w komentarzach pod postem.