Похожие сообщения с изображениями для Blogger
Опубликовано: 01.09.2018
Приветствую вас, дорогой читатель! Сегодня я представлю вам, виджет похожие сообщения с изображениями/миниатюрами для Blogger . Вы сможете выбрать из двух вариантов для установки в блог это: статьи по теме вертикальные и похожие сообщения горизонтальные.
Виджет похожие сообщения с эскизами , не только расширит ваши презентации постов, но также поможет вам получить больше кликов. Посетители обычно не нажимают на простые тексты и это также доказано, что картинки получают больше кликов, чем ссылки и почему бы вам не использовать миниатюры. Это поможет вам снизить количество отказов и дать себе лучший шанс, чтобы читатели, как можно дольше оставались у вас в блоге. Вертикальный гаджет выглядит так:
Плагин похожие статьи - настройка Related Posts
Похожие сообщения вертикально
Как установить виджет похожие сообщения вертикально в Blogger
Прежде всего зайдите в панель инструментов Blogger, далее шаблон - изменить HTML, нажать форматировать шаблон. Ctrl+F и найти тег ]]></b:skin> , вставить чуть выше код стиля виджета:
|
#related-posts{float:left} #related-posts ul{margin:0;padding:0;list-style-type:none} #related-posts ul li{padding:10px 0} #related-posts ul li:hover img{width:42px;height:42px;padding:0} #related-posts img{float:left;border:1px solid #BBB;margin-right:10px;width:36px;height:36px;background:#FFF;padding:3px} #related-posts h3{margin:0;font-size:16px} |
Затем, находим одну из строчек <data:post.body/> или <div class='post-footer-line post-footer-line-1'> или <div class='post-footer-line post-footer-line-2'> вставляем чуть ниже такой код:
|
< b : if cond = 'data:blog.pageType == "item"' > < div style = 'clear:both' / > < div id = 'related-posts' > <script type = 'text/javascript' > var ry = '<h2>Похожие сообщения:</h2>' ; rn = '<h2>Нет соответствующих должностей</h2>' ; rcomment = 'Комментировать' ; rdisable = 'Комментариев нет' ; commentYN = 'no' ; </script> <script type = 'text/javascript' > //<![CDATA[ var dw = '' ; titles = new Array ( ) ; titlesNum = 0 ; urls = new Array ( ) ; timeR = new Array ( ) ; thumb = new Array ( ) ; commentsNum = new Array ( ) ; comments = new Array ( ) ; function related_results_labels ( c ) { for ( var b = 0 ; b < c . feed . entry . length ; b ++ ) { var d = c . feed . entry [ b ] ; titles [ titlesNum ] = d . title . $ t ; for ( var a = 0 ; a < d . link . length ; a ++ ) { if ( 'thr$total' in d ) { commentsNum [ titlesNum ] = d . thr $ total . $ t + ' ' + rcomment } else { commentsNum [ titlesNum ] = rdisable } ; if ( d . link [ a ] . rel == "alternate" ) { urls [ titlesNum ] = d . link [ a ] . href ; timeR [ titlesNum ] = d . published . $ t ; if ( 'media$thumbnail' in d ) { thumb [ titlesNum ] = d . media $ thumbnail . url } else { thumb [ titlesNum ] = 'http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png' } ; titlesNum ++ ; break } } } } function removeRelatedDuplicates ( ) { var b = new Array ( 0 ) ; c = new Array ( 0 ) ; e = new Array ( 0 ) ; f = new Array ( 0 ) ; g = new Array ( 0 ) ; for ( var a = 0 ; a < urls . length ; a ++ ) { if ( ! contains ( b , urls [ a ] ) ) { b . length += 1 ; b [ b . length - 1 ] = urls [ a ] ; c . length += 1 ; c [ c language = ".length-1" ] [ / c ] = titles [ a ] ; e . length += 1 ; e [ e . length - 1 ] = timeR [ a ] ; f . length += 1 ; f [ f . length - 1 ] = thumb [ a ] ; g . length += 1 ; g [ g . length - 1 ] = commentsNum [ a ] } } urls = b ; titles = c ; timeR = e ; thumb = f ; commentsNum = g } function contains ( b , d ) { for ( var c = 0 ; c < b . length ; c ++ ) { if ( b [ c ] [ / c ] == d ) { return true } } return false } function printRelatedLabels ( a ) { var y = a . indexOf ( '?m=0' ) ; if ( y != - 1 ) { a = a . replace ( /\?m=0/g , '' ) } for ( var b = 0 ; b < urls . length ; b ++ ) { if ( urls [ b ] == a ) { urls . splice ( b , 1 ) ; titles . splice ( b , 1 ) ; timeR . splice ( b , 1 ) ; thumb . splice ( b , 1 ) ; commentsNum . splice ( b , 1 ) } } var c = Math . floor ( ( titles . length - 1 ) * Math . random ( ) ) ; var b = 0 ; if ( titles . length == 0 ) { dw += rn } else { dw += ry ; dw += '<ul>' ; while ( b < titles . length && b < 20 && b < maxresults ) { if ( y != - 1 ) { urls [ c ] [ / c ] = urls [ c ] [ / c ] + '?m=0' } if ( commentYN == 'yes' ) { comments [ c ] [ / c ] = ' - ' + commentsNum [ c ] [ / c ] } else { comments [ c ] [ / c ] = '' } ; dw += '<li><img alt="' + titles [ c ] [ / c ] + '" src="' + thumb [ c ] [ / c ] + '"/><div><h3><a href="' + urls [ c ] [ / c ] + '" rel="nofollow">' + titles [ c ] [ / c ] + '</a></h3><span>' + timeR [ c ] [ / c ] . substring ( 8 , 10 ) + '/' + timeR [ c ] [ / c ] . substring ( 5 , 7 ) + '/' + timeR [ c ] [ / c ] . substring ( 0 , 4 ) + comments [ c ] [ /c]+'</s pan > < / div > < / li > < div style = "clear:both" > < / div > ';if(c<titles.length-1){c++}else{c=0}b++}dw+=' < / ul > '};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById(' related - posts ') . innerHTML = dw } ; //]]> </script> < b : loop values = 'data:post.labels' var = 'label' > <script expr : src = '"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type = 'text/javascript' / > < / b : loop > <script type = 'text/javascript' > var maxresults = 6 ; removeRelatedDuplicates ( ) ; printRelatedLabels ( '<data:post.url/>' ) ; </script> < / div > < div style = 'clear:both' / > < / b : if > |
Количество выводимых сообщений меняем здесь - var maxresults=6;
Как установить похожие сообщения горизонтально в Blogger
Перед тегом ]]></b:skin> вставить стиль:
|
#related-posts{float:left} #related-posts ul{margin:5px 0;width:524px;padding:0;list-style-type:none} #related-posts ul li{position:relative;float:left;border:0 none;margin-right:11px;width:76px} #related-posts ul li:hover{z-index:98} #related-posts ul li:hover img{border:3px solid #BBB} #related-posts ul li:hover div{position:absolute;top:40px;left:10px;margin-left:0;width:200px} #related-posts ul li img{border:3px solid #DDD;width:70px;height:70px;background:#FFF} #related-posts ul li div{position:absolute;z-index:99;margin-left:-999em} #related-posts ul li .title{border:1px solid #CCC;background:#FFF;padding:5px 10px} |
Затем, чуть ниже из одной найденной строчки <data:post.body/> или <div class='post-footer-line post-footer-line-1'> или <div class='post-footer-line post-footer-line-2'> вставить такой код:
|
< b : if cond = 'data:blog.pageType == "item"' > < div style = 'clear:both' / > < div id = 'related-posts' > <script type = 'text/javascript' > var ry = '<h2>Статьи по теме</h2>' ; rn = '<h2>Нет соответствующих должностей</h2>' ; rcomment = 'Комментировать' ; rdisable = 'Комментариев нет' ; commentYN = 'no' ; </script> <script type = 'text/javascript' > //<![CDATA[ var nothumb = 'http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png' ; dw = '' ; titles = new Array ( ) ; titlesNum = 0 ; urls = new Array ( ) ; time = new Array ( ) ; thumb = new Array ( ) ; commentsNum = new Array ( ) ; comments = new Array ( ) ; function related_results_labels ( c ) { for ( var b = 0 ; b < c . feed . entry . length ; b ++ ) { var d = c . feed . entry [ b ] ; titles [ titlesNum ] = d . title . $ t ; for ( var a = 0 ; a < d . link . length ; a ++ ) { if ( 'thr$total' in d ) { commentsNum [ titlesNum ] = d . thr $ total . $ t + ' ' + rcomment } else { commentsNum [ titlesNum ] = rdisable } ; if ( d . link [ a ] . rel == "alternate" ) { urls [ titlesNum ] = d . link [ a ] . href ; time [ titlesNum ] = d . published . $ t ; if ( 'media$thumbnail' in d ) { thumb [ titlesNum ] = d . media $ thumbnail . url } else { thumb [ titlesNum ] = nothumb } ; titlesNum ++ ; break } } } } function removeRelatedDuplicates ( ) { var b = new Array ( 0 ) ; c = new Array ( 0 ) ; e = new Array ( 0 ) ; f = new Array ( 0 ) ; g = new Array ( 0 ) ; for ( var a = 0 ; a < urls . length ; a ++ ) { if ( ! contains ( b , urls [ a ] ) ) { b . length += 1 ; b [ b . length - 1 ] = urls [ a ] ; c . length += 1 ; c [ c language = ".length-1" ] [ / c ] = titles [ a ] ; e . length += 1 ; e [ e . length - 1 ] = time [ a ] ; f . length += 1 ; f [ f . length - 1 ] = thumb [ a ] ; g . length += 1 ; g [ g . length - 1 ] = commentsNum [ a ] } } urls = b ; titles = c ; time = e ; thumb = f ; commentsNum = g } function contains ( b , d ) { for ( var c = 0 ; c < b . length ; c ++ ) { if ( b [ c ] [ / c ] == d ) { return true } } return false } function printRelatedLabels ( a ) { var y = a . indexOf ( '?m=0' ) ; if ( y != - 1 ) { a = a . replace ( /\?m=0/g , '' ) } for ( var b = 0 ; b < urls . length ; b ++ ) { if ( urls [ b ] == a ) { urls . splice ( b , 1 ) ; titles . splice ( b , 1 ) ; time . splice ( b , 1 ) ; thumb . splice ( b , 1 ) ; commentsNum . splice ( b , 1 ) } } var c = Math . floor ( ( titles . length - 1 ) * Math . random ( ) ) ; var b = 0 ; if ( titles . length == 0 ) { dw += rn } else { dw += ry ; dw += '<ul>' ; while ( b < titles . length && b < 20 && b < maxresults ) { if ( y != - 1 ) { urls [ c ] [ / c ] = urls [ c ] [ / c ] + '?m=0' } if ( commentYN == 'yes' ) { comments [ c ] [ / c ] = ' - ' + commentsNum [ c ] [ / c ] } else { comments [ c ] [ / c ] = '' } ; dw += '<li><a href="' + urls [ c ] [ / c ] + '" rel="nofollow"><img alt="' + titles [ c ] [ / c ] + '" src="' + thumb [ c ] [ / c ] + '"/></a><div class="title"><h3><a href="' + urls [ c ] [ / c ] + '" rel="nofollow">' + titles [ c ] [ / c ] + '</a></h3><span>' + time [ c ] [ / c ] . substring ( 8 , 10 ) + '/' + time [ c ] [ / c ] . substring ( 5 , 7 ) + '/' + time [ c ] [ / c ] . substring ( 0 , 4 ) + comments [ c ] [ /c]+'</s pan > < / div > < / li > ';if(c<titles.length-1){c++}else{c=0}b++}dw+=' < / ul > '};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById(' related - posts ') . innerHTML = dw } ; //]]> </script> < b : loop values = 'data:post.labels' var = 'label' > <script expr : src = '"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type = 'text/javascript' / > < / b : loop > <script type = 'text/javascript' > var maxresults = 6 ; removeRelatedDuplicates ( ) ; printRelatedLabels ( '<data:post.url/>' ) ; </script> < / div > < div style = 'clear:both' / > |
Здесь, также вывод количество похожих постов меняем тут - var maxresults=6;
Всё. Готово. Всем пока. Удачи. До новых встреч.
С уважением, Сергей
