Google+ Blogger WordPress Facebook Like Vkontakte Odnoklassniki LiveJournal vKruguDruzei Facebook Email Gmail
Показаны сообщения с ярлыком сообщения. Показать все сообщения
Показаны сообщения с ярлыком сообщения. Показать все сообщения
понедельник, 28 мая 2018 г.

Прокрутка заголовков сообщений блога

источник:https://www.bdblogov.ru/2013/08/blog-post_22.html
Ещё один скрипт-для прокрутки заголовков постов. Копируем код ниже.



пятница, 18 мая 2018 г.
воскресенье, 13 мая 2018 г.

Анимированный фон для цитаты или участка текста.

Наведите курсор на участок текста ниже.
Однажды Раневская поскользнулась на улице и упала. Навстречу ей шел какой-то незнакомый мужчина. — Поднимите меня! — попросила Раневская. — Народные артистки на дороге не валяются…
Находим строку ]]></b: skin>.Над ней вставляем следующий код.
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhswcvQRo6k007DAsk0Ko8D9XhJRjnActT1iOR0F5YWAng48BNMdfxKWO-reqaWJ2NyH1Sb2ge4OAVdyI1nKMhaIhrTmLZ-3z_6sPF83qn-aBOJX0Iudp6VU0HqZw3kJMmVzCeVLeOHwM-r/s1600/hover-bg.gif") repeat;
}
Теперь, когда захочется что-то выделить при написании поста, нужно перейти в редакторе сообщений из режима создать в режим HTML и заключить этот текст вот так.
<blockquote>здесь ваш текст </blockquote>


Ещё один вариант оформления цитаты, кода или участка текста. Также с эффектом анимации. Как это работает можно посмотреть на тестовом блоге(http://smotritetyt.blogspot.ru/) 

 Код для него:
blockquote { line-height: 20px; background: url([url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJcELJ3WjSng28Ks1_NUswT6L-1WM9en1udNfGkGmH5jbtU7q9TACXUqq1A3rXLBy6OrV1nGOg-Ydq4kiLXHAc7OwVEo3ZFeY1DhwRn5Y6GA-aKk5ceFb0hvXhaawDrVSNNaESgDFzxHs/s1600/black.png[/url]); font-family: "Courier New", Courier, monospace; font-size: 12px; color: #000000; border:solid #999999 1px; border-left:solid #990000 15px; padding: 0 5px 0 10px; margin-left:30px; } blockquote:hover{ background: #FFFFFF; box-shadow:0 0 7px #999; }
источник:  http://www.shpargalochki.ru/2014/05/animirovannyj-fon.html



вторник, 8 мая 2018 г.

Красивое оформление цитат на Блоггер

Текст надо обвести (смаркировать),потом кликнуть на символ кавычк.
Установим дополнительный код, который придаст цитатам более презентабельный вид,
В Дизайн - Добавить гаджет - HTML/JavaScript, необходимо добавить следующий код.

<style>.post blockquote
{
font-size: 15px;font-family: Verdana;font-weight: normal;font-style:italic;
background-color: #F2F1F1;
color: #000;
margin: 5px 10px;
padding: 20px 20px 20px 20px;
border: 2px dotted lightgrey;
border-radius: 10px;
box-shadow: -1px -1px 12px 2px gainsboro;
transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
}
.post blockquote:hover
{
background-color: CornflowerBlue ;
color: #fff;
}
.post blockquote:active
{
background-color: lightblue ; ;
color: #000;
}
</style>


Классическое расположение автора цитаты для блога на Blogger.

Вот и сама конструкция:



пятница, 4 мая 2018 г.

Карта сайта по ярлыкам - семь вариантов

https://www.shablonu-dlya-blogger.ru/2015/08/blogger-sitemap.html

Карта сайта для Blogger по ярлыкам 

Простая карта сайта (таблица)Демо
Простой вариант с таблицей на три столбика в которых отображается заголовок статьи, дата публикации и ее ярлык. Формируется из всех сообщений блога.

Нужно перейти в раздел Тема - Изменить HTML в редакторе находите код ]]></b:skin> перед которым нужно будет вставить следующий код:
/* CSS Full Sitemap */
#bp_toc {background:#4DB2EC;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#fff;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
Сохраняем шаблон и переходим в раздел Страницы - Создать Страницу в открывшемся редакторе переходим на вкладку HTML и вставляем следующий код:
<div id="bp_toc">
</div>
<script src="[url]https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js"[/url] type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>
Публикуете страницу и смотрите, что вышло. Ну а дальше, чтобы нашу карту сайта было видно на всех страницах блога, можете создать для нее ячейку в вашем главном меню.
Карта сайта аккордеон
карта сайта аккордеон
Смотреть Демо
Данный вариант виджета отображает столбиком все ярлыки блога в алфавитном порядке. При нажатии на ярлык появляются последние сообщения из данной категории. В отличии от первого варианта, этот может показывать последние 150 сообщений по каждому ярлыку. Для установки создайте Страницу, перейдите на вкладку HTML, вставьте туда содержимое скачанного файла и опубликуйте страницу.

Карта сайта с  постраничной навигацией

Blogger html карта сайта с навигацией
Смотреть Демо
Здесь у нас так же появляется список ярлыков, но при нажатии по ярлыку колонка с постами появляется с правой стороны. Прелесть этой карты заключается в том, что она имеет свою навигацию. За раз может выводить до 150 сообщений. Так же показывает количество сообщений для каждого ярлыка. Способ установки такой же, как и во втором типе. Скачать файл с HTML кодом.

Карта сайта со спойлером и миниатюрами

html карта сайта со спойлером и миниатюрами
Смотреть Демо
Данный тип чем-то напоминает карту аккордеон, здесь категории так же раскрываются в низ, но в добавок к заголовку прикреплено изображение (миниатюра). Каждая категория может выкатывать до 150 сообщений. Установку чутка отличается и вообще сам виджет довольно капризный. Для установки скачайте файл. HTML код файла вставьте в разделе Тема - Изменить HTML в самом низу редактора перед закрывающим тегом </body>. После создайте новую Страницу, перейдите на вкладку HTML и пропишите там [sitemap] теперь можете опубликовать страницу.

Карта с миниатюрами и безлимитной прокруткой страниц

Карта сайта с миниатюрами и безлимитной прокруткой страниц
Демо
Наконец-то добрались к последнему виджету. Идем дальше, у пользователей есть следующие возможности при просмотре публикаций с ее помощью:

1) Сортировать выдаваемые посты (сообщения) по новым и обновленным. Обновленные - это ваши опубликованные посты в которых вы, что-то дописывали или убирали от того и обновленные.

