Kako dodati "Read more" dugme za sve postove u Blogger-u?

Blog Jaka Šifra - Saznajte kako da se "Read more" dugme automatski dodaje svim postovima nakon određenog broja reči.

Kako dodati "Read more" gume za sve postove u Blogger-u?

Zašto dodati "Read more" dugme na blog?

Blog će izgledati lepše i profesionalnije;
Blog će brže učitavati - sporo učitavanje bloga će samo iznervirati posetioce koji se zbog toga neće zadržati na vašem blogu;
Imaćete veći broj pregleda stranica - ukoliko dopustite posetiocima da ceo tekst pročitaju na početnoj na početnoj stranici, oni neće imati potrebu da ulaze na pojedinačne postove. Tako da osim manjeg broja otvorenih stranica, ne možete pratiti ni realnu statistiku poseta vaših postova. Napomena: Blogger nema toliko preciznu i detaljnu statistiku, tako da obavezno instalirajte Google Analitiku na vaš blog.

Uvodne rečenice svakog blog posta su veoma bitne, na osnovu njih će mnogi odlučiti da li da otvore (pročitaju) vaš post, zato se potrudite da u njima ukratko opišete o čemu ćete pisati u tekstu.

Kako dodati "Read more" dugme za sve postove u Blogger-u?

Ranije je na blogu izašlo uputstvo o postavljanju "Read more" dugmta u postu, međutim ukoliko to niste radili do sada može biti problem da ručno ispravljate postove, pa ću u ovom uputstvu opisati kako da automatski dodate "read more" dugme svim postovima. Nakon toga više neće biti potrebno da ručno dodajete "Read more" jer će se ovo dugme prikazivati u svim postovima nakon određenog broja reči.

+Tijana Milanovic je na svom blogu objasnila kako da to uradite u Wordpress-u - KLIK OVDE - gde je to mnogo lakše, ali ipak postoji mogućnost da to uradite i u Blogger-u.

Mnogi Blogger šabloni dolaze sa integrisanom opcijom za automatsko skraćivanje tekstova, pa možete pogledati SPISAK SAJTOVA GDE MOŽETE PRONAĆI BESPLATAN DIZAJN ZA BLOGGER.

POGLEDAJTE VIDEO UPUTSTVO NA KRAJU TEKSTA

Korak 1 - Uđite na vaš Blogger nalog kliknite na "Šablon", pa "Izmeni HTML"

Napomena: Pre nego što bilo šta počnete da radite sačuvajte vaš šablon, za slučaj da nešto pogrešite (uputstvo u video klipu na kraju teksta).

Korak 2 - Kliknite na kod, a onda kombinacijom tastera CTRL + F pronađite ovaj deo koda tj. drugi po redu jer ovih linija koda ima nekoliko u vašem šablonu

<data:post.body/>

Korak 3 - Umesto te linije koda iskopirajte sledeći kod

<b:if cond='data:blog.pageType != "static_page"'><br />
<b:if cond='data:blog.pageType != "item"'><br />
<div expr:id='"summary" + data:post.id'>
<data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script><br />
<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Opširnije»</a></span></b:if></b:if><br />
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><br />
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

* U ovom kodu možete umesto Opširnije staviti tekst koji vi želite da se prikazuje
** Kada ste to dodali kliknite na "Previw template" i proverite da li se na kraju teksta pojavljuje link "Opširnije", ukoliko se ne pojavljuje vratite se i zamenite treći "<data:post.body/>" sa ovim kodom

Korak 4 - Sada pretražite sledeći kod:

</head>

Korak 5 - Odmah iznad ovog koda iskopirajte sledeći kod:

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</script><br />
<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;
}

var summary = imgtag + '<div>
' + removeHtmlTag(div.innerHTML,summ) + '</div>
';
div.innerHTML = summary;
}
//]]>
</script><br />
<br />
<b:if cond='data:blog.pageType != "static_page"'><br />
<b:if cond='data:blog.pageType != "item"'><br />
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style><br />
</b:if><br />
</b:if>

U ovom kodu možete menjati sledeće vrednosti:

posts_no_thumb_sum = 490; - broj karaktera nakon kojih će se prikazati "pročitaj više" dugme (ukoliko post nema sliku)

posts_thumb_sum = 400; - broj karaktera nakon kojih će se prikazati "pročitaj više" dugme (ukoliko post ima sliku)

img_thumb_height = 160; - visina fotografije koja će se prikazivati pored teksta

img_thumb_width = 180; - širina fotografije koja će se prikazivati pored teksta

Korak 6 - Nakon toga možete sačuvati izmene na vašem šablonu i svi vaši postovi će od sada automatski imati "Pročitaj više" dugme nakon određenog broja karaktera.

Постави коментар

2 Коментари

Unknown каже…

Kolega, hvala na tagu :) Izvanredan post, mada iskreno za one koji se ne osecaju slobodnim da se petljaju sa kodom preporucujem prelazak na wordpress. :)

13. децембар 2015. 10:57