U3F1ZWV6ZTgwNzczMjc0MDNfQWN0aXZhdGlvbjkxNTA0OTc4MjA3
recent
أخبار ساخنة

إضافة ازرار لايك و شكرا لك لمدونات البلوجر




أقدم لكم اضافة رائعة جدا

اضافة جميلة ممكن اضافتها لقوالب البلوجر 
تعطي جمالية للقالب 

الاضافة عبارة عن زرين ممكن استخدامهم بنفس الوقت او احدهما
بواسطة زر يضاف في مكان محدد او مكان تختاره بداخل الموضوع


معاينة الزر الأول





شرح تركيب الزر الاول



نذهب الى المظهر و نبحث عن الوسم  ]]></b:skin>  و نضع الكود التالي فوقه


.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 + &quot;_&quot; + 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 + &quot;_&quot; + 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>



و ثم قم بالحفظ و مبروك عليك الاضافة
الاسمبريد إلكترونيرسالة