2) Читатель вашего блога или сайта может выбрать определенную категорию постов.

3) Поиск поста вручную, введя в строку поиска его название.


4) Изначально карта выдает шесть постов, чтобы увидеть остальные нужно кликнуть по кнопке Load more. Когда посты заканчиваются вместо кнопки Load more появляется кнопка Top при нажатии которой осуществляется скроллинг страницы вверх.

Все эти функции вы можете прощупать на тестовом блоге.

Переходим к установке виджета Для установки вам нужно создать новую страницу, перейти на вкладку HTML и разместить там код - скачать. В скрипте найдите ссылку - [url]http://dan-blog102.blogspot.com[/url] вместо нее вставьте ссылку своего блога.

Карта блога с картинками и нумерованной навигацией

Карта блога с картинками и нумерованной навигацией
Смотреть демо
Данный вариант чем-то похож на предыдущий, только вместо безлимитной навигации у него прикручена постраничная навигация. Одна страница вмещает 150 публикаций. Хотя видок у нее так себе, но довольно удобная штука, подойдет для крупных вебресурсов. Чтобы установить скачайте файл, создайте новую страницу, на вкладке HTML вставьте содержимое файла и опубликуйте страницу.

Динамическая карта блога 

Динамическая карта сайта
Демо
Весьма интересный способ внедрения карты сайта предложил вьетнамский программист. Его способ заключается в том, чтобы использовать один из динамических шаблонов blogger и знакомый всем тег Iframe. Для установки скачайте файл, создайте страницу, перейдите на вкладку HTML и вставьте код из файла.
После найдите строку:
<iframe src="[url]https://dan-blog111.blogspot.com/view/flipcard"></iframe>[/url] вместо ссылки [url]https://dan-blog111.blogspot.com[/url] вставьте ссылку своего блога. Так же можете поменять внешний вид сообщений, для этого нужно прописать в той же строке вместо flipcart одно из следующих значений: timeslide, classic, sidebar, magazine, mosaic или snapshot.
источникhttps://www.shablonu-dlya-blogger.ru/2015/08/blogger-sitemap.html



среда, 2 мая 2018 г.

Изменить навигацию в блоге.

 Как изменить навигацию в блоге. А именно, сделать её нумерованной или заменить надпись следующие и предыдущие сообщения на названия постов.
 
Надо скопировать код и установить его в гаджет HTML/JavaScript. Затем переместить этот гаджет во вкладке дизайн под сообщения блога. Всего 2 шага.

Первый вариант нумерованной навигации.

