اضافة الأبتسمات فوق صندوق التعليقات فى بلوجر

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

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

معاينة الإضافة وتحميل الأكواد

بعد تحميله لملف الأكواد وعندما تقوم بفك ضغط الملف سوف تجد له باسورد هذا هو wdbloog

معاينة تحميل 

شرح التركيب

أولا قم بالبحث عن هذا الوسم]]></b:skin> ثم قم بوضع هذا الكود فوقه مباشرا

img.comment_emo {
    height: auto !important;
    vertical-align: middle !important;
    width:25px !important;
    border:0px !important;
}
.emoji-button {padding:5px;background:#333;color:#fff;cursor:pointer}
.emoji-button:hover {color:#fff;background:#07ACEC}
div.emoWrap {display:none}

• وهذا هو كود الأستايل الخاص بالأبتسمات هو ليس كود كبير ولكنه مهم جدا فى جعل خاصية الأبتسمات تعمل بدون مشكلة فى مدونتك .
• الأن قم بالبحث عن هذا الوسم</head>ثم قم بوضع فوقه الكود التالى ، واذا لم تجده هكذا قم بالبحث عنه هكذا<head/>فى مدونتك .

<script type='text/javascript'>
//<![CDATA[
/* Emoji Emoticon - Created For Comments By Rhinokage Rio - www.wdbloog.blogspot.com */
window.emoticonx=function(){var t=function(t){var m=t||{},o=m.emoRange||"#comments p, div.emoWrap",e=m.putEmoAbove||"iframe#comment-editor",c=m.topText||"اضغط على الشكل حتى يظهر الكود",n=m.emoMessage||"";$(e).before('<div style="text-align:center" class="emoWrap"> :) hihi :( :-) :D ;( ;-( :-d @-) :P :o :&gt;) (o) [-( :-? (p) :-s (m) 8-) :-t :-b  b-( :-# =p~ $-) (y) (f) x-) (k) (h) (c) cheer <br/><b>'+c+"</b><br/>"+n+"</div>");var i=function(t,m,e){$(o).each(function(){$(this).html($(this).html().replace(/<br>:/g,"<br> :").replace(/<br>;/g,"<br> ;").replace(/<br>=/g,"<br> =").replace(/<br>\^/g,"<br> ^").replace(t," <img style='max-height:24px' src='"+m+"' class='emo delayLoad' alt='"+e+"' />"))})};i(/\shihi/gi,"http://twemoji.maxcdn.com/36x36/1f601.png","hihi"),i(/\s:\(+/g,"http://twemoji.maxcdn.com/36x36/1f615.png",":("),i(/\s:\)+/g,"http://twemoji.maxcdn.com/36x36/1f600.png",":)"),i(/\s:-\)+/g,"http://twemoji.maxcdn.com/36x36/1f60f.png",":-)"),i(/\s:D/gi,"http://twemoji.maxcdn.com/36x36/1f603.png",":D"),i(/\s;\(+/g,"http://twemoji.maxcdn.com/36x36/1f61e.png",";("),i(/\s;-\(+/g,"http://twemoji.maxcdn.com/36x36/1f62d.png",";-("),i(/\s:-d/gi,"http://twemoji.maxcdn.com/36x36/1f604.png",":-d"),i(/\s@-\)+/g,"http://twemoji.maxcdn.com/36x36/1f616.png","@-)"),i(/\s:P/gi,"http://twemoji.maxcdn.com/36x36/1f61c.png",":P"),i(/\s:o/gi,"http://twemoji.maxcdn.com/36x36/1f62e.png",":o"),i(/\s:&gt;\)+/g,"http://twemoji.maxcdn.com/36x36/1f606.png",":&gt;)"),i(/\s\(o\)+/gi,"http://twemoji.maxcdn.com/36x36/1f609.png","(o)"),i(/\s\[-\(+/g,"http://twemoji.maxcdn.com/36x36/1f614.png","[-("),i(/\s:-\?/g,"http://twemoji.maxcdn.com/36x36/2753.png",":-?"),i(/\s\(p\)+/gi,"http://twemoji.maxcdn.com/36x36/1f619.png","(p)"),i(/\s:-s/gi,"http://twemoji.maxcdn.com/36x36/1f625.png",":-s"),i(/\s\(m\)+/gi,"http://twemoji.maxcdn.com/36x36/1f620.png","(m)"),i(/\s8-\)+/gi,"http://twemoji.maxcdn.com/36x36/1f60e.png","8-)"),i(/\s:-t/gi,"http://twemoji.maxcdn.com/36x36/1f624.png",":-t"),i(/\s:-b/gi,"http://twemoji.maxcdn.com/36x36/1f634.png",":-b"),i(/\sb-\(+/gi,"http://twemoji.maxcdn.com/36x36/1f635.png","b-("),i(/\s:-#/gi,"http://twemoji.maxcdn.com/36x36/1f637.png",":-#"),i(/\s=p~/gi,"http://twemoji.maxcdn.com/36x36/1f35c.png","=p~"),i(/\s\$-\)+/gi,"http://twemoji.maxcdn.com/36x36/1f4b5.png","$-)"),i(/\s\(y\)+/gi,"http://twemoji.maxcdn.com/36x36/1f44d.png","(y)"),i(/\s\(f\)+/gi,"http://twemoji.maxcdn.com/36x36/1f33a.png","(f)"),i(/\sx-\)+/gi,"http://twemoji.maxcdn.com/36x36/1f60d.png","x-)"),i(/\s\(k\)+/gi,"http://twemoji.maxcdn.com/36x36/1f496.png","(k)"),i(/\s\(h\)+/gi,"http://twemoji.maxcdn.com/36x36/1f44f.png","(h)"),i(/\s\(c\)+/gi,"http://twemoji.maxcdn.com/36x36/2615.png","(c)"),i(/\scheer/gi,"http://twemoji.maxcdn.com/36x36/1f378.png","cheer"),$("div.emoWrap").one("click",function(){n&&alert(n)}),$(".emo").css("cursor","pointer").on("click",function(t){$(".emoKey").remove(),$(this).after('<input class="emoKey" type="text" size="'+this.alt.length+'" value=" '+this.alt+'" />'),$(".emoKey").trigger("select"),t.stopPropagation()}),$(".emoKey").on("click",function(){$(this).focus().select()}),$(document).on("click",function(){$(".emoKey").remove()})};return function(m){t(m)}}();
//]]>
</script>

• الأن أبحث عن هذا الوسم ايضا فى مدونتك</body>ثم قم بوضع الكود التالى فوقه .

<script type='text/javascript'>
            //<![CDATA[
            emoticonx({
              emoRange:"#comments p, div.emoWrap",
              putEmoAbove:"iframe#comment-editor",
              topText:"Click to see the code!"
            });
            //]]>
</script>

• الأن مع اخر كود هو الأكود الأهم فى موضوع اليوم وعليك التركز جيدا حتى تعرف كيفية وضعه فى مدونتك لانك سوف تبحث فى مدونتك عن وسم معين وسوف تجد من أكثر من واحد لذلك عليك التركز فى وضع الكود .
• أبحث فى مدونتك عن هذا الوسم وسوف تجد منه أكثر من وسم سوف تجد فى حدود 4 منه أخر وسم هو المطلوب والذى سوف تضع الكود التالى أسفله .

<br/>
        <a class='emoji-button buka' title='Emoticon'>الأبتسمات</a><a class='emoji-button tutup' style='display:none' title='Emoticon'>أخفاء الأبتسمات</a>
</p>
<script type='text/javascript'>
$(document).ready(function() {
    $(&#39;.buka&#39;).click(function() {
        $(&#39;div.emoWrap&#39;).show();
        $(&#39;.tutup&#39;).show();
        $(&#39;.buka&#39;).hide();
    });
    $(&#39;.tutup&#39;).click(function() {
        $(&#39;div.emoWrap&#39;).hide();
        $(&#39;.tutup&#39;).hide();
        $(&#39;.buka&#39;).show();
    });
});
</script>

• والكود سوف يكون كما فى الصورة عليك وضعه كما فى الصورة حتى لا تحدث مشكلة اثناء التركيب .

• ركز جيدا الكود المحدد بالأصفر هو الكود الذى بحث عنه وسوف تجد أعلى وأسفل منه أو بجانبة وسم صغير هكذا<p>و</p>كما فى الصورة وهذه الصورة قبل وضع الكود

• عليك التركز جيدا الكود الذى سوف تضعه أسفله سوف يكون عليك حذف وسم</p>من الصورة الثانية ووضع الكود كام بدول منه حتى تصبح كما فى الصورة الأوله
• وبعد ذلك سوف تقوم بحفظ القالب ومبروك عليك الإضافة

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