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

Мелочь, а приятно. Выглядит вполне оригинально и ненавязчиво. В Блоггере код устанавливается в гаджет HTML/JavaScript в любое место. Цвет появляющихся кнопочек можно настроить под свой дизайн. Перейдите для просмотра эффекта на тестовый блог и попробуйте скопировать любой фрагмент текста.


А это код.

<style type='text/css'>
/*<![CDATA[*/
@keyframes selectionSharerPopover-animation{0%{transform:matrix(.97,0,0,1,0,12);filter:alpha(opacity=0);opacity:0}
20%{transform:matrix(.99,0,0,1,0,2);filter:alpha(opacity=70);opacity:.7}
40%{transform:matrix(1,0,0,1,0,-1);filter:alpha(opacity=100);opacity:1}
100%,70%{transform:matrix(1,0,0,1,0,0);filter:alpha(opacity=100);opacity:1}
}
#selectionSharerPopover{display:none;position:absolute;top:-100px;left:-100px;z-index:1010}
#selectionSharerPopover:after{content:'';display:block;position:absolute;bottom:-3px;left:50%;margin-left:-4px;width:8px;height:8px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background:#2E8B57;box-shadow:0 0 2px #262625}
#selectionSharerPopover.anim{transition:top 75ms ease-out;animation:selectionSharerPopover-animation 180ms forwards linear;-webkit-animation:selectionSharerPopover-animation 180ms forwards linear}
#selectionSharerPopover-inner{position:relative;overflow:hidden;-webkit-border-radius:5px;border-radius:5px;border:1px solid;border-color:#262625 #1c1c1b #121211;box-shadow:0 1px 3px -1px rgba(0,0,0,.7),inset 0 0 1px rgba(255,255,255,.07),inset 0 0 2px rgba(255,255,255,.15);background-image:linear-gradient(to bottom,rgba(49,49,47,.97),#2E8B57);background-repeat:repeat-x}
#selectionSharerPopover .selectionSharerPopover-clip{position:absolute;bottom:-11px;display:block;left:50%;clip:rect(12px 24px 24px 0);margin-left:-12px;width:24px;height:24px;line-height:24px}
#selectionSharerPopover .selectionSharerPopover-arrow{display:block;width:20px;height:20px;-webkit-transform:rotate(45deg) scale(.5);transform:rotate(45deg) scale(.5);background-color:#454543;border:2px solid #121211;box-sizing:content-box}
.selectionSharer ul{padding:0;display:inline}
.selectionSharer ul li{float:left;list-style:none;background:0 0;margin:0}
.selectionSharer a.action,.selectionSharer a.action.googleplus{display:block;text-indent:-200px;margin:5px 7px;height:20px;border:none}
.selectionSharer a.action{width:20px}
.selectionSharer a.action.googleplus{width:32px}
.selectionSharer a:hover{color:#ccc}
.selectionSharer a.tweet{background:url("data:image/svg+xml;charset=utf8,%3csvg xmlns='http://www.w3.org/2000/svg' width='171' height='139'%3e%3cg transform='translate(-282.32053,-396.30734)'%3e%3cpath style='fill:white' d='m 453.82593,412.80619 c -6.3097,2.79897 -13.09189,4.68982 -20.20852,5.54049 7.26413,-4.35454 12.84406,-11.24992 15.47067,-19.46675 -6.79934,4.03295 -14.3293,6.96055 -22.34461,8.53841 -6.41775,-6.83879 -15.56243,-11.111 -25.68298,-11.111 -19.43159,0 -35.18696,15.75365 -35.18696,35.18525 0,2.75781 0.31128,5.44359 0.91155,8.01875 -29.24344,-1.46723 -55.16995,-15.47582 -72.52461,-36.76396 -3.02879,5.19662 -4.76443,11.24048 -4.76443,17.6891 0,12.20777 6.21194,22.97747 15.65332,29.28716 -5.76773,-0.18265 -11.19331,-1.76565 -15.93716,-4.40083 -0.004,0.14663 -0.004,0.29412 -0.004,0.44248 0,17.04767 12.12889,31.26806 28.22555,34.50266 -2.95247,0.80436 -6.06101,1.23398 -9.26989,1.23398 -2.2673,0 -4.47114,-0.22124 -6.62011,-0.63114 4.47801,13.97857 17.47214,24.15143 32.86992,24.43441 -12.04227,9.43796 -27.21366,15.06335 -43.69965,15.06335 -2.84014,0 -5.64082,-0.16722 -8.39349,-0.49223 15.57186,9.98421 34.06703,15.8094 53.93768,15.8094 64.72024,0 100.11301,-53.61524 100.11301,-100.11387 0,-1.52554 -0.0343,-3.04251 -0.10204,-4.55261 6.87394,-4.95995 12.83891,-11.15646 17.55618,-18.21305 z' /%3e%3c/g%3e%3c/svg%3e") 2px 4px no-repeat;background-size:18px}
.selectionSharer a.facebook{background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 33 33' width='25' height='25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:white' d='M 17.996,32L 12,32 L 12,16 l-4,0 l0-5.514 l 4-0.002l-0.006-3.248C 11.993,2.737, 13.213,0, 18.512,0l 4.412,0 l0,5.515 l-2.757,0 c-2.063,0-2.163,0.77-2.163,2.209l-0.008,2.76l 4.959,0 l-0.585,5.514L 18,16L 17.996,32z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") 0 2px no-repeat;background-size:18px;display:none}
.selectionSharer a.googleplus{background:url(https://3.bp.blogspot.com/-cja0R5eTXHE/V_HuSDE4mpI/AAAAAAAAoEI/uXnTiMDwu4AmP4_shaADYdgtW6cGMmqiQCLcB/s1600/1475490209_40-google-plus.png) 0 -5px no-repeat;background-size:32px;color:#fff}
#selectionSharerPopunder.fixed{transition:bottom .5s ease-in-out;width:100%;position:fixed;left:0;bottom:-50px}
.selectionSharer{transition:-webkit-transform .6s ease-in-out}
.selectionSharer.moveDown{-webkit-transform:translate3d(0,60px,0)}
#selectionSharerPopunder{position:absolute;left:0;width:100%;height:0;transition:height .5s ease-in-out;background:#ccc;border:none;box-shadow:inset 0 10px 5px -10px rgba(0,0,0,.5),inset 0 -10px 5px -10px rgba(0,0,0,.5);border-radius:0;overflow:hidden}
#selectionSharerPopunder.show{height:50px}
.selectionSharerPlaceholder{height:1em;margin-bottom:-2em;transition:height .5s ease-in-out}
.selectionSharerPlaceholder.show{height:50px!important}
#selectionSharerPopunder-inner ul{overflow:hidden;float:right;margin:0}
#selectionSharerPopunder-inner ul li{padding:5px;overflow:hidden}
#selectionSharerPopunder-inner label{color:#fff;font-weight:300;line-height:50px;margin:0 20px 0 10px}
#selectionSharerPopunder-inner a{width:30px;height:30px;background-size:30px}
#selectionSharerPopunder-inner a.tweet{background-position:0 2px}
/*]]>*/
</style>

<script>
//<![CDATA[
!function(e){var t=function(t){var o=this;t=t||{},"string"==typeof t&&(t={elements:t}),this.sel=null,this.textSelection="",this.htmlSelection="",this.url2share=e('meta[property="og:url"]').attr("content")||e('meta[property="og:url"]').attr("value")||window.location.href,this.getSelectionText=function(e){var t="",n="";if(e=e||window.getSelection(),e.rangeCount){for(var i=document.createElement("div"),r=0,a=e.rangeCount;a>r;++r)i.appendChild(e.getRangeAt(r).cloneContents());n=i.textContent,t=i.innerHTML}return o.textSelection=n,o.htmlSelection=t||n,n},this.selectionDirection=function(e){var t=e||window.getSelection(),o=document.createRange();if(!t.anchorNode)return 0;o.setStart(t.anchorNode,t.anchorOffset),o.setEnd(t.focusNode,t.focusOffset);var n=o.collapsed?"backward":"forward";return o.detach(),n},this.showPopunder=function(){o.popunder=o.popunder||document.getElementById("selectionSharerPopunder");var e=window.getSelection(),t=o.getSelectionText(e);if(e.isCollapsed||t.length<10||!t.match(/ /))return o.hidePopunder();if(o.popunder.classList.contains("fixed"))return o.popunder.style.bottom=0,o.popunder.style.bottom;var n=e.getRangeAt(0),i=n.endContainer.parentNode;if(o.popunder.classList.contains("show")){if(Math.ceil(o.popunder.getBoundingClientRect().top)==Math.ceil(i.getBoundingClientRect().bottom))return;return o.hidePopunder(o.showPopunder)}if(i.nextElementSibling)o.pushSiblings(i);else{o.placeholder||(o.placeholder=document.createElement("div"),o.placeholder.className="selectionSharerPlaceholder");var r=window.getComputedStyle(i).marginBottom;o.placeholder.style.height=r,o.placeholder.style.marginBottom=-2*parseInt(r,10)+"px",i.parentNode.insertBefore(o.placeholder)}var a=window.pageYOffset+i.getBoundingClientRect().bottom;o.popunder.style.top=Math.ceil(a)+"px",setTimeout(function(){o.placeholder&&o.placeholder.classList.add("show"),o.popunder.classList.add("show")},0)},this.pushSiblings=function(e){for(;e=e.nextElementSibling;)e.classList.add("selectionSharer"),e.classList.add("moveDown")},this.hidePopunder=function(e){if(e=e||function(){},"fixed"==o.popunder)return o.popunder.style.bottom="-50px",e();o.popunder.classList.remove("show"),o.placeholder&&o.placeholder.classList.remove("show");for(var t=document.getElementsByClassName("moveDown");el=t[0];)el.classList.remove("moveDown");setTimeout(function(){o.placeholder&&document.body.insertBefore(o.placeholder),e()},600)},this.show=function(e){setTimeout(function(){var t=window.getSelection(),n=o.getSelectionText(t);if(!t.isCollapsed&&n&&n.length>10&&n.match(/ /)){var i=t.getRangeAt(0),r=i.getBoundingClientRect().top-5,a=r+o.getPosition().y-o.$popover.height(),s=0;if(e)s=e.pageX;else{var l=t.anchorNode.parentNode;s+=l.offsetWidth/2;do s+=l.offsetLeft;while(l=l.offsetParent)}switch(o.selectionDirection(t)){case"forward":s-=o.$popover.width();break;case"backward":s+=o.$popover.width();break;default:return}o.$popover.removeClass("anim").css("top",a+10).css("left",s).show(),setTimeout(function(){o.$popover.addClass("anim").css("top",a)},0)}},10)},this.hide=function(){o.$popover.hide()},this.smart_truncate=function(e,t){if(!e||!e.length)return e;var o=e.length>t,n=o?e.substr(0,t-1):e;return n=o?n.substr(0,n.lastIndexOf(" ")):n,o?n+"...":n},this.getRelatedTwitterAccounts=function(){var t=[],o=e('meta[name="twitter:creator"]').attr("content")||e('meta[name="twitter:creator"]').attr("value");o&&t.push(o);for(var n=document.getElementsByTagName("a"),i=0,r=n.length;r>i;i++)if(n[i].attributes.href&&"string"==typeof n[i].attributes.href.value){var a=n[i].attributes.href.value.match(/^https?:\/\/twitter\.com\/([a-z0-9_]{1,20})/i);a&&a.length>1&&-1==["widgets","intent"].indexOf(a[1])&&t.push(a[1])}return t.length>0?t.join(","):""},this.shareTwitter=function(e){e.preventDefault();var t="“"+o.smart_truncate(o.textSelection.trim(),114)+"”",n="http://twitter.com/intent/tweet?text="+encodeURIComponent(t)+"&related="+o.relatedTwitterAccounts+"&url="+encodeURIComponent(window.location.href);o.viaTwitterAccount&&t.length<114-o.viaTwitterAccount.length&&(n+="&via="+o.viaTwitterAccount);var i=640,r=440,a=screen.width/2-i/2,s=screen.height/2-r/2-100;return window.open(n,"share_twitter","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width="+i+", height="+r+", top="+s+", left="+a),o.hide(),!1},this.shareFacebook=function(e){e.preventDefault();var t=o.htmlSelection.replace(/<p[^>]*>/gi,"\n").replace(/<\/p>|  /gi,"").trim(),n="https://www.facebook.com/sharer.php?u="+encodeURIComponent(o.url2share)+"&quote="+encodeURIComponent(t),i=640,r=440,a=screen.width/2-i/2,s=screen.height/2-r/2-100;window.open(n,"share_facebook","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width="+i+", height="+r+", top="+s+", left="+a)},this.shareGoogleplus=function(e){e.preventDefault();var t=(o.htmlSelection.replace(/<p[^>]*>/gi,"\n").replace(/<\/p>|  /gi,"").trim(),"https://plus.google.com/share?url="+encodeURIComponent(o.url2share)),n=640,i=440,r=screen.width/2-n/2,a=screen.height/2-i/2-100;window.open(t,"share_googleplus","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width="+n+", height="+i+", top="+a+", left="+r)},this.render=function(){var t='<div class="selectionSharer" id="selectionSharerPopover" style="position:absolute;">  <div id="selectionSharerPopover-inner">    <ul>      <li><a class="action tweet" href="" title="поделиться в Twitter" target="_blank">Tweet</a></li>      <li><a class="action facebook" href="" title="поделиться в Facebook" target="_blank">Facebook</a></li>      <li><a class="action googleplus" href="" title="поделиться в Google+" target="_blank">Google+</a></li>    </ul>  </div>  <div class="selectionSharerPopover-clip"><span class="selectionSharerPopover-arrow"></span></div></div>',n='<div id="selectionSharerPopunder" class="selectionSharer">  <div id="selectionSharerPopunder-inner">    <label>Share this selection</label>    <ul>      <li><a class="action tweet" href="" title="Share this selection on Twitter" target="_blank">Tweet</a></li>      <li><a class="action facebook" href="" title="Share this selection on Facebook" target="_blank">Facebook</a></li>      <li><a class="action googleplus" href="" title="Share this selection by email" target="_blank">Google+</a></li>    </ul>  </div></div>';o.$popover=e(t),o.$popover.find("a.tweet").click(o.shareTwitter),o.$popover.find("a.facebook").click(o.shareFacebook),o.$popover.find("a.googleplus").click(o.shareGoogleplus),e("body").append(o.$popover),o.$popunder=e(n),o.$popunder.find("a.tweet").click(o.shareTwitter),o.$popunder.find("a.facebook").click(o.shareFacebook),o.$popunder.find("a.googleplus").click(o.shareGoogleplus),e("body").append(o.$popunder),o.url2share&&e(".selectionSharer a.facebook").css("display","inline-block")},this.setElements=function(t){"string"==typeof t&&(t=e(t)),o.$elements=t instanceof e?t:e(t),o.$elements.mouseup(o.show).mousedown(o.hide).addClass("selectionShareable"),o.$elements.bind("touchstart",function(){o.isMobile=!0}),document.onselectionchange=o.selectionChanged},this.selectionChanged=function(e){o.isMobile&&(o.lastSelectionChanged&&clearTimeout(o.lastSelectionChanged),o.lastSelectionChanged=setTimeout(function(){o.showPopunder(e)},300))},this.getPosition=function(){var e=void 0!==window.pageXOffset,t="CSS1Compat"===(document.compatMode||""),o=e?window.pageXOffset:t?document.documentElement.scrollLeft:document.body.scrollLeft,n=e?window.pageYOffset:t?document.documentElement.scrollTop:document.body.scrollTop;return{x:o,y:n}},this.render(),t.elements&&this.setElements(t.elements)};e.fn.selectionSharer=function(){var e=new t;return e.setElements(this),this},"function"==typeof define?define(function(){return t.load=function(e,o,n){var i=new t;i.setElements("p"),n()},t}):window.SelectionSharer=t}(jQuery);
$('.post-body').selectionSharer();
//]]>
</script>


Измените в двух местах цвет на желаемый #2E8B57.

В стилях CSS достаточно много настроек внешнего вида самого блока кнопок. Если пока в них сложно разобраться, пишите в комментариях. Уж очень мне хотелось установить их на этом блоге, но здесь они не работают, потому что уже всяких скриптов полно. 

Вот и всё. 

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

Трансформация в стилях CSS и полупрозрачный фон задаст тоже некую красоту всей конструкции. И поскольку скоро Новый год, я пока не придумала ничего лучше, как оформить это в качестве Новогоднего поздравления. А вообще использовать такое можно для любых нужд.

Давайте уже смотреть, что у меня получилось. Яркая кнопка в левом нижнем углу на тестовом блоге. Настройки разберём ниже.


Скопируйте сначала весь код и внесите свои изменения.

<style>
/*<![CDATA[*/
.tada{-webkit-animation:tada 1s linear 1s infinite normal;animation:tada 1s linear 1s infinite normal}
@-webkit-keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
@keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
.idul_layout{text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(9,150,13,.8);z-index:99999;display:none}
.idul_message{width:50%;background:#fff;font-size:16px;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#FF0000;position:absolute;top:10%;left:50%;margin-left:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}l
.profile-idul,.profile-idul2{padding:4px}
.idul_message:before{content:"";height:0;width:0;position:absolute;bottom:-40px;left:20px;border:20px solid transparent;border-color:#fff transparent transparent}
.profile-idul{background:#0c9f17;border:1px solid transparent;border-radius:100%;position:fixed;bottom:10px;left:10px;cursor:pointer;width:50px;height:50px;z-index:9999}
.profile-idul2{background:#fff;border:1px solid transparent;border-radius:100%;position:absolute;bottom:-240px;left:-120px;width:200px;height:200px}
.close_idul{font-size:12px;color:#E0FFFF
;position:absolute;top:-35px;right:-35px;cursor:pointer}
@media (max-width:800px){.idul_message{width:90%!important;margin-left:-45%!important;}
.profile-idul2{left:50%;margin-left:-105px;}
.idul_message:before{left:50%;margin-left:-20px;}
.close_idul{color:#555;top:-16px;right:0;}
}
/*]]>*/
</style>

<img class='profile-idul tada' onclick='openIdulfitri()' expr:alt='data:post.author' height='50' src='http://www.kid.ru/forummam9/08d1ac21623c032c8b94599c8b1cf30d.gif' width='50' title="Нажми здесь!"/>
<div class="idul_layout animated flip" id="id_fitri">
  <div class="idul_message">
    <h2>"Дороги друзья, подписчики и гости блога"</h2>
    <p>От всего сердца поздравляю вас с Новым 2018 годом.
      <br/><br/> Пусть в вашем доме будет радость и счастье. Добра и мира вашему дому <b />Спасибо за то что мы вместе<b>УРА!!!</b>
      <br/>
<img src='http://novymgodom.ru/_ph/23/2/549759756.png' width='200' />
      </b></p><br />
    <img class='profile-idul2' expr:alt='data:post.author' height='200' src='http://www.kid.ru/forummam9/08d1ac21623c032c8b94599c8b1cf30d.gif' width='200' />
    <div class="close_idul" onclick='closeIdulfitri()'>закрыть</div>
  </div>
</div>
<script>
//<![CDATA[
function openIdulfitri(){var e=document.getElementById("id_fitri");"block"!==e.style.display?e.style.display="block":e.style.display="none"};
function closeIdulfitri(){var e=document.getElementById("id_fitri");"none"!==e.style.display?e.style.display="none":e.style.display="block"};
//]]>
</script>


От строки <div class="idul_message"> до строки <div class="close_idul" onclick='closeIdulfitri()'>закрыть</div> можно вставлять что угодно. Разместить любую информацию, картинки, формы подписки, текст, галереи.

Сейчас немного с настройками цвета. Основной полупрозрачный фон задали в формате rgba. Можно поменять на своё.

Немного для понимания.Если вы сейчас перейдёте к этой таблице цветов, то увидите что все цвета в формате R G B и все они имеют трёхзначное значение. Цвета RGBA схоже со стандартными правилами RGB, но мы должны задать дополнительное десятичное значение прозрачности после значения цвета в промежутке от 0.0 (полная прозрачность) до 1 (полная непрозрачность).

У меня в коде зелёный цвет background:rgba(9,150,13,.8). То есть первые 3 цифры в формате R G B и последняя это значение прозрачности. Будьте внимательны при смене ко всем символам. Если вам не нужна полупрозрачность, просто вставляйте трёхзначные значения R G B.

Как смогла объяснила, но думаю, что суть понятна. обещаю написать позже подробнее про это.

С фоном разобрались. Сейчас нужно подобрать картинку в формате PNG, которая будет отображаться в углу блога и при открытии окна. В двух местах - 1 маленькая и 2 большая. Можно большую вообще убрать или установить другую.

http://www.kid.ru/forummam9/08d1ac21623c032c8b94599c8b1cf30d.gif

Жёлтым цветом я отметила своё изображение
, которое отражено в поздравлении. Можете убрать совсем тоже, если не предполагается картинка или поменять на своё. И весь текст, отмеченный зелёным это уже ваше дело.

Готовый код вставляйте обычным способом в гаджет HTML/JavaScript в любом месте макета блога. Всегда легко можно удалить или поменять что - то.

Если решите применить у себя такое интересное всплывающее окно, напишите пожалуйста в комментариях. Хочется посмотреть, как вы решили реализовать такую идею. И если возникнут вопросы по дизайну, обращайтесь.
✻✻✻
И ещё сделала подборку Новогодних украшений для блога, которые публиковала у себя раньше. Чтобы не бегать и не искать делюсь с вами. Ссылки, во избежании спама, не кликабельные. Скопируйте и установите любую в строку браузера.


Новогодний таймер отсчёта времени
http://www.shpargalochki.ru/2015/12/Novogodnij-tajmer-otschjota-vremen.html 

Красивый новогодний пейзаж для блога
http://www.shpargalochki.ru/2014/12/novogodnij-pejzazh-v-bloge.html

Новогодние идеи для блога
http://www.shpargalochki.ru/2016/12/novogodnie-ukrashenija-bloga.html

Новогодние украшения для блога
http://www.shpargalochki.ru/2014/11/novogodnie-ukrashenija-dlja-bloga.html

И опять про Новый год
http://www.shpargalochki.ru/2014/12/novogodnie-ukrashenija-bloga.html


✻✻✻

Для просмотра следующих вариантов, скопируйте код и просмотрите на этой странице результат.

Целующиеся справа снеговики 

<div style="position:absolute; right:0%; top:-20px;"><img src="http://mynew-year.ru/Animation/Snegoviki.gif" border="0" /></div>

Шарики 

 <div style="position:absolute; top:0; right:0;">
  <img border="0" src="http://pro-fi.at.ua/neydalat/shapka.gif" align="right">
  </div>

Красива надпись  красная

<img src="http://i44.servimg.com/u/f44/16/54/26/99/3010.png" alt="C Новым годом" title="C Новым годом" border="0" height="87px" width="440px" />

Голубая надпись

<img src="http://i44.servimg.com/u/f44/16/54/26/99/36-cop11.png" alt="C Новым годом" title="C Новым годом" border="0" height="156" width="300" />

Ветка слева в углу 

<div style="position:absolute; right:70%; top:-90px;"><img src="http://img-fotki.yandex.ru/get/5313/111874181.a4/0_94e0f_86e3ab9c_XL" border="0" /></div>

 Можно на эту ветку ещё игрушек добавить подставьте код рядом

 <div style="position:absolute; right:70%; top:-90px;"><img src="http://img-fotki.yandex.ru/get/6616/136487634.775/0_b4aba_42fa64c8_XL.jpg" border="0" /></div>

Во всех кодах можно поменять картинку, заменив лишь её адрес

<img src="http://img-fotki.yandex.ru/get/6616/136487634.775/0_b4aba_42fa64c8_XL.jpg"

Гирлянда


<style type="text/css">
#garland {position:absolute;top:0;left:0;background-image:url('https://i13.servimg.com/u/f13/14/80/95/87/christ10.png');height:36px;width:100%;overflow:hidden;z-index:99}
#nums_1 {padding:100px}
.garland_1 {background-position: 0 0}
.garland_2 {background-position: 0 -36px}
.garland_3 {background-position: 0 -72px}
.garland_4 {background-position: 0 -108px}
</style>  <div id="garland" class="garland_4"><div id="nums_1">1</div></div>

<script type="text/javascript">
function garland() {
nums = document.getElementById('nums_1').innerHTML
if(nums == 1) {document.getElementById('garland').className='garland_1';document.getElementById('nums_1').innerHTML='2'}
if(nums == 2) {document.getElementById('garland').className='garland_2';document.getElementById('nums_1').innerHTML='3'}
if(nums == 3) {document.getElementById('garland').className='garland_3';document.getElementById('nums_1').innerHTML='4'}
if(nums == 4) {document.getElementById('garland').className='garland_4';document.getElementById('nums_1').innerHTML='1'}
}

setInterval(function(){garland()}, 400) 

</script>


Регулируйте частоту мерцания лампочек, меняя значения 400. Код вставляем в гаджет HTML/JavaScript.

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

Всем спасибо за внимание и до новых встреч.


здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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


Код.

<script type="text/javascript">
  curs = new Array('n-resize', 'ne-resize', 'e-resize', 'e-resize', 'se-resize', 's-resize', 'sw-resize', 'w-resize', 'nw-resize');
  var c=0;
  function timedCount()
  {
  document.body.style.cursor=curs[c];
  evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("mouseover", false, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  document.body.dispatchEvent(evt);
  c = (c>9) ? 0 : c+1;
  }
  setInterval("timedCount()",50);
  </script>


Код устанавливается в гаджет HTML/JavaScript в любом месте макета блога. Почему бы нет, так удивить своих посетителей прикольной безделушкой.

Вообще в блоге очень легко сделать свой собственный курсор. Просто найти в интернете или создать самим картинку в формате png, которая будет бегать по веб - странице и добавить стили

body {
  cursor: url("https://osuskinner.com/uploads/1620/cursor-smoke/9547_thumb_small.png"), auto;
}


Во вкладке тема установить этот код перед строкой ]]></b:skin> и сохранить изменения.

Если хотите, чтобы такая штучка была только на одной определённой странице, тогда в редакторе сообщений в режиме HTML устанавливаем

<style>body {
  cursor: url("https://osuskinner.com/uploads/1620/cursor-smoke/9547_thumb_small.png"), auto;
}</style>


Скопируйте этот код и посмотрите здесь. Розовым цветом отмечен URL адрес картинки.

Можно  ещё и бегающий за курсором текст написать. 

Попробуйте. Всем спасибо за визит.
здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


украшение сайта
Приветствую, всех. Всегда перед Новым годом многие ломают голову в поиске идей для украшения сайта. Я в очередной раз хочу поделиться с вами своими мыслями и предложить некоторые варианты оформления блога к предстоящему празднику. И дам ниже ссылки на то, что приходило в голову в прошлогодних постах.

Если вы считаете, что пока рановато, отложите этот пост в закладки. Я обратила внимание, что некоторые блогеры уже украшают свой блог. Решайте сами. А вот таймер обратного отчёта времени, думаю, установить самое время.

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

Таймер обратного отсчёта времени до Нового года.

В прошлом году я публиковала пост, как сделать новогодний таймер отсчёта времени. Вот ещё один вариант.

<style>
.lcdstyle{
background:#CCCCCC ;
color:#FFF ;
font: bold 20px arial;
padding: 15px;
border:2px solid #669999 ;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow: 5px 5px 5px #99CCCC ;
}

.lcdstyle sup{
font-size: 120%
} </style>

<script type="text/javascript">

function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
this.timesup=false
this.updateTime()
}

cdtime.prototype.updateTime=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}

cdtime.prototype.displaycountdown=function(baseunit, functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}

cdtime.prototype.showresults=function(){
var thisobj=this


var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
hourfield=dayfield*24+hourfield
dayfield="n/a"
}
else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield="n/a"
}
else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield="n/a"
}
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}



//Create your own custom format function to pass into cdtime.displaycountdown()
//Use arguments[0] to access "Days" left
//Use arguments[1] to access "Hours" left
//Use arguments[2] to access "Minutes" left
//Use arguments[3] to access "Seconds" left

//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown()
//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"
//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc


function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds left until December 25, 2011 18:25:00"
}
else{ //else if target date/time met
var displaystring=""
}
return displaystring
}

function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>дней</sup> "+arguments[1]+" <sup>часов</sup> "+arguments[2]+" <sup>минут</sup> "+arguments[3]+" <sup>секунд</sup></span> "
}
else{ //else if target date/time met
var displaystring="" //Don't display any text
alert("HAPPY NEW YEAR EVERYBODY!") //Instead, perform a custom alert
}
return displaystring
}

</script>
<table><tbody>
<tr>
<td>
<img style="float:left; " src="http://www.playcast.ru/uploads/2014/11/19/10704778.png " width="125px"; height,="125px" />
<h1 style="color:#003366; padding-top:60px;">До нового 2017 года осталось...</h1>
</td></tr>

<tr><td>
<div id="countdowncontainer"></div>

<div id="countdowncontainer2"></div>

<script type="text/javascript">

var futuredate=new cdtime("countdowncontainer", "March 23, 2009 18:25:00")
futuredate.displaycountdown("days", formatresults)

var currentyear=new Date().getFullYear()
//dynamically get this Christmas' year value. If Christmas already passed, then year=current year+1
var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>31)? currentyear+1 : currentyear
var christmas=new cdtime("countdowncontainer2", "December 31, "+thischristmasyear+" 23:59:59")
christmas.displaycountdown("days", formatresults2)
</script>
</td></tr></tbody></table>


Всё, что в коде отмечено синими строчками - это стили CSS. Меняйте их на своё усмотрение - это и сама картинка, фон, цвет и размеры шрифта.

Код устанавливается в гаджет HTML/JavaScript.

Новогодние веточки, шишки, шары по всем углам страницы.

Очень красиво смотрятся небольшие картинки в формате PNG в каждом углу блога.

<style type="text/css">
<style>
.agsid 1{
LEFT: 0px; position: fixed; TOP: 0px;  }
.agsid2 { RIGHT: 0px; position: fixed; TOP: 0px;  }
 .agsidr3 { RIGHT: 0px; position: fixed; BOTTOM: 0px;  }
 .agsid4 {
LEFT: 0px; position: fixed; BOTTOM: 0px; }
 </style>

<div class="agsid1">
 <img width="180px" src=" адрес картинки" border="0" /> </div>
 <div class="agsid2"> <img width="180px" src="адрес картинки" border="0" /> </div>
 <div class="agsid3">
<img width="180px" src=" адрес картинки" border="0" /> </div>
<div class="agsid4"> <img width="180px" src="адрес картинки" border="0" /> </div>


Устанавливайте в гаджет HTML/JavaScript.

Фиксированная гирлянда по центру.

При скроллинге страницы она всегда на виду.

<div style="padding: 0px;">
<img class="st1" src="http://webanetlabs.net/ng2013/novyigod5.png " style="position:fixed; top: 0px;right:500px;border:none;z-index:5;"/></div>


Вставляйте своё изображение, в строку, отмеченную синим.

Меняющийся задний фон со снежинками.

Такие не раздражают посетителя , потому что расположены не на всём, а только на заднем фоне.

