Google+ Blogger WordPress Facebook Like Vkontakte Odnoklassniki LiveJournal vKruguDruzei Facebook Email Gmail
Показаны сообщения с ярлыком фоны. Показать все сообщения
Показаны сообщения с ярлыком фоны. Показать все сообщения
воскресенье, 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



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

Слайд-шоу с простой установкой.


Слайдер устанавливается очень просто. В Дизайн - Добавить гаджет - HTML/JavaScript или редактор сообщения необходимо добавить код.
http://blogodel.com/2013/03/Krasivyj-slajder-slajd-shou-s-ochen-prostoj-ustanovkoj-dlja-Blogspot-Blogger.html 

Красный цвет кода - это ссылки и адреса картинок.
<style type="text/css">
#mcis {
 display: none;
}
#sliderFrame {
 position: relative;
 width: 350px; margin: 0 auto;
        border:5px solid #000;
}
#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 left: -4px;
 background: no-repeat;
 z-index: 7;
}
#slider {
 width: 350px; height: 260px; background: #fff  no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position: absolute;
 border: none;
 display: none;
}
#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}
div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color: black;
}
div.mc-caption {
 font: bold 14px/20px Arial;
 color: #EEE;
 z-index: 4;
 padding: 10px 0;
 text-align: center;
}
div.mc-caption a {
 color: #FB0;
}
div.mc-caption a:hover {
 color: #DA0;
}
}
#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style><script style="text/javascript">var sliderOptions=
{
sliderId: "slider",
effect: "series1",
effectRandom: false,
pauseTime: 2600,
transitionTime: 600,
slices: 12,
boxes: 8,
hoverPause: true,
autoAdvance: true,
captionOpacity: 0.3,
captionEffect: "fade",
thumbnailsWrapperId: "thumbs",
license: "l91b"
};
var imageSlider=new mcImgSlider(sliderOptions);
/* Menucool Javascript Image Slider v2012.7.3. Copyright www.menucool.com */
function mcImgSlider(e){var B=function(d){var a=d.childNodes,c=[];if(a)for(var b=0,e=a.length;b<e;b++)a[b].nodeType==1&&c.push(a[b]);return c},A=function(a,b){return a.getElementsByTagName(b)},O=function(a){for(var c,d,b=a.length;b;c=parseInt(Math.random()*b),d=a[--b],a[b]=a[c],a[c]=d);return a},x=function(a,b){if(a){a.o=b;a.style.opacity=b;a.style.filter="alpha(opacity="+b*100+")"}},N=function(a,c,b){if(a.addEventListener)a.addEventListener(c,b,false);else a.attachEvent&&a.attachEvent("on"+c,b)},P=document,G=function(c,a,b){return b?c.substring(a,b):c.substring(a)},s=function(){this.d=[];this.b=null;this.c()};function M(){var c=50,b=navigator.userAgent,a;if((a=b.indexOf("MSIE "))!=-1)c=parseInt(b.substring(a+5,b.indexOf(".",a)));return c}var Q=M()<9;s.a={f:function(a){return-Math.cos(a*Math.PI)/2+.5},g:function(a){return a},h:function(b,a){return Math.pow(b,a*2)},j:function(b,a){return 1-Math.pow(1-b,a*2)}};s.prototype={k:{c:e.transitionTime,a:function(){},b:s.a.f,d:1},c:function(){for(var b=["webkit","moz","ms","o"],a=0;a<b.length&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[b[a]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[b[a]+"CancelAnimationFrame"]||window[b[a]+"CancelRequestAnimationFrame"]}this.supportAnimationFrame=!!window.requestAnimationFrame},m:function(h,d,g,c){for(var b=[],i=g-d,j=g>d?1:-1,f=Math.ceil(60*c.c/1e3),a,e=1;e<=f;e++){a=d+c.b(e/f,c.d)*i;if(h!="opacity")a=Math.round(a);b.push(a)}b.index=0;return b},n:function(){this.b==null&&this.p()},p:function(){this.q();var a=this;this.b=this.supportAnimationFrame?window.requestAnimationFrame(function(){a.p()}):window.setInterval(function(){a.q()},15)},q:function(){var a=this.d.length;if(a){for(var c=0;c<a;c++)this.o(this.d[c]);while(a--){var b=this.d[a];if(b.d.index==b.d.length){b.c();this.d.splice(a,1)}}}else{if(this.supportAnimationFrame)window.cancelAnimationFrame(this.b);else window.clearInterval(this.b);this.b=null}},o:function(a){if(a.d.index<a.d.length){var c=a.b,b=a.d[a.d.index];if(a.b=="opacity"){if(Q){c="filter";b="alpha(opacity="+Math.round(b*100)+")"}}else b+="px";a.a.style[c]=b;a.d.index++}},r:function(e,b,d,f,a){a=this.s(this.k,a);var c=this.m(b,d,f,a);this.d.push({a:e,b:b,d:c,c:a.a});this.n()},s:function(c,b){b=b||{};var a,d={};for(a in c)d[a]=b[a]!==undefined?b[a]:c[a];return d}};var d=new s,b={a:0,e:"",d:0,c:0,b:0},a,c,l,o,v,t,w,f,g,z,r,h,p,q,n,y,j,k=null,E=function(b){if(b=="series1")a.a=[6,8,15,2,5,14,13,3,7,4,14,1,13,15];else if(b=="series2")a.a=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17];else a.a=b.split(/\W+/);a.a.p=e.effectRandom?-1:a.a.length==1?0:1},D=function(){a={b:e.pauseTime,c:e.transitionTime,f:e.slices,g:e.boxes,O0:e.license,h:e.hoverPause,i:e.autoAdvance,j:e.captionOpacity,k:e.captionEffect=="none"?0:e.captionEffect=="fade"?1:2,l:e.thumbnailsWrapperId,Ob:function(){typeof beforeSlideChange!=="undefined"&&beforeSlideChange(arguments)},Oa:function(){typeof afterSlideChange!=="undefined"&&afterSlideChange(arguments)}};if(c)a.m=Math.ceil(c.offsetHeight*a.g/c.offsetWidth);E(e.effect);a.n=function(){var b;if(a.a.p==-1)b=a.a[Math.floor(Math.random()*a.a.length)];else{b=a.a[a.a.p];a.a.p++;if(a.a.p>=a.a.length)a.a.p=0}if(b<1||b>17)b=15;return b}},m=[];function J(){var e;if(a.l)e=document.getElementById(a.l);if(e)for(var f=e.childNodes,d=0;d<f.length;d++)f[d].className=="thumb"&&m.push(f[d]);var c=m.length;if(c){while(c--){m[c].on=0;m[c].i=c;m[c].onclick=function(){k.y(this.i)};m[c].onmouseover=function(){this.on=1;this.className="thumb thumb-on"};m[c].onmouseout=function(){this.on=0;this.className=this.i==b.a?"thumb thumb-on":"thumb"}}F(0)}}function F(b){var a=m.length;if(a)while(a--)m[a].className=a!=b&&m[a].on==0?"thumb":"thumb thumb-on"}function K(b){var a=[],c=b.length;while(c--)a.push(String.fromCharCode(b[c]));return a.join("")}var L=function(b){var a=document.getElementById(b);if(a)a.b=function(b){return a.innerHTML.indexOf(b)>-1};return a},C=function(a,f,h,c,b,e,g){setTimeout(function(){if(f&&h==f-1){var g={};g.a=function(){k.o()};for(var i in a)g[i]=a[i]}else g=a;b.width!==undefined&&d.r(c,"width",b.width,e.width,a);b.height!==undefined&&d.r(c,"height",b.height,e.height,a);d.r(c,"opacity",b.opacity,e.opacity,g)},g)},H=function(a){c=a;this.b=0;this.c()},u=function(b){var a=document.createElement("div");a.className=b;return a};H.prototype={c:function(){l=c.offsetWidth;o=c.offsetHeight;j=B(c);var i=j.length;while(i--){var e=j[i],d=null;if(e.nodeName!="IMG"){if(e.nodeName=="A"){d=e;d.style.display="none";var m=d.className?" "+d.className:"";d.className="imgLink"+m;var p=this.z(d),h=d.getAttribute("href");if(p&&typeof McVideo!="undefined"&&h&&h.indexOf("http")!=-1){d.onclick=function(){return this.getAttribute("autoPlayVideo")=="true"?false:k.d(this)};McVideo.register(d,this)}}e=A(e,"img")[0]}e.style.display="none";b.d++}a.m=Math.ceil(o*a.g/l);if(j[b.a].nodeName=="IMG")b.e=j[b.a];else b.e=A(j[b.a],"img")[0];if(j[b.a].nodeName=="A")j[b.a].style.display="block";c.style.background='url("'+b.e.getAttribute("src")+'") no-repeat';this.i();v=this.k();this.m();var f=this.v(),g=b.e.parentNode;if(this.z(g)&&g.getAttribute("autoPlayVideo")=="true")this.d(g);else if(a.i&&b.d>1)n=setTimeout(function(){f.y(f.n(1))},a.b);if(a.h){c.onmouseover=function(){if(b.b!=2){b.b=1;clearTimeout(n);n=null}};c.onmouseout=function(){if(b.b!=2){b.b=0;if(n==null&&!b.c&&a.i)n=setTimeout(function(){f.y(f.n(b.a+1))},a.b/2)}}}},d:function(c){var a=McVideo.play(c,l,o);if(a)b.b=2;return!this.b},f:function(){y=u("navBulletsWrapper");for(var e=[],a=0;a<b.d;a++)e.push("<div rel='"+a+"'></div>");y.innerHTML=e.join("");for(var d=B(y),a=0;a<d.length;a++){if(a==b.a)d[a].className="active";d[a].onclick=function(){k.y(parseInt(this.getAttribute("rel")))}}c.appendChild(y)},g:function(){var c=B(y),a=b.d;while(a--){if(a==b.a)c[a].className="active";else c[a].className="";if(j[a].nodeName=="A")j[a].style.display=a==b.a?"block":"none"}},h:function(c){var b=function(b){var a=b.charCodeAt(0).toString();return G(a,a.length-1)},a=c.split("");return a[1]+b(a[0])+(a.length==2?"":b(a[2]))},i:function(){t=u("mc-caption");w=u("mc-caption");f=u("mc-caption-bg");x(f,0);f.appendChild(w);g=u("mc-caption-bg2");g.appendChild(t);x(g,0);g.style.visibility=f.style.visibility=w.style.visibility="hidden";c.appendChild(f);c.appendChild(g);z=[f.offsetLeft,f.offsetTop,t.offsetWidth];t.style.width=w.style.width=t.offsetWidth+"px";this.j()},j:function(){if(a.k==2){r=p={opacity:0,width:0,marginLeft:Math.round(z[2]/2)};h={opacity:1,width:z[2],marginLeft:0};q={opacity:a.j,width:z[2],marginLeft:0}}else if(a.k==1){r=p={opacity:0};h={opacity:1};q={opacity:a.j}}else{r=h={};q=p={}}},k:function(){var a=b.e.getAttribute("alt");if(a&&a.substr(0,1)=="#"){var c=document.getElementById(a.substring(1));a=c?c.innerHTML:""}this.l();return a},l:function(){if(t.innerHTML.length>1){var b={c:a.b/4.5,b:a.k==1?s.a.f:s.a.h,d:a.k==1?0:3},c=b;c.a=function(){f.style.visibility=g.style.visibility="hidden"};if(!a.k)c.c=b.c=10;if(h.marginLeft!==undefined){d.r(g,"width",h.width,r.width,b);d.r(f,"width",q.width,p.width,b);d.r(g,"marginLeft",h.marginLeft,r.marginLeft,b);d.r(f,"marginLeft",q.marginLeft,p.marginLeft,b)}if(h.opacity!==undefined){d.r(g,"opacity",h.opacity,r.opacity,b);d.r(f,"opacity",q.opacity,p.opacity,c)}}},m:function(){w.innerHTML=t.innerHTML=v;if(v){f.style.visibility=g.style.visibility="visible";var b={c:a.k?a.b/3:10,b:a.k==1?s.a.f:s.a.j,d:a.k==1?0:3};if(h.marginLeft!==undefined){d.r(g,"width",r.width,h.width,b);d.r(f,"width",p.width,q.width,b);d.r(g,"marginLeft",r.marginLeft,h.marginLeft,b);d.r(f,"marginLeft",p.marginLeft,q.marginLeft,b)}if(h.opacity!==undefined){d.r(g,"opacity",r.opacity,h.opacity,b);d.r(f,"opacity",p.opacity,q.opacity,b)}}},a:function(a){return a.replace(/(?:.*\.)?(\w)([\w\-])?[^.]*(\w)\.[^.]*$/,"$1$3$2")},o:function(){b.c=0;clearTimeout(n);n=null;this.m();c.style.background='url("'+b.e.getAttribute("src")+'") no-repeat';var e=this,d=b.e.parentNode;if(this.z(d)&&d.getAttribute("autoPlayVideo")=="true")this.d(d);else if(!b.b&&a.i)n=setTimeout(function(){e.y(e.n(b.a+1))},a.b);a.Oa.call(this,b.a,b.e)},p:function(){b.c=1;if(j[b.a].nodeName=="IMG")b.e=j[b.a];else b.e=A(j[b.a],"img")[0];this.g();v=this.k();var f=A(c,"div");i=f.length;while(i--)if(f[i].className=="mcSlc"||f[i].className=="mcBox"){var g=c.removeChild(f[i]);delete g}var d=a.n();a.Ob.apply(this,[b.a,b.e,v,d]);F(b.a);var e=d<14?this.w(d):this.x();if(d<9||d==15){if(d%2)e=e.reverse()}else if(d<14)e=e[0];if(d<9)this.q(e,d);else if(d<13)this.r(e,d);else if(d==13)this.s(e);else if(d<16)this.t(e,d);else this.u(e,d)},q:function(b,c){for(var d=0,e=c<7?{height:0,opacity:-.4}:{width:0,opacity:0},g={height:o,opacity:1},a=0,f=b.length;a<f;a++){if(c<3)b[a].style.bottom="0";else if(c<5)b[a].style.top="0";else if(c<7){b[a].style[a%2?"bottom":"top"]="0";e.opacity=-.2}else{g={width:b[a].offsetWidth,opacity:1};b[a].style.width=b[a].style.top="0";b[a].style.height=o+"px"}C({},f,a,b[a],e,g,d);d+=50}},r:function(c,b){c.style.width=b<11?"0px":l+"px";c.style.height=b<11?o+"px":"0px";x(c,1);if(b<11)c.style.top="0";if(b==9){c.style.left="auto";c.style.right="0px"}else if(b>10)c.style[b==11?"bottom":"top"]="0";if(b<11)var e=0,f=l;else{e=0;f=o}var g={b:s.a.j,c:a.c*2,a:function(){k.o()}};d.r(c,b<11?"width":"height",e,f,g)},s:function(b){b.style.top="0";b.style.width=l+"px";b.style.height=o+"px";var c={c:a.c*2,a:function(){k.o()}};d.r(b,"opacity",0,1,c)},t:function(b){var n=a.g*a.m,k=timeBuff=0,f=colIndex=0,d=[];d[0]=[];for(var c=0,j=b.length;c<j;c++){b[c].style.width=b[c].style.height="0px";d[f][colIndex]=b[c];colIndex++;if(colIndex==a.g){f++;colIndex=0;d[f]=[]}}for(var l={c:a.c/1.3},g=0,j=a.g*2;g<j;g++){for(var e=g,h=0;h<a.m;h++){if(e>=0&&e<a.g){var i=d[h][e];C(l,b.length,k,i,{width:0,height:0,opacity:0},{width:i.w,height:i.h,opacity:1},timeBuff);k++}e--}timeBuff+=100}},u:function(a,g){a=O(a);for(var d=0,b=0,h=a.length;b<h;b++){var c=a[b];if(g==16){a[b].style.width=a[b].style.height="0px";var e={width:0,height:0,opacity:0},f={width:c.w,height:c.h,opacity:1}}else{e={opacity:0};f={opacity:1}}C({},a.length,b,c,e,f,d);d+=20}},v:function(){return(new Function("a","b","c","d","e","f","g","h","this.f();var l=e(g(b([110,105,97,109,111,100])));if(l==''||l.length>3||(f(l).length==2?a[b([48,79])].indexOf(f(l))>-1:a[b([48,79])]==f(l)+'b')){d();this.b=1;}else{a[b([97,79])]=a[b([98,79])]=function(){};var k=c(b([115,105,99,109]));if (k && k.getAttribute(b([102,101,114,104]))) var x = k.getAttribute(b([102,101,114,104]));if (x && x.length > 20) var y = h(x, 17, 19) == 'ol';if(!(y&&(k.b('en') || k.b('li')))){a.a=[6];a.a.p=0;}};return this;")).apply(this,[a,K,L,J,this.a,this.h,function(a){return P[a]},G])},w:function(f){for(var i=[],g=f>8?l:Math.round(l/a.f),j=f>8?1:a.f,e=0;e<j;e++){var h=u("mcSlc"),d=h.style;d.left=g*e+"px";d.width=(e==a.f-1?l-g*e:g)+"px";d.height="0px";d.background='url("'+b.e.getAttribute("src")+'") no-repeat -'+e*g+"px 0%";if(f==10)d.background='url("'+b.e.getAttribute("src")+'") no-repeat right top';else if(f==12)d.background='url("'+b.e.getAttribute("src")+'") no-repeat left bottom';d.zIndex=1;d.position="absolute";x(h,0);c.appendChild(h);i.push(h)}return i},x:function(){for(var j=[],i=Math.round(l/a.g),h=Math.round(o/a.m),g=0;g<a.m;g++)for(var f=0;f<a.g;f++){var d=u("mcBox"),e=d.style;e.left=i*f+"px";e.top=h*g+"px";d.w=f==a.g-1?l-i*f:i;d.h=g==a.m-1?o-h*g:h;e.width=d.w+"px";e.height=d.h+"px";e.background='url("'+b.e.getAttribute("src")+'") no-repeat -'+f*i+"px -"+g*h+"px";e.zIndex=1;e.position="absolute";x(d,0);c.appendChild(d);j.push(d)}return j},y:function(c,e){if(b.c&&!e||c==b.a)return 0;if(b.b==2){b.b=0;var a=document.getElementById("mcVideo");a.src="";var d=a.parentNode.parentNode.removeChild(a.parentNode);delete d}clearTimeout(n);n=null;b.a=this.n(c);this.p()},n:function(a){if(a>=b.d)a=0;else if(a<0)a=b.d-1;return a},To:function(a){this.y(this.n(b.a+a))},z:function(a){return a.className.indexOf(" video")>-1}};var I=function(){var a=document.getElementById(e.sliderId);if(a)k=new H(a)};(function(){D();N(window,"load",I)})();return{displaySlide:function(b,a){k.y(b,a)},next:function(){k.To(1)},previous:function(){k.To(-1)},getAuto:function(){return a.i},switchAuto:function(){(a.i=!a.i)&&k.To(1)},setEffect:function(a){E(a)},changeOptions:function(a){for(var b in a)e[b]=a[b];D()},getElement:function(){return c}}}</script> <br />
<div id="sliderFrame">
<div id="ribbon">
</div>
<div id="slider">
<img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkNhJMmU4jJDGEDifWCAIIuH9nKIiBTUtRshyphenhyphenJMG-NWTDviglDndoTrna6fobaepGR44oUKAKGCKKD_sstDEnlKB90Kxz6ejnsshVTud-uqcxgL1y0lCaT6zPnS-QVMwWQsAiIC-HR89Vl/s400/0_775ba_a23c5fdb_L.jpg" width="251" /><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHIzBd3acv9c3LU5ikuq-20Br07kUdn2cxnAQWNy3rc5NiJ9PUuSRl-yjbBrYnNSQ_fVsFlR682uggTEvbK-szNpWFuCgdupHjlUx6nj2T1t1XSuBE34wR5pJdqqMDem0vzKEk-qRBHq9z/s400/0_761a5_732a4eb0_L.jpg" /><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm9pZJO9aJ8ilm5MmKNs5A9ToJ7PAHUcquN8xXx2XoiggVN8X6EBDHkgwDkS5qe-kUkH5DcyZ_u8s8fC9qlDQVKckR-PPFjk3FWv2GGCucodSEk_RY7BtkXXwRTTSdsPUzIzbGZnrFmpVA/s400/0_775af_e301630_L.jpg" /><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTzD01_Czw7zoMngSxhpgnpMopVx7PrSsVqY0XoTWKuqbtWIKSHSeli6c9waxHNhUHnGxkxpN3bDArLHCSoeUYShJDzyq4zfDBC9QtQzsWbIcL6nQO-UfQUJADxPohoHKSd8rS2MKIjBIu/s400/0_775b8_9ddda394_L.jpg" /><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjumLag-VgoEpzFRZtHkw9sgPAIqhDrTE48FJRRTanopvLZY0c_F97Ouw1W1zZaCvzqAZiHO0iu6PUiF2RXgMbFwcAynWOGvIq0SdbiKp1DDZgfyhdrEgRd3qWH4BMZgn8M5mIBaRvcCN9T/s400/0_775b9_25ed052d_L.jpg" />                </div>



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

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

