Приветствую вас, бесценный мой читатель! Сегодня хочу предложить вашему вниманию ещё один виджет - похожие статьи для Blogger с миниатюрами. Данный виджет отличается от предыдущих (смотрите здесь и тут), тем, что отображаются похожие сообщения не только с эскизами изображений, заголовком поста, но и анонсом записи. Да, ещё есть эффект вращения миниатюры при наведение на неё курсором мыши, а также, есть два стиля виджета - для тёмного блога и светлого. Будет из чего выбирать.
Вот, как то так.
Вот, как то так.
Как установить похожие статьи для Blogger с миниатюрами и анонсом поста в блог
Скриншот светлого стиля, правда симпатично и стильно смотрится виджет связанных сообщений. И так, кто хочет установить похожие сообщения после каждой записи вашего блога следуйте этой инструкции. Только не пугайтесь, будет побольше шагов для установки этого стильного гаджета. К делу.Найдите в шаблоне вашего блога, при помощи сочетания клавиш Ctrl+F строчку </head>:
Чуть выше данного тега вставить такой код:
<script type='text/javascript'>//<![CDATA[var relatedTitles = new Array();var relatedUrls = new Array();var relatedpSummary = new Array();var relatedThumb = new Array();var relatedTitlesNum = 0;var relatedPostsNum = 4; // number of entries to be shownvar relatedmaxnum = 75; // the number of characters of summaryvar relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGk99MFmdpaM0T0p6fmr9QA5-gvJGLO7EF648stkYwoa9UsRM7xT5vZIsvcXLSyt8sNfO6x4OlTM_LtsGEjSn7zsvPD9BfmO60ZapY4kZ8ZNm4xPz7zP0bEqjgPLTIhw-3zCmuPO1MQMpP/s1600/no_image.jpg"; // default picture for entries with no image//]]></script><script src="http://makingdifferent.github.io/blogger-widgets/related-posts-with-thumbs-and-summaries.js" />Здесь, в этом коде вы сразу можете настроить - сколько выводить похожих записей, по умолчанию 4, а также, установить количество символов сниппета (анонса), по умолчанию 75. Идем далее, для светлого стиля виджета (смотрите скрин) нужно установить CSS, чуть выше всё того же тега </head> такой код:
<style>
.relatedsumposts {
float: left;
padding: 0px 10px;
overflow: hidden;
text-align: center;
/* width and height of the related posts area */
width: 120px;
height: 200px;
border-right: 1px solid #E5E5E5;
display: inline-block;
}
.relatedsumposts:hover {
background-color: #F7F7F7;
}
.relatedsumposts img:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
.relatedsumposts a {
/* link properties */
color: #linkcolor;
display: inline;
font-size: 10px;
line-height: 1;
}
.relatedsumposts img {
/* thumbnail properties */
margin-top: 2px;
height: 82px;
padding: 5px;
width: 82px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow: hidden;
}
.relatedsumposts h6 {
/* title properties */
display: table-cell;
height: 3em;
margin: 5px 0 0;
overflow: hidden;
padding-bottom: 2px;
vertical-align: middle;
width: 130px;
}
.relatedsumposts p {
/* summary properties */
border-top: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
color: #summarycolor;
font-size: 10px;
height: 4em;
line-height: 1;
margin: 5px 0 0;
overflow: hidden;
padding: 5px 0 15px 0;
text-align: left;
}
#relatedpostssum {
background: #F3F3F3;
height: 200px; /* related posts container */
padding: 5px;
width: 100%;
}
.relatedpoststitle {
font-size: 19px;
font-weight: bold;
border-top: 3px solid #FB8227;
color: #777;
display: inline-block;
padding: 5px 10px;
width: 190px;
float: left;
margin: 0px -200px 0px 20px;
transform: rotate(90deg);
transform-origin: left top 0;
-ms-transform: rotate(90deg);
-ms-transform-origin:left top 0;
-webkit-transform: rotate(90deg);
-webkit-transform-origin:left top 0;
font-family: Gill Sans / Gill Sans MT, sans-serif;
}
</style>
А если вам нужен такой стиль:
Тогда вам нужно вставить такой код CSS:
<style>.relatedsumposts {float: left;padding: 0px 10px;overflow: hidden;text-align: center;/* width and height of the related posts area */width: 120px;height: 200px;border-right: 1px solid #0A0A0A;display: inline-block;}.relatedsumposts:hover {background-color: #0A0A0A;}.relatedsumposts img:hover {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);}.relatedsumposts a {/* link properties */color: #linkcolor;display: inline;font-size: 10px;line-height: 1;}.relatedsumposts img {/* thumbnail properties */margin-top: 2px;height: 82px;padding: 5px;width: 82px;border: 1px solid #000;background:#282828;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);box-shadow: 0 1px 2px rgba(0, 0, 0, .4);-webkit-transition-duration: 0.8s;-moz-transition-duration: 0.8s;-o-transition-duration: 0.8s;transition-duration: 0.8s;-webkit-transition-property: -webkit-transform;-moz-transition-property: -moz-transform;-o-transition-property: -o-transform;transition-property: transform;overflow: hidden;}.relatedsumposts h6 {/* title properties */display: table-cell;height: 3em;margin: 5px 0 0;overflow: hidden;padding-bottom: 2px;vertical-align: middle;width: 130px;}.relatedsumposts p {/* summary properties */border-top: 1px solid #0A0A0A;border-bottom: 1px solid #0A0A0A;color: #summarycolor;font-size: 10px;height: 4em;line-height: 1;margin: 5px 0 0;overflow: hidden;padding: 5px 0 15px 0;text-align: left;}#relatedpostssum {background: #121212;height: 200px; /* related posts container */padding: 5px;width: 100%;}.relatedpoststitle {font-size: 19px;font-weight: bold;border-top: 3px solid #FB8227;color: #ccc;display: inline-block;padding: 5px 10px;width: 190px;float: left;margin: 0px -200px 0px 20px;transform: rotate(90deg);transform-origin: left top 0;-ms-transform: rotate(90deg);-ms-transform-origin:left top 0;-webkit-transform: rotate(90deg);-webkit-transform-origin:left top 0;font-family: Gill Sans / Gill Sans MT, sans-serif;}</style>
Обратите внимание, что стили для виджета можно вставить чуть выше строчки ]]></b:skin>, нужно лишь убрать из кода <style> ..</style>. Ещё в стилях можно изменить высоту и ширину виджета: 120 и 200 по умолчанию, а также, размер эскиза изображения 82. Поехали дальше, теперь вам нужно в шаблоне найти вот такой код:
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != "true"'>
,
</b:if>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != "true"'>
,
</b:if>
Далее, вам нужно чуть ниже добавить вот этот кодик, после </b:if>:
<b:if cond='data:blog.pageType == "item"'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=readpostlabels&max-results=50"' type='text/javascript'/></b:if>
И в итоге у нас получится вот так:
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=readpostlabels&max-results=50"' type='text/javascript'/></b:if>
И последний шаг, ищем ещё одну строчку в вашем шаблоне:
</b:includable>
<b:includable id='postQuickEdit' var='post'>
<b:includable id='postQuickEdit' var='post'>
И выше строки </b:includable> вставляем (смотрите скриншот):<b:if cond='data:blog.pageType == "item"'><div class='post-footer-line post-footer-line-4'><div class='relatedpoststitle'>ПОХОЖИЕ СТАТЬИ</div><div id='relatedpostssum'><script type='text/javascript'>showrelated();</script></div><div style='clear:both;'/></div></b:if>Здесь, в коде можете написать свой текст вместо моего. Сохраняйте шаблон и готово. Вот как у меня:
Вот вроде и всё. Надеюсь, инструкция моя будет всем ясна. Дамы и господа, кому, что то не понятно, не стесняемся спрашивать в комментариях, даже можно поблагодарить, я не гордый. А теперь, позвольте с вами попрощаться не надолго. До новых встреч. Пока, пока.
Комментариев нет:
Отправить комментарий