Безплатен блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

Да направим връзката "прочети повече" автоматична

"прочети повече"
Добър ден. Предстоят празници. Празници са нещо много хубаво и приятно, но както се казва - има време и за работа. Още е рано да се сбогуваме с делничните дни. И публикацията днес е за това, как да се направи връзката в Blogger "прочети повече" автоматична. Вече говорихме за това, как да я заменим с бутон, но за тези от вас, които се задоволяват с нейния текстови вид, е тази днешна публикация.
Обикновено, за да се покаже на началната страница в блога анонс на новата ни публикация ние използваме бутон в редактора, който ни позволява да намалим, разрежем публикацията на желано от нас място. Ако малко се поровим в шаблона на блога, можем да направим идеалния вариант за тези, които скриват голяма част от текста под кат ( cut ). Няма да е нужно да използват всеки път бутона "вмъкване на преход към нова страница". Изображението и част от текста ще се извеждат и показват на началната страница постоянно и автоматично. И тя ще изглежда изработена по-точно и внимателно от обикновено.
Хайде на работа.

➤Стъпка 1. Отидете в раздела "Шаблон" и не забравяйте да направите резервно копие. Какво ще стане, ако нещо се обърка? Натиснете Ctrl + F и намерете точно такъв ред:

<data:post.body/>

Обикновено в шаблона те са 2 или 3. Нужен ни е последния. Копираме следния код:


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script  type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
 <span class='readmore' style='float:right;'><a  expr:href='data:post.url'>ПРОЧЕТИ ПОВЕЧЕ &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>


Внимателно изтриваме редчето <data:post.body/> и вместо него също внимателно поставяме вече копирания код. Където е написано, ПРОЧЕТИ ПОВЕЧЕ, (маркирано в синьо), напишете нещо свое, като READ MORE, например. Ако искате да зададете изображение вместо думата, то внимателно изтрийте READ MORE  &#187;  и поставете HTML-кода на вашето изображение.

➤Стъпка 2: На същото място в шаблона малко по-нагоре търсим затварящия таг </ head> и поставяме следния код над него.


<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;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
</b:if>

</b:if>

Кои значения в кода могат да бъдат променени?

■posts_no_thumb_sum = 490; брой на показващите се, извеждащите се символи, ако не използвате изображение;
■posts_thumb_sum = 400; брой на извеждащите се символи с изображение;
■img_thumb_height = 160; височина на изображението;
■img_thumb_width = 180; ширина на изображението;


Сега натиснете бутона „визуализация“ и ако нямате забележки смело запазете промените. Няма да е лошо да си поиграете със значенията ширина и височина на изображенията, за да се показват прилично на главната страница.

На всички пожелавам новогодишното настроение да продължи, има още празници, приятна почивка в мразовитите дни и красива връзка "прочети повече" на всяка публикация.

Доскоро. И, разбира се, благодаря, че четете моя блог.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

BGtop

3 коментара:

  1. Определено това ми липсваше в блога. Като настройки уж трябваше да ми се показва съкратено, но поради някаква причина не можех да го настроя от темата. Най-вероятно преди да започна със запазването на темата или преди да тествам първо в тестовия си блог съм "омазал" темата си. Друга липса ми е мобилната версия в настройките може би пак след мое ровене из HTML кода, но вече не ми прави впечатление. След като използвах този страхотен урок мисля, че блогът стана по-добре. Остана да изчистя показването на източника на снимката да не ми е в началото ако има начин и да подредя малко текста. Искрени благодарности от мен.

    ОтговорИзтриване
    Отговори
    1. Здравейте, видях какво сте променили. Пак имам съвет, като имате възможност да избирате. Първата възможност е да увеличите размера на цитата на всяка от трите публикации така, че общата дължина на текстовете да не е много различна от дължината на страничната колона. Втората възможност, с която ще постигнете същото, е да увеличите броя на публикациите на главната страница, например с още две или три, при запазване на същата дължина на цитатите им. А за мобилната версия и изображенията ще погледна изходния код на страницата ви и ако имам предложение ще пиша.

      Изтриване
    2. След като видях новия облик се сетих да ги направя 5 публикации за да се изравнят. За мобилната версия не е важно толкова за мен, макар да го броят за пропуск от Гугъл. По-скоро трябва да си подредя текста, който се вижда и да не се смесва той с пояснението на изображението.

      Изтриване