شرح لطريقة تركيب الرموز التفاعلية و الابتسامات في نظام التعليق لأي قالب بلوجر
إضافة الرموز التفاعلية - الإبتسامات - و الصور والإقتباسات و رموز مقتطفة - شفرة برمجية - في نظام التعليق الخاص بمنصة البلوجر .
فكما نعلم نظام بلوجر للتعليقات هو بسيط وفعال جدا وفي كل مرحلة ما نرى تحسينات ومميزات تطرأ على هذا النظام .
ولكن لا يزال يفتقر إلى العديد من الميزات التي هي موجودة في نظام التعليق ديسكس على سبيل المثال لا الحصر .. ومع ذلك لا يزال العديد من المدونين يفضلون نظام تعليقات بلوجر.
إذا فمن الضروري جدا أن يشمل النظام مثل هذا النوع من الملحقات والتي من شأنها الزيادة في إنتاجية ردود الفعل للزائر الخاص بك.
سوف يسمح للقراء وزوار مدونتك من إضافة إبتسامات أو ردود فعل على شكل شرائح أو إقتباسات أو تضمين كود داخل التعليقات .
تصميم حصري وطريقة تركيبها ايضاً سهله ولا تؤثر في سرعة المدونة ويمكنك تركيبها بإتباع التالي
معاينة الأضافة
كل ما عليك هو ان تقوم بنقرة على اي رمز و سيتم نسخ الكود الخاص بالرمز و ثم قم بلصقه بصندوق التعليقات و ثم نشر
شرح التركيب بالفيديو
طريقة التركيب
اولا نذهب الى التخطيط ثم البحث عن </head> و نقوم بلصق الكود التالي اعلاه
<style>.emoBox h2{border-radius: 2px; padding: 15px 0; cursor: pointer; margin: 0; font-size: inherit; white-space: nowrap; border-bottom: 1px solid #222; overflow: hidden; text-overflow: ellipsis; line-height: 1.2em; color: #222; font-weight: 600;}.emoBox h2::after{content:'';float:left;min-width:1.2em;min-height:1.2em;vertical-align:middle;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23222'/%3E%3C/svg%3E") center/24px no-repeat;transition:transform .3s ease-in-out}.emoBox h2.active::after{transform:rotate(90deg)}#emo-box{justify-content: center;display:flex;flex-wrap:wrap;align-items:center;max-height:0;overflow:hidden;transition:max-height .2s ease-out;padding:0;margin-top: 20px;overflow:hidden}#emo-box .item{text-align: center;flex: 1 0 auto; cursor: pointer; margin: 5px; width: 44px; padding: 5px; box-shadow: 0 5px 35px rgb(0 0 0 / 7%); height: 44px;}#emo-box .item span{display:block}#emo-box .item img{ height: 100%; background-size: cover;}.emoBox{padding: 0 24px 24px;background: #fffdfc;margin: 42px 0; position: relative; box-shadow: 0 5px 35px rgb(0 0 0 / 7%);}@media (max-width: 480px){.emoBox{padding: 12px!important;}.emoBox h2{padding:15px 12px!important;}}</style>
ثانيا نبحث عن </body> و نلصق الكود التالي اعلاه
<script>/*<![CDATA[*///(function(){const _EmoList = {agushh: 'https://i.imgur.com/Cu4vG9r.gif',mikkh: 'https://i.imgur.com/TkNof02.gif',pmqs: 'https://i.imgur.com/RS05lfl.gif',uunnn: 'https://i.imgur.com/xwFZuMK.gif',gfjjU: 'https://i.imgur.com/s7vmkpo.gif',pmmghfd: 'https://i.imgur.com/M1AOBim.gif',vdmuu: 'https://i.imgur.com/SrUp22q.gif',zxxsdfc: 'https://i.imgur.com/Kcdpego.gif',ggflj: 'https://i.imgur.com/cxHcGm1.gif',gmnjj: 'https://i.imgur.com/rKLDReM.gif',cdhkj: 'https://i.imgur.com/mvZLmK0.gif',uunnn: 'https://i.imgur.com/xwFZuMK.gif',uudcnn: 'https://i.imgur.com/xwFZuMK.gif',edffr: 'https://i.imgur.com/qPy1LgN.gif',masxxx: 'https://i.imgur.com/gXpbmjA.gif',azss: 'https://i.imgur.com/FC1KgSF.gif',ppbss: 'https://i.imgur.com/Vyn01JY.gif',ponhhfdf: 'https://i.imgur.com/4H30tq3.gif',bjgf: 'https://i.imgur.com/l5F3aCI.gif',pbttr: 'https://i.imgur.com/RaOAUVr.gif',ppnnr: 'https://i.imgur.com/7ye8v4a.gif',mauuv: 'https://i.imgur.com/rShJu0r.gif',mnbv: 'https://i.imgur.com/yHHOEOT.gif',mphhv: 'https://i.imgur.com/vWohjTh.gif',mayvr: 'https://i.imgur.com/nHVFYsw.gif',zawwe: 'https://i.imgur.com/PJlwu8t.gif',nhyv: 'https://i.imgur.com/iXb4m5i.gif',uytr: 'https://i.imgur.com/dy5Q3wg.gif',edcs: 'https://i.imgur.com/MyeQg1D.gif',alkj: 'https://i.imgur.com/WqgkYQE.gif',dreww: 'https://i.imgur.com/ZLgrcQx.gif',wsedrf: 'https://i.imgur.com/6NMBLGN.gif',ciuyy: 'https://i.imgur.com/q2Wamek.gif',nytti: 'https://i.imgur.com/0NLbjuu.gif',dpoo: 'https://i.imgur.com/Hgw2RVS.gif',kkjjhh: 'https://i.imgur.com/z7p4eXJ.gif',edolk: 'https://i.imgur.com/3uuw4wU.gif',bkkfrr: 'https://i.imgur.com/finSX4w.gif',btrpl: 'https://i.imgur.com/N2Rvilr.gif',mmjhh: 'https://i.imgur.com/YgLjviy.gif',dffttg: 'https://i.imgur.com/iHb5eE5.gif',zxccfl: 'https://i.imgur.com/V3OHgSb.gif',bytll: 'https://i.imgur.com/8WiLkZO.gif',ookkiio: 'https://i.imgur.com/8KbcTV6.gif',uyyllm: 'https://i.imgur.com/IGaAS4W.gif',OK: 'https://i.imgur.com/oa4WSDF.gif',OKLOVE: 'https://i.imgur.com/Uuw2akv.gif',dlonnb: 'https://i.imgur.com/yHeraK8.gif',lvvft: 'https://i.imgur.com/Dzo2o9S.gif',momo: 'https://i.imgur.com/yivofnV.gif',haha: 'https://i.imgur.com/cSk4FRz.gif',flying_kiss: 'https://i.imgur.com/I3XVz1Q.gif',thumsup: 'https://i.imgur.com/q1mWYIx.gif',money: 'https://i.imgur.com/M2ScSLN.gif',unaccept: 'https://i.imgur.com/dRtp5bu.gif',love: 'https://i.imgur.com/nsnAfi7.gif',aghh: 'https://i.imgur.com/nbrNBjC.gif',thinking: 'https://i.imgur.com/mUcoc6I.gif',hi: 'https://i.imgur.com/k5XGbBd.gif',crying: 'https://i.imgur.com/XbhbMSN.gif',confuse: 'https://i.imgur.com/6SJaYMI.gif',angry: 'https://i.imgur.com/JJvRaYu.gif',wink: 'https://i.imgur.com/ksCvZqC.gif',whatever: 'https://i.imgur.com/fZjvEAY.gif',kill: 'https://i.imgur.com/FE1Jr9t.gif',kjhll: 'https://i.imgur.com/Oipfcgq.gif',duuml: 'https://i.imgur.com/nv4sq9U.gif',THANKYOU: 'https://i.imgur.com/LFI4aLT.gif',lkljjU: 'https://i.imgur.com/ChvYdjD.gif',hzghgjh: 'https://i.imgur.com/xaX5lGQ.gif',dudcuml: 'https://i.imgur.com/qm7DyIq.gif',dlfml: 'https://i.imgur.com/XF2PA28.gif',cat_aghh: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbIasmV5yX9FxmWvBiNVCxNaz8b3U45zzPbR2XDXRu4ZG1BPmdXgleh_dMnSQeGes3ALmFkHpjUrGFVDYHk7RbGBOnDb31vFv7-JyBAMfnpntDcKPEu0DRob8c3Ke8xMrRzkHNs86rzpzI/s1600/aghh.gif',cat_excited: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXO2TX4cOB1RabvRxsiGyLcQn6GQIus20rXJ4ZDCAWujdItQYEQIIIuV1xG1pq2gqNGBbgilW6KaM3Nn0T1CEd9n8_n8ciY2rmcr0w3Bn1UN1fCXZolfFanYNvxSaOuojBzxWGnZ-mI-t2/s1600/cling.gif',cat_scare: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRwGpLjLi32UhnGnkPiiHL4LZ0q0Xcnyb7_UTrP2hQIuLuPOgj3O6bG2i7LOq5BRnrZ-6xBOuPP6I58y70bIm1YekZavVUfpk_G6osnLvxIBjg30ze66Zf7ognoUWLJ26IMycp2hx6Mbry/s1600/haha.gif',cat_thinking: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidsfHgRocL4z1J3b1DLl58mR51b_MVtzCahe6KhfJPs9NoY7C5uqjD2eFJefODGlfkxL_xCxXxZu5wp9ZKSrqTiWC2bE3-70Et3HawCR2xjAWnEP2C2hYuHv6lHH7exse7EDR5dq6pwru8/s1600/lho.gif',cat_crying: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTkYwh6GHoSx2fFnfiPrWGr3O8aQJ75xOhb9RvgPUrWWP53E9y7YiDdW0me85HAGdEyUnV88DFnr78IoQvjq-P6268fh31qNu1AI46TADeu8DoGpyFjbA1gkhz6z_SpW2aeWosTD5zRRpp/s1600/nagis.gif',cat_lol : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8tqhqTwcQFcnBz7zFh2Tst8s8I0yYUhxvyRvOFa8dcy2Qme-yUNScgGU-JZ3Wro0NuaghjAtzQell-wixNDfh_h9JuCsiBohAZ96wD356oisoX4PtDxCnjFvjtyUahidmHb5Zi5Fz3mcO/s1600/lol.gif',lolx: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBbwPB3WXj0n4rmCHkST7YI6mjKusM7KGMl5wxljUcfXEotoU5r7NN_nx9Cj-elwBfGkdhQF8E2zrhOt1A8cn82ot1lLrClFOiSus_wo5wu0T4AfcqqCp_5Uf4pfJxfbXMVFSY-pKCQciE/s1600/troll.gif',rotate: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE7xvuLjt6n0qqB_a4Q9FxVdAp-mQmL2cvFS9PCQk26HWul5vC5zSP6GivyrmiUwW64c9sZhzrIIsNAZ8vExcHmQYKDGC7hQA9A7iF8fUWnYYwF-CrH3bGPN40b0RyA3BB5avHpKHT3z-V/s1600/muter.gif',},a = document,_emoBox = a.getElementById('emo-box'),_emoTitle = a.querySelector('.emoBox h2'),_at_emo = 'Copied',_emoChange = a.querySelectorAll('i[rel*=emo]');if(_emoBox&&_emoTitle){_emoTitle.addEventListener("click",()=>{_emoTitle.classList.toggle("active"),_emoBox.style.maxHeight?_emoBox.style.maxHeight=null:_emoBox.style.maxHeight=_emoBox.scrollHeight+"px"});for(const e in _EmoList)if(Object.hasOwnProperty.call(_EmoList,e)){const t=_EmoList[e];let o=a.createElement("div");o.className="item",o.dataset.emot=e,o.innerHTML=`<img src="${t}"><span></span>`,o.addEventListener("click",()=>{o.dataset.emot;let t=document.createElement("textarea");t.className="clipboard",t.textContent=`<i rel="emo-${e}"></i>`,document.body.append(t),t.select(),t.setSelectionRange(0,99999),document.execCommand("copy"),t.remove(),o.querySelector("span").innerHTML=_at_emo,setTimeout(()=>{o.querySelector("span").innerHTML=""},750)}),_emoBox.appendChild(o)}}0!=_emoChange.length&&_emoChange.forEach(e=>{let t=e.getAttribute("rel").split("-")[1],o=a.createElement("img");o.src=_EmoList[t],e.parentNode.insertBefore(o,e.nextSibling),e.remove()})})();/*]]>*/</script>
ثالثا نختار المكان اللذي نرغب باضافة الرموز
<div class='emoBox'><h2>الرموز و الأبتسامات</h2><div id='emo-box'></div></div>
نقوم بالبحث عن احد هذه الاكواد
<div class='comment-form'>ضعه هنا</div><b:includable id='comment_picker' var='post'>او هنا</b:includable><b:includable id='commentFormIframeSrc' var='post'>او هنا</b:includable><b:includable id='threadedCommentForm' var='post'>او هنا</b:includable>او هنا<b:include cond='data:view.isSingleItem and !data:view.isPreview' data='post' name='commentPicker'/>
اذا الامر صعب عليك شاهد الفيديو به شرح لطريقة التركيب
ثم قم بالحفظ
شكرًا لوقتكم واهتمامكم بقراءة موضوع طريقة تركيب الرموز التفاعلية في تعليقات بلوجر . إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل ما هو جديد.