навигация
Скопируйте его сначала в блокнот или черновик.
<style type="text/css">a.showpageNum { background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg.png') repeat-x;
  border:1px solid #97a7af;
  margin:0px 1px 0 1px;padding:3px 8px;
  text-decoration:none;
  color:#333;line-height:14px;cursor:pointer;white-space:nowrap;
  -webkit-border-radius:3px;-moz-border-radius:3px;
}
a.showpageNum:hover {
  border: 1px solid #cccccc;
  background: #f6edd9;
}
.showpagePoint {
  color: #fff;
  text-shadow: 0 1px 2px #333;
  padding: 0px 5px;
  margin: 0px 2px;
  border: 1px solid #cccccc;
  background: #666;
}
.showpageOf {
  margin-right: 8px;
  text-shadow: 1px 1px 1px #fff;
}</style>
<script style='text/javascript'>
var postperpage=6;
var numshowpage=50;
var upPageWord="◄ Назад";
var downPageWord="Вперед ►";
var home_page="/";
var urlactivepage=location.href;
</script><script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var upPageWord ='◄';
var downPageWord ='►';
</script>
<script type="text/javascript">
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('4 H;4 l;4 k;4 r;15();D 16(a){4 b=\'\';I=J(M/2);3(I==M-I){M=I*2+1}B=k-I;3(B<1)B=1;h=J(a/m)+1;3(h-1==a/m)h=h-1;E=B+M-1;3(E>h)E=h;b+="<N 5=\'1o\'>Страница "+k+\' из \'+h+"</N>";4 c=J(k)-1;3(k>1){3(k==2){3(l=="s"){b+=\'<a 6="\'+C+\'" 5="i">\'+O+\'</a>\'}7{b+=\'<a 6="/u/v/\'+r+\'?&9-n=\'+m+\'" 5="i">\'+O+\'</a>\'}}7{3(l=="s"){b+=\'<a 6="#" x="K(\'+c+\');y z" 5="i">\'+O+\'</a>\'}7{b+=\'<a 6="#" x="L(\'+c+\');y z" 5="i">\'+O+\'</a>\'}}}3(B>1){3(l=="s"){b+=\'<a 6="\'+C+\'" 5="i">1</a>\'}7{b+=\'<a 6="/u/v/\'+r+\'?&9-n=\'+m+\'" 5="i">1</a>\'}}3(B>2){b+=\' ... \'}17(4 d=B;d<=E;d++){3(k==d){b+=\'<N 5="1p">\'+d+\'</N>\'}7 3(d==1){3(l=="s"){b+=\'<a 6="\'+C+\'" 5="i">1</a>\'}7{b+=\'<a 6="/u/v/\'+r+\'?&9-n=\'+m+\'" 5="i">1</a>\'}}7{3(l=="s"){b+=\'<a 6="#" x="K(\'+d+\');y z" 5="i">\'+d+\'</a>\'}7{b+=\'<a 6="#" x="L(\'+d+\');y z" 5="i">\'+d+\'</a>\'}}}3(E<h-1){b+=\'...\'}3(E<h){3(l=="s"){b+=\'<a 6="#" x="K(\'+h+\');y z" 5="i">\'+h+\'</a>\'}7{b+=\'<a 6="#" x="L(\'+h+\');y z" 5="i">\'+h+\'</a>\'}}4 e=J(k)+1;3(k<h){3(l=="s"){b+=\'<a 6="#" x="K(\'+e+\');y z" 5="i">\'+18+\'</a>\'}7{b+=\'<a 6="#" x="L(\'+e+\');y z" 5="i">\'+18+\'</a>\'}}b+=\'\';4 f=A.1q("1r");4 g=A.1s("1t-1u");17(4 p=0;p<f.P;p++){f[p].1a=b}3(f&&f.P>0){b=\'\'}3(g){g.1a=b}}D 11(a){4 b=a.1b;4 c=J(b.1v$1w.$t,10);16(c)}D 15(){4 a=w;3(a.j("/u/v/")!=-1){3(a.j("?Q-9")!=-1){r=a.F(a.j("/u/v/")+14,a.j("?Q-9"))}7{r=a.F(a.j("/u/v/")+14,a.j("?&9"))}}3(a.j("?q=")==-1&&a.j(".1x")==-1){3(a.j("/u/v/")==-1){l="s";3(w.j("#G=")!=-1){k=w.F(w.j("#G=")+8,w.P)}7{k=1}A.1c("<o R=\\""+C+"S/T/U?9-n=1&V=W-X-o&Y=11\\"><\\/o>")}7{l="v";3(a.j("&9-n=")==-1){m=1y}3(w.j("#G=")!=-1){k=w.F(w.j("#G=")+8,w.P)}7{k=1}A.1c(\'<o R="\'+C+\'S/T/U/-/\'+r+\'?V=W-X-o&Y=11&9-n=1" ><\\/o>\')}}}D K(a){Z=(a-1)*m;H=a;4 b=A.1d(\'1e\')[0];4 c=A.1f(\'o\');c.1g=\'1h/1i\';c.1j("R",C+"S/T/U?1k-1l="+Z+"&9-n=1&V=W-X-o&Y=12");b.1m(c)}D L(a){Z=(a-1)*m;H=a;4 b=A.1d(\'1e\')[0];4 c=A.1f(\'o\');c.1g=\'1h/1i\';c.1j("R",C+"S/T/U/-/"+r+"?1k-1l="+Z+"&9-n=1&V=W-X-o&Y=12");b.1m(c)}D 12(a){13=a.1b.1z[0];4 b=13.1n.$t.F(0,19)+13.1n.$t.F(1A,1B);4 c=1C(b);3(l=="s"){4 d="/u?Q-9="+c+"&9-n="+m+"#G="+H}7{4 d="/u/v/"+r+"?Q-9="+c+"&9-n="+m+"#G="+H}1D.6=d}',62,102,'|||if|var|class|href|else||max||||||||maksimal|showpageNum|indexOf|nomerhal|jenis|postperpage|results|script|||lblname1|page||search|label|urlactivepage|onclick|return|false|document|mulai|home_page|function|akhir|substring|PageNo|nopage|nomerkiri|parseInt|redirectpage|redirectlabel|numshowpage|span|upPageWord|length|updated|src|feeds|posts|summary|alt|json|in|callback|jsonstart||hitungtotaldata|finddatepost|post||halamanblogger|loophalaman|for|downPageWord||innerHTML|feed|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|published|showpageOf|showpagePoint|getElementsByName|pageArea|getElementById|blog|pager|openSearch|totalResults|html|20|entry|23|29|encodeURIComponent|location'.split('|'),0,{}))
//]]>
</script>

