چگونه در وبلاگ خود اسمایلی (emoticon) قرار دهیم؟
سلام
همونطور که می بینید برای وبلاگ خودم اسمایلی درست کردم :D
امروز می خوام آموزش این کار رو بذارم :angel
آموزش رو در ادامه مطلب بخونید چون زیاده
توجه: برای این کار نیاز به یک فضا برای آپلود اسمایلی ها دارید که لینک مستقیم در اختیار شما قرار بده. مثل بیان باکس، پرشین گیگ یا دراپ باکس.
خوب اول از همه باید یک سری اسمایلی پیدا کنید. اینترنت رو سرچ کنید و یه پک اسمایلی(emoticon) خوب که اندازه اش مناسب قرار گرفتن داخل متنه و از قیافش خوشتون میاد پیدا کنید. ( یه خوبش رو می تونید از اینجا دانلود کنید).
بعد باید این اسمایلی ها رو یه جا آپلود کنید. اگر خودتون سرور یا هاست داشته باشین می تونین به راحتی یه فولدر درست کنین و همه اسمایلی ها رو توی اون فولدر بریزید. اگر این امکان رو ندارید و میخواید فایل هاتون رو توی دراپ باکس، بیان باکس یا جاهای دیگه آپلود کنید بدست آوردن آدرس(URL) اونها و وارد کردن اونها توی کد یه کم وقت می بره ولی امکان پذیره.
بعد از اون نوبت به ویرایش کد های جاوا اسکریپت میرسه.
*نکته: وبلاگ بیان به طور پیشفرض امکان قرار دادن جاوااسکریپت به شما رو نمیده. برای این کار باید بسته جاوا اسکریپت رو خریداری کنید. (منم اولش زورم میومد پول بدم :money ولی بعد به این نتیجه رسیدم که ارزشش رو داره.)
خب، اول باید jQuery رو لود کنیم. برای این کار این کد رو به قسمت <head> وبلاگتون اضافه کنید. (یا هر قسمت دیگه که اسکریپت هایی مثل آمار وبلاگ رو قرار میدید).
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
بعد باید کد زیر رو هم بعد از ویرایش در وبلاگتون قرار بدید. در پایین مرحله به مرحله ویرایش کد رو توضیح میدم.
<script type="text/javascript">
(function($){
$.fn.emotions = function(options){
$this = $(this);
var opts = $.extend({}, $.fn.emotions.defaults, options);
return $this.each(function(i,obj){
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
var x = $(obj);
// Entites Encode
var encoded = [];
for(i=0; i<o.s.length; i++){
encoded[i] = String(o.s[i]).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
for(j=0; j<o.s.length; j++){
var repls = x.html();
if(repls.indexOf(o.s[j]) || repls.indexOf(encoded[j])){
var imgr = o.a+o.b[j]+"."+o.c;
var rstr = "<img src='"+imgr+"' border='0' />";
x.html(repls.replace(o.s[j],rstr));
x.html(repls.replace(encoded[j],rstr));
}
}
});
}
// Defaults
$.fn.emotions.defaults = {
a : "http://yoursite.ir/emoticons/", // Emotions folder
b : ["smile","sad","angry"], // Emotions Type
s : [ ":]" , ":[" , ">(" ],
c : "png" // Emotions Image format
};
})(jQuery);
$(document).ready(function(){
$("body").emoticons();
});</script>
توضیح: این کد اینطوری عمل می کنه که آدرس فولدر و اسم فایل
ها(اسمایلی ها) رو از شما میگیره و یک سری علامت هم از شما میگیره. مثل این
علامت :] . بعد به ترتیب اون علامت ها رو به اون فایل ها اختصاص میده یعنی هر جا توی متن شما علامت :] باشه اونو تبدیل به یک اسمایلی میکنه. مثل این :)
خب در این مرحله شما باید اسمایلی های مورد علاقه تون رو پیدا و آپلود کرده باشید. اگر شما سرور یا هاست داشته باشید کارتون آسون تره چون لینک فایل هاتون کوتاه تر خواهد بود:
yoursite.ir/emoticons/smile.png
yoursite.ir/emoticons/sad.png
yoursite.ir/emoticons/angry.png
ولی اگر از سرویس های ابری استفاده می کنید احتمالا لینک فایل ها طولانی تره. مثلا لینک سه تا اسمایلی که من تو بیان باکس آپلود کردم این شکلیه:
http://bayanbox.ir/download/938544333096715130/smile.png
http://bayanbox.ir/download/3775135355621247998/sad.png
http://bayanbox.ir/download/7311515182216650722/angry.png
همونطور که میبینید همه فایل ها یک قسمت آدرس مشترک دارند و یک قسمت آدرس که برای هر کدوم متفاوت هست و در واقع اسم اون فایل بخصوص حساب میشه. یک قسمت آخر هم دارند که فرمت فایل هست.
همونطور که گفتم این کد نیاز به ویرایش داره. اول اون رو توی نوت پد کپی کنید و بعد همونطوری که در ادامه میگم ویرایشش کنید:
خب، کلا چهار قسمت هست که میخوایم توی این کد ویرایش کنیم. که همون آدرس سایت، اسم فایل ها، شکلک ها و فرمت فایل هاست:
a: آدرس مشترک فایل ها
b: اسم فایل ها
s: شکلک ها
c: فرمت فایل
مراحل:
1- آدرس مشترک فایل ها رو توی گیومه جاگذاری کنید(به اسلش آخر دقت کنید). مثلا:
"http://yoursite.ir/emoticons/"
یا
"http://bayanbox.ir/download/"
2- اسم فایل ها رو به ترتیب همونطور که توی کد نشون داده شده وارد کنید(بدون نقطه و فرمت فایل). هر اسم داخل گیومه و بین گیومه ها هم ویرگول باید باشه. اگر لینک مسقتیم دارید اینجوری میشه:
"smile","sad","angry"
اگر لینک ابری دارید اینجوری میشه:
"938544333096715130/smile", "3775135355621247998/sad", "7311515182216650722/angry"
3- شکلک ها رو به همون ترتیب که اسم فایل ها رو نوشتید وارد کنید. توی مثال بالا، اگر می خواید هر جا توی متن :] گذاشتید تبدیل به اسمایلی خنده بشه و :[ و $( به ترتیب ناراحت و عصبانی باشند اینطوری وارد می کنیم:
":]", ":[", ">("4- فرمت اسمایلی هاتون رو وارد کنید. معمولا png یا gif هست اما میتونه هر چیزی باشه.
خب حالا این کد ویرایش شده رو توی وبلاگ خودتون قرار بدید.
تبریک میگم! الان باید تو وبلاگتون صاحب اسمایلی شده باشین :love
این مطلبتم با حال بود ، خوشحال می شم از آخرین پست سایت من هم دیدن کنی .
عنوان مطلب : عذاب های مختلف در آخرت و علل آن
خوشحال می شم نظرت را راجع به این مطلب بدونم .