ziemekpr0: Pierwszy, testowy wpis na Bloggerze

Pierwszy, testowy wpis na Bloggerze

Witam, to jest mój pierwszy wpis tutaj. Może nie pierwszy na Bloggerze, ale z pewnością na tym konkretnym blogu.

Dodajmy kilka obrazków...

Chciałbyś dodać do swojego Bloggera animowane zakładki z likeboxem Facebooka, badge Google Plus, albo ostatnie Twitty?

Musli na Bloggerze

Jakiś czas temu ktoś pytał mnie w komentarzach na moim blogu o wordpressie wpadmin.pl , czy można dodać takie animowane zakładki Facebooka również na Bloggerze. Ponieważ, Blogger pozwala na edytowanie kodu szablonu, to nie powinno być z tym problemu...

Co to musli

Musli, to bardzo prosty plugin jQuery, który animuje "wyjeżdżanie i chowanie się zakładek" z jednej z wybranych krawędzi okna przeglądarki (albo wielu). Na takiej zakładce, co jest bardzo popularnym rozwiązaniem, można umieścić np. kod ramki (iframe) z LikeBoxem Facebooka, albo Badge Google plus, albo widget z ostatnimi wpisami na twitterze, albo cokolwiek innego - linki, poprosić o opinie, ankietę, formularz subskrypcji, kontaktu, itd.

Jak dodać wysuwany LikeBox Facebooka do Bloggera

Wszystko co będzie potrzebne do uruchomienia "slidera LikeBoxa Facebooka", czyli:

kod HTML
CSS
plugin MUSLI
obrazki (alternatywnie stąd, własne, lub inne z internetu)

oraz, wiele innych dodatkowych i bardziej szczegółowych informacji o tym jak skonfigurować Musli, wg. własnych potrzeb można znaleźć w tym artykule http://wpadmin.pl/facebook-likebox-slider-czyli-musli-poprawiony-ulepszony/

Najprostsza i najszybsza droga do uruchomienia pluginu:

1. Najprościej będzie najpierw zająć się i przygotować obrazki z grafiką, które będą przedstawiać tą zawsze widzialną część zakładki. Obrazki musimy umieścić gdzieś, gdzie będziemy mieli do nich dostęp - np. jakiś hosting plików, jeśli posiadasz własny serwer to by się idealnie do tego nadał, albo tak jak ja zrobiłem i wykorzystałem do tego celu ten artykuł, w którym na początku umieściłem obrazki, które teraz wykorzystuję w moim zakładkach.

2. Przejdź do głównego okna Bloggera i wybierz blog na którym chcesz wstawić zakładki.

3. Z pionowego menu po lewej stronie wybierz opcję Szablon, a następnie przy aktywnym motywie guzik Edytuj kod HTML - tak jak zaznaczyłem na następnym obrazku:

4. Odszukaj w kodzie początek sekcji <head> i w niej, może być bezpośrednio pod tą linijką wstaw najpierw snippet dołączający bibliotekę jQuery:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>

5. Teraz z pliku z pluginem musli skopiuj wszystko i wklej pod spodem powyższego kodu:

<script type="text/css">

/* MUSLI jQuery plugin */
/* Version: 0.2 */
/* Author: ziemekpr0@gmail.com */
/* Plugin homepage: http://musli.newdivide.pl */

(function($) {
 $.fn.musli = function(options) {

 var settings = $.extend({
  animationAction : 'hover',
  animationSpeed : 1000,
  musliPosition: 'right'
 }, options );

 if(settings.musliPosition == 'top' ||

settings.musliPosition == 'bottom')
 {
  var animationBegin = {};
   animationBegin[settings.musliPosition] =

this.find('li > div').outerHeight();
  var animationEnd = {};
   animationEnd[settings.musliPosition] = "0";
 }
 else
 {
  var animationBegin = {};
   animationBegin[settings.musliPosition] =

this.find('li > div').outerWidth();
  var animationEnd = {};
   animationEnd[settings.musliPosition] = "0";
 }

 if(settings.animationAction == 'click'){

  this.find('li > img').click(function(){
   if($(this).parent('li').hasClass('musli-opened')) {
    $(this).parent('li').animate(animationEnd,

parseInt(settings.animationSpeed)).removeClass('musli-opened');
   }
   else {
    $(this).parent('li').animate(animationBegin,

parseInt(settings.animationSpeed)).addClass('musli-opened');
   }
  });
 }
 else
 {
  this.find('li').hover(
   function(){ $(this).stop().animate(animationBegin,

parseInt(settings.animationSpeed)); },
   function(){ $(this).stop().animate(animationEnd,

parseInt(settings.animationSpeed)); }
  );   
 }
}
}(jQuery));

$('#musli').musli();

</script>

W ostatniej linijce skryptu uruchamiamy plugin, w tym miejscu możemy podać dodatkowe opcje takie jak czy chcemy aby animację uruchamiało kliknięcie, czy najechanie na zakładkę, czas animacji, oraz pozycję zakładek na ekranie. Szczegóły jak to zrobić można sprawdzić na moim blogu, w linku który podałem wcześniej.

6. Ostatni krok, to zdefiniowanie listy zakładek, podanie ścieżek do obrazków, wygenerowanie odpowiedniego kodu LikeBoxa itp.

Mój, gotowy kod, ze ścieżkami do obrazków umieszczonych w tym artykule wygląda dokładnie tak:

<ul class='musli' id='musli'>
<li>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj-fUYmu9yDDg3P-2esL_YXFoTjsnqg6IN6dFAOgA_60QF-USFqz2_ML0-D1JanmcPjXWJtZEI7fW5K1ALRmf6cHIjhZo6Vddy5IFhjb7FPtA-kzhAn3R03hmXpHVDNGhOmoih7E3v63bb/s1600/facebook.png'/>
    <div class='musli-facebook'><iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FNewDividepl&width=287&height=290&show_faces=true&colorscheme=light&stream=false&border_color&header=true&appId=283077631817635' style='border:none; overflow:hidden; width:287px; height:290px;'/></div>
</li>
<li>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHd6gybJED1zdzrwlwXQkHr-lUxZlW3mlSCK6IY6-2Riy5R-h3YJZrIsDH9cQP0nLF8QWHeopXGlTPsFgcEx4FjugrMoDhCGff1OHXbqw__s0mRO6A9JToOALzf3FzvqBg0oGw68yXNqYB/s1600/googleplus.png'/>
    <div class='musli-google'><div class='g-page' data-href='//plus.google.com/105865537512501982443' data-rel='publisher' data-showcoverphoto='false' data-width='287'/><script type='text/javascript'>window.___gcfg={lang:"pl"};(function(){var po=document.createElement("script");po.type="text/javascript";po.async=true;po.src="https://apis.google.com/js/plusone.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(po,s);})();</script></div>
</li>
</ul>

W miejscach, które zaznaczyłem czerwoną czcionką należy podać swój identyfikator fanpage-a, czy strony w google plus. Na poniższych screenach widzisz, że wystarczy przejść pod adres fanpage i z linku w oknie adresu przeglądarki skopiować odpowiedni fragment: odpowiednio NewDividepl dla fanpage na Facebooku i 105865537512501982443 dla strony Google.