Ten przycisk Facebook Like pozwoli odwiedzającym polubić twój post i udostępnić go znajomym na Facebooku. W tym poście zobaczymy, jak możemy dodać przycisk Like It dla każdego postu Blogger. Mając przycisk Facebook Like poniżej tytułów ułatwiasz użytkownikom Facebook lubić konkretne posty na blogu, co z kolei wyświetla się na ich profilu (i potencjalnie ich przyjaciół). Jeśli chcesz dodać przycisk Facebook jak poniżej w tytule bloger post, wykonaj następujące kroki:
Dodawanie Facebook Like Button Poniżej tytułu posta
Krok 1. Przejdź do Pulpit nawigacyjny Bloggera > szablon > Edytuj kod HTML
Krok 2. Kliknij w dowolnym miejscu wewnątrz obszaru kodu i wyszukiwania - za pomocą klawiszy CTRL + F - do tego kawałka kodu:
<data:post.body/>
Uwaga: można go znaleźć więcej niż 3 razy, zatrzymaj się na drugim (lub trzecim, w przypadku, gdy nie pojawi się po zastosowaniu kodu z kroku 3)
Główną zaletą tego widgetu Najnowsze wpisy to, że będzie to pokazywać nie tylko dodane tytuły, ale również zamieści fragmenty lub części fragmentów posta, łatwo dostosować lub zastosować inny styl na nim. Aby zmieścić swój własny projekt, trzeba będzie zmienić styl CSS - można zmienić łącza lub tła, rozmiar i kolor tekstu / linków. Co można zrobić w teym widgecie: - tytuły wyświetlania - zmienić liczbę znaków w urywku fragmentu. Zobacz zrzut ekranu poniżej:
Jak dodać widget Najnowsze posty w Bloggerze
Krok 1. Zaloguj się na pulpicie nawigacyjnym Bloggera> przejdź do "układ" i kliknij "Dodaj gadżet"
Krok 2. W oknie pop-up, przewiń w dół i wybierz HTML / JavaScript
Krok 3. Wybierz i skopiuj kod z jednej z poniższych opcji i wklej go w nowym oknie HTML / JavaScript:
- Zmienić 5 (opcja 1) i 10 (opcja 2) na liczbę postów do wyświetlenia.
- Zmień false na true jeśli chcesz aby pojawiły się daty wpisów
- Zmień 100 (opcja 1), aby wyświetlić ilość znaków we fragmencie.
- Aby zmienić kolor i rozmiar czcionki, zmodyfikuj wartości w kolorze niebieskim (linki) i fioletowy (font-size) dla rozmiaru czcionki
- Aby zmienić styl postu,, zmień wartości zieloną (kolor) i pomarańczową (rozmiar czcionki) - Zamień tekst http://URL-BLOGA.com na adres Twojego bloga
kroku 5. Zapisz widżet. podziękuj klikając poniżej
nota: Zanim zapiszesz projekt zawsze możesz go podejrzeć klikając na przycisk PODGLĄD. Jeśli nie widzisz żadnych zmian na blogu. Zamień drugi wiersz pokazujący<data:post.body/> .
teraz w wyszukiwarce wyszukaj :
</head>
i tuż nad tym wierszem wklej poniższy kod
<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right:
10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img
src="'+img[0].src+'" width="'+img_thumb_width+'px"
height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
- możesz zmienić wielkości wyświetlanych obrazków zamieniając160( wysokość ) oraz180(szerokość ).
- możesz zmienić ustawienia zaznaczone na niebiesko 490 znaków, aby zobaczyć mniej lub więcej nagłówka posta.oraz 400 znaków, aby zobaczyć mniej lub więcej treści posta.
Jest to dość przydatny kod jeśli odwiedzają cię często użytkownicy, którzy czegoś potrzebują. Umożliwia on wyświetlenie losowych postów z twojego bloga.
Gdy blog ma zbyt wiele postów, goście nie zawsze mają czas i chęć, aby przejść przez wszystkie posty w celu przejrzenia zawartości bloga. Tak więc, widżet losowych postów, pozwoli odwiedzającym znaleźć treść łatwiej i może okazać się naprawdę przydatny. Ten poradnik pokaże Ci, jak dodać widżet do losowych postów i wyświetlić listę postów w kolejności losowej z miniaturami i fragmentami posta.
Dodawanie Losowych postów z miniaturką
zaczynajmy,Krok 1. Zaloguj się na konto Blogger, wybierz swój blog i przejdź doSzablon. Dodaj nowy widget, klikając na Dodaj gadżet i wybierz HTML / JavaScript w wyskakującym okienku.
Krok 2. Po dodaniu widżeta HTML / JavaScript musisz skopiować poniższy skrypt i wkleić go w oknie HTML
#random-posts li {
margin-bottom: 10px;
border-bottom: 1px solid #EEEEEE;
padding: 4px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 110;
var randomposts_details = 'yes';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);
function randomposts(json) {
total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script
type=\"text/javascript\"
src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');
function getvalue() {
for (var i = 0; i < randomposts_number; i++) {
var found = false;
var rndValue = get_random();
for (var j = 0; j < randomposts_current.length; j++) {
if (randomposts_current[j] == rndValue) {
found = true;
break
}
};
if (found) {
i--
} else {
randomposts_current[i] = rndValue
}
}
};
function get_random() {
var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
for (var i = 0; i < randomposts_number; i++) {
var entry = json.feed.entry[i];
var randompoststitle = entry.title.$t;
if ('content' in entry) {
var randompostsnippet = entry.content.$t
} else {
if ('summary' in entry) {
var randompostsnippet = entry.summary.$t
} else {
var randompostsnippet = "";
}
};
randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
if (randompostsnippet.length < randomposts_chars) {
var randomposts_snippet = randompostsnippet
} else {
randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
var whitespace = randompostsnippet.lastIndexOf(" ");
randomposts_snippet = randompostsnippet.substring(0, whitespace) + "…";
};
for (var j = 0; j < entry.link.length; j++) {
if ('thr$total' in entry) {
var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
} else {
randomposts_commentsnum = randomposts_commentsd
}; if (entry.link[j].rel == 'alternate') {
var randompostsurl = entry.link[j].href;
var randomposts_date = entry.published.$t;
if ('media$thumbnail' in entry) {
var randompoststhumb = entry.media$thumbnail.url
} else {
randompoststhumb =
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivMFF1Q-9kYL_RllJlueusNqMxsIZnEDJuk1M_I1bwz5ls0ZLAJqITE32yBEQuK9O7J_zcWVQ8dOiDfXkXRSbdcreibddYgK5U7huUIpXQQx3GZqsH4hi92I9kbNjco6xVndKqY1IFjHA/s1600/no_thumb.png"
}
}
};
document.write('<li>');
document.write('<a href="' + randompostsurl + '"
rel="nofollow"><img alt="' + randompoststitle + '" src="' +
randompoststhumb + '"/></a>');
document.write('<div><a href="' + randompostsurl + '"
rel="nofollow">' + randompoststitle + '</a></div>');
if (randomposts_details == 'yes') {
document.write('<span><div class="random-info">' +
randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5,
7) + '.' + randomposts_date.substring(0, 4) + ' - ' +
randomposts_commentsnum) + '</div></span>'
};
document.write('<br/><div class="random-summary">' +
randomposts_snippet + '</div><div
style="clear:both"></div></li>')
}
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
document.write('<script type=\"text/javascript\"
src=\"/feeds/posts/default?alt=json-in-script&start-index=' +
randomposts_current[i] +
'&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>
Dostępne opcje kodu:
- wielkość miniaturki w pikselach, zastąp wartość - width: 75px; height: 75px; wartości "75" możesz zmienić na odpowiednie dla twojego bloga. - długość posta możesz zmienić poprzez zamianę wartości w tym wierszu by kontrolować długość streszczenia (w znakach): var randomposts_chars = 110 : zmień wartość "110" - informacje zawarte w poście możesz ukryć zamieniając wartość "yes" w wierszu: var randomposts_details = 'yes'; na "no" - aby zmienić wielkości czcionki wyszukaj wiersz : font-size: 11px i ustaw swoją wartość
Naciśnij zapisz i ciesz się swoimi losowymi postami na stronie :)
Ten przycisk Facebook Like pozwoli odwiedzającym polubić twój post i udostępnić go znajomym na Facebooku. W tym poście zobaczymy, jak możemy dodać przycisk Like It dla każdego postu Blogger. Mając przycisk Facebook Like poniżej tytułów ułatwiasz użytkownikom Facebook lubić konkretne posty na blogu, co z kolei wyświetla się na ich profilu (i potencjalnie ich przyjaciół). Jeśli chcesz dodać przycisk Facebook jak poniżej w tytule bloger post, wykonaj następujące kroki:
