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

لطالما كانت الوسيلة الوحيدة لمعرفة مدي رضاة الزائر او المشتري عن الخدمات التي تقدمها هي عن طريق "التقيم" اي بمعني اخر يختار الزائر نجمة او وجها معبرا عن رضاه اتجاه عملك بحيت يمكنك من خلالها معرفة لمادا الزائر لن يعجبة العمل واصلاحه الي انه قررت اليوم اتحاة الفرصة لكم في اضافة هده الاداة لمدونتكم بطريقة سهلة.

فبختصار يمكنك اضافة عم طريق الدهاب الي >> قالب>>تحريرHTML

1. تم قم بالبحت عن الكود ]]></b:skin> بالاستعانة بلوحة التحكم (CTRL+f)

تم قم باضافة الكود اسفلة قبله (فوقه):

/*============================*/ *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } .fb-cont { overflow: hidden; position: relative; margin: 100px auto; width: 800px; padding: 75px; padding-bottom: 140px; background: #fff; } .fb-cont__inner { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .fb-cont__inner:before { content: “”; position: absolute; left: 50%; top: 50%; width: 90%; height: 4px; margin-top: -2px; background: rgba(200, 206, 211, 0.5); border-radius: 2px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .fb-cont__drag-cont { z-index: 2; position: absolute; left: 50%; top: 0; width: 574px; height: 100%; margin-left: -287px; pointer-events: none; -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } .fb-heading { margin: 0 auto 60px; font-size: 30px; text-align: center; color: #737b7b; } .fb-emote { z-index: 1; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 76px; height: 76px; cursor: pointer; } .fb-emote svg { display: block; margin-bottom: 15px; width: 100%; height: 100%; background: #c8ced3; border-radius: 50%; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .fb-emote.s–active svg { -webkit-transform: scale(0.7); transform: scale(0.7); } .fb-emote__caption { text-align: center; font-size: 26px; font-weight: 700; color: #c8ced3; -webkit-transition: all 0.5s; transition: all 0.5s; } .fb-emote.s–active .fb-emote__caption { color: #655e53; -webkit-transform: translateY(15px); transform: translateY(15px); } .fb-emote__eye { stroke: none; fill: #fff; } .fb-emote__smile { stroke: #fff; stroke-width: 10; stroke-linecap: round; fill: none; } .fb-active-emote { position: absolute; left: 0; top: 50%; width: 110px; height: 110px; margin-left: -55px; margin-top: -55px; background: #ffd68c; border-radius: 50%; } .fb-active-emote svg { width: 100%; height: 100%; } .fb-active-emote__eye { stroke: none; fill: #655e53; } .fb-active-emote__smile { stroke: #655e53; stroke-width: 10; stroke-linecap: round; fill: none; } .icon-link { position: absolute; left: 5px; bottom: 5px; width: 32px; } .icon-link img { width: 100%; vertical-align: top; } .icon-link–twitter { left: auto; right: 5px; } 

1.  تم تقوم بالبحت عن الوسم </body> تم ضع الكود التالي اسفله:

<script type=’text/javascript’> function $$(selector, context) { var context = context || document; var elements = context.querySelectorAll(selector); var nodesArr = [].slice.call(elements); return nodesArr.length === 1 ? nodesArr[0] : nodesArr; }; var $emotesArr = $$(‘.fb-emote’); var numOfEmotes = $emotesArr.length; var $dragCont = $$(‘.fb-cont__drag-cont’); var $activeEmote = $$(‘.fb-active-emote’); var $leftEye = $$(‘.fb-active-emote__eye–left’); var $rightEye = $$(‘.fb-active-emote__eye–right’); var $smile = $$(‘.fb-active-emote__smile’); var emoteColors = { terrible: ‘#f8b696’, bad: ‘#f9c686’, default: ‘#ffd68c’ } var animTime = 0.5; $emotesArr.forEach(function($emote, i) { var progressStep = i / (numOfEmotes – 1); $emote.dataset.progress = progressStep; $emote.addEventListener(‘click’, function() { var progressTo = +this.dataset.progress; var type = this.dataset.emote; var $target = document.querySelector(‘#fb-emote-‘ + type); var $lEye = $target.querySelector(‘.fb-emote__eye–left’); var $rEye = $target.querySelector(‘.fb-emote__eye–right’); var leftEyeTargetD = $lEye.getAttribute(‘d’); var rightEyeTargetD = $rEye.getAttribute(‘d’); var smileTargetD = $target.querySelector(‘.fb-emote__smile’).getAttribute(‘d’); var bgColor = emoteColors[type]; if (!bgColor) bgColor = emoteColors.default; $$(‘.fb-emote.s–active’).classList.remove(‘s–active’); this.classList.add(‘s–active’); TweenMax.to($activeEmote, animTime, {backgroundColor: bgColor}); TweenMax.to($dragCont, animTime, {x: progressTo * 100 + ‘%’}); TweenMax.to($leftEye, animTime, {morphSVG: $lEye}); TweenMax.to($rightEye, animTime, {morphSVG: $rEye}); TweenMax.to($smile, animTime, {attr: {d: smileTargetD}}); }); });</script>

 3.تم تقوم كاخطوة اخيرة بالبحت عن <data:post.body/> في حال وجدت اكتر من واحد فالاخير هو المقصود تم قم باضافة الكود التالي اسفله:

<svg class=”fb-emotes-svg” style=”display: none;”> <symbol id=”fb-emote-terrible” data-emote=”terrible” viewBox=”0 0 100 100″> <path class=”fb-emote__eye fb-emote__eye–left” d=”M32,25 l10,10 a10,10 0 0,1 -20,0 a10,10 0 0,1 10,-10″/> <path class=”fb-emote__eye fb-emote__eye–right” d=”M58,35 l10,-10 a10,10 0 0,1 0,20 a10,10 0 0,1 -10,-10″/> <path class=”fb-emote__smile” d=”M30,68 q20,-13 40,0 M30,68 q20,-13 40,0″/> </symbol> <symbol id=”fb-emote-bad” data-emote=”bad” viewBox=”0 0 100 100″> <path class=”fb-emote__eye fb-emote__eye–left” d=”M22,35 l10,-10 a10,10 0 0,1 0,20 a10,10 0 0,1 -10,-10″/> <path class=”fb-emote__eye fb-emote__eye–right” d=”M68,25 l10,10 a10,10 0 0,1 -20,0 a10,10 0 0,1 10,-10″/> <path class=”fb-emote__smile” d=”M30,68 q20,-10 40,0 M30,68 q20,-10 40,0″/> </symbol> <symbol id=”fb-emote-okay” viewBox=”0 0 100 100″> <path class=”fb-emote__eye fb-emote__eye–left” d=”M32,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20″/> <path class=”fb-emote__eye fb-emote__eye–right” d=”M68,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20″/> <path class=”fb-emote__smile” d=”M35,73 q20,-4 35,-8 M35,73 q20,-4 35,-8″/> </symbol> <symbol id=”fb-emote-good” viewBox=”0 0 100 100″> <path class=”fb-emote__eye fb-emote__eye–left” d=”M32,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20″/> <path class=”fb-emote__eye fb-emote__eye–right” d=”M68,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20″/> <path class=”fb-emote__smile” d=”M30,68 q20,10 40,0 M30,68 q20,10 40,0″/> </symbol> <symbol id=”fb-emote-great” viewBox=”0 0 100 100″> <path class=”fb-emote__eye fb-emote__eye–left” d=”M32,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20″/> <path class=”fb-emote__eye fb-emote__eye–right” d=”M68,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20″/> <path class=”fb-emote__smile” d=”M30,68 q20,15 40,0 M30,68 q20,0 40,0″/> </symbol> </svg> <div class=”fb-cont”> <div class=”fb-heading”>كيفية المساعدة التي حصلت عليها؟ </div> <div class=”fb-cont__inner”> <div class=”fb-emote” data-emote=”terrible”> <svg><use xlink:href=”#fb-emote-terrible”/></svg> <p class=”fb-emote__caption”>فظيع</p> </div> <div class=”fb-emote” data-emote=”bad”> <svg><use xlink:href=”#fb-emote-bad”/></svg> <p class=”fb-emote__caption”>سيئة</p> </div> <div class=”fb-emote s–active” data-emote=”okay”> <svg><use xlink:href=”#fb-emote-okay”/></svg> <p class=”fb-emote__caption”>حسنا</p> </div> <div class=”fb-emote” data-emote=”good”> <svg><use xlink:href=”#fb-emote-good”/></svg> <p class=”fb-emote__caption”>جيد</p> </div> <div class=”fb-emote” data-emote=”great”> <svg><use xlink:href=”#fb-emote-great”/></svg> <p class=”fb-emote__caption”>عظيم</p> </div> <div class=”fb-cont__drag-cont”> <div class=”fb-active-emote”> <svg viewBox=”0 0 100 100″> <path class=”fb-active-emote__eye fb-active-emote__eye–left” d=”M32,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20″/> <path class=”fb-active-emote__eye fb-active-emote__eye–right” d=”M68,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20″/> <path class=”fb-active-emote__smile” d=”M35,73 q20,-4 35,-8 M35,73 q20,-4 35,-8″/> </svg> </div> </div> </div> </div>

 تم قم بحفظ النمودج ومبروك عليك الاضافة.

Share This

clear