Теперь, когда мы разобрались из чего состоит наш блог, можно задуматься и над оформлением.
Давайте начнем с палитры, ведь цвет оказывает очень большое влияние на впечатление, которое посетитель получит от посещения вашей странички.
Первое впечатление очень важно. Посетителю должно быть уютно и комфортно у вас в гостях, ничего не должно его отвлекать и мешать восприятию информации.
Даже если вам кажется, что главное в блоге - не дизайн, а наполнение (и вы, конечно, правы), на подсознательном уровне любого человека всегда создается определенное впечатление от посещения той или иной странички. Цвета вызывают разные эмоции в душе посетителя, погружают его в нужную атмосферу.
Правильно подобрав цветовую схему, мы сможем расположить к себе читателей, сделать так, чтобы им захотелось остаться подольше. Как же выбрать правильную палитру для блога?
1. Используйте цвета, которые встречаются в природе. Они приятнее нашему глазу и легче воспринимаются. Неестественные цвета вызывают усталость глаз и желание покинуть страничку.
2. Выберите не более 3-4 цветов, сочетающихся между собой (не считая оттенков).
Пестрый дизайн нам ни к чему - вы ведь и так будете добавлять цветные фотографии. К тому же, большее количество тонов ухудшает восприятие информации и быстро утомляет посетителя.
3. Цвета фона и текста сообщений должны быть контрастными. По статистике, светлый фон лучше темного.
4. Не забывайте про цветовые ассоциации. Конечно, это все спорная информация, но, может быть, вам будет интересно почитать:
Красный: Возбуждение, энергия, страсть, желание, скорость, прочность, мощность, тепло, любовь, агрессия, опасность, огонь, кровь, война, насилие, всё интенсивное и страстное.
Желтый: Радость, счастье, оптимизм, идеализм, воображение, надежда, солнечный свет, лето, золото, философия, мошенничество, малодушие, предательство, ревность, жадность, обман, болезнь, риск.
Синий: Мир, спокойствие, устойчивость, гармония, объединение, доверие, истина, консерватизм, безопасность, чистота, порядок, лояльность, небо, вода, холод, технология, депрессия, подавитель аппетита.
Оранжевый: Энергия, баланс, тепло, энтузиазм, оживление, экспансивность, пышность.
Зеленый: Природа, среда, здоровье, восстановление, молодость, бодрость, весна, щедрость, плодородие, ревность, неопытность, зависть, неудача.
Пурпурный: духовность, благородство, преобразование, мудрость, просвещение, жестокость, высокомерие.
Серый: Безопасность, надежность, интеллект, степенность, скромность, достоинство, завершенность, твердость, консервативность, практичность, старость, печаль.
Коричневый: Земля, очаг, дом, надежность, выносливость, устойчивость, простота и удобство.
Белый: Почтение, простота, чистота, мир, смирение, точность, невинность, молодость, рождение, зима, снег, брак, холодность, стерильность.
Черный: Мощность, сексуальность, сложность, формальность, элегантность, богатство, тайна, страх, недовольство, глубина, стиль, зло, печаль, раскаяние, гнев, траур.

Создание палитры блога в Фотошоп.
Для создания палитры я использовала англоязычный Фотошоп версии CS6. Если у вас другая версия - ничего страшного. Они очень похожи между собой, и проблем из-за этого возникнуть не должно.
Если у вас нет Фотошоп или вы привыкли к другой графической программе, вы можете работать в ней. Но, к сожалению, советы я могу давать только по Фотошоп.
Если вы уже определились с цветовой схемой будущего дизайна, давайте создадим ее в графической программе. Зачем? Для наглядности, а еще для удобства - когда мы будем создавать дизайн, нам не нужно будет каждый раз искать нужный цвет, мы сможем просто тыкать в палитру инструментом Eyedropper (Пипетка).
Я буду создавать дизайн блога для своего агентства по оформлению праздников, мы назвали его Lavender Blue. Поэтому дизайн блога будет в сиренево-зеленой гамме.
У меня получилась вот такая палитра:
Для нее я нашла в интернете подходящие картинки для вдохновения и сохранила их.
Откроем одну в Фотошоп:
Нам нужно место для палитры, для этого увеличим канву: Image -> Canvas Size...
Увеличим немного канву по горизонтали или вертикали (в моем случае на 200 пикселей).
Канва увеличилась.
Теперь обратим внимание на поле со слоями нашего документа (Layers). Если это окошко у вас не включено, его надо включить (Window -> Layers). Здесь отображаются все существующие слои активного документа, пока он у нас один. На нем висит замочек - это значит, что он закреплен и его нельзя двигать и изменять. Чтобы снять замок, дважды кликнем на слой.
В открывшемся окошке выбираем ОК.
Мы можем двигать наш слой (нажав на стрелочку Move Tool на боковой панели).
Свободное место надо закрасить инструментом Paint Bucket Tool.
Теперь можно рисовать палитру.
Выберем одну из фигур. Мне захотелось круг (Ellipse). :)
Чтобы выбрать цвет круга, в верхнем меню нажмем Fill.
Вот тут нам и пригодится наше фото - когда мы наведем на него курсор, появится пипетка. Кликнув в любое место картинки, мы получим нужный цвет.
Создаем нашу фигуру.
Чтобы получился ровный круг (а не эллипс) или квадрат (не прямоугольник), при растягивании фигуры, зажмем клавишу Shift.
Она сразу появляется на отдельном слое в окошке со слоями.
Чтобы дублировать слой, нужно выделить его и нажать Ctrl+J. Сделаем столько дубликатов, сколько у нас будет цветов в палитре.
И выберем для них разные цвета.
Двойной клик на наших фигурках в окне слоев открывает меню цвета.
Теперь обрежем лишнее.
На боковой панели выберем инструмент Rectangular Marguee и выделим нужную область.
Обрежем: Image -> Crop.
Сохраним наше изображение на компьютере: File -> Save as...
Выбираем формат JPEG:
Нажимаем Save, и наша палитра готова!
upd. (18.02) Я также записала процесс создания палитры на видео, надеюсь, оно поможет вам.
Конечно, в интернете очень много готовых палитр, и какая-то из них может вам подойти. Но я, все-таки, советую сделать ее самим - так вы сможете немного ближе познакомиться с Фотошопом, тем более, если вы с ним на "Вы". :)
Не бойтесь экспериментировать, пробовать разные функции, нажимать разные кнопочки! Многие люди, в том числе я, узнали обо всем именно методом тыка. :) А если что, всегда можно вернуться на один или несколько шагов назад (Edit -> Step Backward).

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

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