В участке кода, который выделен синим цветом можно внести свои изменения.
Значение var postperpage=6 должно соответствовать количеству постов, которые вы задали в настройках блога. Вместо назад\вперёд пишите при необходимости своё-влево\вправо, туды\сюды, что придёт на ум. Да и цветовое решение можно подобрать своё.

Второй вариант навигации.  

Наглядный пример здесь(http://b-v-blog.blogspot.com/search?updated-max=2015-02-03T11:18:00%2B05:00&max-results=3). Вместо предыдущие сообщения и следующие будут отображаться ссылки с названиями постов.
Код в нём синим цветом выделен скрипт библиотеки jQueru.Если вы знаете, что он  у вас уже установлен в шаблоне, этот участок в коде копировать уже не надо.
 На случай если сомневаетесь, реком. к прочтению эту http://www.shpargalochki.ru/2014/07/biblioteka-jquery-v-bloge.html статью.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" h3:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link:first").text();
$("a.blog-pager-older-link").text(olderLinkTitle);
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" h3:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
</script>

Когда названия сообщений достаточно длинные, то выглядеть это будет не очень красиво. Код работает как на стандартных шаблонах, так и на сторонних.
http://www.shpargalochki.ru/p/blog-page_2746.html



вторник, 1 мая 2018 г.

Необычное анимированное меню в сообщении

Вариант необычного анимированного меню http://www.shpargalochki.ru/2014/11/neobychnoe-animirovannoe-menju.html, которое можно установить непосредственно в сообщение блога. К тому же, обойдёмся без JavaScript.
И давайте уже смотреть, как это выглядит. Наведите на картинку курсор.


Код красивого анимированного меню
<center>
<div class="exampleCSS">
<div style="text-align: center;">
<a href="[url]АДРЕС[/url]" target="_blank" title=" главная">Главная страница</a><br>
<a href="[url]
АДРЕС[/url]" target="_blank" title="содержание">Содержание</a><br>
<a href="[url]
АДРЕС[/url]" target="_blank" title="автор">Об авторе</a><br>
<a href="[url]
АДРЕС[/url]" target="_blank" title="связь">Форма связи</a><br></div>
</div>
<style>.exampleCSS {
    background-color:#e9967a;;
    width:300px;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}

.exampleCSS:hover {
    background-color:#8fbc8f;
    -webkit-transform: rotate(360deg) scale(3);
    -moz-transform: rotate(360deg) scale(3);
    -o-transform: rotate(360deg) scale(3);
    -ms-transform: rotate(360deg) scale(3);
    transform: rotate(360deg) scale(3);
}</style>

</center>
Как видите он достаточно простой. Скопируйте его к себе в блокнот или черновик. Давайте немного его разберём.
То что выделено синим цветом, это адреса ваших страниц, меняйте на свои.
Чтобы добавить ещё пункты меню просто вставляйте ещё вот такой участок в коде
<a href="тут адрес страницы" target="_blank" title=" главная">название страницы</a>
Красным цветом -соответственно её название.
Ну и в самих стилях CSS в первом случае, выделенное зелёным основной фон меню.
Во втором цвет при после наведения курсора. width: 300px;-ширина картинки в спокойном состоянии.
Обратите внимание на цифру 3 в скобках. Именно она отвечает за размеры окна после увеличения. Можно поставить 2 или 5, как вам хочется. Ну и свойство 360deg делает поворот меню на 360 градусов.

Перейдём к установке. Готовый код копируем и в  редакторе сообщений переходим из режима создать в режим HTML. Вставляем его в нужное место. Когда вернётесь обратно в режим создать увидите только простой список.В режиме предварительного просмотра отобразиться только картинка без анимации. Пусть это вас не настораживает. Если всё сделано верно, то после публикации эффект этого меню появится.

Так же этот код можно установить в гаджет HTML/JavaScript. И тогда такая красота будет будет на боковой панели или где вы его хотите видеть. К тому же не займёт много места. А в работе будет очень удобным для пользователей.

Идея создания  автор блога [url]http://www.sitehere.ru/[/url]. В самом коде внесла некоторые изменения, чтобы применить на блоггере.

http://www.shpargalochki.ru/



четверг, 26 апреля 2018 г.

Добавить кнопку «Мне нравится» в шаблон постов Blogger

Чтобы добавить кнопку «Мне нравится» в посты Blogger: источник
  1. Войдите в свой аккаунт Blogger. На странице панели инструментов Blogger выберите блог, в который вы хотите добавить кнопку «Мне нравится».
  2. Перейдите в раздел «Шаблон» и нажмите кнопку «Изменить HTML».
  3. Выберите «Blog» из выпадающего списка «Список виджетов».
  4. Найдите в поле редактирования HTML и раскройте фрагмент кода, содержащий пост:
    <b:includable id='post' var='post'>
  5. Найдите тег(и) <data:post.body/> в HTML-коде. Чтобы не тратить время на поиск элемента, нажмите «F3» на клавиатуре компьютера, чтобы открыть форму поиска в браузере. Введите код тега в поле поиска, чтобы быстро найти нужный элемент.
  6. Сгенерируйте код кнопки «Мне нравится» с помощью Генератора кода кнопки «Мне нравится».
    Важно: Оставьте поле «идентификатор» пустым при генерации кода.
  7. Вставьте выражение expr:data-identifier='data:post.id' внутрь первого элемента «span»:
    <span class="likebtn-wrapper" data-style="drop" expr:data-identifier='data:post.id'/>



среда, 25 апреля 2018 г.

Адаптивный виджет похожие сообщения с картинками

Новый виджет похожие сообщения для блоггера подойдет, как для обычных шаблонов так и для новых тем contempo, soho, emporio, notable.

Плюсы виджета:
  • Написан на чистом скрипте JS.
  • Понятен для поисковых ботов.
  • Не создает ссылки со значением Undefined, если сообщению не задан ярлык, что в свою очередь не допускает создания страниц с ошибкой 404.
Установка виджета для новых тем:
1) Откройте раздел Тема - Изменить HTML
2) Перед закрывающим тегом </head> добавьте код:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src='[url]https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>[/url]


