(Последнее обновление: 30.03.2019)

Всем привет! Такая конкуренция в последнее время идет - все начали о Blogger  писать. Что делать? Разве мне угнаться за молодыми, хотя, как говорится: старый конь борозды не испортит. Может и я ещё пригожусь. Ведь главное - Blogger/blogspot продолжает быть популярной бесплатной платформой для ведения блога, а значит и будут посетители.

Сегодня представлю вам набор полезных виджетов/гаджетов для Blogger/blogspot и кой какие интересные трюки. Надеюсь кому нибудь пригодится.

Blogger

Виджеты для платформы Blogger

Виджет для Blogger случайные сообщения

Раньше я уже затрагивал эту тему, но в связи с тем, что доступ к скрипту был закрыт ( причина неизвестна) и виджеты перестали работать, предлагаю вам другие. Первым у нас пойдет гаджет случайные статьи без картинок, уверен Вы знаете, как работает данный виджет. Хочу только сказать, что при помощи ротатора (сменяющихся) сообщений увеличится количество просмотров. Особенно старых, забытых записей, так как виджет будет вытаскивать их на свет божий (на глаза посетителей) где они непременно захотят с ними ознакомятся. Вот как то так. Скриншот из моего полит блога:

vidzhet-sluchajnye-soobschenija

Виджет случайные статьи без картинок

Случайные сообщения без картинок занимают меньше места на боковой панели блога, чем с картинками. Установка обычная, как и всегда. Стили устанавливаем в шаблон блога чуть выше строчки ]]></b:skin>, а сам код в незаменимый гаджет Html/JavaScript.

Стиль CSS:

/*****************************************
Name : Widget Random Post White Style
******************************************/
#BDrs_randomPOST{
list-style-type: none;
width:280px;
padding: 3px;
border:solid #000000 1px;
background-color: #CCCCCC;
}
#BDrs_randomPOST a {height: 30px;
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #333333;
line-height:15px;
letter-spacing:0.1em;
box-shadow: 0 0 5px #111 inset;
text-decoration: none;
display:block;
padding:5px 6px 5px 6px;
background-color: #F0F0F0;
border:solid #EBEBEB 1px;
}
#BDrs_randomPOST a:hover {
color:#000000;
text-transform: none;
background-color: #FFFFFF;
border:solid #CCCCCC 1px;
box-shadow: 0 0 3px #000 inset;
}/* Widget Random Post White Style CSS End */

Обратите внимание, здесь, производятся все цветовые настройки, ширина виджета, размер шрифта и так далее.

Код HTML:

<!-- Widget Random Post Style code start -->
<div id="BDrs_randomPOST">
<script >
var randarray = new Array();var l=0;var flag;
var numofpost=10;// Jumlah artikel yang akan ditampilkan
function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write();
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item ="<div >" + "<a href=" + entry.link[k].href + " title=" + entry.link[k].href +">" + entry.title.$t + "</a></div>";
document.write(item);}}
}document.write();}
</script>
<script src="#######/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=randomposts" ></script> </div>
<!-- Widget Random Post Style code End -->

Замените решётки адресом своего блога и число выводимых сообщений. Следующий виджет случайных постов с картинками:

vidzhet-blogger-sluchajnye-stati

Виджет случайных постов с картинками

Такой виджет устанавливаем с помощью гаджета Html/JavaScript. Такой код:

<style scoped="" type="text/css">
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='no';
var rdp_comment='Комментарии';
var rdp_disable='Off комментарии';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Настройка виджета: размер картинки по умолчанию 36 на 36, вывод постов 5 и т. п. Продолжим.

Виджет: случайные сообщения, горизонтальный с картинками

widget-random-post-horizontal

Виджет: случайные сообщения, горизонтальный с миниатюрами

Инструкция установки такая. Сначала добавляем стиль для гаджета:

/*****************************************
Name : Widget Related Post Style Horizontal
******************************************/
#Bdrsrelated-postbd {
float:left;
width:960px;/* LEBAR WIDGET */
text-align: center;
color: #990000;
background: url('https://lh4.googleusercontent.com/-Ei1kIfrWgj4/UfefE9kVsaI/AAAAAAAABoU/0VXr0kbI4qo/w140-h140-p/bg-new-footer.jpg') repeat;
background-color: #333333;
padding:10px 10px 10px 14px;
border-bottom:solid #0099FF 3px;
border-top:solid #0099FF 3px;
}
#Bdrsrelated-postbd .Bdrsrelated-text {
width:130px;
padding:4px 0px;
color:#ccc;
height:35px;
text-align:center;
margin: -3px 5px 2px 5px;
font:12px verdana;
line-height:16px;
cursor: default;
}
#Bdrsrelated-postbd .Bdrsrelated_img {
padding-bottom:7px;
width:130px;
height:90px;
border-radius:4px 4px 0 0;
margin: 0 11px;
color: #000000;
border-bottom:solid #666 2px;
}
#Bdrsrelated-postbd .Bdrsrelated_img:hover {
opacity:.5;
border-bottom:solid #0099FF 2px;
color: #0099FF;
}/* Widget Related post CSS End */