Создадим новый документ, например, размером 500 х 500 пикселей.
File->New...
Выберем инструмент Type Tool, красивый шрифт и напишем нужное слово или имя. :)
На новом слое можно написать другую информацию, например, адрес вашего блога.
Теперь передвинем наш надписи друг к другу с помощью инструмента Move Tool.
Если мы довольны видом нашей будущей кисти, идем в Edit, а там выбираем Define Brush Preset...
В открывшемся окошке вписываем название нашей кисти.
Теперь можем создать новый документ и опробовать нашу кисть. Выберем инструмент Brush Tool.
В коллекции кистей она сейчас отображается последней.
Выберем ее, зададим нужный цвет, размер и прозрачность - теперь можно штамповать сколько угодно. :) Предвосхищая будущие вопросы, скажу сразу, что после закрытия ФШ, кисть никуда не исчезнет, ей можно будет пользоваться сколько угодно. :))
Экспериментируйте при создании вашей кисти! Пусть она будет такой же уникальной, как и ваши работы! :)



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

Сегодня мы будем разговаривать о фоне и вкладках - их создании, оформлении и размещении.
Фон
Я уже писала, что фон и текст должны быть контрастными по отношению друг к другу. Если текст в вашем блоге будет черным или серым, фон для него лучше выбрать белый или светло-бежевый. По статистике, светлый фон лучше темного, поэтому  не советую экспериментировать с белым текстом на темном фоне. От такого цветового решения быстро устают глаза посетителей, а ведь одна из главных наших задач - заботиться об их комфорте. :) Часто фон в блогах просто оставляют белым:
Butik Sofie
Это самый простой способ, но довольно симпатичный. И, главное, подходит к любому стилю. :)
Другой простой вариант - использовать готовые фоны, предоставленные блоггером.
Для этого выберем вкладку Шаблон->Настроить, а затем Фон.
Нажав на Фоновое изображение, мы увидим всю галерею фонов, разбитую по темам. Возможно, вы найдете тут что-то подходящее.
Но, так как мы стараемся уйти от стандартных шаблонов и создать на своей страничке что-то личное и не похожее на других, я бы не советовала использовать такие фоны. Гораздо красивее будет смотреться фон, который вы специально нашли (или создали) под ваш дизайн.

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