3) Найдите строку ]]></b:skin> перед ней добавьте CSS код:
.post-related { display: inline-block; background: #fff; padding: 10px; width:100%; } .post-box .heading { margin-bottom: 10px; text-align: center; margin-top: 10px; position: relative; } .post-box .heading:after { content: "" ; position: absolute; top: 100%; left: 50%; margin-left: -11px; width: 21px; height: 1px; margin-top: 2px; background: #b565a7; } .item-related { width: 31.6%; display: block; float: left; margin-right: 10px; height: 100%; } .item-related:last-child { margin: 0!important; } .item-related .link {display: block; margin: -1px; margin-bottom: 0;} .item-related img {margin-left:0px !important; display: block; opacity: 1; width: 100%; height: 200px; object-fit: cover; } .item-related h3 { padding: 15px; font-weight: 400; font-size: 14px; line-height: 1.71429; font-family: Muli; text-transform: uppercase; } img.noops-smly { padding: 0 !important; margin-top: -2px !important; width: 19px; display: inline; }



4) Найдите HTML код:
  <div class='post-bottom'>
            <div class='post-footer'>
              <!-- Footer bylines -->
              <b:include name='footerBylines'/>
            </div>
            <b:include cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;' data='{ shareButtonClass: &quot;post-share-buttons-bottom&quot;, overridden: true }' name='maybeAddShareButtons'/>
            <b:include cond='data:view.isMultipleItems or data:widget.type == &quot;PopularPosts&quot;' data='post' name='postJumpLink'/>
          </div>
