tag:blogger.com,1999:blog-73241694348756537052024-03-13T04:44:47.461+02:00ОТНОВО ДА ЕКСПЕРИМЕНТИРАМЕ Примери за оформяне на блог на Blogger BlogspotPepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.comBlogger23125tag:blogger.com,1999:blog-7324169434875653705.post-60347635219667035112019-12-27T13:12:00.003+02:002019-12-27T13:19:46.916+02:00ЧНГ<div class="wrapper tabled"><div class="stage"><div class="middled">Дорогие читатели <a class="boo" href="https://www.blogzablogove.com/">"ЧНГ"</a>, Поздравляю вас с наступающим 2020 годом <a class="boo" href="https://www.blogzablogove.com/">Здраве и късмет</a>. Пусть начнется новым взлетом К лучшим жизненным высотам И хорошим в банке счетом <a class="boo" href="https://www.blogzablogove.com/">Щастие'</a> Принесет в делах согласье, В личной жизни — много счастья!."</div></div></div><style>
.stage {
display: table-cell;
vertical-align: middle;
}
.tabled, .middled {
text-align: center;
margin: 0 auto;
}
.jumbo {
font-size: 150%;
vertical-align: -25px;
transform: rotate(8deg);
}
.jumbo:first-child {
-webkit-animation: wave 10s infinite ease;
animation: wave 10s infinite ease;
}
.jumbo:last-child {
-webkit-animation: wave 15s infinite ease;
animation: wave 15s infinite ease;
}
@keyframes wave {
0% { transform: rotate(8deg); }
25% { transform: rotate(15deg); }
75% { transform: rotate(-10deg); }
100% { transform: rotate(8deg); }
} @-webkit-keyframes wave {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(10deg); }
100% { -webkit-transform: rotate(0deg); }
}
p {
font-size: 110%;
font-family: Helvetica, sans;
max-width: 24em;
margin: 0 auto;
text-align: justify;
color: #00695C;
font-weight: lighter;
line-height: 1.5em;
}
a {
color: #ccc;
text-decoration: none;
border-bottom: solid thin #f7901d;
}
a:hover {
color: #f7901d;
}
.boo {
position: relative;
}
.boo:before, .boo:after {
position: absolute;
transition: all 0.15s ease;
}
.boo:before {
top: -75px;
left: -70px;
-webkit-transform:rotate(0deg) scale(0);
-moz-transform:rotate(0deg) scale(0);
-o-transform:rotate(0deg) scale(0);
-ms-transform:rotate(0deg) scale(0);
transform:rotate(0deg) scale(0);
}
.boo:after {
top: -115px;
right: -70px;
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
-webkit-transform:rotateY(180deg) scale(0);
-moz-transform:rotateY(180deg) scale(0);
-o-transform:rotateY(180deg) scale(0);
-ms-transform:rotateY(180deg) scale(0);
transform:rotateY(180deg) scale(0);
}
.boo:hover:before {
top: -140px;
-webkit-transform:rotate(15deg) scale(1);
-moz-transform:rotate(15deg) scale(1);
-o-transform:rotate(15deg) scale(1);
-ms-transform:rotate(15deg) scale(1);
transform:rotate(15deg) scale(1);
}
.boo:hover:after {
-webkit-transform:rotateY(180deg) scale(0.7);
-moz-transform:rotateY(180deg) scale(0.7);
-o-transform:rotateY(180deg) scale(0.7);
-ms-transform:rotateY(180deg) scale(0.7);
transform:rotateY(180deg) scale(0.7);
}
.boo:before, .boo:after {
content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_kaeggH4kq_N3bgVRkiBV82lqVEdOUktBwIZvcsizH-ekzTyKG5pnVEsd-zc4_cAtuZ0zsoZSxtLztw_dTdoyFRNnC6WGmEtO7tOSX4XwTxa4_4Itb6b5D9SX_2mDMNpX0RdZTARVzjQ/w80-h80-p/kambana_ng.gif');
}
</style><br />
Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.com0tag:blogger.com,1999:blog-7324169434875653705.post-44699540269906756512019-11-29T19:55:00.004+02:002020-01-03T00:56:14.159+02:00ПаралаксИнтересен пример за позициониране на изображение в публикация на блога.<br />
<a name='more'></a><br />
<br />
<style>
.mouse-parallax {
height: 500px;
position: relative;
overflow: hidden;
}
.mouse-parallax-bg {
position: absolute;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiQzIJyDwFcWboQFkAZsV9dK6O9nujVw9r_BWl9QAKc0TcrYqyHWqpm4hodkSXIBvjFS-BBSXb6z0ivjBk8V31V4psfvGkHWqS___GDzD4DWRLXZDCkMy6Sy3YRKjmFyj5YeTKxIdVgIAi/h120/51.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 110%;
height: 110%;
transition: all 0.1s ease;
}
</style><br />
<br />
<h2 class="f24 title padding-top-10 margin-bottom-30">
Пример:</h2>
<div class="mouse-parallax">
<div class="mouse-parallax-bg">
</div>
</div>
<br />
<script>
let bg = document.querySelector('.mouse-parallax-bg');
window.addEventListener('mousemove', function(e) {
let x = e.clientX / window.innerWidth;
let y = e.clientY / window.innerHeight;
bg.style.transform = 'translate(-' + x * 50 + 'px, -' + y * 50 + 'px)';
});
</script><br />
<br />
<br />Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.com0tag:blogger.com,1999:blog-7324169434875653705.post-29053008222210830672019-10-10T18:12:00.000+03:002019-10-11T15:46:18.321+03:00Карта на блога с азбучна навигацияКарта на блога с азбучна навигация<br />
<a name='more'></a><br />
<style>
#sitemap5 {font-size:14px; font-weight:400}
#sitemap5 .judul {font-size:150%; background-color:#2288bb; color:#fff; font-weight:600; text-align:center; margin-bottom:20px; padding:15px;}
#sitemap5 a {color:#666; text-decoration:none; transition:all .3s ease;}
#sitemap5 a:hover {color:#000;}
#sitemap5 .isi .abjad {background-color:#2196f3; color:#fff; padding:10px 15px; font-size:110%; font-weight:600; text-transform:uppercase; position:relative;}
#sitemap5 .isi .abjad #top:before {content:''; width:12px; height:calc(100% - 20px); position:absolute; right:0px; top:0px; padding:10px; cursor:pointer; background:rgba(0,0,0,.2) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15,20H9V12H4.16L12,4.16L19.84,12H15V20Z' fill='%23fff'/%3E%3C/svg%3E") center / 20px no-repeat;}
#sitemap5 ol, #sitemap5 ol li {list-style-type:none;}
#sitemap5 .nav ol {margin:0px 0px 15px; padding:0px; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
#sitemap5 .nav ol li {background-color:#444; color:#fff; padding:7px 0px; cursor:pointer; margin:0px 5px 5px 0px; text-align:center; text-transform:uppercase; width:40px;}
#sitemap5 .nav ol li:last-child {margin-right:0px;}
#sitemap5 .isi ol {margin:0px 0px 20px; padding:0px; border:1px solid #ccc; border-top:0px;}
#sitemap5 .isi ol li {color:#666; margin:0px; padding:10px 15px; line-height:1.5em; -webkit-margin-start:0px !important;}
#sitemap5 .isi ol li:nth-of-type(even) {background-color:#e9e9e9;}
#sitemap5 .isi ol li:nth-of-type(odd) {background-color:#fff}
@media screen and (max-width:480px) {
#sitemap5 {font-size:13px;}
#sitemap5 .judul {padding:10px;}
#sitemap5 .isi .abjad {padding:7px 15px;}
}
@media screen and (max-width:360px) {
#sitemap5 {font-size:12px;}
#sitemap5 .judul {padding:10px;}
#sitemap5 .isi .abjad {padding:7px 12px;}
#sitemap5 .isi ol li {padding:7px 12px;}
}
</style><br />
<div id="sitemap5">
Loading....</div>
<script> //<![CDATA[
/* Blogger Sitemap Alphabetically with Letter Heading by igniel.com */
var scroll = 'smooth'; /* 'smooth' OR 'instant' */
/*
'smooth' for smooth scroll
OR
'instant' for quick scroll
*/
eval(function(p,a,c,k,e,d){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--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[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}('q a=["","\\f\\s\\i\\g\\o\\d","\\s\\i\\c\\b\\d\\c\\W\\e\\c\\x\\c\\k\\d","\\f\\i\\s","\\u\\J\\c\\c\\h\\f\\u\\o\\j\\f\\d\\f\\u\\f\\r\\x\\x\\b\\i\\G\\1V\\b\\e\\d\\v\\z\\f\\j\\k\\1n\\s\\b\\e\\e\\N\\b\\s\\1b\\v\\f\\g\\d\\c\\x\\b\\o\\K\\1n\\f\\d\\b\\i\\d\\Z\\g\\k\\h\\c\\1o\\v","\\1n\\x\\b\\1o\\Z\\i\\c\\f\\r\\e\\d\\f\\v","\\b\\o\\o\\c\\k\\h\\1J\\E\\g\\e\\h","\\N\\j\\h\\G","\\f\\g\\d\\c\\x\\b\\o\\K","\\1H\\c\\d\\W\\e\\c\\x\\c\\k\\d\\1K\\G\\1F\\h","\\g\\k\\k\\c\\i\\1X\\1i\\1Y\\1k","\\J\\c\\c\\h","\\e\\c\\k\\1H\\d\\E","\\c\\k\\d\\i\\G","\\1Q\\d","\\d\\g\\d\\e\\c","\\e\\g\\k\\1b","\\i\\c\\e","\\b\\e\\d\\c\\i\\k\\b\\d\\c","\\E\\i\\c\\J","\\o\\r\\f\\E","\\d\\j\\1k\\j\\1E\\c\\i\\1J\\b\\f\\c","\\s\\E\\b\\i\\1x\\d","\\z\\r\\h\\r\\e","\\g\\k\\h\\c\\1o\\2d\\J","\\r\\i\\e","\\f\\j\\i\\d","\\m\\h\\g\\w\\l\\s\\e\\b\\f\\f\\v\\p\\b\\N\\z\\b\\h\\p\\n\\m\\f\\o\\b\\k\\l\\h\\b\\d\\b\\Z\\w\\b\\e\\r\\c\\v\\p","\\p\\n","\\m\\u\\f\\o\\b\\k\\n\\m\\f\\o\\b\\k\\l\\g\\h\\v\\p\\d\\j\\o\\p\\l\\d\\g\\d\\e\\c\\v\\p\\1K\\b\\s\\1b\\l\\d\\j\\l\\1i\\j\\o\\p\\n\\m\\u\\f\\o\\b\\k\\n\\m\\u\\h\\g\\w\\n\\m\\j\\e\\n","\\m\\e\\g\\n\\m\\b\\l\\E\\i\\c\\J\\v\\p","\\p\\l\\d\\g\\d\\e\\c\\v\\p","\\m\\u\\b\\n\\m\\u\\e\\g\\n","\\m\\u\\j\\e\\n","\\m\\e\\g\\n","\\m\\u\\e\\g\\n","\\m\\h\\g\\w\\l\\s\\e\\b\\f\\f\\v\\p\\z\\r\\h\\r\\e\\p\\n\\1i\\j\\d\\b\\e\\l\\2h\\j\\f\\d\\2i\\l","\\m\\u\\h\\g\\w\\n\\m\\h\\g\\w\\l\\s\\e\\b\\f\\f\\v\\p\\k\\b\\w\\p\\n\\m\\j\\e\\n","\\m\\u\\j\\e\\n\\m\\u\\h\\g\\w\\n\\m\\h\\g\\w\\l\\s\\e\\b\\f\\f\\v\\p\\g\\f\\g\\p\\n","\\m\\u\\h\\g\\w\\n","\\s\\e\\g\\s\\1b","\\O\\f\\g\\d\\c\\x\\b\\o\\K\\l\\H\\g\\f\\g\\l\\H\\b\\N\\z\\b\\h\\l\\2j\\h\\b\\d\\b\\Z\\w\\b\\e\\r\\c\\v\\p","\\p\\2e","\\f\\d\\b\\i\\d","\\f\\s\\i\\j\\e\\e\\1F\\k\\d\\j\\2s\\g\\c\\1E","\\o\\b\\i\\c\\k\\d\\2t\\j\\h\\c","\\1w\\r\\c\\i\\G\\1t\\c\\e\\c\\s\\d\\j\\i","\\b\\h\\h\\W\\w\\c\\k\\d\\1k\\g\\f\\d\\c\\k\\c\\i","\\J\\j\\i\\W\\b\\s\\E","\\O\\f\\g\\d\\c\\x\\b\\o\\K\\l\\H\\k\\b\\w\\l\\j\\e\\l\\e\\g","\\1w\\r\\c\\i\\G\\1t\\c\\e\\c\\s\\d\\j\\i\\1x\\e\\e","\\O\\f\\g\\d\\c\\x\\b\\o\\K\\l\\H\\k\\b\\w","\\O\\f\\g\\d\\c\\x\\b\\o\\K\\l\\H\\g\\f\\g\\l\\H\\b\\N\\z\\b\\h\\l\\O\\d\\j\\o"];q 1f=1,V=2c,1a=1l 1h(),Q=1l 1h(),1p=1l 1h(),1j=a[0],T=a[0],1q=a[0];B 1g(){q 1e=D[a[2]](a[1]);1e[a[3]]=a[4]+1f+a[5]+V;D[a[7]][a[6]](1e)}B 2f(1B){q Y=D[a[9]](a[8]);F(!Y){1L};Y[a[10]]=a[0];q S=1B[a[11]];F(S[a[13]][a[12]]>0){I(q U=0;U<S[a[13]][a[12]];U++){q P=S[a[13]][U];q 1d=P[a[15]][a[14]];I(q M=0;M<P[a[16]][a[12]];M++){F(P[a[16]][M][a[17]]==a[18]){q 1c=P[a[16]][M][a[19]];F(1c&&1c[a[12]]>0&&1d&&1d[a[12]]>0){1a[a[20]]({"\\r\\i\\e":1c,"\\z\\r\\h\\r\\e":1d})};2k}}};F(S[a[13]][a[12]]>=V){1f+=V;1g()}1I{I(q t=1a,A=0;A<t[a[12]];A++){q R=t[A][a[23]][a[22]](0)[a[21]]();F(1j[a[24]](R)==-1){1j+=R;Q[R]=[{2l:t[A][a[25]],2m:t[A][a[23]]}]}1I{Q[R][a[20]]({"\\r\\i\\e":t[A][a[25]],"\\z\\r\\h\\r\\e":t[A][a[23]]})}};I(q y 1O Q){1p[a[20]](y)};q t=1p[a[26]]();I(q C=0;C<t[a[12]];C++){T+=a[27]+t[C]+a[28]+t[C]+a[29];I(q L=0,1m=Q[t[C]];L<1m[a[12]];L++){q X=1m[a[26]](B(y,t){1L y[a[23]]>t[a[23]]?1:-1});T+=a[1W]+X[L][a[25]]+a[1U]+X[L][a[23]]+a[28]+X[L][a[23]]+a[2u]};T+=a[2o];1q+=a[2n]+t[C]+a[2r]};Y[a[10]]=a[2g]+1a[a[12]]+a[2p]+1q+a[1Z]+T+a[1R];1A()}}}B 1A(){D[a[1D]](a[1P])[a[1y]](B(y){y[a[1s]](a[1u],B(){q t=a[1S]+1N[a[10]]+a[2b];D[a[1r]](t)[a[1T]][a[1z]]({1C:1v,1G:a[1M]})})});D[a[1D]](a[2a])[a[1y]](B(y){y[a[1s]](a[1u],B(){D[a[1r]](a[2q])[a[1z]]({1C:1v,1G:a[1M]})})})}1g()',62,155,'||||||||||_0x764c|x61|x65|x74|x6C|x73|x69|x64|x72|x6F|x6E|x20|x3C|x3E|x70|x22|var|x75|x63|_0xd28cx14|x2F|x3D|x76|x6D|_0xd28cx17|x6A|_0xd28cx15|function|_0xd28cx18|document|x68|if|x79|x2E|for|x66|x35|_0xd28cx19|_0xd28cx12|x62|x23|_0xd28cx10|grup|_0xd28cx16|_0xd28cxe|print|_0xd28cxf|max|x45|_0xd28cx1b|_0xd28cxd|x2D|||||||||||sitemap5Arr|x6B|_0xd28cx13|_0xd28cx11|_0xd28cxa|start|runSitemap5|Array|x54|abjad|x4C|new|_0xd28cx1a|x26|x78|key|nav|46|47|x53|40|scroll|x71|x41|48|44|scrollSitemap5|_0xd28cxc|behavior|50|x77|x49|block|x67|else|x43|x42|return|43|this|in|49|x24|39|41|45|31|x3F|30|x48|x4D|38|||||||||||52|42|150|x4F|x5D|sitemap5|36|x50|x3A|x5B|break|url|judul|34|33|37|51|35|x56|x4E|32'.split('|'),0,{}));
//]]> </script>Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.com1tag:blogger.com,1999:blog-7324169434875653705.post-11844329292006849502019-10-10T17:54:00.000+03:002019-10-11T15:47:01.729+03:00Оригинално оформяне на текстКогато поставите курсора на мишката върху блок с цитат, кавичките ще изчезнат, ще се промени цвета на фона и ще се появи лек ефект на повдигане на текста.<br />
<a name='more'></a><br />
<br />
<br />
<blockquote class="tr_bq">
Morbi tortor orci, lobortis in risus a, gravida consectetur mauris. In felis lectus, dictum ut porttitor nec, blandit ut est. Pellentesque non sollicitudin ex, ac rutrum nisi. Etiam et sem vitae nunc venenatis tempus ut nec neque.</blockquote>
<br />
<style>
.post blockquote {border:5px solid #007FFF;font-size:120%;line-height:100%;overflow:auto;padding:10px;font-family:courier;color:#000;width:360px;position:relative;margin:0 auto 20px auto;padding:12px 80px 15px;text-align:left;border-radius:5px;box-shadow:0 0 5px 2px rgba(0,0,0,.35);cursor:default;background:#9FCFFF;border:1px solid #6F91B2;background:#9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUmZZPD6SDb4ziXC0RzgAS5kv1wOzeXXh1bRKzoHLDSmIqg57wfIANyu91rxV_ZLvKAzsI2evd0v4OJAh9Qju1PLJWinfduuG09nIKCm5hgejHxFvmt_TCMnSySBnTaLgEJOIYpjb7-eIS/s320/BS+blockquote.png) no-repeat 5% 9%; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .post blockquote:hover { border:5px solid #0066B3;border-radius:15px; background:#0186ba; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .post blockquote p { margin: 0.75em 0; }</style>Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.com0tag:blogger.com,1999:blog-7324169434875653705.post-13949185603129232562019-10-08T17:02:00.002+03:002019-10-08T18:01:04.829+03:00Изображиния. Светлинен ефект на фенерчетоИзображиния. Светлинен ефект на фенерчето<br />
<a name='more'></a><br />
<div class="spotlight-wrap">
<div class="spotlight">
</div>
</div>
<style>.spotlight-wrap {
background: url(https://c.wallhere.com/photos/c7/f7/2000x1294_px_action_adventure_dragon_Dragons_dungeons_fantasy_Forgotten-1569879.jpg!d) no-repeat center center;
background-size: cover;
height: 500px;
cursor: none;
position: relative;
}
.spotlight-wrap a {
position: absolute;
z-index: 1;
bottom: 30px;
right: 40px;
font-family: "Roboto", Arial, sans-serif;
font-size: 26px;
line-height: 34px;
color: #AAA;
transition: color 0.5s;
text-shadow: 0 0 12px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.5);
}
.spotlight-wrap a:hover {
color: #FFF;
}
.spotlight-wrap .spotlight {
position: absolute;
height: 500px;
width: 100%;
background-image: radial-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
}</style><br />
<script>
$(window).mousemove(function(e){
let w = $('.spotlight').innerWidth(),
h = $('.spotlight').innerHeight(),
t = e.pageY - $('.spotlight').offset().top,
l = e.pageX - $('.spotlight').offset().left;
$('.spotlight').css('background-image', 'radial-gradient(circle at '+ (l / w * 100) +'% '+ (t / h * 100) +'%, transparent 80px, rgba(0, 0, 0, 0.8) 120px)');
}); </script><br />
<br />
<br />
<br />Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.com0tag:blogger.com,1999:blog-7324169434875653705.post-60127572111704866732019-09-28T06:13:00.001+03:002019-09-28T06:50:59.198+03:00Анимирани рамки на CSS3Рамка - първи вариант<br />
<a name='more'></a><br />
<br />
<div class="ramka-1"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLmsG6VvEiVKOd08Xu8h4Pcwc4QEwECir1Opc4J5QnYvjs8b_kNwDLbsTp4bLxudCTBtbsdT9Dn5z5SBvY4b2mzh01paQ-lpz0Dw2_tG0MGG5MQ-8J7wQXXKH9d5rAE7lEyyitvlWwX29N/s1600/izobrajenie1.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLmsG6VvEiVKOd08Xu8h4Pcwc4QEwECir1Opc4J5QnYvjs8b_kNwDLbsTp4bLxudCTBtbsdT9Dn5z5SBvY4b2mzh01paQ-lpz0Dw2_tG0MGG5MQ-8J7wQXXKH9d5rAE7lEyyitvlWwX29N/s200/izobrajenie1.jpg" width="100" height="100" data-original-width="150" data-original-height="150" /></a></div><style>
.ramka-1 {
position: relative;
z-index: 0;
width: 200px;
height: 200px;
border-radius: 10px;
overflow: hidden;
margin: 30px auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-family: 'Roboto Condensed', sans-serif;
}
.ramka-1::before {
content: '';
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-color: #EF6C00;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(#EF6C00, #EF6C00), linear-gradient(#FFE0B2, #FFE0B2), linear-gradient(#EF6C00, #EF6C00), linear-gradient(#FFE0B2, #FFE0B2);
animation: anim-ramka-1 4s linear infinite;
}
.ramka-1::after {
content: '';
position: absolute;
z-index: -1;
left: 6px;
top: 6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
background: white;
border-radius: 5px;
}
@keyframes anim-ramka-1 {
100% {
transform: rotate(1turn);
}
}</style><br />
<br />
<br />
Рамка - втори вариант<br />
<br />
<div class="ramka-2">Рамка. Вариант 2</div><style>
.ramka-2{
width: 200px;
height: 200px;
background-color: #FFF;
position: relative;
margin: 60px auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-family: 'Roboto Condensed', sans-serif;
box-shadow: inset 6px 6px 8px 0 rgba(0,0,0,0.4);
}
.ramka-2:after,
.ramka-2:before {
mix-blend-mode:multiply;
filter:none;
z-index: -1;
content:'';
width: calc(100% + 90px);
height: calc(100% + 90px);
position: absolute;
animation: anim-ramka-2 8s ease-in-out infinite;
}
@keyframes anim-ramka-2 {
0%, 100% {
clip-path: polygon(0 0, calc(100% - (33px)) calc(0% + (33px)), 100% 100%, calc(0% + (33px)) calc(100% - (33px)));
}
50% {
clip-path: polygon(calc(0% + (33px)) calc(0% + (33px)), 100% 0, calc(100% - (33px)) calc(100% - (33px)), 0 100%);
}
}
.ramka-2:after{
animation-delay: -5s;
background-color: #00796B;
clip-path: polygon(0 0, calc(100% - (33px)) calc(0% + (33px)), 100% 100%, calc(0% + (33px)) calc(100% - (33px)));
}
.ramka-2:before {
background-color: #B2DFDB;
clip-path: polygon(calc(0% + (33px)) calc(0% + (33px)), 100% 0, calc(100% - (33px)) calc(100% - (33px)), 0 100%);
}
.ramka-2:hover:after{
animation-delay: 1s;
}
.ramka-2:hover:before,
.ramka-2:hover:after {
animation-duration: 2s;
}
</style><br />
<br />
<br />
Рамка - трети вариант<br />
<br />
<div class="ramka-3">Рамка. Вариант 3</div><style>
.ramka-3 {
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin: 30px auto;
width: 200px;
height: 200px;
font-size: 24px;
font-family: 'Roboto Condensed', sans-serif;
box-shadow: inset 0 0 0 2px #1B5E20;
}
.ramka-3::before,
.ramka-3::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
z-index: -1;
margin: -5%;
box-shadow: inset 0 0 0 6px #EF6C00;
animation: anim-ramka-3 8s linear infinite;
}
.ramka-3::before {
animation-delay: -4s;
}
.ramka-3:hover::after,
.ramka-3:hover::before {
background-color: #EF6C00;
}
@keyframes anim-ramka-3 {
0%, 100% {
clip: rect(0px, 220px, 6px, 0px);
}
25% {
clip: rect(0px, 6px, 220px, 0px);
}
50% {
clip: rect(218px, 220px, 220px, 0px);
}
75% {
clip: rect(0px, 220px, 220px, 218px);
}
}</style><br />
<br />
Рамка - четвърти вариант<br />
<br />
<br />
<div class="ramka-4"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLmsG6VvEiVKOd08Xu8h4Pcwc4QEwECir1Opc4J5QnYvjs8b_kNwDLbsTp4bLxudCTBtbsdT9Dn5z5SBvY4b2mzh01paQ-lpz0Dw2_tG0MGG5MQ-8J7wQXXKH9d5rAE7lEyyitvlWwX29N/s1600/izobrajenie1.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLmsG6VvEiVKOd08Xu8h4Pcwc4QEwECir1Opc4J5QnYvjs8b_kNwDLbsTp4bLxudCTBtbsdT9Dn5z5SBvY4b2mzh01paQ-lpz0Dw2_tG0MGG5MQ-8J7wQXXKH9d5rAE7lEyyitvlWwX29N/s200/izobrajenie1.jpg" width="100" height="100" data-original-width="150" data-original-height="150" /></a></div><style>
.ramka-4 {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
margin: 30px auto;
border: 8px solid #00C853;
background: #FFF;
border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
box-shadow: 15px 15px 50px rgba(208,255,0,255);
animation: anim-ramka-4 10s infinite;
font-size: 24px;
font-family: 'Roboto Condensed', sans-serif;
}
@keyframes anim-ramka-4 {
0% {
border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
box-shadow: 15px 15px 50px rgba(208,255,0,255);
}
25% {
border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
}
50% {
border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
box-shadow: -10px -5px 50px rgba(208,255,0,255);
}
75% {
border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
}
}
</style><br />
<br />
Рамка - пети вариант<br />
<br />
<div class="ramka-5-wr"><div class="ramka-5">Рамка 5</div></div><style>
.ramka-5-wr {
width: 200px;
height: 200px;
box-sizing: border-box;
padding: 15px;
position: relative;
overflow: hidden;
margin: 30px auto;
}
.ramka-5-wr .ramka-5 {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-family: 'Roboto Condensed', sans-serif;
}
.ramka-5-wr::before {
content: '';
position: absolute;
width: 150%;
height: 150%;
background: repeating-linear-gradient(
#FFF 0%,
#FFF 7.5px,
#FF8A65 7.5px,
#FF8A65 15px,
#FFF 15px,
#FFF 22.5px,
#FF8A65 22.5px,
#FF8A65 30px);
transform: translateX(-20%) translateY(-20%) rotate(-45deg);
animation: anim-ramka-5 20s linear infinite;
}
.ramka-5-wr .ramka-5 {
position: relative;
background-color: #FFF;
flex-direction: column;
box-sizing: border-box;
padding: 30px;
text-align: center;
font-family: sans-serif;
z-index: 2;
}
.ramka-5-wr,
.ramka-5-wr .ramka-5 {
box-shadow: 0 0 2px #FF7043, 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
@keyframes anim-ramka-5 {
from {
background-position: 0;
}
to {
background-position: 0 450px;
}
}</style><br />
Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.com0tag:blogger.com,1999:blog-7324169434875653705.post-90393782979720664922019-09-28T05:00:00.003+03:002019-09-28T05:19:59.205+03:00Появяваща се рамка<div style="text-align: center;">
<div style="text-align: left;">
Появяваща се рамка на текст или изображение - примери</div>
</div>
<a name='more'></a><br />
<br />
<br />
<br />
Моля, сложете курсора върху текста по-долу.<br />
<style>.item{width:90%;margin:auto;position:relative;padding:20px;}
.item:after{display:block;content:"";width:0;height:100%;transition:all .5s linear;left:50%;right:50%;}
.item:hover:after{border:5px solid red; position:absolute;top:0;bottom:0;width:100%;left:0; right:0;}</style><br />
<br />
<div class="item">
Lorem ipsum dolor sit amet, vim nemore conceptam id, an has iusto paulo omittam. Pro eu legere scripserit! Ad magna iisque consequuntur mei, laudem prompta prodesset ad eum, ut illud facilisi assueverit usu? Cu quas aeque per. Praesent philosophia eum ex, vel noster consequat conceptam te! Eu graeci legimus quo, an nibh tractatos eos, usu suscipit tractatos ei.</div>
<br />
<br />
<style>.item1{width:20%;margin:auto;position:relative;padding:20px;}
.item1:after{display:block;content:"";width:0;height:100%;transition:all .5s linear;left:50%;right:50%;}
.item1:hover:after{border:5px solid Green; position:absolute;top:0;bottom:0;width:100%;left:0; right:0;}</style><br />
А сега сложете курсора върху изображението и го задръжте за кратко.<br />
<br />
<div class="item1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZX9ZfKZhK9oB4aEIIiosbfzTtBbtKFerT5gZbjX5EbtHTCsUc5YMun5Qh2uDvnKGv6lE-N8Zl8oAPrOlv7eO0kFOcfGpQUbrmwZkg8yICdCFaTnTlt2Wg5q1Q2KTXdgNljk5w21QALrtg/w140-h140-p/img2.png" /></div>
Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.com0tag:blogger.com,1999:blog-7324169434875653705.post-46027905037669385622019-09-25T18:08:00.003+03:002019-09-25T18:09:08.682+03:00Публикация с анимация Или го заменете с този CSS код, ако искате да добавите към навигацията анимацията Gradient<br />
<a name='more'></a>
<style type="text/css">
/* Membagi Halaman di Postingan */
@keyframes Gradients{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{background:#517aef;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;margin:30px auto;text-align:center;padding:10px;border-radius:3px;overflow:hidden;box-shadow:0 10px 10px -5px rgba(0,0,0,0.15);animation:Gradients 15s ease infinite}.pagearl .buttonar{background:rgba(255,255,255,.2);font-weight:bold;display:inline-block;color:#fff;text-decoration:none;text-align:center;border-right:0;font-size:14px;padding:.4rem .8rem;border:0;margin:0 5px 0 0;border-radius:3px;box-shadow:0 1px 5px rgba(0,0,0,0.1);transition:all .6s}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:rgba(255,255,255,.45);color:#fff;box-shadow:0 1px 10px rgba(0,0,0,0.1)}.buttonar.arlinapage,.buttonar.arlinapage:hover{background:rgba(255,255,255,.95);color:#0984e3}
</style>
<br />
<div class="post-content content_1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique!
</div>
<div class="post-content content_2">
Laborum earum sunt culpa vitae excepturi. Eum, at, illum! Quaerat inventore saepe, impedit incidunt suscipit, ipsum hic eligendi accusantium. Vero rerum vitae earum repellendus eligendi id dolores possimus ipsam, accusantium est atque eum, ea at, porro placeat totam nihil natus sit. Tempore obcaecati hic, veniam quod doloremque ducimus similique, reiciendis maiores velit voluptatibus voluptatem totam officiis ab.
</div>
<div class="post-content content_3">
Voluptate laudantium officia voluptates enim magni expedita nihil commodi itaque rem iure eaque, eius cumque dignissimos, ullam praesentium quas iusto dicta sint beatae saepe qui impedit eum est. Cupiditate eos unde eum maiores, repellendus in rerum natus doloremque accusamus nam labore aspernatur sequi optio iste quisquam quasi at, tempora facilis? Et amet ullam magni voluptates reiciendis, id culpa.
</div>
<div class="post-content content_4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique!
</div>
<div class="post-content content_5">
Laborum earum sunt culpa vitae excepturi. Eum, at, illum! Quaerat inventore saepe, impedit incidunt suscipit, ipsum hic eligendi accusantium. Vero rerum vitae earum repellendus eligendi id dolores possimus ipsam, accusantium est atque eum, ea at, porro placeat totam nihil natus sit. Tempore obcaecati hic, veniam quod doloremque ducimus similique, reiciendis maiores velit voluptatibus voluptatem totam officiis ab.
</div>
<div class="arlinapage">
</div>
<div class="pagearl">
</div>
Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.com0tag:blogger.com,1999:blog-7324169434875653705.post-43211044244483835322019-09-25T18:04:00.001+03:002019-09-27T18:44:58.488+03:00Публикация - минималистичен видЗаменете CSS кода с този, ако искате навигацията да бъде с минималистичен вид<br />
<a name='more'></a> <style>
<style type='text/css'>
/* Membagi Halaman di Postingan */
.post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{position:relative;background:#fff;margin:0 auto 20px auto;text-align:center;padding:20px;font-size:14px}.pagearl .buttonar{background:#e74c3c;font-weight:bold;display:inline-block;color:#fff;text-decoration:none;text-align:center;border-right:0;font-size:14px;padding:.4rem .8rem;border:0;margin:0 4px 0 0;border-radius:3px;transition:all .2s}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:#c0392b;color:#fff}.buttonar.arlinapage,.buttonar.arlinapage:hover{background:#333;color:#fff}
</style>
<div class="post-content content_1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique!
</div><div class="post-content content_2">Laborum earum sunt culpa vitae excepturi. Eum, at, illum! Quaerat inventore saepe, impedit incidunt suscipit, ipsum hic eligendi accusantium. Vero rerum vitae earum repellendus eligendi id dolores possimus ipsam, accusantium est atque eum, ea at, porro placeat totam nihil natus sit. Tempore obcaecati hic, veniam quod doloremque ducimus similique, reiciendis maiores velit voluptatibus voluptatem totam officiis ab.
</div><div class="post-content content_3">Voluptate laudantium officia voluptates enim magni expedita nihil commodi itaque rem iure eaque, eius cumque dignissimos, ullam praesentium quas iusto dicta sint beatae saepe qui impedit eum est. Cupiditate eos unde eum maiores, repellendus in rerum natus doloremque accusamus nam labore aspernatur sequi optio iste quisquam quasi at, tempora facilis? Et amet ullam magni voluptates reiciendis, id culpa.
</div><div class="post-content content_4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique!
</div><div class="post-content content_5">Laborum earum sunt culpa vitae excepturi. Eum, at, illum! Quaerat inventore saepe, impedit incidunt suscipit, ipsum hic eligendi accusantium. Vero rerum vitae earum repellendus eligendi id dolores possimus ipsam, accusantium est atque eum, ea at, porro placeat totam nihil natus sit. Tempore obcaecati hic, veniam quod doloremque ducimus similique, reiciendis maiores velit voluptatibus voluptatem totam officiis ab.
</div><div class="arlinapage"></div><div class="pagearl"></div>Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.com0tag:blogger.com,1999:blog-7324169434875653705.post-50665144693197121972019-09-25T17:58:00.003+03:002019-09-25T18:00:07.079+03:00Публикация на отделни страници с навигационни номера<div class="post-content content_1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! <br />
<a name='more'></a>Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique! Laborum earum sunt culpa vitae excepturi. Eum, at, illum! Quaerat inventore saepe, impedit incidunt suscipit, ipsum hic eligendi accusantium. Vero rerum vitae earum repellendus eligendi id dolores possimus ipsam, accusantium est atque eum, ea at, porro placeat totam nihil natus sit.
</div>
<div class="post-content content_2">
Tempore obcaecati hic, veniam quod doloremque ducimus similique, reiciendis maiores velit voluptatibus voluptatem totam officiis ab. Voluptate laudantium officia voluptates enim magni expedita nihil commodi itaque rem iure eaque, eius cumque dignissimos, ullam praesentium quas iusto dicta sint beatae saepe qui impedit eum est. Cupiditate eos unde eum maiores, repellendus in rerum natus doloremque accusamus nam labore aspernatur sequi optio iste quisquam quasi at, tempora facilis? Et amet ullam magni voluptates reiciendis, id culpa.
</div>
<div class="post-content content_3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique! Laborum earum sunt culpa vitae excepturi. Eum, at, illum! Quaerat inventore saepe, impedit incidunt suscipit, ipsum hic eligendi accusantium. Vero rerum vitae earum repellendus eligendi id dolores possimus ipsam, accusantium est atque eum, ea at, porro placeat totam nihil natus sit.
</div>
<div class="post-content content_4">
Tempore obcaecati hic, veniam quod doloremque ducimus similique, reiciendis maiores velit voluptatibus voluptatem totam officiis ab. Voluptate laudantium officia voluptates enim magni expedita nihil commodi itaque rem iure eaque, eius cumque dignissimos, ullam praesentium quas iusto dicta sint beatae saepe qui impedit eum est. Cupiditate eos unde eum maiores, repellendus in rerum natus doloremque accusamus nam labore aspernatur sequi optio iste quisquam quasi at, tempora facilis? Et amet ullam magni voluptates reiciendis, id culpa.
</div>
<div class="post-content content_5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique! Laborum earum sunt culpa vitae excepturi. Eum, at, illum! Quaerat inventore saepe, impedit incidunt suscipit, ipsum hic eligendi accusantium. Vero rerum vitae earum repellendus eligendi id dolores possimus ipsam, accusantium est atque eum, ea at, porro placeat totam nihil natus sit.
</div>
<div class="arlinapage">
</div>
<div class="pagearl">
</div>
Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.com0tag:blogger.com,1999:blog-7324169434875653705.post-55210382801078012102019-07-06T07:46:00.000+03:002019-09-25T18:21:26.553+03:00Случаен фонНатиснете клавиша F5 на вашата клавиатура, за да опресните страницата.<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus, tortor sit amet rhoncus lobortis, leo libero suscipit justo, ac tincidunt ligula eros sit amet sem. <br />
<a name='more'></a>Sed lobortis nisl sed diam porttitor, quis lacinia felis lacinia. In urna nulla, consectetur nec nisi vitae, laoreet pellentesque augue. Donec feugiat, velit eu imperdiet semper, ante sem suscipit nulla, congue suscipit ipsum tellus commodo ipsum. Sed pharetra orci a volutpat faucibus.
Donec feugiat, velit eu imperdiet semper, ante sem suscipit nulla, congue suscipit ipsum tellus commodo ipsum. Sed pharetra orci a volutpat faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus, tortor sit amet rhoncus lobortis, leo libero suscipit justo, ac tincidunt ligula eros sit amet sem. Sed lobortis nisl sed diam porttitor, quis lacinia felis lacinia. In urna nulla, consectetur nec nisi vitae, laoreet pellentesque augue. Donec feugiat, velit eu imperdiet semper, ante sem suscipit nulla, congue suscipit ipsum tellus commodo ipsum. Sed pharetra orci a volutpat faucibus.
Donec feugiat, velit eu imperdiet semper, ante sem suscipit nulla, congue suscipit ipsum tellus commodo ipsum. Sed pharetra orci a volutpat faucibus.
Sed lobortis nisl sed diam porttitor, quis lacinia felis lacinia. In urna nulla, consectetur nec nisi vitae, laoreet pellentesque augue.
Sed lobortis nisl sed diam porttitor, quis lacinia felis lacinia. In urna nulla, consectetur nec nisi vitae, laoreet pellentesque augue. Donec feugiat, velit eu imperdiet semper, ante sem suscipit nulla, congue suscipit ipsum tellus commodo ipsum. Sed pharetra orci a volutpat faucibus.
Donec feugiat, velit eu imperdiet semper, ante sem suscipit nulla, congue suscipit ipsum tellus commodo ipsum. Sed pharetra orci a volutpat faucibus.Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.com0tag:blogger.com,1999:blog-7324169434875653705.post-11344111874198286032017-12-06T17:38:00.000+02:002019-01-14T06:55:59.840+02:00Оформяне на текст<div align="center" style="border: 1px solid #9b089e;">
<div class="mw-content-ltr" dir="ltr" id="mw-content-text" lang="bg">
<div class="mw-parser-output">
<table class="metadata plainlinks ambox ambox-serious" role="presentation">
<tbody>
<tr>
<td class="mbox-image"><div style="width: 52px;">
<a class="image" href="https://draft.blogger.com/wiki/%D0%A4%D0%B0%D0%B9%D0%BB:Question_book-4.svg"><img alt="Question book-4.svg" data-file-height="204" data-file-width="262" height="31" src="//upload.wikimedia.org/wikipedia/commons/thumb/6/64/Question_book-4.svg/40px-Question_book-4.svg.png" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/6/64/Question_book-4.svg/60px-Question_book-4.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/6/64/Question_book-4.svg/80px-Question_book-4.svg.png 2x" width="40" /></a></div>
</td>
<td class="mbox-text">TEXT </td>
<td class="mbox-imageright"><div style="width: 52px;">
<a class="image" href="https://draft.blogger.com/wiki/%D0%A4%D0%B0%D0%B9%D0%BB:Nuvola_apps_important.svg"><img alt="Nuvola apps important.svg" data-file-height="500" data-file-width="600" height="33" src="//upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Nuvola_apps_important.svg/40px-Nuvola_apps_important.svg.png" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Nuvola_apps_important.svg/60px-Nuvola_apps_important.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Nuvola_apps_important.svg/80px-Nuvola_apps_important.svg.png 2x" width="40" /></a></div>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.com0tag:blogger.com,1999:blog-7324169434875653705.post-49369194026059124842017-12-04T13:49:00.001+02:002018-01-24T09:58:03.302+02:00Увеличение на изображение с клик на мишката<div style="text-align: center;">
<style type="text/css">
.popup {width: 200px; cursor:pointer;}
.popup:focus {width: auto;}
</style></div>
<img class="popup" imageanchor="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5KoLArzmXp5C5bAfPH7tCHyGqHPbscSxZjybilQ6gbFBcGzqHnUpBY5TNVAB3KNK5VOVdLKEU_bjozcfdcBQJ1a9jG2otpDtVNuZPclDwfnu4ekyIpGBkiDICtQNCemfyLzt9AmsS92S9/s1600/bugenvilja3.jpg" tabindex="1" />
Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.comtag:blogger.com,1999:blog-7324169434875653705.post-84387068994534780102017-12-03T08:02:00.002+02:002017-12-03T08:10:43.388+02:00Блок от хипервръзки в публикация<style>.link-btn{
width:100%;
position:relative;
padding-top:15px
}
.link-btn:after {
clear: both;
content: "";
display:block;
}
.label-link-btn{
font-size:12px; /* размер на шрифта */
color:#333; /* цвят на текста */
position:absolute;
top:0;
left:0;
line-height:1;
}
.label-link-btn svg{
width:15px;
height:15px;
vertical-align:-3px;
}
.label-link-btn svg path{
fill:#00aecd;
}
.link-btn-left,.link-btn-right{
width:calc(50% - 10px);
float:left
}
.link-btn-left{
margin-right:10px
}
.link-btn-right{
margin-left:10px
}
.tombol-link {
width: 100%;
height: 21px; /* височина на отделен блок */
display: block;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
text-align: center;
line-height: 41px;
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.35) inset, 0px 1px 1px rgba(0, 0, 0, 0.3);
align-items: center;
justify-content: center;
background-color: #2288BB; /* цвят на фона */
border: 1px solid #ffffff; /* цвят и ширина на рамката */
border-radius: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
color: #ffffff;
font-weight: normal;
font-family: arial, sans-serif;
font-size: 14px;
margin: 5px auto;
}
.tombol-link:hover {
background-color: #fff; /* цвят при фиксиране на курсора */
color: #000;
}
@media screen and (max-width:640px){
.link-btn-left,.link-btn-right{
width:100%;
float:none;
margin:0 auto;
}
}
</style>
<div class="link-btn">
<div class="link-btn-left">
<a class="tombol-link" href="http://www.blogzablogove.com/2017/11/avtomatizirana-priturka-posledni-publikacii.html" target="_blank">Последни публикации</a>
<a class="tombol-link" href="http://www.blogzablogove.com/2017/07/dve-stilni-kontaktni-formi-za-blogger.html" target="_blank">Контактна форма</a>
</div>
<div class="link-btn-right">
<a class="tombol-link" href="http://www.blogzablogove.com/2017/01/priturka-sluchajna-publikaciya.html" target="_blank">Случайна публикация</a>
<a class="tombol-link" href="http://www.blogzablogove.com/2016/11/socialni-butoni-za-vashiya-blog.html" target="_blank">Социални бутони</a>
</div>
<br />
<div class="label-link-btn">
<span style="font-size: large;"><u><svg x="0px">
<path d="M7.5,1.5a6,6,0,1,0,0,12a6,6,0,1,0,0,-12m0,1a5,5,0,1,1,0,10a5,5,0,1,1,0,-10ZM6.625,11l1.75,0l0,-4.5l-1.75,0ZM7.5,3.75a1,1,0,1,0,0,2a1,1,0,1,0,0,-2Z"></path>
</svg>
Интересно е да прочетете и
</u></span></div>
</div>
Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.comtag:blogger.com,1999:blog-7324169434875653705.post-52067221110092233032017-03-26T17:01:00.001+03:002018-10-13T06:59:57.472+03:00Красиво оформен текст<center>
<div class="code1">
Morbi tortor orci, lobortis in risus a, gravida consectetur mauris. In felis lectus, dictum ut porttitor nec, blandit ut est. Pellentesque non sollicitudin ex, ac rutrum nisi. Etiam et sem vitae nunc venenatis tempus ut nec neque. Praesent efficitur purus eros, ac efficitur velit pretium vel. Curabitur eget mi rutrum,<a name='more'></a>finibus urna vitae, hendrerit massa. Fusce dignissim, augue eget luctus ultricies, libero turpis hendrerit nunc, in scelerisque dui massa eget nisl. Donec vitae tincidunt lacus. Cras lobortis massa eu diam elementum, et tempor magna suscipit. Duis fringilla interdum nisl, at luctus tellus feugiat ac.</div>
</center>
Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.comtag:blogger.com,1999:blog-7324169434875653705.post-17645789126564142562017-03-18T16:49:00.003+02:002018-12-24T07:06:29.187+02:00ТЕКСТ НА ПУБЛИКАЦИЯ НА КОЛОНИ<div class="cronos">
<span style="color: blue;">Morbi tortor orci, lobortis in risus a, gravida consectetur mauris. In felis lectus, dictum ut porttitor nec, blandit ut est. Pellentesque non sollicitudin ex, ac rutrum nisi. Etiam et sem vitae nunc venenatis tempus ut nec neque. Praesent efficitur purus eros, ac efficitur velit pretium vel. Curabitur eget mi rutrum, finibus urna vitae, hendrerit massa. Fusce dignissim, augue eget luctus ultricies, libero turpis</span><br />
<span style="color: blue;">hendrerit nunc, in scelerisque dui massa eget nisl. Donec vitae tincidunt lacus. Cras lobortis massa eu diam elementum, et tempor magna suscipit. Duis fringilla interdum nisl, at luctus tellus feugiat ac. Aenean mollis vestibulum elit eu maximus. Aenean finibus quis arcu a malesuada. Integer ornare metus quis nisl laoreet ultrices. Aenean et lacus at erat tincidunt interdum nec at tellus. Integer at egestas ipsum. Nullam at mi a eros feugiat molestie a quis erat. Vivamus eu venenatis ligula. Maecenas quis porta dui. Aliquam erat volutpat. Donec interdum dolor sit amet maximus suscipit. Mauris nec lectus libero. Etiam quis orci in quam tincidunt cursus vitae id augue. Suspendisse vulputate massa vel quam vulputate, in tincidunt orci porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse velit magna, mollis sed aliquam eget, hendrerit eu dolor. Donec ut interdum leo. Integer vehicula sollicitudin justo, vel pharetra augue aliquam et. Aenean imperdiet pharetra nunc, eget viverra enim tempus vitae. In nec lacinia risus.</span></div>
Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.com0tag:blogger.com,1999:blog-7324169434875653705.post-75470121843007914952017-02-27T05:40:00.004+02:002019-09-28T07:32:16.430+03:00Притурка информер<div align="center">
<div id="background">
<table>
<tbody>
<tr><td><div class="view view-first">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpcpxRQD5z8yqDJVoMfLcrPFlq6uN8-M1rdIGHMf733a_53Zswm6EQ9q5chmxyai9hYh_41-u8d9FF0IuSnIBFxEQB0o37Bd4S2GWzF_Fn1kKmiMkM4vNUF_wgfvWtDuvsSr5PIVGsxPhg/s640/pstrota-ot-chuvstva1.jpg" />
<br />
<div class="mask">
<h2>
Пъстрота от чувства</h2>
Пъстрота от чувства-радост, веселие, искрена усмивка.<br />
<a class="info" href="https://evgenijaivanova.blogspot.bg/2016/07/pstrota-ot-chuvstva.html">Повече</a>
</div>
</div>
</td>
<td><div class="view view-first">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4lnBCyk2n4OX9o2KzGneh6HuIGEPbeZvR5tLCBzQILv_4YgJozk_cdx5EhdpgT7WigTGbQ7cw7uSDS84z9kl2ZE_vXCo8nAKYlPeW44dpoS4TNVWgWpQB_D6P_y-HWtfsQGn8GwXExxzo/s200/spokoistvie_i_bljan.png" />
<br />
<div class="mask">
<h2>
Спокойствие и блян </h2>
Новата картина на Евгения. В синьо и розово. <br />
<a class="info" href="http://evgenijaivanova.blogspot.bg/2016/07/spokojstvie-i-blyan.html">Повече</a>
</div>
</div>
</td>
</tr>
<tr>
<td><div class="view view-first">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyZyYfQpe4gG_BNk7Fr05YPGwK9dM4DBbQGDfVKybh-paq8OGEl7RB7W27t6PEtbyoMy5iHvsM4GGy5uw78BZBnxO2JqSfbq8H9fFQu8_854OdLXAj5EoYLijprRYSk6B8bW2dZkCdUB-5/s200/kralski_cvjat1.png" />
<br />
<div class="mask">
<h2>
Пурпур-кралски цвят</h2>
Пурпур - кралски цвят - знак на властта, благородството, лукса и амбицията.<br />
<a class="info" href="http://evgenijaivanova.blogspot.bg/2016/08/purpur-kralski-cvyat.html">Повече</a>
</div>
</div>
</td>
<td><div class="view view-first">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgve3d8or86NgpLmUi90bzARrjH-oIuGGW92tesjFdfmL7NOPSdhTYCKW2NzmCMhNE90i7EVu-bXxV69nkqj0NCuvSac2hrW7_7pN4P21Z2td0qfpkFmHH3HOqZgsm-mUgqzoikLjen6fm9/s200/cherveno_i_bjalo2-1-.png" />
<br />
<div class="mask">
<h2>
Червено и бяло </h2>
Новата картина на Евгения. Червено и бяло - любов и съвършенство. <br />
<a class="info" href="http://evgenijaivanova.blogspot.bg/2016/08/cherveno-i-byalo-lyubov-i-svrshenstvo.html">Повече</a>
</div>
</div>
</td>
</tr>
</tbody></table>
</div>
</div>
<style>
#background {
background: #CCCCCC ; width:100%; border: 1px solid #C9C299;
}
.view-first img {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(219,127,8, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-first h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first:hover img {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
.view-first a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.view-first:hover p {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-first:hover a.info {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.view {
width: 270px;
height: 200px;
margin: 0px;
border: 2px solid #000000;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background:#fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 270px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 8px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 5px 40px ;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
</style>
Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.comtag:blogger.com,1999:blog-7324169434875653705.post-68380855114439512582017-02-10T05:02:00.004+02:002019-01-14T06:56:33.010+02:00Красив слайдер, съчетаващ изображения с текст<center>
<style>
.Slidebox{
float:center;
}
.cover {
position: relative;
width: 590px;
height: 282px;
margin: 20px auto;
background-color: #f7f7f7;
z-index: 1;
padding: 10px;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.left_gate{
position: absolute;
background: #DBDCDE;
bottom: 0; right: 50%;
left: 0;
top: 0;
border:1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.cover:hover .left_gate{
right: 100%;
left: -50%;
}
.right_gate{
position: absolute;
background: #DBDCDE;
bottom: 0;
left: 50%;
right: 0;
top: 0;
border:1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.cover:hover .right_gate{
left: 100%;
right: -50%;
}
.slide_in {
overflow: hidden;
}
.slide_in .left_gate {
background: url(https://2.downloader.disk.yandex.ru/preview/98e1744ab71d7ba830d5315c0f0efe46903b30393e2a5d1de10015cb879bd712/inf/iQnUlFCP7cg_SBGKwpE8ALF-P-VB9VP23-_EPdBHPml0aB7e5bFV4dVKN-Mf65EidbrLNHvkV-iboglyAcK9Aw%3D%3D?uid=129048610&filename=img2.png&disposition=inline&hash=&limit=0&content_type=image%2Fpng&tknv=v2&size=300x300)#DBDCDE;
border:1px solid #F0F0F0;
}
.slide_in .right_gate {
background: url(https://3.downloader.disk.yandex.ru/preview/d144b1b019a4d05b5e25579ff750b2f96e07439d8569f91ba6de9298fd859ab5/inf/iQnUlFCP7cg_SBGKwpE8ACwLO9sXXBbsT9cgQL72rK_ZAwaVWFzmx4zznspkyXXAdvnHKYkvsAwhJoVYvpnlYw%3D%3D?uid=129048610&filename=img3.jpg&disposition=inline&hash=&limit=0&content_type=image%2Fjpeg&tknv=v2&size=300x300)#DBDCDE;
border:1px solid #F0F0F0;
}
.cover img {
margin-top: 15px;
}
</style>
<br />
<div class="Slidebox">
<div class="cover slide_in">
<div class="left_gate">
</div>
<div class="right_gate">
</div>
Изберете вашите изображения и поставете URL адресите им в кода на мястото, маркирано в червено. Първият URL адрес е на изображението в ляво, а вторият - на изображението в дясно. Ширината и височината на блока са отбелязани в синьо. Фонът също. Всички тези стойности може да промените по своему. Моите изображения в примера, който ви показвам, са с размер 300 х 300 пиксела. Така те ще се изобразят правилно. Подберете и текста, който искате да се покаже при отварянето на слайдера.Мястото му лесно ще намерите в примерния код. Може и да експериментирате в други участъци на кода. Кодът на слайдера се поставя директно в редактора на публикацията на нужното място в режим на HTML.
</div>
</div>
</center>
Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.comtag:blogger.com,1999:blog-7324169434875653705.post-44191807543266031022017-01-31T05:40:00.001+02:002017-01-31T05:48:45.770+02:00<center><style>.imagepluscontainer{
position: relative;
z-index: 1;
}
.imagepluscontainer img{
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.imagepluscontainer:hover img{
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.imagepluscontainer div.desc{
position: absolute;
width: 90%;
z-index: 1;
bottom: 0;
left: 5px;
padding: 8px;
background: #c0c0c0;
color: #000000;
-moz-border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0;
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s;
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}
.imagepluscontainer div.desc a{
color: white;
}
.imagepluscontainer:hover div.desc{
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1;
}
</style></center>
<div class="imagepluscontainer" style="height: 199px; width: 220px; z-index: 2;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHUGaBeHrk1vPvc6T4mNLtuBPog7By7_PU89wO-IEBVoyx7KHlaZx-VpbFSTSs-eeql7n7cs-YNci2n6eVYssvv48kpS3_X0oYryAh7UB4CeYTz8tLy3kos27tSeerX2nN1YFBc8ldvDNy/h120/roza.png" />
<br />
<div class="desc">
Долината на Розите е област в България, намираща се южно от Стара планина, между нея и източната част на долна Средна гора. Състои се от две речни долини - на Стряма на запад и на Тунджа на изток, или от Карловското и Казанлъшкото поле.
</div>
</div>
Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.comtag:blogger.com,1999:blog-7324169434875653705.post-89765993831669571322017-01-03T13:48:00.002+02:002018-10-02T10:35:39.810+03:00<ul id="slides">
<li class="slide showing"> Какви са вашите успехи, драги читатели на блога? </li>
<li class="slide"> Ще разглеждаме важни теми за вашия блог. </li>
<li class="slide"> Ще намерите отговор на много важни за вас въпроси. </li>
<li class="slide"> Ще ви предлагам по няколко варианта за всяка тема. </li>
<li class="slide"> Всичко тук се основава на опита ми. Изборът е ваш. </li>
</ul>
<script type="text/javascript">
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,3000);
function nextSlide(){
slides[currentSlide].className = 'slide';
currentSlide = (currentSlide+1)%slides.length;
slides[currentSlide].className = 'slide showing';
}
</script>
<style>
#slides{
position: relative;
height: 100px;
padding: 0px;
margin: 20px;
list-style-type: none;
}
.slide{
position: absolute;
left: 0px;
top: 0px;
width: 150%;
height: 150%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.showing{
opacity: 1;
z-index: 2;
}
.slide{
text-align:center;
font-size: 22px;
padding: 10px;
box-sizing: border-box;
color: #333;
}
.slide:nth-of-type(1){
background: #FE9980;
}
.slide:nth-of-type(2){
background: #FEE680;
}
.slide:nth-of-type(3){
background: #CCFEBF;
}
.slide:nth-of-type(4){
background: #BFCFFE;
}
.slide:nth-of-type(5){
background: #FE80DF;
}
</style>
Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.comtag:blogger.com,1999:blog-7324169434875653705.post-13136552114768430222016-12-26T09:13:00.004+02:002019-01-14T06:56:55.739+02:00Още за блоговете на Blogspot<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkrTqckCBwjMyfFTsyw4rvHytbZJtv7FCabtB4JZu2xyFhL6SdMpe6vdnkyfCqrbPbYPGeW5RLqdYk3ecI96tKCjFxRi74UF6kL4OtELYuk7i_PRya3EUcGQ32CdBiMhwtKhep_f4I1hEd/s1600/nachalo1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkrTqckCBwjMyfFTsyw4rvHytbZJtv7FCabtB4JZu2xyFhL6SdMpe6vdnkyfCqrbPbYPGeW5RLqdYk3ecI96tKCjFxRi74UF6kL4OtELYuk7i_PRya3EUcGQ32CdBiMhwtKhep_f4I1hEd/s200/nachalo1.jpg" width="200" /></a></div>
<div style="text-align: center;">
<br /></div>
<br />
Здравейте всички! В тази статия ще стане дума отново за това, как да се създаде блог на платформата Blogger, който с правилна оптимизация и популяризиране в бъдеще ще ви донесе пари. След публикуването на всяка следваща статия на тази тема вие ще видите как се променя дизайна на този блог, аз ще говоря по-подробно за стъпките, по които се върви за <br />
<a name='more'></a>популяризиране и оптимизиране. Ориентирайки се от материалите на тази тема в моя блог, вие можете да създадете свой проект. И за да се получавате полезна информация своевременно, не забравяйте да се абонирате за получаване на статиите по
електронна поща.
И така, встъплението свърши, затова пристъпваме към работа.
Регистрация на профил в Google
За да създадете блог на Blogger, трябва да се регистрирате профил ( акаунт) в търсачката Google. Веднага трябва да кажа, че след преминаването на този етап ще имате достъп и до други <br />
полезни услуги на Google, като например:
Видео хостинг YouTube - където можете да създадете свой собствен канал и да добавяте там вашите видеоклипове;
Google Диск - където ще съхранявайте файловете си, достъп до които ще имате от всяко устройство (таблет, смартфон) и на всяко място;
GMail - удобна еелектронна поща. И това не са всички услуги, които можете да използвате, а само най-основните.
Повече информация за тях, и не само, ще имам възможност да разкажа, но по друг повод, защото днешната тема е "Как да създадете блог на Blogger" и няма да се отдалечаваме от нея. Продължаваме. Отваряте сайта на търсачката Google и кликнете в горния десен ъгъл върху бутона "Вход", а след това кликнете върху "Създаване на профил".
Регистрация в Google
Сега въведете регистрационните си данни за вход: име и фамилия, вашия имейл адрес и парола. Паролата трябва да бъде силна, такава, която да включва не само цифри, но и букви и специални символи. Например, паролата може да бъде "Tgp21_S7N% U". Съгласете се, че изберете следната последователност от символи, е почти невъзможно. Абсолютно необходимо е да се обърне внимание на паролата, за да се избегнат неприятни ситуации (като хакерство) в бъдеще. Отбележете дата на раждане, пол и номер на мобилен телефон. Резервен мейл адрес не е задължителен. Въведете кода за потвърждение и маркирайте с отметка, че се съгласявате с условията за ползване на услугите на Google.
Следващата стъпка - въведете код за потвърждение, който трябва да дойде по електронната ви поща, след което натиснете бутона "Продължи".
Приемете поздравления, вие вече имате профил в Google! Но преди да се научите как да създадете блог на Blogger, се нуждаете от само още една стъпка - да се регистрирате в социална мрежа "Google Plus".
Регистрация на Google+ На главната страница на търсачката Google в менюто за услуги (иконата с девет квадратчета), изберете Blogger. Още един път въведете паролата и натиснете "Вход". Кликнете върху "Създаване на профил в Google+" в блок "Настройки на профила". Всички следващи стъпки можете да пропуснете, като постоянно натискане бутона "Продължи". Информацията за себе си можете да попълните по-късно, придържайки се към препоръките, които има в статията, посветена на социалната мрежа Google+.
Последният етап - Натискането на бутона "Готово", а след това "Отиди на Blogger".
Как да създадете блог на Blogger: последната стъпка
И така, ние сме почти в целта. Натиснете бутона "Нов блог" и въведете заглавие в съответното поле, а също измислете и адрес (домейно име) на блога си. Заглавието задължително да съдържа ключова дума. Що се отнася до адреса, желателно е да е кратък (не повече от 10 знака) и запомнящ се. Например, ако ще развивате блога по въпроса "детски играчки", тази фраза трябва да съществува в заглавната част. Сега изберете шаблон и натиснете "Създаване на блог".
Това е! Остава само да отидете на "Настройки" ( контролния панел в ляво ) и да изберете раздела "Общи". Тук добавете описание, като кликнете върху линка "промени." След това отворете секцията "Настройки за търсене" в секцията "мета тагове" и включете описание за търсачките. Въведете самото описание, което да включва ключови думи и запишете промените.
Сега вече знаете как да създадете блог на Blogger, и ако в някакъв момент имате затруднения, пишете.
Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.comtag:blogger.com,1999:blog-7324169434875653705.post-10043191255004370702016-12-26T09:12:00.002+02:002019-01-14T06:57:13.326+02:00Още За Блоговете На Blogger<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "times new roman" , serif; font-size: 13.5pt;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjENyTv1o8XNBBo_EfawuOZRwl-edB-d9joJrfma-qCAEiBTOCUTMhVUUtjgmEmVFy4x_GSTIfHcvp1j_ctXUtXAakXkwdypNzNYhIY2tEk-dkBOI4HP8OFn1xzr3F7zvXJ8WT2OI1VqVMV/s1600/blogger-logo-22.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjENyTv1o8XNBBo_EfawuOZRwl-edB-d9joJrfma-qCAEiBTOCUTMhVUUtjgmEmVFy4x_GSTIfHcvp1j_ctXUtXAakXkwdypNzNYhIY2tEk-dkBOI4HP8OFn1xzr3F7zvXJ8WT2OI1VqVMV/s200/blogger-logo-22.png" width="200" /></a></span></div>
<br />
<span style="font-family: "times new roman" , serif; font-size: 13.5pt;">Здравейте всички! В тази статия ще стане дума отново за това, как да
се създаде блог на платформата Blogger, който с правилна оптимизация и популяризиране
в бъдеще ще ви донесе пари. След публикуването на всяка следваща
статия на тази </span><br />
<a name='more'></a><span style="font-family: "times new roman" , serif; font-size: 13.5pt;">тема вие ще видите как се променя дизайна на този блог, аз ще
говоря по-подробно за стъпките, по които се върви за популяризиране и
оптимизиране. Ориентирайки се от материалите на тази тема в моя блог, вие
можете да създадете свой проект. И за да се получавате полезна информация
своевременно, не забравяйте да се абонирате за получаване на статиите по<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm;">
<span style="font-family: "times new roman" , serif; font-size: 13.5pt;">електронна поща.</span><br />
<span style="font-family: "times new roman" , serif; font-size: 13.5pt;"><o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0cm;">
<span style="font-size: 13.5pt;">И така, встъплението свърши, затова пристъпваме към работа.<o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0cm;">
<span style="font-size: 13.5pt;"> Регистрация на профил в Google<o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0cm;">
<span style="font-size: 13.5pt;"> За да създадете блог на Blogger, трябва да се
регистрирате профил ( акаунт) в търсачката Google. Веднага трябва да кажа, че
след преминаването на този етап ще имате достъп и до други полезни услуги на
Google, като например:<o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0cm;">
<span style="font-size: 13.5pt;"> Видео хостинг YouTube - където можете да
създадете свой собствен канал и да добавяте там вашите видеоклипове;<o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0cm;">
<span style="font-size: 13.5pt;"> Google Диск - където ще съхранявайте
файловете си, достъп до които ще имате от всяко устройство (таблет, смартфон) и
на всяко място;<o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0cm;">
<span style="font-size: 13.5pt;"> GMail - удобна еелектронна поща. И това не са
всички услуги, които можете да използвате, а само най-основните.<o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0cm;">
<span style="font-size: 13.5pt;"> Повече информация за тях, и не само, ще имам
възможност да разкажа, но по друг повод, защото днешната тема е "Как да
създадете блог на Blogger" и няма да се отдалечаваме от нея.
Продължаваме. Отваряте сайта на търсачката Google и кликнете в горния
десен ъгъл върху бутона "Вход", а след това кликнете върху
"Създаване на профил".<o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0cm;">
<span style="font-size: 13.5pt;"> Регистрация в Google<o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0cm;">
<span style="font-size: 13.5pt;"> Сега въведете регистрационните си данни за вход: име
и фамилия, вашия имейл адрес и парола. Паролата трябва да бъде силна, такава,
която да включва не само цифри, но и букви и специални символи. Например,
паролата може да бъде "Tgp21_S7N% U". Съгласете се, че изберете
следната последователност от символи, е почти невъзможно. Абсолютно необходимо
е да се обърне внимание на паролата, за да се избегнат неприятни ситуации (като
хакерство) в бъдеще. Отбележете дата на раждане, пол и номер на мобилен телефон.
Резервен мейл адрес не е задължителен. Въведете кода за потвърждение и
маркирайте с отметка, че се съгласявате с условията за ползване на услугите на
Google.<o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0cm;">
<span style="font-size: 13.5pt;"> Следващата стъпка - въведете код за потвърждение,
който трябва да дойде по електронната ви поща, след което натиснете бутона
"Продължи".<o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0cm;">
<span style="font-size: 13.5pt;"> Приемете поздравления, вие вече имате профил в
Google! Но преди да се научите как да създадете блог на Blogger, се нуждаете от
само още една стъпка - да се регистрирате в социална мрежа "Google
Plus".<o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0cm;">
<span style="font-size: 13.5pt;"> Регистрация на Google+ На главната страница на
търсачката Google в менюто за услуги (иконата с девет квадратчета), изберете
Blogger. Още един път въведете паролата и натиснете "Вход". Кликнете
върху "Създаване на профил в Google+" в блок "Настройки на
профила". Всички следващи стъпки можете да пропуснете, като постоянно
натискане бутона "Продължи". Информацията за себе си можете да
попълните по-късно, придържайки се към препоръките, които има в статията,
посветена на социалната мрежа Google+.<o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0cm;">
<span style="font-size: 13.5pt;"> Последният етап - Натискането на бутона
"Готово", а след това "Отиди на Blogger".<o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0cm;">
<span style="font-size: 13.5pt;"> Как да създадете блог на Blogger: последната стъпка<o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0cm;">
<span style="font-size: 13.5pt;"> И така, ние сме почти в целта. Натиснете бутона
"Нов блог" и въведете заглавие в съответното поле, а също измислете и
адрес (домейно име) на блога си. Заглавието задължително да съдържа ключова
дума. Що се отнася до адреса, желателно е да е кратък (не повече от 10 знака) и
запомнящ се. Например, ако ще развивате блога по въпроса "детски
играчки", тази фраза трябва да съществува в заглавната част. Сега изберете
шаблон и натиснете "Създаване на блог".<o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0cm;">
<span style="font-size: 13.5pt;"> Това е! Остава само да отидете на
"Настройки" ( контролния панел в ляво ) и да изберете раздела
"Общи". Тук добавете описание, като кликнете върху линка
"промени." След това отворете секцията "Настройки за
търсене" в секцията "мета тагове" и включете описание за
търсачките. Въведете самото описание, което да включва ключови думи и запишете
промените.<o:p></o:p></span></div>
<br />
<div style="margin-bottom: .0001pt; margin: 0cm;">
<span style="font-size: 13.5pt;"> Сега вече знаете как да създадете блог на Blogger, и
ако в някакъв момент имате затруднения,<span class="apple-converted-space"> </span>
пишете.<o:p></o:p></span></div>
Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.comtag:blogger.com,1999:blog-7324169434875653705.post-80778497455088435452016-12-26T09:10:00.003+02:002017-09-12T17:59:05.031+03:00Как да направите собствен блог<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYdK3xAzNTib7jAGYPDbKe98eJnx9geMNSjJ2q8YFfyJtp4TAmFM0zutOrL7cO447CWsycYHB1sv_lba9-ime3uJUR3pPPBjAEjLRGKiHJRhmD5S_MElJvhwrA-z3J0fCyt-Y28KD6HCb9/s1600/template.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYdK3xAzNTib7jAGYPDbKe98eJnx9geMNSjJ2q8YFfyJtp4TAmFM0zutOrL7cO447CWsycYHB1sv_lba9-ime3uJUR3pPPBjAEjLRGKiHJRhmD5S_MElJvhwrA-z3J0fCyt-Y28KD6HCb9/s200/template.jpg" width="200" /></a></div>
<div style="text-align: center;">
<br /></div>
Ето и първите стъпки.<br />
1. Избор на темата (нишата) на блога
Това е много важна и най-първата стъпка в създаването на свой собствен блог. Първата стъпка, преди да създадете блог, е че трябва да решите на каква<br />
<a name='more'></a> тема ще е вашият блог? Дали тази тема е интересна за вас самите? Дали темата ще е интересна на читателите?
На всички тези въпроси трябва да отговорите преди да пристъпите към създаването на блога си. И така...Вземете лист хартия и химикалка. Напишете темите, които ви интересуват. Темите, по които ще ви е интересно да пишете. После, след една седмица, ще изберете тази, която ще е интересна за вас и за другите, които бродят в интернет и четат ли четат.<br />
2. Вземете решение за бъдещия дизайн на блога
Тази стъпка не е задължителна, защото вкусовете се променят всеки ден, но все пак по-добре е да се реши по-рано. Грешката на много блогъри е, че проектите им са подобни един на друг. И аз не съм изключение, моят дизайн е безплатен шаблон, който аз лично промених. На съвсем малко. И в близко бъдеще искам да си поръчам оригинален. Но не това е важно сега ...
Трябва да си "представите" как ще изглежда вашият блог, да е с такъв дизайн, който е не само различен от другите, но и запомнящ се за вашия читател. На първо място, можете просто да приспособите готов шаблон, но за в бъдеще, ако искате да е по-сериозно, ще трябва да си поръчате нещо специално.
Повече относно този етап аз няма да пиша сега, защото на дизайна и шаблона ще посветя цяла статия по-късно.<br />
3. Започнете писането на уникални статии. Уникални материали. Правилното писане на материали е много важно. Така ще започнете да пълните блога си със съдържание. Като начало ви съветвам да напишете най-малко 10 материала. Темата е определена, придържайте се към нея, пишете и най-важното е да не забравяте, че пишете за хората. Материалите ви да са интересни и да се четат лесно. Ще ви предоставя информация и за сайтове, в които можете безплатно да проверите уникалността на това, което сте написали.<br />
4. Необходими притурки
След като сте започнали да пишете статии за вашия блог, можете да продължите с неговите настройки. Тоест, да изберете и инсталирате необходимите ви притурки и да ги настроите. За притурките ще говорим по-късно. Като начало разгледайте блога, който четете в момента.<br />
5. Избиране и инсталиране на броячи, за да започнете проследяване
На този етап ще установите няколко основни брояча за проследяване на блога, и ще се научите как да работите с тях. Не просто да работите, но да изтръгнете максимума от тях. И за това ще пиша по-късно.
6. Заключение
След всички тези стъпки, описани по-горе, вие ще имате абсолютно работещ свой собствен блог. Това ще ви отнеме известно време. На мен ми трябваха около три седмици. Защо толкова много? Цели три седмици? Защото ако прочетете още един път написаното по-горе, ще се досетите, че имате за изпълнение няколко домашни работи.
Е, това е моята обща схема, за създаване на свой собствен блог. Ако имате някакви въпроси, моля пишете в коментарите.<br />
Благодаря на всички, на всички доскоро и на добър час!
Pepa Tabakovahttp://www.blogger.com/profile/17542227749309139873noreply@blogger.com