Вот пара порталов с бесплатными фонами:
А тут я взяла фон для своего блога: Bene.be

Если вы не смогли найти подходящей картинки, можно сделать бесшовный фон в Фотошоп самому! Я в это погружаться не стала - в сети очень много готовых хороших фонов. Но если вам захочется экспериментов, дам пару ссылок. :) Вот тут можно почитать мастер-класс создания фона из фотографии: Shkolazhizni.ru А здесь объясняется, как сделать фон с нуля: PhotoshopMaster

Итак, подходящую картинку вы нашли или сделали сами, теперь нужно ее установить.
Снова заходим туда, где расположены стандартные фоны блогера: 
Шаблон -> Настроить -> Фон. Здесь выбираем Загрузить изображение:
Указываем путь к нашей картинке:
Если наше изображение подходит по размеру и весу, оно появится в превью. Нажимаем Готово.
При выходе из редактора шаблонов не забудьте нажать кнопку Применить к шаблону, иначе ваш фон не сохранится.
Совсем иначе смотрятся фоны, которые как бы обрамляют центральную зону сообщений и боковые панели:
ChigElena
Сами со себе они выглядят иначе, чем обычные узоры:
В таких фонах предусмотрена зона для текста и декор по бокам. В блог они ставятся одной картинкой, а не мозаикой.