После него добавьте скрипт: JS
<script id='related-posts' type='text/javascript'> /*<![CDATA[*/ var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); var thumburl = new Array(); function related_results_labels_thumbs(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; try {thumburl[relatedTitlesNum]=entry.media$thumbnail.url;} catch (error){ s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZbhuETZt7s0gzjyx9S-CqvBcdax86-hN9eUECtyVB87meRCq60EjWBvDfNjqoe-QXD6DA_3X6eur4LapK3qyx8OL1absGpgNAVIfCVL0hn8UGhJkZO3OjjBr4fJujVMKg4JEvlED4hMo/s1600/no_pic_available.jpg";} } if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"..."; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; } } } } function removeRelatedDuplicates_thumbs() { var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains_thumbs(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp3.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; tmp3[tmp3.length - 1] = thumburl[i]; } } relatedTitles = tmp2; relatedUrls = tmp; thumburl=tmp3; } function contains_thumbs(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels_thumbs(current) { for(var i = 0; i < relatedUrls.length; i++) { if((relatedUrls[i]==current)||(!relatedTitles[i])) { relatedUrls.splice(i,1); relatedTitles.splice(i,1); thumburl.splice(i,1); i--; } } var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; while (i < relatedTitles.length && i < 20 && i<maxresults) { tmb = thumburl[r].replace('s72-c/','s300-c/'); document.write('<div class="item-related"><a href="' + relatedUrls[r] + '" class="link"><img width="150" height="100" src="'+tmb+'"/></a><h3><a href="' + relatedUrls[r] + '">'+relatedTitles[r]+'</a></h3></div>');i++; if (r < relatedTitles.length - 1) { r++; } else { r = 0; } } relatedUrls.splice(0,relatedUrls.length); thumburl.splice(0,thumburl.length); relatedTitles.splice(0,relatedTitles.length); } function removeHtmlTag(strx, chop) { var s = strx.split("<"); for (var i = 0; i < s.length; i++) { if (s[i].indexOf(">") != -1) { s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length) } } s = s.join(""); s = s.substring(0, chop - 1); return s } /*]]>*/ </script>
                  <div class='post-related'>
                    <div class='post-box'>
                      <h4 class='heading common-heading'> <i class="fa fa-th-list" aria-hidden="true"></i> Рекомендуем</h4>
                    </div>
                    <b:loop values='data:post.labels' var='label'>
                      <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>                             
                    </b:loop> 
                    <script type='text/javascript'>
                      var defaultnoimage=&quot;[url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcfWphyMyhfJzEb_kso2WiRCrR4p1P-5onS6ku3MP78DeqKoUXkKsVCmDq23mBha2H0GkyI5F785EMZxhO-_BVGbB3cOhMhLEse5xMNKhSaEwhjNLxZuOdeTEIoQjEVky72VuHD_O5cJQ/s400/noimage.png&quot;;[/url]
                      var maxresults=3; // Number Of Posts
                      removeRelatedDuplicates_thumbs();
                      printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
                    </script>
                  </div>


5) Сохраните тему.

Установка виджета для обычных шаблонов:

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



воскресенье, 15 апреля 2018 г.

На главной странице блога располагаем первым выбранное сообщение

 К сожалению в Blogger отсутствует возможность изменять расположение сообщений так же, как это можно делать со страницами. На главной странице всегда первым отображается последнее созданное сообщение. Но если это не устраивает и нужно, чтобы выбранное сообщение блога всегда было на главной странице блога первым.

Другие же вновь созданные сообщения уже следовали бы за ним или в том порядке, который задуман.
  Что же надо сделать? Для этого нужно выполнить следующие действия по-порядку:
1. Заходим в аккаунт сайта на Blogger.
2. В левой колонке выбираем "Сообщения"
3. Среди появившихся сообщений выбираем то, которое хотим поставить первым на главной странице.
4. Под названием сообщения в строчке выбираем "Исправить".
5. На мониторе появляется редактор сообщения, а справа колонка "Настройки собщения". Нажимаем на них и раскрываем.
6. В колонке выбираем "Опубликовано" и ставим дату из будущего, к примеру, 2018 год.
7. Под календарём нажимем "Готово".
8. В верхней строке нажимаем "Обновить".
  Сделано. Теперь выбранное сообщение на главной странице будет первым до той даты, которая указана. Для примера, допустим, можно поставить какое-либо объявление, чтоб оно было первым какое-то время.
  Если есть желание расставить сообщения в определенном порядке. Тогда каждому сообщению надо присвоить соответствующее время опубликования. Для каждого сообщения действия выполняем по вышеизложенному порядку.



Закачать файл на Blogger

   Как можно вставлять файлы в свои статьи, чтобы можно было их скачать непосредственно на блоге или использовать для других целей? К сожалению, разработчики Blogger это не предусмотрели, поэтому файл будет загружаться не на Blogger. Непосредственно закачать файл на Blogger невозможно. Но Google дает нам возможность реализовать это с помощью Сайтов Google.
На открывшейся странице вам будет предложено создать свой сайт. Естественно, соглашаемся.
На следующей странице заполняем название сайта, смотрим, как будет выглядеть его URL (у сайтов очень некравивый URL, это обусловлено тем, что предполагается на этот сайт устанавливать свой персональный домен).
Дизайн и другие настройки можно сделать и попозже, но что бы потом не разбираться лишний раз в настройках, обратите внимание на пункт "
Дополнительные параметры""Общий доступ". Обязательно выберите "Этот сайт может просматривать любой пользователь". Если не сделать эту настройку, то ваши файлы не будут доступны для скачивания пользователями.
Кликаем кнопку "Создать сайт". Поздравляю, ваш сайт создан. У кого с первого раза не получилось, не унывайте. Просто название, которое вы указали для сайта уже занято, но Google-сайты об этом почему-то не информируют. Подбирайте названия, пока сайт не будет зарегистрирован.
Итак, вы оказались сразу на главной странице вновь созданного сайта. Перед тем, как закачать файл сделаем все необходимые настройки. В правом верхнем углу есть кнопка "Дополнительные действия". Кликаем её и выбираем пункт "Управление сайтом".
Теперь не перепутайте. В левом меню выбираем пункт "Общие". И именно на вкладке "Общие" находим пункт "Настройки доступа". Не путайте с пунктом меню, имеющее такое же название. Выставляем настройки. Не забываем после этого сохранить изменения внизу страницы.
Объясняю, почему все эти настройки так важны. Дело в том, что Google-сайты так устроены, что без этих настроек, войдя в свой почтовый ящик, любой желающий может войти в ваш сайт и что-нибудь там изменить. Сделали это для того, чтобы в них одновременно могли работать сотрудники одной организации. А с этими настройками посетители могут только просматривать сайт, но никак не входить в него, и уж тем более что-то менять.
Теперь в левом меню выбираем пункт "Приложения". Кликаем по кнопке "Добавить" и закачиваем нужный файл с компьютера.
И вот нам удалось закачать файл на сайт. Жмем правой кнопкой мыши по ссылке "загрузить". И выбираем пункт "Копировать ссылку" или, в зависимости от браузера, команда может быть другая.
Но вставлять в блог эту ссылку пока нельзя. Её необходимо немного изменить. В примере - ссылка на файл "script.php". Вот она:
https://sites.google.com/site/fajli-dlja-bloga/script.php?attredirects=0&d=1
Вставляем ссылку в редактор текста, например, в "Блокнот" и редактируем, удаляя всё, что находится после знака вопроса, включая и знак. Ссылка должна заканчиваться строго на типе файла. Для данного случая так:
https://sites.google.com/site/fajli-dlja-bloga/script.php
После редактирования ссылка готова к применению.
Таким вот образом, используя Google-сайты, можно закачать файл для блога на Blogger.  Максимальный размер файла - 20 Мб. Файлы могут быть самые разнообразные. Другое дело - поддерживается данный тип файла или нет. Остальную информацию поищите в справке Google по сайтам.



Мой Красивый Блог - Урок №6

Оформление сообщений. Шаблон сообщений
В Блоггере есть замечательная функция - шаблон сообщений. Благодаря ей мы можем сделать такой шаблон, который будет загружаться при каждом создании нового сообщения.
Не буду долго описывать, зачем это нужно, причин может быть масса. Тот, кто попросил меня об этом написать, просто замучился вставлять свою подпись-картинку в конце каждого поста.
Итак, давайте сделаем наш шаблон.
Сначала как обычно создадим новое сообщение в блоге. Напишем в тело сообщения ту информацию, которая будет автоматически появляться в каждом новом сообщении.
В моем случае это подпись в виде картинки, которую я сделала в Фотошопе. Если у вас это тоже картинка, вставляем ее:
Затем переходим в редактор HTML и видим там код:
Выделяем его весь и копируем правой кнопкой мыши:
Сообщение теперь можно удалить.
Идем в Настройки, далее в Сообщения и комментарии.
Видим пункт Шаблон сообщения и нажимаем Добавить:
В появившееся окошко вставляем код, который скопировали.
Нажимаем Сохранить настройки.
Теперь можно создать новое сообщение и убедиться, что все работает. :)
Если в каком-то из постов информация из шаблона вам будет не нужна, ее легко удалить в теле сообщения.

Кнопка Читать далее
Хотя эта функция уже давно появилась в Блоггере, у некоторых девочек возникают с этим сложности. Поэтому быстренько расскажу, как это делается. :) Я сама всегда пользуюсь возможностью прятать сообщения под кат. И вы обязательно ставьте такую кнопочку! Особенно если ваши посты длинные, со множеством картинок и обилием текста.

