صندوق اعجابات الفيس بوك مع تأثير التضليل الجميل عليه

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

اقدم لكم اليوم شرحاً لكيفية اضافة صندوق اعجاب الفيس بوك مميز

يحوي تأثيرا جميلا كما في المثال ادناه طبعا تم ترجمة الموضوع 

من قِبل مدونة ارشيف بلوجر ,المصدر 

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

1. اذهب للوحة تحكم مدونتك .
2. القالب.
3. تحرير HTML'
4. متابعه و اشر على توسيع القوالب.
5. اضغط Ctrl+F من لوحة المفاتيح.
6. ابحث عن الوسم التالي:

  ]]></b:skin>

7.واستبدله بالكود التالي:

#FBox{background-color:#f6f6f6;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #ccc;height:230px;position:relative;margin-bottom:10px;width:292px;padding:0 10px 15px 0;}
#FBox:before,#FBox:after{background:#f7f7f7;border:1px solid #aaa;border-top:none;bottom:-3px;content:"";height:1px;left:2px;position:absolute;right:2px}
#FBox:after{bottom:-5px;box-shadow:0 0 2px #aaa;left:4px;right:4px}
#FBox {filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter: gray;-webkit-filter: grayscale(1);}
#FBox:hover {filter: none;-webkit-filter: grayscale(0);}
]]></b:skin>

7.الان اضغط حفظ.

8.الان اضغط على تخطيط و اضف اداة "HTML/Javascript"

9.الصق الكواد التالي:

و الستبدل الرابط الذي باللون الازق برابط صفحة الفيس بوك التي تريد من الزوار الاعجاب بها.

<div id='FBox'>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/BloggerArchive0&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23F7F7F7&amp;stream=false&amp;header=false&amp;" style="border:none; overflow:hidden; width:292px; height:238px;" ></iframe>
</div>

اخيرا ارجو ان يستفيد الجميع من الموضوع

و اي استفسار يمكنك وضعه في تعليق

وساقوم بالاجابه عنه في اقرب وقت

ممكن ان شاء الله.

تحيااتي.