مرحبا بكم جميعا زوار مدونة مدونة افكار ليبيا
درسنا اليوم هو شرح أضافة اربع نوافذ منبثقة عائمة مكونة من صندوق معجبين الفيس بوك مع صندوق محادثة تويتر وزر جوجل +1 والإشتراك بالخلاصات لمدونات بلوجر.تعتبر هذه الإضافة الرائعة الخاصة بالمواقع الإجتماعية مناسبة جدا للمدونات التي لا يوجد بها مكان لإضافات أخرى. حيث أنها تساهم في زيادة عدد زوار مدونتك.
تمكنك هذه الإضافة من إخفاء صندوق معجبين الفيس بوك، صندوق محادثة تويتر، زر جوجل +1 والإشتراك بالخلاصات، مع إظهارهم بمجرد مرور الماوس على الأزرار، وذلك بتقنية مسج.
تتكون الإضافة من اربع نوافذ منبثقة عائمة للمواقع الإجتماعية من :
1- صندوق عائم لمعجبي صفحتك على الفيس بوك
2- صندوق آخر التويتات على موقع تويتر.
3- صندوق به زر جوجل بلس +1.
4- صندوق الإشتراك بالقائمة البريدية لمتابعة خلاصات الموقع.
لنشرع الان فى تركيب مضت مضت هذه الإضافة علي البلوجر:
1- توجه إلى لوحة تحكم البلوجر.
2- ثم إلى تخطيط أو تصميم.
3- بعد ذلك أدخل إلى عناصر الصفحة. واضغط على أضف أداة.
4- قم باختار هتمل / جافا سكريبت.
5- ثم قم بنسخ الكود التالي كاملا وألصقه فى المكان المخصص بكود هتمل / جافا سكريبت.
<النمط>
IMG، وهو {
الحدود: 0؛
}
{#on
الرؤية: مرئي؛
}
{#off
الرؤية: مخفي؛
}
{#facebook_div
العرض: 196px؛
الطول: 340px؛
فيض: مخفي؛
}
{#twitter_div
العرض: 246px ،
الارتفاع: 353px؛
فيض: مخفي؛
}
{#google_plus_div
العرض: 152px؛
الطول: 97px؛
فيض: مخفي،
هامش اليسار: 50px الصيغة الصيغة.
هامش قمة: 10px؛
}
{#knfeedburner_div
العرض: 300px؛
الطول: 97px؛
تجاوز: مخفي،
هامش قمة: 5PX؛
هامش اليسار: -4px؛
}
{#kakinetwork_div
العرض: 300px؛
الطول: 97px؛
فيض: مخفي؛
} / * أسلوب الجانب الأيمن * / # facebook_right {
ض الفهرس: 10005،
الحدود: 2px الصلبة # 3c95d9،
لون الخلفية: # الاتحاد الفرنسي؛
العرض: 196px؛
الطول: 353px؛
الموقف: ثابت؛
اليمين: -200px؛
}
{#facebook_right IMG
الموقف: مطلقة؛
العلوي: -2px،
اليسار: -35px؛
}
{IFRAME #facebook_right
الحدود: 0px الصلبة # 3c95d9،
فيض: مخفي،
الموقف: ثابت؛
الطول: 360px؛
اليسار: -2px،
أعلى: -3px؛
}
#twitter_right {
ض الفهرس: 10004،
الحدود: 2px الصلبة # 6CC5FF.
لون الخلفية: # 6CC5FF ،
العرض: 246px؛
الطول: 353px؛
الموقف: ثابت؛
اليمين: -250px؛
}
{#twitter_right_img
الموقف: مطلقة؛
العلوي: -2px،
اليسار: -35px.
الحدود: 0؛
}
{#google_plus_right
ض الفهرس: 10003،
لون الخلفية: # F2F2F2.
الحدود: 2px الصلبة # 006ec9،
الحدود بين كبار: 2px الصلبة # 0056a0،
الحدود القاع: 2px الصلبة # 0056a0،
الحدود اليمين: 2px الصلبة # 0056a0،
الحدود اليسرى: مخفي،
العرض: 152px؛
الطول: 97px؛
الموقف: ثابت؛
اليمين: -154px؛
}
{#google_plus_right_img
الموقف: مطلقة؛
العلوي: -2px،
اليسار: -33px.
الحدود: 0؛
}
#feedburner_right {
ض الفهرس: 10003،
لون الخلفية: #fefefe.
الحدود: 2px # 5b5b5b الصلبة؛
الحدود بين كبار: 2px # 5b5b5b الصلبة؛
الحدود القاع: 2px # 5b5b5b الصلبة؛
الحدود اليمين: # 2px 5b5b5b الصلبة؛
الحدود اليسار: مخفي،
عرض: 300px؛
الطول: 97px؛
الموقف: ثابت؛
اليمين: -303px.
}
{#feedburner_right_img
الموقف: مطلقة؛
العلوي: -2px،
اليسار: -33px.
الحدود: 0؛
}
#kakinetwork_right {
ض الفهرس: 10003،
الحدود: 2px الصلبة # 303030؛
لون الخلفية: # الاتحاد الفرنسي؛
العرض: 300px؛
الطول : 97px؛
الموقف: ثابت؛
}
{#kakinetwork_right IMG
الموقف: مطلقة؛
العلوي: -2px،
اليسار: -101px؛
} / * ترك أسلوب الجانب * / # facebook_left {
ض الفهرس: 10005،
الحدود: 2px الصلبة # 3c95d9،
لون الخلفية: # الاتحاد الفرنسي؛
العرض: 196px؛
الطول: 353px؛
الموقف: ثابت،
اليسار: -200px؛
}
{#facebook_left IMG
الموقف: مطلقة؛
العلوي: -2px.
اليمين: -35px؛
}
{IFRAME #facebook_left
الحدود: 0px الصلبة # 3c95d9،
فيض: مخفي،
الموقف: ثابت؛
الطول: 360px؛
اليمين: -2px،
أعلى: -3px؛
}
{#twitter_left
زد الفهرس: 10004،
الحدود: 2px الصلبة # 6CC5FF،
لون الخلفية: # 6CC5FF،
العرض: 246px؛
الطول: 353px؛
الموقف: ثابت،
اليسار: -250px؛
}
{#twitter_left_img
الموقف: مطلقة؛
العلوي: -2px.
اليمين: -35px.
الحدود: 0؛
}
#google_plus_left {
ض الفهرس: 10003،
لون الخلفية: # . 006ec9
الحدود: 2px الصلبة # 006ec9،
الحدود بين كبار: 2px الصلبة # 0056a0،
الحدود القاع: 2px الصلبة # 0056a0.
-left الحدود: 2px الصلبة # 0056a0،
الحدود اليمين: مخفي،
العرض: 152px؛
الطول: 97px؛
الموقف: ثابت،
اليسار: -154px؛
}
{#google_plus_left_img
الموقف: مطلقة؛
العلوي: -2px
. اليمين: -33px
الحدود: 0؛
}
#feedburner_left {
ض الفهرس: 10003،
. لون الخلفية: #fefefe
الحدود: 2px # 5b5b5b الصلبة ،
الحدود بين كبار: 2px # 5b5b5b الصلبة؛
الحدود القاع: 2px # 5b5b5b الصلبة؛
الحدود اليسار: 2px # 5b5b5b الصلبة؛
الحدود اليمين: مخفي،
العرض: 300px؛
الطول: 97px؛
الموقف: ثابت،
اليسار: -303px؛
}
{ #feedburner_left_img
الموقف: مطلقة؛
العلوي: -2px.
اليمين: -33px.
الحدود: 0؛
}
#kakinetwork_left {
ض الفهرس: 10003،
الحدود: 2px الصلبة # 303030؛
لون الخلفية: # الاتحاد الفرنسي؛
العرض: 300px؛
الطول: 97px ،
الموقف: ثابت؛
}
{#kakinetwork_left IMG
الموقف: مطلقة؛
العلوي: -2px،
الحق: -101px؛
}
.box-title1 {
الحدود: #ddd الصلبة 1PX؛
/ * الحدود * دائرة نصف قطرها /
-webkit الحدود نصف قطرها : 6PX،
-moz الحدود نصف قطرها: 6PX،
الحدود نصف قطرها: 6PX،
/ * مربع الظل * /
-webkit مربع الظل: 5PX 5PX 5PX #CCCCCC،
-moz مربع الظل: 5PX 5PX 5PX #CCCCCC،
مربع الظل: 5PX 5PX 5PX #CCCCCC،
الحشو: 10px؛
الهامش: 10px 0؛
}
.enteryouremail {
خلفية: # الاتحاد الفرنسي الهامة ؛!
الحدود: 1PX # d2d2d2 الصلبة؛
الحشو: 0px 0px 8PX 8PX،
اللون: # a19999؛
FONT-SIZE: 12px؛
الطول: 25px؛
العرض: 165px؛
/ * الحدود نصف قطرها * /
-webkit الحدود نصف قطرها: 5PX؛
-moz الحدود نصف قطرها: 5PX؛
الحدود نصف قطرها: 5PX؛
الهامش: 0px؛
}
.submitbutton {
خلفية: # F2F2F2.
الحدود: 1PX الصلبة # F66303،
/ * مربع الظل * /
-webkit مربع الظل: 3PX 3PX 3PX رقم 666،
مربع الظل: 3PX 3PX 3PX # 666؛
الخط: 12px جريء ارييل، بلا الرقيق؛
اللون: # 000000؛
الطول: 25px ،
الحشو: 0 0 12px 12px،
الهامش: 0 0 0 5PX؛
/ * الحدود * دائرة نصف قطرها /
-webkit الحدود نصف قطرها: 5PX،
. الحدود نصف قطرها: 5PX
المؤشر: المؤشر؛
}
</ النمط> <النصي SRC = "HTTP: // اياكس. googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js '> </ script>
<النصي نوع = "نص / جافا سكريبت" SRC = "http://apis.google.com/js/ plusone شبيبة "> </ script>
<النصي نوع = "نص / جافا سكريبت"> مسج (الوثيقة) .ready (وظيفة () {مسج ("# facebook_right"). تحوم (وظيفة () {مسج (هذا) .stop (صحيح، كاذبة) .animate ({الحق:} 0، 500). }، وظيفة () {. مسج ("# facebook_right") وقف (صحيح، كاذبة) .animate ({الحق:} -200، 500). }). مسج ("# twitter_right") تحوم (وظيفة () {مسج (هذا) .stop (صحيح، كاذبة) .animate ({الصحيحة: 0}، 500)؛}، وظيفة () {مسج ("# twitter_right ") .stop (صحيح، كاذبة) .animate ({الحق:}. -250، 500)؛}) . مسج ("# google_plus_right") تحوم (وظيفة () {مسج (هذا) .stop (صحيح، كاذبة ) .animate ({الصحيحة: 0}، 500)؛}، وظيفة () {مسج ("# google_plus_right") .stop (صحيح، كاذبة) .animate ({الحق:} -154، 500)؛}). . مسج ("# feedburner_right") تحوم (وظيفة () {مسج (هذا) .stop (صحيح، كاذبة) .animate ({الصحيحة: 0}، 500)؛}، وظيفة () {مسج ("# feedburner_right"). وقف (صحيح، كاذبة) .animate ({الحق:} -303، 500)؛}) })؛ </ script>
<div معرف = "على">
<div معرف = "facebook_right" على غرار = "أعلى: 18٪؛ ">
<div معرف = "facebook_div">
<IMG ALT = "" />
<IFRAME التمرير = "لا" frameborder = "0" على غرار = "الحدود: لا شيء؛ فيض: مخفي، العرض: 200px؛ الطول: 346px؛ " allowtransparency = "صحيح"> </ iframe> أراء أراء </ div> </ div> </ div> <div معرف = "على"> <div معرف = "twitter_right" على غرار = "الأعلى: 35 ٪؛ "> <div معرف = "twitter_div"> <IMG معرف = "twitter_right_img" SRC = "http://widgets.twimg.com/j/2/widget.js"> </ script> <النصي> جديد TWTR .Widget ({نسخة: 2، نوع: "الملف الشخصي"، RPP: 4، فاصل: 1000، العرض: 246، الطول: 265، موضوع: {قذيفة: {خلفية: '# 63BEFD، اللون:' # FFFFFF '} ، تويت: {خلفية: '# FFFFFF "، اللون:' # 000000 '، وصلات:' # 47a61e '}}، ويضم: {الحلقة: كاذبة، ويعيش: صحيح، التمرير: كاذبة، الهاش: كاذبة، والطابع الزمني: صحيح ، والآلهة: صحيح، والسلوك: 'كل'}}) تقديم () SETUSER (. " AfkarPro ') .start ()؛ </ script> </ div> </ div> </ div> <div معرف = "على"> <div معرف = "google_plus_right" على غرار = "أعلى: 52٪؛" > <div معرف = "google_plus_div"> <IMG معرف = "google_plus_right_img" النمط = "تعويم: الأيسر. الهامش: 10px 10px 10px 0؛ "> <ز: plusone حجم = "طويل القامة" EXPR: أ أ href = "البيانات: post.url"> </ ز: plusone> </ div> </ div> </ div> <div معرف = "على"> <div معرف = "feedburner_right" على غرار = "أعلى: 69٪؛"> <div معرف = "knfeedburner_div"> <مركز> <H4 النمط = "اللون: # F66303؛"> يمكنك أيضا الحصول على تحديثات البريد الإلكتروني مجاني: </ H4> <إجراء نموذج = "http://feedburner.google.com/fb/a/mailverify" أسلوب = "آخر" الهدف = "popupwindow" onsubmit = "نافذة. فتح ('http://feedburner.google.com/fb/a/mailverify؟uri= afkarproRSS '،' popupwindow '،' التمرير = نعم، العرض = 550، الطول = 520 ')؛ العودة الحقيقية "> <المدخلات gtbfieldid = "10" الطبقة = "enteryouremail" اسم = "البريد الإلكتروني" قيمة = "أدخل بريدك الالكتروني هنا ..." و و onblur = "اذا كان (this.value == & # 39؛ & # 39؛) {هذا. قيمة = & # 39؛ أدخل بريدك الالكتروني هنا ... & # 39؛؛} "تشغيل تشغيل OnFocus =" اذا كان (this.value == & # 39؛ أدخل بريدك الالكتروني هنا ... & # 39؛) {هذا .value = & # 39؛ & # 39؛؛} "نوع =" النص "/> <المدخلات القيمة =" afkarproRSS "اسم =" أوري "نوع =" مخفي "/> <المدخلات القيمة =" إرسال "الطبقة =" submitbutton "نوع =" تقدم "/> </ form> </ مركز> <IMG معرف = "feedburner_right_img" أ أ href = "http://afkarpro.blogspot.com/"> <IMG alt = "للمدون القطعة" عنوان = "مدون القطعة" /> </A> <مركز /> </ مركز> </ مركز>
6- بعد ذلك سنقوم بالتعديل على الكود حيث سنقوم بالضغط على مفتاح على Ctrl + F للبحث على مايلي:
ابحث عن afkarpro.ap واستبدله بإسم المستخدم الخاص بصفحتك على الفيس بوك.
ابحث عن AfkarPro واستبدله بإسم المستخدم الخاص بحسابك على تويتر.
ابحث عن afkarproRSS واستبدله بإسم المستخدم الخاص بخلاصات مدونتك (علي فيدبورنر).
7- أخيرا لاتنسى أن تقوم بحفظ الأداة.
*! إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...
لا يوجد تعليقات
أضف تعليق