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

السلام عليكم ورحمة الله وبركاته

في هذا الدرس الجديد من قسم البلوجر سوف أشرح لكم طريقة إضافة رموز الإبتسامات التي تعطي حيوية للتعليقات وهي تصميم بتقنية CSS Sprite وهي صورة واحده يتم تجزئتها وكدلك طريقة تركيبها سهله ولا تؤثر في سرعة المدونة .

اتبع الخطوات جيدا لتركيب الإضافة : 

سوف تتوجه إلى المدونة تم تدهب إلى (قالب) وتأخد نسخ احتياطي للقالب تم (تحرير html) قم بالبحت عن  (</body>)

تم ضع هذا الكود فوقه مباشرة :

<script src='https://cnmu.googlecode.com/svn/trunk/smiley.js' type='text/javascript'/>

وقم بالبحت عن (]]></b:skin>)
وأضف الكود التالي فوق الوسم :

/*Smile*/
.cnmu-smilet {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6V24dbLBRY3WjFSZ2cKhVDuWDD5kVrdtBR0QCf_wDhhc9P58nN0Dxq2HZEBzeyqFCHlQj_kc4hQpEO9eI0JL8TVTRQaL2KzzNrqzYSjsIFCneWBWMhqRT3tTXa_dJoCFHDmYbtidjXnt6/s3512/smily.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
color: rgba(0, 0, 0, 0) !important;
display: inline-block;
height: 20px;
position: relative;
width: 20px;
font: bold 16px arial;
direction: ltr;
}
.cnmu-smilet:hover {cursor: default;}
.cnmu-smilet:hover:after {
background: #fff;
border: 2px solid #0062C4;
border-radius: 100%;
bottom: 26px;
color: #000;
content: attr(title);
direction: ltr !important;
display: inline-block;
font: bold 16px arial;
left: 20%;
padding: 5px 1px;
position: absolute;
text-align: center;
width: 30px;
z-index: 98;
}

وإدا أردة تغير اللون #0062C4 وهو لون إطار التلميحات التي تظهر عند تمرير الماوس على التسميات بلون مناسب لقالبك