Притурка сходни публикации във вид на списък

Pepa Tabakova

неделя

Хубав ден, приятели. Списък с подобни публикации под всяка статия в блога. Въпреки, че има и други възможности, тази опция служи като отлична алтернатива на показване на статии по темата или сходни публикации, както обикновено се наричат.

Въведение

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

Читателите вече ме насочиха към този въпрос повече веднъж.

Инсталиране на притурката

Инсталирането на притурката става посредством два кода в две стъпки.

Първи код:

#related-post background:none;width:100%;margin-top:35px;margin-bottom:10px;padding:5px 0 10px 0px}
#related-post h4{font-size:150%;text-transform:uppercase;margin:0 0 15px;padding:0;font-weight:normal}
#related-post li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrngFky2lpJi1r8Umw51GRXfysK-dvqGIhICQ0Av4rsIeLJ-pFQQsdhbnWv0w8x7HawA8bT7ZUG6G4IwMq64EeQ5OCKX2YJMa_9OKCkXwANzJhf-Y6yNyoLp2L1Rf5WOLt7TVP8HNYNn_D/s1600/bullet.png)

no-repeat 1px 5px;color:#2c3e50;text-indent:0;line-height:1.6em;margin:0;padding:0 0 3px 19px}
#related-post .widget{margin:0;padding:0}
#related-post ul{list-style:none;margin:0;padding:0}

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

Втори код:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-post' class='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4>Прочетете още:</h4>",
numPosts: 5,
titleLength: "auto",
containerId: "related-post",
newTabLink: false,
widgetStyle: 1,
callBack: function() {}
};
</script>
<script type='text/javascript' src='https://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js'/>
</b:if>

Уточнение: Заменете цифрата 5 на желания брой сходни публикации. И пояснителния текст също, ако имате нещо друго наум.

Първа стъпка:

Сега трябва да отидете в раздела Тема (след като сте направили резервно копие) и намерите реда ]></b:skin>. Точно пред него вписвате посочения по-горе първи код.

Втора стъпка:

Продължавате да търсите реда

Точно под него вписвате копирания по-горе втори код.
За да се ориентирате по-лесно разгледайте скриншота

Запаметете промените в кода на темата. Ако списъкът със сходни публикации не се появява в блога ви потърсете по описания по-горе начин следващия ред

Или

Така е, защото темите на блоговете ни са различни. И под него вписвате вече посочения код. В един от моите блогове това направих под втория ред.

Трети код:

<li>Елемент от списъка</li>

</ul>

<style>

.border {

list-style: none;

padding: 0;

}

.border li {

font-family: "Trebuchet MS", "Lucida Sans";

padding: 7px 10px;

margin-bottom: 10px;

border-radius: 5px;

border-left: 10px solid #f05d22;

box-shadow: 2px -2px 5px 0 rgba(0,0,0,.1),

-2px -2px 5px 0 rgba(0,0,0,.1),

2px 2px 5px 0 rgba(0,0,0,.1),

-2px 2px 5px 0 rgba(0,0,0,.1);

font-size: 20px;

letter-spacing: 2px;

transition: 0.3s all linear;

}

.border li:nth-child(2){border-color: #8bc63e;}

.border li:nth-child(3){border-color: #fcba30;}

.border li:nth-child(4){border-color: #1ccfc9;}

.border li:nth-child(5){border-color: #493224;}

.border li:hover {border-left: 10px solid transparent;}

.border li:nth-child(1):hover {border-right: 10px solid #f05d22;}

.border li:nth-child(2):hover {border-right: 10px solid #8bc63e;}

.border li:nth-child(3):hover {border-right: 10px solid #fcba30;}

.border li:nth-child(4):hover {border-right: 10px solid #1ccfc9;}

.border li:nth-child(5):hover {border-right: 10px solid #493224;}

</style>

Този код сложете в притурка HTML. Преместете я на желаното от вас място. Тя изглежда така.

Елемент от списъка
Елемент от списъка
Елемент от списъка
Елемент от списъка
Елемент от списъка

За настройките предполагам, че няма да се затрудните.
Списъкът със сходни публикации изглежда компактно, стегнато и скромно.

Благодаря, че прочетохте и тази моя публикация. Ако ви е харесала, споделете я с приятели. А за въпроси, моля в коментарите.

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

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

Cancel