Далее, находим в шаблоне строчку </head> и вставляем чуть выше такой Script:

<script src="здесь ссылка на скрипт"></script>

Сам скрипт скачайте здесь и залейте его на свой хостинг, а ссылку на него вставьте в строчку. В последнее время я не даю ссылки со своего хостинга, много установок происходит, плюс распространяют виджеты и много обращений к скрипту происходит. В следствии чего, хостинг закрывает доступ, поэтому всегда надо сохранять сценарии у себя, во избежании недоразумений. Затем в шаблоне найдите строчку такую или похожую <div class='footer-wrapper'> и вставьте такой код:

<!-- start -->
<div id='Bdrsrelated-postbd'>
<script src='######/feeds/posts/default?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6' ></script>
<script >
var currentposturl="";
var maxresults=10;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'></div>
<!-- End -->

  Если не получится, тогда с помощью гаджета HTML/Javascript:

Blogger-blogspot

Установка с помощью гаджета HTML/Javascript

Пока с виджетами закончим. Перейдем к небольшим трюкам.

Как создать динамический заголовок блога

Суть такая, на главной странице блога отображается название его как есть, а при просмотре сообщения, заголовок блога превращается в название той статьи которую читаешь. Я такое видел на зарубежных блогах, пишут, что это полезно для SEO. Блин, объяснить не могу как следует. Скрин главной страницы демо блога. Название Демо блог:

Fungsi-Dinamik-Heading

Как создать динамический заголовок блога

Скрин когда читаю статью, заголовок (вверху) закрыт от индексации поисковика:

Dinamik- Heading

Динамичный заголовок

Пройдите посмотрите как меняется заголовок блога. Ссылку кликабельной делать не буду, нажимайте на любую статью в блоге - http://demo-school-blogger.blogspot.ru/. Для того, чтобы сделать динамический заголовок блога, найдите в шаблоне такую строчку - <b:include name='title'/> таких строчек может от двух до четыре. Замените найденную строку этим кодом:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include name='title'/>
<b:else/>
<a expr:href='data:post.link' expr:title='data:blog.pageName' rel='nofollow'><data:blog.pageName/></a>
</b:if>

Я заменил у себя третью строчку (всего три было) и все сработало. Идем дальше. Кому не нравится родной стиль комментариев Blogger, тогда:

Меняем стиль комментариев в блоге Blogger

Можно установить, чтобы было вот так:

Counter- comment

Новый стиль для комментариев

Стиль CSS:

.comment-thread ol {
counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;
font-size: 22px;
color: #FFA6A4;
padding-right: 30px;
padding-top: 26px;
margin-top: 10px;
margin-left: 24px;
}
.comment-thread ol ol {
counter-reset: contrebasse;
}
.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: right;
font-size: 18px;
color: #8A8A84;
padding-left: 1px;margin-right:-15px;
padding-top: 15px;
}

Все, готово.

Как создать красивый фон с анимацией для цитат (blockquote) Blogger

blockquote-animasi

Красивый фон с анимацией для цитат

Посмотреть как работает можно тут - http://wp-demoblogger.blogspot.ru/2014/01/seo-optimizacija-sajtov-dlja-poiskovyh.html наведите мышкой на цитату. Если нужна такая фишка, пожалуйста стиль для неё:

/*****************************************
Name : background blockquote animasi
******************************************/
blockquote {
width: 90%;
margin:10px auto;
border-top: solid 10px #666;border-left: solid 1px #ccc;border-bottom: solid 1px #ccc;border-right: solid 1px #ccc;
box-shadow:100 2px #999;
background-color: #eee;
padding: 10px;
font-family: "Courier New", Courier, monospace;
font-size: 12px;
color: #333333;
line-height: 15px;
word-wrap: break-word;
text-align: left;
}
blockquote:hover {
border-top: solid 10px #3A74C9;
color: #000000;
background-color: #FFFFFF;
box-shadow:0 0 5px #999;
background:url("http://4.bp.blogspot.com/-vKFz-h9rAdQ/UspzABXw__I/AAAAAAAACIA/JgpTpSm5gQI/s1600/hover-bg.gif") repeat;
}
/*** CSS background blockquote animasi and ***/

Как пользоваться? Нужный текст в сообщение в режиме html заключаем в теги <blockquote> здесь текст цитаты </blockquote>.

На сегодня пока все. Если дошли до конца этого поста - молодцы. До новых встреч. А комментарии где, ребята и девчата?

Всего доброго, Сергей