Jak dodać wysuwany Facebook (czyli Facebook pop up box) na Bloggerze?

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js’ type=’text/javascript’/> – See more at: http://allbestuto.blogspot.fr/2012/07/comment-ajouter-le-gadget-flottant-fans.html#sthash.mcIitLNw.dpuf
<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js’ type=’text/javascript’/>

– See more at: http://allbestuto.blogspot.fr/2012/07/comment-ajouter-le-gadget-flottant-fans.html#sthash.mcIitLNw.dpuf

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js’ type=’text/javascript’/>

– See more at: http://allbestuto.blogspot.fr/2012/07/comment-ajouter-le-gadget-flottant-fans.html#sthash.mcIitLNw.dpuf

<script type=”text/javascript”> //<!– 
$(document).ready(function() {$(„.w2bslikebox”).hover(function() {$(this).stop().animate ({right: „0”}, „medium”);}, function() {$(this).stop().animate({right: „-250”}, „medium”);}, 
500);}); //–> </script> 
<style type=”text/css”> 
.w2bslikebox{background: url(„http://1.bp.blogspot.com/-UuBsjDC5vSc/TuiSd0g9bHI/AAAAAAAAAyk/MqKt8IpiIVM/s1600/facebook1.png”) no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} 
.w2bslikebox div{border:none;position:relative;display:block;} 
.w2bslikebox span{bottom: 10px;font: 9px „lucida grande”,tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} 
.w2bslikebox span a{color: #FF9D00;text-decoration:none;} 
.w2bslikebox span a:hover{text-decoration:underline;} 
</style><div class=”w2bslikebox” style=””><div>

<iframe src=”http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/AllBestTuto&amp;

width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=12&amp;stream=false&amp;header=false&amp;height=330″ scrolling=”no” frameborder=”0″ scrolling=”no” style=”border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;”></iframe><span><a href=”http://allbestuto.blogspot.com/2012/07/comment-ajouter-le-gadget-flottant-fans.html” target=’_blank’>Avoir Ce Gadget</a></span></div></div>

– See more at: http://allbestuto.blogspot.fr/2012/07/comment-ajouter-le-gadget-flottant-fans.html#sthash.mcIitLNw.dpuf

jak dodać wyskakujący facebook

Zaklinałam się, że takiego wyskakującego, a raczej naskakującego Facebooka czyli fachowo Pop-up Box z Facebooka nie dodam. Ale dodałam. Póki co jako eksperyment, żeby sprawdzić czy mój facebookowy licznik zacznie bić trochę szybciej.

 

Dlaczego się na to zdecydowałam? Zdałam sobie sprawę, że czytając inne blogi na komórce, najczęściej zapominam o polubieniu ich strony facebookowej. Z drugiej strony, jak wyskakuje mi taki naskakujący pop-up box, dla świętego spokoju na niego klikam. No tak, żeby móc pójść dalej, póki mam połączenie. No cóż korzystam z komórki, może i nienajlepszej, stąd pewnie ta refleksja.

W internecie znajdziecie pełno wpisów o tym jak dodać takiego wysuwanego like boxa. Niemniej z kronikarskiego obowiązku wrzucam opis, jak ja to zrobiłam.

 

Zgodnie z mottem mojego bloga: „Wszystko jest trudne, nim stanie się proste”. Czyli diabeł nie taki straszny jak go malują. Tymbardziej, że wystarczy pobrać gotowy kod i wstawic do niego URL własnego fan paga. 

Ale zacznijmy krok po kroku.

Ponieważ będziemy musieli zrobić małą manipulację przy szablonie bloga, warto zrobić sobie przedtem (na wszelki wypadek) jego kopę zapasową. W tym celu wchodzimy w Szablon, a następnie klikamy na Utwórz/przywróć kopię zapasową.

jak dodać wyskakujący facebook na Bloggerze
  • Teraz wybieramy Pobierz pełny szablon, który zapiszemy na dysku twardym komputera. Pomyślcie o nadaniu mu takiej nazwy, by się Wam kojarzyła (i by w razie gdyby coś nie poszło jak po maśle, odpukać 3 razy w niemalowane, łatwo było ją odnalezć).
jak dodać wyskakujący facebook na Bloggerze
  • Teraz wchodzimy w Szablon, Formatuj szablon i za pomocą klawiszy CTRL + F szukamy  </head> (koniec sekcji head)  i tuż przed nią wklejamy  


<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js’ type=’text/javascript’/>

 
 
jak dodać wyskakujący facebook na Bloggerze
 
  • To już koniec dłubania przy kodzie HTML. Resztę dodamy na poziomie Gadgetu. Wchodzimy w Układ, Dodaj Gadżet, z rozwijanej listy wybieramy HTML/Java Script.
jak dodać wyskakujący facebook na Bloggerze
  • Po wybraniu gadgetu HTML/Java Script,  wklejamy do niego następujący kod. Pamiętając o wrzuceniu do niego URL swojego fan paga w miejsce czerwonego tekstu.
<script type=”text/javascript”> //<!– 
$(document).ready(function() {$(„.w2bslikebox”).hover(function() {$(this).stop().animate ({right: „0”}, „medium”);}, function() {$(this).stop().animate({right: „-250”}, „medium”);}, 
500);}); //–> </script> 
<style type=”text/css”> 
.w2bslikebox{background: url(„http://1.bp.blogspot.com/-UuBsjDC5vSc/TuiSd0g9bHI/AAAAAAAAAyk/MqKt8IpiIVM/s1600/facebook1.png”) no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} 
.w2bslikebox div{border:none;position:relative;display:block;} 
.w2bslikebox span{bottom: 10px;font: 9px „lucida grande”,tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} 
.w2bslikebox span a{color: #FF9D00;text-decoration:none;} 
.w2bslikebox span a:hover{text-decoration:underline;} 
</style><div class=”w2bslikebox” style=””><div>
<iframe src=”http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/suitedel’urlFanpagaWaszegobloga&amp;
width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=8&amp;stream=false&amp;header=false&amp;height=330″ scrolling=”no” frameborder=”0″ scrolling=”no” style=”border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;”></iframe><span><a href=”http://blogger-au-bout-du-doigt.blogspot.com/2012/04/gadget-fans-sur-facebook-flottant-sur.html”>Avoir ce gadget</a></span></div></div>
 
Kod pochodzi z bloga Le blogger.

Macie wątpliwości co to jest URL Waszego Fan Paga? Po prostu wejdzcie na niego i skopiujcie adres u góry strony. Mój wyglada tak:

<script type=”text/javascript”> //<!–
$(document).ready(function() {$(„.w2bslikebox”).hover(function() {$(this).stop().animate ({right: „0”}, „medium”);}, function() {$(this).stop().animate({right: „-250”}, „medium”);},
500);}); //–> </script>
<style type=”text/css”>
.w2bslikebox{background: url(„http://1.bp.blogspot.com/-UuBsjDC5vSc/TuiSd0g9bHI/AAAAAAAAAyk/MqKt8IpiIVM/s1600/facebook1.png”) no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 10px;font: 9px „lucida grande”,tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #FF9D00;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class=”w2bslikebox” style=””><div>
<iframe src=”http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/vademecumblogera?ref=bookmarks&amp;
width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=8&amp;stream=false&amp;header=false&amp;height=330″ scrolling=”no” frameborder=”0″ scrolling=”no” style=”border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;”></iframe><span><a href=”http://blogger-au-bout-du-doigt.blogspot.com/2012/04/gadget-fans-sur-facebook-flottant-sur.html”>Avoir ce gadget</a></span></div></div>

Pozdrowienia
 
Beata
Beata Redzimska Vademecum Blogera
Beata Redzimska

Zapisz się na Newsletter

More from BEATA REDZIMSKA

Blogerka (1). Historia wakacyjnej miłości.

Alpy przywitały ją ciepłym lipcowym słońcem. Wysiadła z autobusu. Małe miasteczko malowniczo...
Read More

12 komentarzy

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *