صندوق المعجبين بصفحتك على الفيس بوك بلغة CSS وبتأثير رائع

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

 اليوم جئتكم باضافة رائعة وهي عبارة عن صندوق المعجبين الخاص بصفحتكم على الفيس بوك والذي يعتمد على لغة CSS  وهو نفسه المتواجد على مدونتي تحت إسم (تابع الشامل على الفيس بوك) دون ان اطيل عليكم لنشرح طريقة التركيب

طريقة تركيب كود  HTML

1) تسجيل الدخول الخاص بك المدون حساب

2) لوحة التحكم الرئيسية> التصميم> إضافة أداة> HTML / Javascript

3) انسخ الكود التالي والصقه في الاداة  HTML / Javascript

 4) ضع الكود التالي مع تغير ID الخاص بصفحتك :

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

<script type="text/javascript">FB.init("32eb3732082b27e7c314feb421a56208");</script>

<fb:fan profile_id="ID" connections="20" width="300" height="300" css="http://related-sources.googlecode.com/files/facebook.css?"></fb:fan>
 <a href="  http://ashamil.blogspot.com/2012/07/css.html  " class="fbfb_tut" title="أضف هذه الإضافة إلى مدونتك">أضف هذه الإضافة إلى مدونتك</a>

5) واخيرا قم بحفظ الاضافة 

ملاحظةيمكنكم التعديل على عرض وارتفاع الاضافة من خلال الرقم الاحمر والذي يمثل ارتفاع الاضافة والرقم الازرق والذي يمثل عرضهاولا تنسو التعديل على رقم ID

شرح الحصول على ID الخاص بصفحتك

عندما سنقوم باضغط على الصورة الخاصة بالصفحة و سوف يظهر لك في الربط الأعلى مثل :

اضغط على الصورة لتكبيرها

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

تابع القراءة

كيفية تغيير مظهر الفيس بوك

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

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

اسم الاضافة : Facebook Colour Changer

ترخيص الاضافة : مجانية – free

موقع الاضافة / سوق chrome الإلكتروني : chrome.google.com/webstore

لتحميل اضافة Facebook Colour Changer من الرابط التالي:

Download Facebook Colour Changer

تابع القراءة

شرح طريقة دمج صورة الغلاف مع الصورة الشخصية في الفيس بوك للحصول على مظهر رائع

• 0.00 / 5 5

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

                                                                                      المعاينة

حقاً شي رائع ومذهل 

اولاً وقبل ان نبداء الشرح نقوم بالدخول الى الرابط التالي :

timelinecoverbanner

الموقع الذي سنقوم بدمج الصور فيه يوفر اغلفة وبه توقيع خاص بالموقع فلذلك ارفع صورك بنفسك 

[ 1 ] اضغط على upload Background ثم ارفع الصوره الي تريدها تكون غلاف لصفحتك

   [ 2 ] بعد رفع الصوره نضغط على Save Profille Photo لـ حفظ الصوره الشخصيه 

[ 3 ] نضغط على Save Timeline Cover لـ حفظ الغلاف

اتمنى ان يكون الشرح واضح ومفهوم 

تابع القراءة

لمسة جدابة وهي عبارة عن نجوم صغيرة تنبثق من مؤشر الماوس عند تحريكه

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

لازلنا نقدم لكم اجمل الاضافات. وهاهي احدى اروع الاصافات والتي تضيف لمدونتكم لمسة جدابة وهي عبارة عن نجوم صغيرة تنبثق من مؤشر الماوس عند تحريكه واترككم مع طريقة تركيبها 

المعاينة

طريقة تركيب كود  HTML

1) تسجيل الدخول الخاص بك المدون حساب

2) لوحة التحكم الرئيسية> التصميم> إضافة أداة> HTML / Javascript

3) انسخ الكود التالي والصقه في الاداة  HTML / Javascript

<script type="text/javascript" src="https://sites.google.com/site/jombinabelogcursorbuih/bubble%20cursor.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#FFFF33", "#FFFF33", "#FFFF33", "#FFFF33", "#FFFF33"); // colours for top, right, bottom and left borders and background of bubbles

var bubbles=100; // maximum number of bubbles on screen
/****************************

* JavaScript Bubble Cursor *

* (c) 2010 mf2fm web-design *

* http://www.mf2fm.com/rv *

* DON'T EDIT BELOW THIS BOX *

****************************/

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var bubb=new Array();

var bubbx=new Array();

var bubby=new Array();

var bubbs=new Array();

window.onload=function() { if (document.getElementById) {

var rats, div;

for (var i=0; i<bubbles; i++) {

rats=createDiv("3px", "3px");

rats.style.visibility="hidden";

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="1px";

div.left="0px";

div.bottom="1px";

div.right="0px";

div.borderLeft="1px solid "+colours[3];

div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="0px";

div.left="1px";

div.right="1px";

div.bottom="0px"

div.borderTop="1px solid "+colours[0];

div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.left="1px";

div.right="1px";

div.bottom="1px";

div.top="1px";

div.backgroundColor=colours[4];

div.opacity=0.5;

if (document.all) div.filter="alpha(opacity=50)";

document.body.appendChild(rats);

bubb[i]=rats.style;

}

set_scroll();

set_width();

bubble();

}}

function bubble() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<bubbles; c++) if (!bubby[c]) {

bubb[c].left=(bubbx[c]=x)+"px";

bubb[c].top=(bubby[c]=y)+"px";

bubb[c].width="3px";

bubb[c].height="3px"

bubb[c].visibility="visible";

bubbs[c]=3;

break;

}

}

for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);

setTimeout("bubble()", 40);

}

function update_bubb(i) {

if (bubby[i]) {

bubby[i]-=bubbs[i]/2+i%2;

bubbx[i]+=(i%5-2)/5;

if (bubby[i]>sdown && bubbx[i]>0) {

if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {

bubb[i].width=bubbs[i]+"px";

bubb[i].height=bubbs[i]+"px";

}

bubb[i].top=bubby[i]+"px";

bubb[i].left=bubbx[i]+"px";

}

else {

bubb[i].visibility="hidden";

bubby[i]=0;

return;

}

}

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sleft;

x=(e)?e.pageX:event.x+sdown; }

window.onresize=set_width;

function set_width() {

if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (typeof(self.innerHeight)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

else {

swide=800;

shigh=600;

}

}

window.onscroll=set_scroll;

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}

function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}

// ]]>
</script>

يمكنكم تغيير لون النجوم من خلال تغير الرمز المظلل باللون الاصفر في الاعلى وهذا موقع يقدم خدمة رموز الالوان هنا

4) واخيرا قم بحفظ الاضافة 

تابع القراءة