Всплывающий виджет похожие сообщения (related posts)

Blogger - blogspot устанавливаем на сайт - блог всплывающий виджет похожие сообщения (related posts).

День добрый друзья, наконец то настала долгожданная суббота, можно отдохнуть и взяться за улучшение своих сайтов и блогов. Сегодня у нас нечто особенное в программе, мы покажем, как установить на сайт - блог крутейший виджет похожих сообщений. Он существенно отличается от своих старших братьев. К примеру он всплывает на странице сообщения после прокрутки страницы вниз, если вернуть страницу в исходное состояние виджет прячется обратно. Так же он имеет несколько других замечательных функций: его можно свернуть или закрыть, как страницу браузера и естественно в нем присутствует функция отзывчивого дизайна (responsive design). Еще к плюсам можно отнести его легкость, то есть он не так нагружает страницу, как предыдущие версии. Пример виджета смотрим на тестовом блоге.

Для установки нужно перейти в раздел Шаблон - Изменить HTML ищем код ]]></b:skin> и перед ним вставляем:


/* Recommended Widget */
#chslidingbox{background:#fff;width:100%;max-width:355px;height:305px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:99;text-align:left;box-shadow:0 1px 0 0 rgba(0,0,0,0.03);transition:all .4s ease-out;}
.chslidingbox-title{background:#9eb2c0;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px}
.chslidingbox-title span a{font-family:initial;float:right;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px}a#chslidingbox-close, a#chslidingbox-close {margin-right:15px;}
.chslidingbox-title > span > h2{font-size:20px!important;font-weight:normal!important;}.chslidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}.chslidingbox-container > div{border:none;margin:3px 0;padding:10px 0}
.chslidingbox-container > div > span {font-size:14px;}.show{bottom:84px;}
.hide{bottom:-145px;}
.related-post{font-size:70%}
.related-post h4 {font-size:150%;margin:0 0 .5em;}
.related-post-style-2{margin-top:-20px;padding-top:15px;list-style:none}.related-post-style-2 li {padding:0 10px 10px 10px;overflow:hidden;}.related-post-style-2 li:first-child {border-top:none}.related-post-style-2 
.related-post-item-thumbnail{width:45px;height:45px;max-width:none;max-height:none;border:0;padding:0;border-radius:3px;float:left;margin:2px 10px 0 0}.related-post-style-2 .related-post-item-title{font-weight:700;font-size:130%;line-height:normal}
a.related-post-item-title {color:#95a5a6;transition:all .4s ease-out;}
a:hover.related-post-item-title {color:#2ecc71;text-decoration:none;}.related-post-style-2 .related-post-item-summary {display:block;overflow:hidden;}

Затем ищем код <data:post.body/> которых в шаблоне может быть два, нам нужен второй по счету и после него выкладываем следующий код:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='show' id='chslidingbox'>
    <div class='chslidingbox-title chslidingbox-www'>
      <span style='float:left;margin:0 15px;'>Рекомендуем </span>
        <span><a href='javascript:void(0);' id='chslidingbox-close' title='close'>&#215;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'>&#8722;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'>+</a></span>
    </div>
    <div class='chslidingbox-container'>
<div class='related-post' id='sliding-tab'/>
<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: 4,summaryLength: 0,
titleLength: &quot;auto&quot;,thumbnailSize: 45,noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId: &quot;sliding-tab&quot;,newTabLink: true,moreText: &quot;&quot;,widgetStyle: 2,callBack: function() {}};
</script>
<script src='https://cdn.rawgit.com/Indzign/theme/master/recommended.js' type='text/javascript'/>         
</div>
</div>
</b:if>
 
И последний шаг, находим код </body> и перед ним добавляем код:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){$("#chslidingbox").css($(this).scrollTop()>400?{right:"0px"}:{right:"-360px"})}),$(document).ready(function(){var i=$("#chslidingbox"),s=$("#chslidingbox-close"),o=$("#chslidingbox-minimize"),l=$("#chslidingbox-maximize");l.hide(),s.click(function(){i.css({right:"-350px"}),i.fadeOut("slow")}),o.click(function(){i.toggleClass("hide"),$(this).hide(),l.show()}),l.click(function(){i.toggleClass("hide"),$(this).hide(),o.show()})});
//]]>
</script>
</b:if>

Сохраняете свой шаблон и проверяете, что в итоге получилось. 


Коммент.

Имя

Бесплатные шаблоны WordPress Блог Все для blogger Все для WordPress Графический дизайн Заказ сайта Заработок в интернете Инструменты для сайта Контакты Купить шаблон blogger Наши услуги Новичкам Оптимизация сайта Партнерки для сайтов Перевод статьи Плагины для WordPress Полезные сайты Полезные сервисы Полезные статьи Разделы сайта Сайты - блоги Шаблоны для Blogger Шаблоны для Joomla Шаблоны для PrestaShop Шаблоны для Ucoz Шаблоны на русском Шаблоны blogger 2016 Шаблоны blogger бесплатно Шаблоны blogger магазин Шаблоны Bootstrap 3 Шаблоны Magento best blogger templates
false
ltr
item
Шаблоны для сайтов и блогов: Всплывающий виджет похожие сообщения (related posts)
Всплывающий виджет похожие сообщения (related posts)
Blogger - blogspot устанавливаем на сайт - блог всплывающий виджет похожие сообщения (related posts).
https://4.bp.blogspot.com/-0fSW-LeT-2M/Vj3ggQlcFzI/AAAAAAAAiFk/xI11Rgi283E/s640/%25D0%25B2%25D0%25B8%25D0%25B4%25D0%25B6%25D0%25B5%25D1%2582-%25D0%25BF%25D0%25BE%25D1%2585%25D0%25BE%25D0%25B6%25D0%25B8%25D0%25B5-%25D1%2581%25D0%25BE%25D0%25BE%25D0%25B1%25D1%2589%25D0%25B5%25D0%25BD%25D0%25B8%25D1%258F-related-posts-blogger-blogspot.jpg
https://4.bp.blogspot.com/-0fSW-LeT-2M/Vj3ggQlcFzI/AAAAAAAAiFk/xI11Rgi283E/s72-c/%25D0%25B2%25D0%25B8%25D0%25B4%25D0%25B6%25D0%25B5%25D1%2582-%25D0%25BF%25D0%25BE%25D1%2585%25D0%25BE%25D0%25B6%25D0%25B8%25D0%25B5-%25D1%2581%25D0%25BE%25D0%25BE%25D0%25B1%25D1%2589%25D0%25B5%25D0%25BD%25D0%25B8%25D1%258F-related-posts-blogger-blogspot.jpg
Шаблоны для сайтов и блогов
http://www.shablonu-dlya-blogger.ru/2015/11/vsplyvajushhij-vidzhet-pohozhie-soobshhenija.html
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/2015/11/vsplyvajushhij-vidzhet-pohozhie-soobshhenija.html
true
5286106991494805428
UTF-8
Похожих постов не найдено Отобразить все Читать дальше Ответить Отмена Удалить By Главная Страницы Пост. Отобразить все Рекомендуем Тег Архив Поиск Все посты По вашему запросу не найдено ни одного поста Вернуться на главную Воскресение Понедельник Вторник Среда Четверг Пятница Суббота Вс Пн Вт Ср Чт Пт Сб Января Февраль Март Аперль Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь Янв Фев Мар Апр Май Июнь Июль Авг Сен Окт Ноя Дек только что минуту назад $$1$$ мин. назад час назад $$1$$ час. назад Вчера $$1$$ дней тому назад $$1$$ недель тому назад более 5 недель Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy