أقدم لكم اضافة رائعة جدا
اضافة جميلة ممكن اضافتها لقوالب البلوجر
تعطي جمالية للقالب
الاضافة عبارة عن زرين ممكن استخدامهم بنفس الوقت او احدهما
بواسطة زر يضاف في مكان محدد او مكان تختاره بداخل الموضوع
معاينة الزر الأول
شرح تركيب الزر الاول
.lovebutton-iristips{position:relative;display:inline-block;text-align:center;min-width:40px;width:40px;min-height:40px;height:40px;margin-bottom:5px} .lovebutton-iristips .inner{text-align:center;display:inline-table} .lovebutton-iristips .inner a{padding:0!important} .lovebutton-iristips .total{position:absolute;top:-10px;right:-10px;font-size:20px;display:inline;color:rgba(247,40,109,0.6);text-shadow:0 0 1px rgba(247,40,109,1)} #heart{display:block;width:40px;height:40px;background:rgba(120,120,120,1) url(https://1.bp.blogspot.com/-sMFoJYAoWj8/W28xo6qfWXI/AAAAAAAAF4o/siqVVeVaojYtPV0Nh-ahloDtuHp_Jgm7wCLcBGAs/s300/iris-love.png) center no-repeat;background-size:100%;border-radius:50%;position:relative;margin:30% auto;box-shadow:0 0 0 0 rgba(247,40,109,1);transition:all 0.4s cubic-bezier(0.64,0.57,0.67,1.53),background-color 0.4s linear} #heart:hover{animation:beat 1s infinite} #heart.loved{background-color:rgba(247,40,109,1);box-shadow:0 0 0 5px rgba(247,40,109,1);transform:rotate(-3deg);animation:none} #heart .ray{width:30px;height:8px;left:20px;top:18px;background:rgba(0,0,0,0);border-radius:4px;position:absolute;transform:rotate(0deg);transform-origin:0% 50%;transition:all 0.1s linear;overflow:hidden;text-align:right;pointer-events:none} #heart .ray:before{content:"";position:absolute;top:0;right:10%;display:block;width:50%;border-radius:4px;height:8px;background:rgba(247,40,109,0)} #heart .ray:nth-of-type(2){transform:rotate(45deg)} #heart .ray:nth-of-type(3){transform:rotate(90deg)} #heart .ray:nth-of-type(4){transform:rotate(135deg)} #heart .ray:nth-of-type(5){transform:rotate(180deg)} #heart .ray:nth-of-type(6){transform:rotate(225deg)} #heart .ray:nth-of-type(7){transform:rotate(270deg)} #heart .ray:nth-of-type(8){transform:rotate(315deg)} #heart.loved .ray{width:50px} #heart.loved .ray:before{width:10%;right:-10%;background:rgba(247,40,109,1);transition:all 0.4s cubic-bezier(0.085,0.890,0.600,0.115)} @keyframes beat{0%{opacity:0.5}80%,100%{opacity:0.9}}
نبحث عن </body> و نضع الكود التالي فوقه
<script type='text/javascript'> //<![CDATA[ $('#heart').on('click',function(){$(this).toggleClass('loved');});for (var i = 1; i <= 10; i++){ $('#heart').append('<span class=ray>')} //]]> </script>
<script src='https://sites.google.com/site/iristipsblogger/file/iris-reaction.js' type='text/javascript'></script>
نبحث عن <data:post.body/> و نضع الكود اسفله احتمال يوجد اكثر من واحدة يمكن تكون اخر واحدة او يمكن ان تجرب
<div class='lovebutton-iristips' expr:data-id='data:blog.blogId + "_" + data:post.id'> <div class='inner'> <a href='javascript:;'> <div class='icon' id='heart'> </div> </a> <div class='total'>...</div> <div style='clear:both;'/> </div> </div>
معاينة الشكل الثاني
شرح التركيب الزر الثاني
نذهب الى المظهر و نبحث عن الوسم ]]></b:skin> و نضع الكود التالي فوقه
.lovebutton-iristips{position:relative;display:inline-block;text-align:center;margin:20px 0;} .lovebutton-iristips .inner{text-align:center;display:inline-table} .lovebutton-iristips .total{position:absolute;top:-20px;right:-10px;font-size:20px;display:inline;color:rgba(247,40,109,0.6);text-shadow:0 0 1px rgba(247,40,109,1)} .wrapper{position:relative} .heart{display:inline-flex;height:25px;position:absolute;left:-5px;top:-15px;z-index:8;fill:#ff796b;stroke:none;display:inline-flex;opacity:0} .heart:nth-child(1){animation:boom1 1.5s cubic-bezier(0.3,0.55,0.35,0.85)} @keyframes boom1{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(54px,-86px);opacity:0}} .heart:nth-child(2){animation:boom2 1.5s cubic-bezier(0.3,0.55,0.35,0.85)} @keyframes boom2{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(128px,28px);opacity:0}} .heart:nth-child(3){animation:boom3 1.5s cubic-bezier(0.3,0.55,0.35,0.85)} @keyframes boom3{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(159px,-140px);opacity:0}} .heart:nth-child(4){animation:boom4 1.5s cubic-bezier(0.3,0.55,0.35,0.85)} @keyframes boom4{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(104px,0px);opacity:0}} .heart:nth-child(5){animation:boom5 1.5s cubic-bezier(0.3,0.55,0.35,0.85)} @keyframes boom5{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(-76px,15px);opacity:0}} .heart:nth-child(6){animation:boom6 1.5s cubic-bezier(0.3,0.55,0.35,0.85)} @keyframes boom6{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(-7px,-138px);opacity:0}} .heart:nth-child(7){animation:boom7 1.5s cubic-bezier(0.3,0.55,0.35,0.85)} @keyframes boom7{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(51px,-27px);opacity:0}} .heart:nth-child(8){animation:boom8 1.5s cubic-bezier(0.3,0.55,0.35,0.85)} @keyframes boom8{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(-91px,-137px);opacity:0}} .heart:nth-child(9){animation:boom9 1.5s cubic-bezier(0.3,0.55,0.35,0.85)} @keyframes boom9{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(139px,-131px);opacity:0}} .heart:nth-child(10){animation:boom10 1.5s cubic-bezier(0.3,0.55,0.35,0.85)} @keyframes boom10{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(20px,-17px);opacity:0}} .heart:nth-child(11){animation:boom11 1.5s cubic-bezier(0.3,0.55,0.35,0.85)} @keyframes boom11{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(-12px,-77px);opacity:0}} .heart:nth-child(12){animation:boom12 1.5s cubic-bezier(0.3,0.55,0.35,0.85)} @keyframes boom12{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(63px,-121px);opacity:0}} .heart:nth-child(13){animation:boom13 1.5s cubic-bezier(0.3,0.55,0.35,0.85)} @keyframes boom13{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(13px,-58px);opacity:0}} .heart:nth-child(14){animation:boom14 1.5s cubic-bezier(0.3,0.55,0.35,0.85)} @keyframes boom14{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(-16px,-67px);opacity:0}} .heart:nth-child(15){animation:boom15 1.5s cubic-bezier(0.3,0.55,0.35,0.85)} @keyframes boom15{0%{transform:translate(0,0);opacity:0}50%{opacity:1}65%{opacity:0.8}100%{transform:translate(-47px,-111px);opacity:0}} .sg-icon{fill:#fff;max-width:24px;max-height:24px;height:24px;width:24px} .sg-label{display:inline-block;position:relative;overflow:hidden;text-overflow:ellipsis;line-height:1.5rem;min-height:1.5rem;margin:0;overflow:visible;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.sg-label__text,.sg-label__number{font-size:.75rem;min-height:.75rem;line-height:.875rem;line-height:1 !important;overflow:visible;display:block;color:#020a1b;font-weight:700;margin-right:6px}.sg-label__text:last-child,.sg-label__number:last-child{margin-right:0}.sg-label__icon{width:16px;height:16px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin-right:6px}.sg-label__icon:last-child{margin-right:0}.sg-label__icon--align-top{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.sg-label--emphasised{text-transform:uppercase;letter-spacing:0}.sg-label--secondary .sg-label__text,.sg-label--secondary .sg-label__number{color:#434e66}.sg-label--small{min-height:0}.sg-label--small .sg-label__text,.sg-label--small .sg-label__number{font-size:.625rem;min-height:.625rem;line-height:.625rem;line-height:1 !important;overflow:visible;margin-right:4px}.sg-label--small .sg-label__text:last-child,.sg-label--small .sg-label__number:last-child{margin-right:0}.sg-label--small .sg-label__icon{margin-right:4px;width:14px;height:14px}.sg-label--large .sg-label__text,.sg-label--large .sg-label__number{font-size:1.125rem;min-height:1.125rem;line-height:1.125rem;line-height:1 !important;overflow:visible}.sg-label--large .sg-label__text:last-child,.sg-label--large .sg-label__number:last-child{margin-right:0}.sg-label--large .sg-label__icon{margin-right:12px;width:24px;height:24px}.sg-label--unstyled .sg-label__text,.sg-label--unstyled .sg-label__number{color:inherit} .sg-icon--x16{max-width:16px;max-height:16px;height:16px;width:16px}.sg-icon--x14{max-width:14px;max-height:14px;height:14px;width:14px}.sg-icon--x10{max-width:10px;max-height:10px;height:10px;width:10px}.sg-icon--x8{max-width:8px;max-height:8px;height:8px;width:8px}.sg-icon--adaptive{fill:inherit} .sg-button-secondary{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:relative;cursor:pointer;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline-width:0;text-decoration:none;overflow:hidden;white-space:nowrap;font-weight:700;text-transform:uppercase;box-shadow:0 1px 4px 0 rgba(0,0,0,0.2);-webkit-transition-property:box-shadow, opacity, -webkit-transform;transition-property:box-shadow, opacity, -webkit-transform;transition-property:box-shadow, transform, opacity;transition-property:box-shadow, transform, opacity, -webkit-transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;border-radius:7px;height:1.875rem;padding:0 18px;font-size:.875rem;color:#fff;fill:#fff;background-color:#7ed7ac}.sg-button-secondary:hover,.sg-button-secondary:focus{box-shadow:0 2px 16px 0 rgba(0,0,0,0.25)}.sg-button-secondary:active{box-shadow:0 1px 3px 0 rgba(0,0,0,0.2);-webkit-transform:scale(0.985);transform:scale(0.985)}.sg-button-secondary:active:focus{box-shadow:0 1px 3px 0 rgba(0,0,0,0.2)}.sg-button-secondary:active,.sg-button-secondary:focus,.sg-button-secondary:hover{text-decoration:none}.sg-button-secondary__container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.sg-button-secondary--full-width{width:100%}.sg-button-secondary--alt{background-color:#57b2f8}.sg-button-secondary--dark{background-color:#434e66}.sg-button-secondary--inverse{background-color:#fff;color:#7ed7ac;fill:#7ed7ac}.sg-button-secondary--alt-inverse{background-color:#fff;color:#57b2f8;fill:#57b2f8}.sg-button-secondary--dark-inverse{background-color:#fff;color:#434e66;fill:#434e66}.sg-button-secondary--disabled{opacity:0.45;cursor:default;box-shadow:0 1px 4px 0 rgba(0,0,0,0.2)}.sg-button-secondary--disabled:active{-webkit-transform:none;transform:none}.sg-button-secondary--disabled:active,.sg-button-secondary--disabled:focus,.sg-button-secondary--disabled:hover{box-shadow:0 1px 4px 0 rgba(0,0,0,0.2)}.sg-button-secondary--small{padding:0 14px;height:1.5rem;border-radius:5px;font-size:.75rem}.sg-button-secondary--active-inverse{background-color:#fff;color:#ff796b;fill:#ff796b;-webkit-transition-property:box-shadow, background-color, color, fill, opacity, -webkit-transform;transition-property:box-shadow, background-color, color, fill, opacity, -webkit-transform;transition-property:box-shadow, transform, background-color, color, fill, opacity;transition-property:box-shadow, transform, background-color, color, fill, opacity, -webkit-transform}.sg-button-secondary--active-inverse:hover,.sg-button-secondary--active-inverse:active,.sg-button-secondary--active-inverse:focus{background-color:#ff796b;color:#fff;fill:#fff}
نبحث عن </body> و نضع الكود التالي فوقه
<script type='text/javascript'> //<![CDATA[ const proto = document.querySelector('.heart'); const wrapper = document.querySelector('.wrapper'); function go() { for (var i=1; i<15; i++) { const heart = proto.cloneNode(true); heart.addEventListener('animationend', () => heart.parentNode.removeChild(heart)); wrapper.append(heart); } } const button = document.querySelector('.js-button'); button.addEventListener('click', () => { go(); button.blur(); }); //]]> </script>
<script src='https://sites.google.com/site/iristipsblogger/file/iris-reaction.js' type='text/javascript'></script> <script src='https://sites.google.com/site/iristipsblogger/file/heart-icons.js' type='text/javascript'></script>
نبحث عن <data:post.body/> و نضع الكود اسفله احتمال يوجد اكثر من واحدة يمكن تكون اخر واحدة او يمكن ان تجرب
<div class='lovebutton-iristips' expr:data-id='data:blog.blogId + "_" + data:post.id'> <div class='inner'> <a href='javascript:;'> <div class='icon'> <div style='display:none'> <svg viewBox="0 0 32 29.6" class="heart"> <use xlink:href="#icon-heart"></use> </svg> </div> <div class='wrapper'> <button class="sg-button-secondary sg-button-secondary--small sg-button-secondary--active-inverse js-button"> <div class="sg-label sg-label--secondary sg-label--unstyled"> <div class="sg-label__icon"> <svg class="sg-icon sg-icon--x16 sg-icon--adaptive"> <use xlink:href="#icon-heart"></use> </svg> </div> <div class="sg-label__text">Thank you</div> </div> </button> </div> </div> </a> <div class='total'>...</div> <div style='clear:both;'/> </div> </div> </div>
و ثم قم بالحفظ و مبروك عليك الاضافة
إرسال تعليق