Итак, все, что нам нужно, это нажать кнопку Вставить ссылку "Дальше". 
В том месте, где находился курсор, появится разрыв страницы:

Все, что находится над ним, будет отображаться на гавной странице вашего блога. А то, что под ним - уйдет под кат.
Слово Дальше можно заменить на любое другое.
Для этого идем в Дизайн и нажимаем Изменить у гаджета Сообщения блога:
Появляется окошко с множеством разных настроек. Сейчас нам нужно второе поле сверху. Меняем слово Дальше на любое другое и сохраняем.
Изучите и другие поля в этом окошке - тут много интересного! :)
Именно здесь настраивается количество сообщений на странице, убираются стандартные кнопки социальных сетей, которые отображаются у каждого поста, меняются местами данные в нижнем колонтитуле сообщений и еще многое другое!

Рамка вокруг изображений
В некоторых шаблонах вокруг изображений отображается полупрозрачная рамка, которую вы можете захотеть убрать. Выглядит она так:
Чтобы избавиться от нее, заходим в Шаблон -> Настроить. Во вкладке Дополнительно выбираем Редактировать CSS. Вставляем туда такой код:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}
Нажимаем Применить к блогу. Ненужной рамки больше нет
Если же вы, наоборот, хотите создать рамку, вот здесь есть интересный мастер-класс: Оригинальная рамка вокруг изображений

