Слайдер последних записей со всего блога или по ярлыку для Blogger

Доброго времени! Сегодня я поделюсь с вами шикарным виджетом слайдером от моего американского коллеги, а также расскажу немного о личном. Готовы?

Виджет последние сообщения Blogger

Слайдер последних записей для Blogger

Главная задача и проблема любого блоггера - удержать читателя. То есть нужно применять любые методы и тактики, которые помогут вашему посетителю оставаться, как можно дольше, на вашем сайте.

Все виджеты и блоки похожих, популярных, избранных, лучших записей для этого и существуют. Они призваны показать всё разнообразие, чтобы мы как можно больше смотрели контент, а соответственно и рекламу. Для меня яркий пример такого подхода сайты AdMe.ru или Fishki.net - как минимум минут на 10 залипнете - я вам обещаю.

Так почему бы не привлечь внимание к новым записям с помощью слайдера, где будут привлекательные изображения?

Итак, для начала нужно создать новый гаджет типа HTML/Javascript в вашем блоге (мы ведь это умеем, правда?).

Теперь в поле для ввода текста виджета вставляем этот код:

<style type="text/css">
ul.featured-widget-list,ul.featured-widget-list 
li{margin:0;padding:0;list-style:none;position:relative 
}ul.featured-widget-list li{display:none}ul.featured-widget-list 
li:nth-child(1){display:block;line-height:0}ul.featured-widget-list 
img{border:0;width:100%;height:auto}ul.featured-widget-list 
.featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://3.bp.blogspot.com/-1_Vnfz23h0E/V0m7kzHpgiI/AAAAAAAALlU/f763ScY-PBc2UnqNX3Tf20lyvHxtRo9qwCLcB/s400/overlay-bg.png);background-position:0%
 100%;background-repeat:repeat-x}ul.featured-widget-list 
.featuredbg:hover{opacity:.1}ul.featured-widget-list 
h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform:
 capitalize;padding:10px 
20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', 
sans-serif;overflow:hidden}ul.featured-widget-list li:hover 
h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel',
 
sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list
 h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 
0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 
0.3s;}ul.featured-widget-list li:hover 
.featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}

.feat-buttons a{text-indent:-9999px;margin:0 
7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter:
alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius:
 50%;-moz-border-radius: 50%;border-radius: 
50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons 
a.feat-prev::before, .feat-buttons 
a.feat-next::before{content:"";width:0;height:0;border-width:6px 
7px;border-style:solid;border-color:transparent #fff transparent 
transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
</style>

<div id="featuredbwidget"></div>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
featuredbwidget({
listURL:"http://vash_blog.blogspot.com/",
featuredNum:9,
listbyLabel:false,
feathumbSize:350,
interval:3000,
autoplay:true,
featuredID:"#featuredbwidget"
});
function featuredbwidget(a){(function(e){var 
h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://3.bp.blogspot.com/-EOu4Rrgcryo/V0m8dV7MU1I/AAAAAAAALlg/4h5vQaHpQiMdkvtUdDbu0LtjJRvgPERYwCLcB/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var
 g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div 
class="featslider"><ul 
class="featured-widget-list"></ul><div 
class="feat-buttons"><a href="#" 
class="feat-prev">Пред</a><a href="#" 
class="feat-next">След</a></div></div>');var 
f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var 
o=0;o<s.length;o++){for(var 
n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"
 in 
s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a
 href="'+q+'"><div class="featuredbg"></div><img 
class="featuredthumb" 
src="'+u+'"/><h5>'+k+'</h5></a><div 
class="featured-meta"><span class="fdate"><span 
class="fday">'+t+'</span> <span 
class="fmonth">'+v+'</span> <span 
class="fyear">'+x+'</span></span> - <span 
class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var
 c=function(){e(h.featuredID+" .feat-next").click()};var 
b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+"
 .feat-prev").click(function(){e(h.featuredID+" .featslider 
li:first").before(e(h.featuredID+" .featslider li:last"));return 
false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" 
.featslider li:last").after(e(h.featuredID+" .featslider 
li:first"));return false});if(h.autoplay){var i=h.interval;var 
j=setInterval(c,i);e(h.featuredID+" .featslider 
li:first").before(e(h.featuredID+" .featslider 
li:last"));e(h.featuredID+" 
.featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>

Настройки виджета

listURL - замените "http://vash_blog.blogspot.com/" на URL-адрес своего блога;
featuredNum - количество слайдов для просмотра;
listbyLabel - если хотите показывать последние записи с блога, то оставьте эту настройку без изменений. Если хотите показывать записи с определенной категории/ярлыка, то добавьте его название в кавычках. Это будет выглядеть вот так: listbyLabel: "fashion";
feathumbSize - размер блока в пикселях;
interval - время задержки показа слайда;
autoplay - замените true на false если хотите, чтобі слайді прокручивались автоматически.

На этом создание и настройка виджета закончена - обязательно посмотрите, что у вас получилось!

О личном
Друзья, я поступил на бюджетную форму обучения выбрав электрофакультет КНУ. Для меня это огромная радость. Но в тоже время это большая ответственность, которую я постараюсь оправдать. Пользуясь случаем хочу поблагодарить всех преподавателей с моего предыдущего место обучения - именно они дали мне дорогу и понимание моей профессии.

Я всем желаю хорошего учебного года и успехов в правильных начинаниях. Погнали!

Кстати, именно сегодня (5 сентября 2016 года) мог бы отпраздновать свои 70 лет легендарный Фредди Меркьюри... Предлагаю посвятить три минуты и посмотреть клип на культовую песню. Сильная фраза, которая помогает по жизни!




Если вам понравиласть эта статья, то поделитесь ей с друзьями. Вам не сложно, а мне приятно ;)
Присоединяйтесь к 200+ блоггерам и получите полезный в подарок
    Blogger комменты
    Facebook комменты

0 коммент. :

Отправить комментарий