Виджет похожие сообщения без миниатюр для Blogger

Для лучшей навигации и поиска необходимой информации, применяется виджет похожие сообщения без миниатюр для Blogger. С помощью ссылок похожие сообщения которые обычно размещаются под статьёй обеспечивается внутренняя перелинковка повышающая статический вес страниц, применение виджета похожие статьи без миниатюр для Blogger необходимо, в целях обеспечения удобной навигации, и SEO оптимизации Blogger.
Скрипт похожие сообщения без миниатюр выводит заголовки статей связанные общими ярлыками. В похожей статье я описал, как установить виджет похожие сообщения с миниатюрами для Blogger

Рассмотрим установку виджета похожие сообщения без миниатюр.

Перейдём в Шаблон - Изменить HTML.
Отмечаем галочкой “Расширить шаблоны виджетов”
С помощью поиска (Ctrl+F) находим строку:

 </head>

и прямо над ней вставляем код:

<!--Related Posts Scripts and Styles Start--> <!--Remove--><b:if cond='data:blog.pageType == "item"'> <style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts .widget{ padding-left:6px; margin-bottom:10px; } #related-posts .widget h2, #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:blue; } #related-posts a:hover{ color:blue; } #related-posts ul{ list-style-type:none; margin:0 0 0px 0; padding:0px; text-decoration:bold; font-size:15px; text-color:#000000 } #related-posts ul li{ background:transparent url(https://lh6.googleusercontent.com/-2JWL1R0i0i0/TxsH-tOc_lI/AAAAAAAAENs/pgk0U-IDGsE/w10/green.png) no-repeat ; display:block; list-style-type:none; margin-bottom: 13px; padding-left: 30px; padding-top:0px;} </style> <script type='text/javascript'> var relatedpoststitle="Похожие сообщения:"; </script> <script src='http://slivsol-pc-user.googlecode.com/files/related-posts.js' type='text/javascript'/> <!--Remove--></b:if> <!--Related Posts Scripts and Styles End-->

Эта ссылка ведёт на изображение в виде зелёной галочки перед заголовком сообщения: https://lh6.googleusercontent.com/-2JWL1R0i0i0/TxsH-tOc_lI/AAAAAAAAENs/pgk0U-IDGsE/w10/green.png его вы можете заменить на своё или полностью удалить выделенную строчку если не хотите, чтобы изображение присутствовало.В этой строке var relatedpoststitle="Похожие сообщения:"; вы можете поменять название заголовока виджета.

Дальше находим строку:

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

если такой нет, то такую:

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

и сразу под строкой вставляем этот код (код не содержит скрытых сторонних ссылок) :

<!-- Related Posts Code Start--> <!--Remove--><b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <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=related_results_labels&max-results=7"' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var maxresults=7; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> <!--Remove--></b:if> <!-- Related Posts Code End -->

В строках:

var maxresults=

и
max-results=

можно настроить количество выводимых ссылок на похожие сообщения без миниатюр.

Если вы хотите, чтобы виджет выводился не только в конце каждой статьи, но и на главной странице тоже, то  удалите из кода все эти строки:
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- remove --></b:if>Если возникнут вопросы по более детальной настройке виджета похожие сообщения без миниатюр для Blogger, спрашивайте в комментариях.

источник

Как в Blogger добавить похожие статьи для каждого сообщение

Сегодня мы научимся добавлению очень полезного виджета ⇨"похожие статьи" для каждого сообщения, на основании ярлыков.Это очень нужный виджет, после каждого вашего поста посетитель будет наблюдать ваши похожие записи с миниатюрами.

После очень простых действий на вашем блоге, в зависимости от ярлыков, будут отображены "похожие сообщения" и выглядит это так:

Как добавить "похожие сообщения" на блог

1. Сначала заходим в панель управления blogger. Выбираем вкладку"Шаблон ⇨ Изменить HTML". Далее с помощью сочетаний клавиш (Ctrl+F),  находим строку в вашем шаблоне </head> и прямо над ней вставляем код:

<!--Related Posts with thumbnails Scripts and Styles Start--> <b:if cond='data:blog.pageType == "item"'> <style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts a:hover { background-color:#d4eaf2; } </style> <script src='http://dl.dropbox.com/u/48089857/relatedthumbs19.js' type='text/javascript'/> </b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

2. Теперь ищем одну из этих строчек <div class='post-footer-line post-footer-line-1'> 
Если вдруг не найдёте, то  <p class='post-footer-line post-footer-line-1'> 

Если уж вдруг нет никакой из эти строчек, то находим <data:post.body/>

Далее сразу после любой из этих строчек вставляем этот код:

<!-- Related Posts with Thumbnails Code Start--> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <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=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='#' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='#' style='display:none;'>blogger widgets</a> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=5; var relatedpoststitle="Похожие сообщения"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div> <div style='clear:both'/> </b:if> <!-- Related Posts with Thumbnails Code End-->

источник

Flash

<img src="https://img1.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 85px; width: 185px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_1" data-original-id="BLOGGER_object_1" /> <img src="https://img1.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 100px; width: 400px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_3" data-original-id="BLOGGER_object_3" /> <img src="https://img1.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 100px; width: 200px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_5" data-original-id="BLOGGER_object_5" /> <img src="https://img1.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 67px; width: 185px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_7" data-original-id="BLOGGER_object_7" /> <img src="https://img1.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 100px; width: 200px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_9" data-original-id="BLOGGER_object_9" /> <img src="https://img1.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 90px; width: 200px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_11" data-original-id="BLOGGER_object_11" /> <object type="application/x-shockwave-flash" data="http://xflash.ucoz.ru/Nadpisi300-50/122.swf" width="200" height="75"><param name="bgcolor" value="#ffffff" /> <param name="allowFullScreen" value="true" /> <param name="allowScriptAccess" value="always" /> <param name="wmode" value="transparent" /> <param name="movie" value="" /> <param name="flashvars" value="st=;file=" /></object>

Радио для блога

Радио онлайн

<!--НАЧАЛО БЛОКА РАДИО ОНЛАЙН--> <style type="text/css"> #ro_block h2 { background: #800000; padding: 6px; margin: 0; line-height: 100%;} #ro_block h2 a { background: #800000; color: #334cb0; font: normal bold 12px Arial, Verdana; text-decoration: none;} #ro_block h2 a:hover { text-decoration: underline;} </style> <div id="ro_block" align="center"> <h2 id ="ro_h2"> <a href="http://radio-online.com.ua/" target="_blank">Радио онлайн</a></h2> <div id="ro_player"> </div> <div id="ro_img"> </div> </div> <script type="text/javascript">var roMyRad = "36,34,28,31,29,58,27,35,33,126,39,43", roBlockWidth = 200, roImgKol = 5;</script> <!--КОНЕЦ БЛОКА РАДИО ОНЛАЙН--> <script type="text/javascript" src="http://radio-online.com.ua/scripts/rns.js" charset="windows-1251"></script>

Слушать радио онлайн бесплатно

<div id="RO_Kiev" style="text-align:center;width:240px;background:#fff;"> <a href="http://fmradio-online.ru/ua.php" id="aRK">Слушать радио онлайн бесплатно</a></div> <script type="text/javascript" src="http://fmradio-online.ru/scripts/rnsK.js" charset="UTF-8"></script>

Слушать радио онлайн бесплатно

<div id="RO_Moskva" style="text-align:center;width:240px;background:#fff;"> <a href="http://fmradio-online.ru/" id="aRM">Слушать радио онлайн бесплатно</a></div> <script type="text/javascript" src="http://fmradio-online.ru/scripts/rnsM.js" charset="UTF-8"></script>

Внимание! 

При внесении каких-либо изменений в код работоспособность блока онлайн радио не гарантируется!

Оценка поста

Эх, как чешутся руки подписывать посты не по-человечески, ну, по крайней мере, не так попсово. Особенно я бы развернулся в сегодняшней теме поста. Но ах, ах... Нужно угождать поисковикам. Работа у них сложная и совсем без юмора, легкомысленных заголовков они не прощают. Поэтому сегодня просто и очень серьезно попытаемся сделать наши сообщения в блоге "звезданутыми". С помощью гаджета оценки постов.

Во всю важность данного дополнения я смутно верю, но, тем не менее, это достаточно интересный способ узнать о мнении читателей. Как итог, оцененные статьи помогут понять какую информацию хотели бы видеть у вас в блоге. Ведь звездный пост, положительно одобренный читателями, подобно хорошему пятизвездочному коньяку, приятно согревает душу ;)

Осуществим задумку мы в несколько абсолютно не энергозатратных действий. И, как всегда, для нашего блога от Blogger. Данный гаджет оценки статей подходит больше для нестандартных шаблонов, в большинстве которых отсутствует родной рейтинг от Blogger.
Для начала в административной панели заходим в раздел "Дизайн". Далее переходим во вкладку "Изменить HTML". Следующим действием с помощью CTRL+F находим в шаблоне блога:

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

При отсутствии онного отрезка кода, ищем:

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

После любой из найденных строк вставляем следующий код, виновника сегодняшнего "звездного" поста:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span class='star-ratings'> <b:if cond='data:top.showStars'> <div 
expr:g:background-color='data:backgroundColor' expr:g:text- 
color='data:textColor' expr:g:url='data:post.absoluteUrl' 
g:height='42' g:type='RatingPanel' g:width='180'/> </b:if> </span>
</b:if>

