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

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

Въведение

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

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

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

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

Първи код:

#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/AVvXsEha9T5xPGjI_6WwhS3iGcaDFPitK9Ack5ySFxzLyFXez6Vn4Q5Rjx7vL0dHh7T2kqgGXw2q6OHLUMLfUpXFRXJ1-C1yuGAEGpoeR4M2OKXi4m7XF7Dr6BNkZujZDuCRXoxe7rNAt89Vh6MM/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 == &quot;item&quot;'>
  <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'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;Прочетете още:&lt;/h4&gt;&quot;,
      numPosts: 5,
      titleLength: &quot;auto&quot;,
      containerId: &quot;related-post&quot;,
      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>. Точно пред него вписвате посочения по-горе първи код.

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

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

<div class='post-footer-line post-footer-line-1'>

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

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

<div class='post-footer-line post-footer-line-2'>

Или

<div class='post-footer-line post-footer-line-3'>

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

Трети код:

<ul class="border">

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

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

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

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

<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. Преместете я на желаното от вас място. Тя изглежда така.

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

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

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

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

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