Их тоже можно скачивать готовыми. Например, на всеми любимом Shabbyblogs.com просто море таких фонов, с простой инструкцией по применению:
Вот тут тоже есть симпатичные фоны: KinziesKreations.

Но, опять же, я советую не увлекаться готовыми дизайнами. Можно поиграться такими фонами, а потом сделать свой собственный, идеально подходящий к вашей шапочке.
Для примера я сделала два очень быстрых варианта, используя только кисти. А ведь, создавая фон, можно добавлять в него и элементы из скрап-наборов, и клипарт, и разные текстуры!
Я не очень люблю активные фоны, поэтому они у меня вот такие бледненькие)
Чтобы сделать такой фон, создадим в Фотошоп документ размером 1000 на 1600 пикселей. Заполнять декором нужно зоны по краям, отмерив 300 пикселей.
После загрузки фона в шаблон, зададим ему такие параметры:
Выравнивание - сверху по центру; Не разделять на мозаику; убираем галочку у пункта Прокручивать со страницей.
Сохраняем. Наш фон должен красиво встать  в блог. :)
Как же решить, какой фон выбрать? Тут важно, как и в скрапе, не переборщить. :) Если у вас скромная шапка в стиле минимализма, то яркий и активный фон может оказаться очень к месту. И наоборот - к большой шапке с множеством сложных элементов лучше подобрать более спокойный и нейтральный фон. Глазам посетителя нужно давать возможность отдыхать. :)

