Beauty

Widżet wyświetlający ilość odsłon postów na Bloggerze

W tym poradniku pokażę ci, w jaki sposób umieścić kod, który spowoduje wyświetlanie liczby odsłon pod tytułem posta na Bloggerze. Dzięki temu ty i twoi czytelnicy będziecie mogli obserwować, jak często czytane są poszczególne wpisy na blogu.

Przed przystąpieniem do jakiejkolwiek ingerencji w kodzie, bezwzględnie zrób kopię zapasową szablonu, gdyż jeżeli dokonasz w nim nieprawidłowych zmian - uszkodzisz go. Możesz zrobić to w menu Szablon => Utwórz/ Przywróć kopię zapasową.

I. Załóż bazę danych na Firebase

1. Dane z odsłon poszczególnych postów muszą być gdzieś gromadzone. Do tego posłuży nam darmowa, zewnętrzna baza danych. Wejdź na Firebase i załóż tam konto klikając Sign Up.
2. Wpisz swój adres Email i hasło po czym kliknij Create My Account.
3. W polu APP NAME wpisz nazwę swojej bazy. Pole APP URL to adres bazy, który utworzy się automatycznie po wpisaniu nazwy. Oczywiście możesz go zmodyfikować. Kliknij CREATE NEW APP, by stworzyć bazę danych. 
4. Adres bazy danych skopiuj, gdyż potrzebny będzie do konfiguracji widżetu.

II. Umieść styl czcionki Awesome

1. By przed liczbą wyświetleń pojawiała się ikona, należy najpierw umieścić jej styl w kodzie szablonu. W tym celu zaloguj się do panelu admina na Bloggerze.
2. Wejdź w menu Szablon => Edytuj kod HTML.
3. Kliknij w okno edytora i wciśnij skrót Ctrl + F.
4. W okno wyszukiwarki wpisz:
<head>
i wciśnij Enter, by wyszukać.
5.Tuż pod wyszukanym znacznikiem wklej:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

III. Umieść bibliotekę jQuery

1. By widżet mógł zliczać wyświetlenia, potrzebna jest biblioteka jQuery. Jej kod umieść w kodzie szablonu w sposób następujący:
2. Używając wyszukiwarki znajdź:
</head>
3. Nad znalezionym znacznikiem wklej poniższy kod:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

IV. Umieść styl widżetu

1. By widżet jakoś wyglądał, trzeba zdefiniować jego styl. W tym celu w kodzie szablonu wyszukaj:
]]></b:skin>
2. Nad wyszukanym znacznikiem wklej poniższy kod:
#views-container { 
float: left; 
}
.mbtloading { 
background: url('http://4.bp.blogspot.com/-g_OUKcTGFkY/VKE5sg0OpYI/AAAAAAAAHns/hoOp4fDmnlo/s1600/mbtloading.gif') no-repeat left center; 
width: 16px; 
height: 16px; 
}
.viewscount { 
float: right; 
color: #c1c1c1; /* Kolor ikony */
font-weight: normal; 
}
.views-text { 
float: left; 
}

V. Umieść skrypt widżetu

1. By widżet zliczał odsłony, potrzebny jest do tego skrypt. W kodzie szablonu wyszukaj znacznik:
</body>
2. I tuż nad nim wklej skrypt:
<script type='text/javascript'> 
    window.setTimeout(function() { 
        document.body.className = document.body.className.replace('loading', ''); 
      }, 10); 
</script> 
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/> 
<script> 
$.each($('a[name]'), function(i, e) { 
var elem = $(e).parent().find('#postviews').addClass('mbtloading'); 
var blogStats = new Firebase("https://moja-nazwa.firebaseio.com/pages/id/" + $(e).attr('name')); 
blogStats.once('value', function(snapshot) { 
var data = snapshot.val(); 
var isnew = false; 
if(data == null) { 
data= {}; 
data.value = 0; 
data.url = window.location.href; 
data.id = $(e).attr('name'); 
isnew = true; 
} 
elem.removeClass('mbtloading').text(data.value); 
data.value++; 
if(window.location.pathname!='/') 
{ 
if(isnew) 
blogStats.set(data); 
else 
blogStats.child('value').set(data.value); 
} 
}); 
}); 
</script>
3. I teraz najważniejsze. W powyższym kodzie zmień adres bazy danych na ten, który stworzyłeś w kroku I.

VI. Umieść kod, który odpowiada za wyświetlanie się widżetu

1. Żeby cały widżet w ogóle był widoczny, w szablonie należy umieścić jego kod. Jeżeli chcesz, by widżet wyświetlał się pod tytułem posta, wyszukaj:
<div class='post-header-line-1'/>
2. Pod znalezionym kodem wklej poniższy:
<div id='views-container'><span class='views-icon'/><div class='views-text'><i class='fa fa-eye'></i> Wyświetleń </div><div class='mbtloading viewscount' id='postviews'/></div>
3. Uwaga! W szablonie znajduje się kilka takich samych kodów <div class='post-header-line-1'/>, dlatego jeżeli wklejenie kodu z kroku 2 nie przyniesie oczekiwanych rezultatów - wyszukaj kolejny i powtórz czynność.
4. Jeżeli chcesz zmienić ikonę wyświetleń, to wejdź na stronę czcionki Font Awesome, kliknij wybraną ikonę, skopiuj jej kod i zastąp poprzedni.
5. Na sam koniec Zapisz szablon.

Podsumowanie

Widżet zliczający ilość odsłon poszczególnych postów z pewnością uatrakcyjni funkcjonalność twojego bloga na Bloggerze, jednak procedura jego instalacji jest dość skomplikowana, szczególnie dla początkujących blogerów. Jednak mam nadzieję, że dzięki numerowanemu poradnikowi, krok po kroku poradzisz sobie z umieszczeniem kodu. Rób to powoli, starannie i ostrożnie, gdyż wystarczy zgubienie jednego znaku, a widżet nie będzie działał prawidłowo. Nie przerażaj się. Jeżeli nie udało ci się za pierwszym razem - spróbuj ponownie. Myślę, że warto poświęcić swój czas i wysiłek.

Instagram