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

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

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

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

العديد من المدونين المحترفين والمبتدئين ترغب دائما اضافة العديد من الامور التي تكون لها جاذبية للزوار ، كما انها ترغب باضافتها دون ان تؤثر او تجعل المدونة تقيلة في التحميل ، ومن بين هذه الاضافات التي يتم اضافتها في المدونة خصوصا داخل المواضيع هي وجوه تعبيرية لتقييم المشاركة التي قمت بكتابتها ، وفي الحقيقة هذه الاضافة تبين لك تعابير الزوار حول الموضوع الذي قمت بنشره هل معجب به او فظيع بنسبه له .

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

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

1 - نقوم بدخول الى القالب >> ثم تحرير HTML >> وفتح محرك البحث بنقر على CTRL+F  >> ونبحث عن </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>

وهذا مثال في الصورة : 

2 - نبحث عن امر ]]></b:skin> ونضع فوقه الكود مباشرة .

/*============================*/

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.fb-cont {
  overflow: hidden;
  position: relative;
  margin: 100px auto;
  width: 700px;
  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;
}

وهذا مثال في الصورة : 

3 -  نبحث عن هذا الامر <data:post.body/> ونضع اسفله الكود اذا تريد ان يظهر في الاسفل المواضيع والعكس .
ملاحظة :  يوجد اربع من <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> 

هذا مثال في الصورة :