Вкладки
Вкладки - это отдельные важные странички вашего блога, которые нужны для удобства навигации. Они могут располагаться в верхней части блога или на панели.
Давайте создадим ваши вкладки. Заходим в раздел Страницы:
Здесь страницы создаются и редактируются как обычные сообщения.
Когда вы создали нужные страницы, в разделе Дизайн добавляем гаджет Страницы (добавить можно в любом месте, а потом перетянуть в нужное):
Здесь можно настроить порядок страниц, а так же выбрать, какие из них будут отображаться, а какие нет. Не все опубликованные страницы сразу появятся у вас в меню - сначала нужно поставить галочку для их отображения.
Если вы хотите создать ссылку на любой другой сайт (например, на ваш магазин на Ярмарке Мастеров или другой блог), нужно нажать надпись Добавить станицу со ссылкой:
Здесь заполняем поле названия и вставляем ссылку:
Если вы размещаете вкладки над/под шапкой, не создавайте их слишком много. По крайней мере, они должны умещаться в одной строке. Я создала четыре - Главная, Обо мне, Магазин и Контакты. Так же довольно уместно тут будет смотреться вкладка с вашим портфолио, мастер-классами и профессиональными успехами. Менее важные странички лучше вынести на боковую панель.

По умолчанию в блоггере вкладки в шаблонах располагаются слева. Если вам хочется разместить их по центру, нужно вставить небольшой код CSS. Для этого входим в Шаблон и нажимаем кнопку Настроить. В разделе Дополнительно находим Добавить CSS.
В поле для кодов добавляем такой код:
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
Нажимаем кнопку Применить к блогу. Теперь наши вкладки располагаются по центру.
В редакторе шаблонов можно настроить внешний вид вкладок.
Зайдем в Шаблон->Дополнительно->Текст вкладок. Здесь можно выбрать шрифт, размер надписей, их цвет и цвет текста на выбранной вкладке:
Ниже находится раздел Фон вкладок. Здесь можно поменять общий фон и фон на выбранной вкладке:
И еще один раздел - Цветовые акценты. Здесь мы выберем цвет границ вкладок:
К сожалению, блоггер предоставляет не так много шрифтов, особенно кириллических. Возможно, вам захочется сделать ваши вкладки более красивыми и яркими, выделить и подчеркнуть их на странице. Это можно сделать, заменив простые надписи кнопками.
Вот примеры таких меню:
Их можно размещать и на боковой панели:
Все примеры с сайта DesignerBlogs
Чтобы создать такое меню, нужно, для начала нарисовать кнопки. Думаю, после урока с шапкой это трудностей у вас не вызовет. :)
Я сделала простые кнопки с мазком кисти:
Теперь загрузим их в блог. Для этого в разделе Дизайн создадим новый Гаджет HTML.
В появившееся окошко вставим такой код:
<a href="адрес сайта"><img src="адрес изображения"></a>
В нужные места впишем адрес изображения кнопки и адрес, куда она будет ссылаться.
Таких кодов нужно вставить столько, сколько будет кнопок. Вставляем их друг за другом, можно через пробел. Сохраняем гаджет и перетягиваем его под шапку:
Вот так простенько, но симпатично. :) А главное - мимо такого заметного меню никто не пройдет! :))
Если вы хотите разместить такие кнопки на боковой панели, ставьте между кодами <p>. Тогда кнопки точно будут располагаться друг под другом.
Если какие-то из ваших кнопок будут вести на сторонние сайты, возможно, вам захочется, чтобы они открывались в отдельных окнах. Это нужно для того, чтобы посетитель не потерял ваш блог, кликнув на одну из ссылок.
Чтобы ссылка открывалась в новом окне, используйте такой код:
<a href="адрес сайта" target="_blank"><img src="адрес изображения"/></a>
При размещении такого меню гаджет Страницы нужно удалить. Созданные вами страницы должны быть опубликованными, но отображаться через гаджет Страницы им не нужно - ссылки на них будут у нас в кнопках.

