للبحـث بداخـل المدونــة . . .

تركيب ازرار لايك و شكرا لك لمدونات البلوجر

تركيب ازرار لايك و شكرا لك لمدونات البلوجر



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

 ازرار لايك و شكرا لك لمدونات البلوجر


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


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


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





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



نذهب الى المظهر و نبحث عن الوسم  ]]></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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDJLNBE9-Pn_ReZImJ_b1RMusLMSYqlCLe7gQfXOF5n9ANhcQ6_bzdq8nb97W97sXHN5fO24MC_YrQCp_TrgiNDN_KE6MOcPOzREEWrcX7DydJa1-SrQ5afep9J4bFub3nYlwXT8tMyHl8/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>



و ثم قم بالحفظ و مبروك عليك الاضافة
صاحب مدونة هلا تك التي تهتم بكل ما هو جديد على منصة بلوجر من أضافات و قوالب و شروحاتهم

إرسال تعليق

✩ تساعدنا ملاحظاتك في تطوير مدونتنا وتكون من خلال مشاركة أفكارك واقتراحاتك معنا.
رأيك يهمنا، لذا يرجى مشاركته معنا. يمنع إضافة روابط لأي موقع في التعليقات و شكرا لتفهمك .

أهم الموضوعات المميزة

ملفات تعريف الأرتباط
يستخدم موقعنا ملفات تعريف الارتباط Cookies لتحسين تجربتك أثناء تصفحك لموقعنا .
إقرأ المزيد
هنـاك مشكـلة !
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت وبدء التصفح مرة أخرى.
تـم الكشــف عن مانــع أعلانــات !
المعذرة ! لقد إكتشفنا أنك قمت بتنشيط Ad-Blocker يرجى النظر في دعمنا من خلال تعطيل Ad-Blocker الخاص بك فهو يساعدنا في تطوير هذا الموقع . . . وشكرا لتفهمك !
Site is Blocked
Sorry! This site is not available in your country.