Следующим действием снова ищем строку в шаблоне:

<b:include name='nextprev'/>

После нее сразу вписываем:

<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

Отмучившись, сохраняем шаблон и пробуем обнаружить заветные звездочки в конце статей.
Хочу сказать, что сей гаджет, все-таки будем так называть его в целом, ведет себя достаточно своеобразно. У меня он заработал на тестовом блоге, а вот на другом - постеснялся показаться. Быть может, у вас его судьба сложится удачно.

источник

Скрипт ротатор баннеров-баннерокрутилка

 Я у себя, на блоге WordPress, использую скрипт ротатор баннеров для прокрутки рекламных материалов от People Group. На одном рекламном месте показываются три разных баннера, они сменяют друг друга при обновление страницы или когда пользователь переходит читать другой материал. Проверьте и вы увидите смену картинок.

К чему это я? Да, к тому, что скрипт ротатор баннеров, а по простому баннерокрутилка, оказывается универсальный, он подходит для любого сайта и в том числе, и для платформы Blogger. Поэтому, если у вас установлены на своём блоге рекламные материалы партнёрок или другие различные баннеры, то можно объединить их в одно рекламное место. Тем самым не будет увешен весь блог, как новогодняя ёлка, рекламными объявлениями. Для вас будет хорошо, а для ваших посетителей, тем более.

Скрипт ротатор баннеров для сайта - баннерокрутилка

Скрипт ротатор баннера

Установить баннерокрутилку в Blogger можно с помощью волшебного гаджета HTML/JavaScript,вставив в него такой код:

<script type="text/javascript"> var mycrib = []; mycrib[0] = '<noindex><a href="Ваша ссылка" target="_blank" rel="nofollow"><img src="Ссылка на изображение баннера" alt="Название баннера" width="240" height="400"></a></noindex>' mycrib[1] = '<noindex><a href="Ваша ссылка" target="_blank" rel="nofollow"><img src="Ссылка на изображение баннера" alt="Название баннера" width="240" height="400"></a></noindex>' mycrib[2] = '<noindex><a href="Ваша ссылка" target="_blank" rel="nofollow"><img src="Ссылка на изображение баннера" alt="Название баннера" width="240" height="400"></a></noindex>' var x = 0; function rotate(mycrib) { while (x < mycrib.length) { var sort = Math.floor(Math.random() * mycrib.length); if (mycrib[sort] != 0) { document.getElementById('adspace').innerHTML = (mycrib[sort]); mycrib[sort] = 0; x++; } } } </script> <script> #adspace { } #adspace img { } </script> <div id="adspace"> <script type="text/javascript"> rotate(mycrib); </script>
В скрипте нужно вставить ссылки на рекламодателя и на картинки, а также, указать нужный размер изображений и название баннера. Желательно, чтобы баннеры были одного размера, так будет красивей. Если вы хотите прокручивать больше трёх баннеров, тогда нужно добавить ещё один код, выше строки var x = 0;:

mycrib[3] = '<noindex><a href="Ваша ссылка" target="_blank" rel="nofollow"><img src="Ссылка на изображение баннера" alt="Название баннера" width="240" height="400"></a></noindex>'
Надеюсь, дамы и господа, вам всё понятно. И со скриптом и для чего нужен ротатор баннера. А я с вами досвидакуюсь, совсем не надолго. До встречи. Пока, пока.

источник

Карта блога с картинками для Blogger

Приветствую вас дорогой читатель! Сегодня хочу предложить для пользователей платформы Blogger карту сайта/блога с картинками/миниатюрами. Многие мои читатели в комментариях спрашивали карту сайта именно с миниатюрами. Я пробовал раньше найти её в буржунете, но всё было напрасно, простые карты есть, а вот с картинками рабочей карты блога, нет.

Вспомнил я про Sitemap with Thumbnail blogger благодаря нашей участнице сообщества "Я Блоггер" в социальной сети Google Plus Ольге Протасовой. Она опубликовала запись с нужной картой и вот я решил возобновить свои поиски. Искал по картинкам (лучший вариант, советую) и вот на вьетнамском ресурсе namkna.blogspot.ru улыбнулась удача. Нашёл, что так долго искал - карта блога для Blogger  с картинками в два ряда. Вот она:

Карта блога для Blogger с картинками

Единственный недостаток этой красивой карты - статьи не разбиты по рубрикам, что конечно не очень удобно читателям. С помощью такой карты можно просмотреть все опубликованные статьи на блоге перелистывая страницы. И так, перейдём к установке.

Как установить карту блога для Blogger с картинками