Вставляем видео и музыку в сообщение
Вставить в сообщение видеоролик очень просто - для этого даже не надо ковырять никакие коды. :)) Воспользуемся функцией Вставить видеоролик:
И тут выбираем один из нескольких способов загрузки:
Тут все просто. А как быть, если нам хочется поделиться любимой песней?
Это дело хорошее, если песню вы размещаете в сообщении, и она включается только по желанию посетителя. Поверьте, никто не любит, когда музыка начинает играть неожиданно.
Не буду продолжать рассуждения и писать собственный МК. Мне понравился вариант, описанный вот тут: Как вставить музыку в блог.

Гаджет Похожие сообщения
Есть много способов поставить себе такой гаджет. Спросите любой поисковик, и вы в этом убедитесь. :) Я почитала отзывы о многих из них и поняла, что в каждом есть свои плюсы и минусы. Для себя я бы выбрала вариант, предоставленный автором блога Школа Блоггера.
С вашего позволения, я снова не буду переносить описание к себе. Все, что нужно сделать, очень доступно описано здесь: Добавить гаджет Похожие статьи. Там же автор отвечает на вопросы, связанные с этим гаджетом. :)
Теперь, когда наши сообщения красиво оформлены, можно добавить еще пару приятных штрихов в дизайн самого блога. :)

Разделитель между сообщениями
Почти во всех шаблонах Блоггера есть возможность вставить красивый разделитесь между сообщениями.Чтобы мой разделитель сочетался с шапкой, я поставила себе такие вот горошки:
 В блоге у Magda Mizera нежные цветочки:
Польская мастерица Mira поставила в качестве разделителя свою подпись:
Когда вы создали свой разделитель в Фотошоп, можно приступать к установке.
Для этого идем в Шаблон->Изменить HTML.
C помощью клавиш CTRL+F (на Mac OS - CMD+F) находим такой код: .post {
Удаляем весь код, который размещается между фигурными скобками, там должно быть примерно следующее:
margin:.5em 0 1.5em;border-bottom:1px dotted $bordercolor;padding-bottom:1.5em;
Вместо него вставляем этот код:
background: url(ссылка на изображение разделителя);background-repeat: no-repeat;background-position: bottom center;margin:.5em 0 1.5em; padding-bottom:1.5em;
Теперь весь код выглядит так:
.post {background:url(ссылка на изображение разделителя);background-repeat: no-repeat;background-position: bottom center;margin:.5em 0 1.5em;padding-bottom:1.5em;}
Нажимаем Сохранить и поверяем.
Если разделитель заходит на нижний колонтитул сообщений, его можно опустить ниже, увеличив значение в этом коде: padding-bottom:1.5em; 
Например, так: padding-bottom:2.5em; Мне пришлось поставить значение 5.5em, чтобы отодвинуть разделитель от колонтитула.

Кнопка Наверх
Чтобы вашим читателям было легче вернуться в верхнее меню, можно сделать кнопку Наверх. Для этого даже не обязательно редактировать код страницы, можно просто добавить нужный гаджет.
Для этого создадим свою кнопочку или найдем готовую. Я легко сделала свою с помощью кистей для Фотошопа Стрелки.
Потом заходим в Дизайн и добавляем новый гаджет HTML.
Поле Название не заполняем, а в Содержание вставляем этот код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
/*********************************************** 
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) 
* Modified by www.MyBloggerTricks.com 
* This notice MUST stay intact for legal use 
* Visit Project Page at http://www.dynamicdrive.com for full source code 
***********************************************/
var scrolltotop={ 
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control 
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). 
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="адрес изображения кнопки" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" 
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner 
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){ 
        if (!this.cssfixedsupport) //if control is positioned using JavaScript 
            this.$control.css({opacity:0}) //hide control immediately after clicking it 
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) 
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists 
            dest=jQuery('#'+dest).offset().top 
        else 
            dest=0 
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration); 
    },
    keepfixed:function(){ 
        var $window=jQuery(window) 
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx 
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety 
        this.$control.css({left:controlx+'px', top:controly+'px'}) 
    },
    togglecontrol:function(){ 
        var scrolltop=jQuery(window).scrollTop() 
        if (!this.cssfixedsupport) 
            this.keepfixed() 
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false 
        if (this.state.shouldvisible && !this.state.isvisible){ 
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) 
            this.state.isvisible=true 
        } 
        else if (this.state.shouldvisible==false && this.state.isvisible){ 
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) 
            this.state.isvisible=false 
        } 
    }, 
    
    init:function(){ 
        jQuery(document).ready(function($){ 
            var mainobj=scrolltotop 
            var iebrws=document.all 
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode 
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') 
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') 
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) 
                .attr({title:'Scroll Back to Top'}) 
                .click(function(){mainobj.scrollup(); return false}) 
                .appendTo('body') 
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text 
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text 
            mainobj.togglecontrol() 
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ 
                mainobj.scrollup() 
                return false 
            }) 
            $(window).bind('scroll resize', function(e){ 
                mainobj.togglecontrol() 
            }) 
        }) 
    } 
}
scrolltotop.init()
</script>
Вставляем в выделенное место адрес нашей картинки и сохраняем. Этот гаджет надо перенести в самую нижнюю часть вашего блога. :)