Немного иной вариант оформления меню - с "монолитной" картинкой. В этом случае все кнопки связаны между собой  выглядят одним целым:
Есть несколько способов создавать такие изображения - использовать картинку как фон под меню, маппинг и другие. Но мы будем использовать простой и проверенный способ - кнопки. :)  Сделаем для тренировки простое меню на ленте:
Создадим новый документ размером примерно 150 х 800 пикселей. Чтобы нам было легче ориентироваться, включим отображение сетки: View->Show->Grid.
С помощью инструмента Pen Tool нарисуем ленту.
Инструментом Dodge Tool можно высветлить некоторые участки ленты:
Далее инструментом Horizontal Type Tool напишем заголовки страниц.
Теперь, когда цельная картинка готова, нужно поделить ее на части - будущие кнопки.
Не промахнуться со стыками нам снова поможет сетка. :) Выделяем нужную область инструментом Rectangular Marguee Tool, обрезаем и сохраняем как отдельный документ JPG или PNG. Проделываем это со всей лентой. Главное, чтобы конец предыдущей кнопочки совпадал с началом следующей - тогда в картинке не будут заметны переходы.
Вставляем кнопки в гаджет HTML, используя код, который мы использовали до этого. Между кнопками в этот раз пробел ставить не нужно, он должны примыкать друг к другу вплотную.
Вот и все! Результат я уже показала выше. :)

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