Создайте новую страницу в блоге, дайте ей название и в режиме HTML вставьте такой код:

<style scoped="" type="text/css">#toc-outer {color:black;font:normal 11px/14px Arial,Sans-Serif;height:auto;margin:0 auto;overflow:hidden;padding:0;text-align:left;}#loadingscript {padding:0px 0px;height:37px;text-indent:-9999px;color:transparent;background:white url('data:image/gif;base64,R0lGODlhEAALALMMAOXp8a2503CHtOrt9L3G2+Dl7vL0+J6sy4yew1Jvp/T2+e/y9v///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCwAMACwAAAAAEAALAAAEK5DJSau91KxlpObepinKIi2kyaAlq7pnCq9p3NZ0aW/47H4dBjAEwhiPlAgAIfkECQsADAAsAAAAAAQACwAABA9QpCQRmhbflPnu4HdJVAQAIfkECQsADAAsAAAAABAACwAABDKQySlSEnOGc4JMCJJk0kEQxxeOpImqIsm4KQPG7VnfbEbDvcnPtpINebJNByiTVS6yCAAh+QQJCwAMACwAAAAAEAALAAAEPpDJSaVISVQWzglSgiAJUBSAdBDEEY5JMQyFyrqMSMq03b67WY2x+uVgvGERp4sJfUyYCQUFJjadj3WzuWQiACH5BAkLAAwALAAAAAAQAAsAAAQ9kMlJq73hnGDWMhJQFIB0EMSxKMoiFcNQmKjKugws0+navrEZ49S7AXfDmg+nExIPnU9oVEqmLpXMBouNAAAh+QQFCwAMACwAAAAAEAALAAAEM5DJSau91KxlpOYSUBTAoiiLZKJSMQzFmjJy+8bnXDMuvO89HIuWs8E+HQYyNAJgntBKBAAh+QQFFAAMACwMAAIABAAHAAAEDNCsJZWaFt+V+ZVUBAA7') no-repeat 50% 50%;}.itemposts {float: left;height: auto;overflow: hidden;width: 47%;box-shadow: 1px 1px 5px #C3C3C3;background: none repeat scroll 0% 0% #F9F9F9;border: 1px solid #FFF;margin: 3px 5px 8px;padding: 0px 3px;}.itemposts h6 {border-bottom: 1px solid #CCC;color: #333;font: bold 12px Arial;height: 15px;overflow: hidden;text-transform: none;margin: 0px 0px 5px;padding: 2px 6px !important;}.itemposts h6 a{color: red;}.itemposts h6 a:hover {color:#38f;text-decoration:none;}.itemposts img {background-color:#fff;border:1px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;float:left;height:65px;margin:0 7px 5px 0;padding:3px;width:65px;z-indent:99999px;}.itemposts .iteminside {}.itemposts .itemfoot {border-top: 1px solid #CCC;clear: both;overflow: hidden;padding: 4px 5px;}.itemposts .itemfoot a.itemrmore {color:#333;float:right;font-weight:bold;text-decoration:none;}.itemposts .itemfoot a.itemrmore:hover {text-decoration:underline}#itempager {clear:both;padding:10px 0;}#pagination,#totalposts {color:#000;display:block;font:bold 10px Verdana,Arial,Sans-Serif;margin-bottom:10px;text-align:center;padding:0;}#pagination span, #pagination a {color: #FFF;display: inline;margin: 0px 1px;padding: 2px 5px;text-indent: 0px;background-color: #068BC9;background-image: linear-gradient(#068BC9 0%, #3161C2 50%, #3059AB 51%);border: 1px solid #3161C2;text-decoration: none;border-radius: 10px;}#pagination a:hover {background-color:#333}#pagination span.actual {background-color:black}#pagination span.hidden {display:none}</style><script>var showPostDate = true,showComments = true,idMode = true,sortByLabel = false,labelSorter = "Blogspot-tips",loadingText = "Loading...",totalPostLabel = "Всего сообщений:",jumpPageLabel = "Страница",commentsLabel = "comment",rmoreText = "Подробнее►",prevText = "Назад",nextText = "Вперёд",siteUrl = "######",postPerPage = 10,numChars = 150,imgBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";</script><script src="http://yourjavascript.com/2812562314/kjmagic-2col-sitemap.js"></script>

В место звёздочек вставьте свой адрес блога, скрипт (http://yourjavascript.com/2812562314/kjmagic-2col-sitemap.js) лучше всего закиньте на свой хостинг и поменяйте ссылку на свою. Вот вроде и всё, во стальном разберётесь - цвета, ширина, количество выводимых статей на странице и так далее. Если что спрашивайте в комментариях. Можете посмотреть видео по установке данной карты.

источник