новогодние снежинки в блоге


body {
background-attachment: fixed;
background-color:#000;
background-image:url('http://i39.servimg.com/u/f39/14/80/95/87/110.png'),
url('http://i39.servimg.com/u/f39/14/80/95/87/210.png'),
url('http://i39.servimg.com/u/f39/14/80/95/87/310.png'); /*картинки снега*/
-webkit-animation:snow 30s linear infinite;
-moz-animation:snow 30s linear infinite;
-ms-animation:snow 30s linear infinite;
animation:snow 30s linear infinite;
}

@keyframes snow {
0%{background-position:0px 0px, 0px 0px, 0px 0px;}
25%{background-color:#800000;}
50%{background-color:#008B00;}
75%{background-color:#00008B;}
100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:#000;}
}
@-moz-keyframes snow {
0%{background-position:0px 0px, 0px 0px, 0px 0px;}
25%{background-color:#800000;}
50%{background-color:#008B00;}
75%{background-color:#00008B;}
100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:#000;}
}
@-webkit-keyframes snow {
0%{background-position:0px 0px, 0px 0px, 0px 0px;}
25%{background-color:#800000;}
50%{background-color:#008B00;}
75%{background-color:#00008B;}
100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:#000;}
}
@-ms-keyframes snow {
0%{background-position:0px 0px, 0px 0px, 0px 0px;}
25%{background-color:#800000;}
50%{background-color:#008B00;}
75%{background-color:#00008B;}
100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:#000;}
}


Этот код устанавливаем в шаблоне блога перед строкой ]]></b:skin>.

Не плохо будет смотреться бегущий за курсором текст, в качестве Новогоднего украшения.

Нужно будет только запомнить в какой гаджет установлены коды украшений, чтобы после праздника их легко было убрать.
Ссылки -

Красивый Новогодний пейзаж для блога 
И опять про Новый год

Думаю, что из предложенных вариантов оформления блога к Новому году, вы сможете что-то подобрать для себя. Вот здесь очень много всякой Новогодней красоты http://priroda.inc.ru/prazdnik/anima/anima1.html. 

Спасибо всем за внимание. Очень хочется посмотреть, как вы украсите свои блоги к празднику. Поделитесь, пожалуйста потом в комментариях. Всем удачи и до встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


ссылки
Приветствую вас, друзья. Хочу показать вам, как можно создать отдельный блок ссылок "аля" Google AdSense. Посмотрите у меня внизу поста рекламные ссылки от Гугл. Именно в таком же дизайнерском варианте можно дать ссылки на любые страницы или сообщения вашего блога. Пусть это будут даже статьи по теме внутри поста или партнёрские ссылки.

Такой блок привлечёт больше внимания посетителей, чем просто обычная ссылка. Пример с тёмным фоном и hover эффектом при наведении курсора в конце этого сообщения.

Сам фон, высоту отдельных блоков, шрифт вы подгоните под свои предпочтения. Сложного ничего нет. Скопируйте код, приведённый ниже себе в блокнот. Настройки разберём ниже.

<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: #333333; /* основной цвет  */
  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: #333;
}
@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="адрес страницы" target="_blank">название</a>
<a class="tombol-link" href="адрес страницы" target="_blank">название</a>
<a class="tombol-link" href="адрес страницы" target="_blank">название</a>

</div>
<div class="link-btn-right">
<a class="tombol-link" href="адрес страницы" target="_blank">название</a>
<a class="tombol-link" href="адрес страницы" target="_blank">название</a>
<a class="tombol-link" href="адрес страницы" 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>


У нас 2 отдельных блока со ссылками - правый и левый, где нужно вставить адреса и название ваших страниц. Стили оформления я отметила в CSS коде пояснительным текстом. Можно вставлять вместе с ним. Меняйте по вашему желанию.

Добавляйте или убирайте по необходимости дополнительные поля

<a class="tombol-link" href="адрес страницы" target="_blank">название</a>

Строку <<ваш текст >> можно оформить прямо в редакторе нужным цветом и шрифтом.

Готовый код устанавливайте в редакторе сообщения в режиме HTML в любое место блога. Вот, как - то так это будет выглядеть.



здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


Пользовательский поиск
Foto Saya
My Photo