مدونة هشام هاشم للمعلوميات مدونة هشام هاشم للمعلوميات
random

آخر المواضيع

random
recent
جاري التحميل ...
recent

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

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


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

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

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

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

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> 

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



التعليقات



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

إتصل بنا

تابعونا لتتوصل بجديد هشام هاشم

جميع الحقوق محفوظة

مدونة هشام هاشم للمعلوميات

2016