إضافة أزرار الشبكات الإجتماعية المتأرجحة والثابتة في مدونات بلوجر

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

**- كالعادة قبل كل شيء، تحسبا لأي عطل أو خطأ يجب أخذ نسخة إحتياطية من القالب

**- ثم نقوم بتوسيع القالب بالضغط على علامة صح

1- نبحث عن هذا الوسم




</body>

2- قبله مباشرة نضع هذا الكود




<!-- ta3allamm.blogspot.com -->

<div class="flt-wdt">

<a href="http://www.facebook.com/Page id" title="صفحتنا في فايسبوك"><img alt="Join me on Facebook" src="رابط الصورة" /></a>

<a href="http://twitter.com/Your profile" title="تابعني على تويتر"><img alt="Follow me on Twitter" src="رابط الصورة" /></a>

<a href="http://www.delicious.com/Profile" title="أضفنا في دليشيوز"><img alt="Find me on Delicious" src="رابط الصورة" /></a>

<a href="http://feeds.feedburner.com/feed-address" title="الخلاصات"><img alt="Subscribe to RSS" src="رابط الصورة" /></a>

<a href="http://your blog.blogspot.com/p/Contact page" title="اتصل بنا"><img alt="Email me" src="رابط الصورة" /></a>

</div>

<!-- End -->

      اللون الأزرق هو الكلمة التي ستضهر عند مرور الماوس
     اللون البرتقالي هو رابط الصورة أو الايقونة التي من الأفضل ان تكون قياس 32x32
     اللون البنفسجي هو لرابط حسابك في الشبكات الإجتماعية 

كما يمكنكم التوجه إلى هذا الموقع المليئ بالأيقونات الجميلة و المجانية



موقع جميل مليئ بالأيقونات الرائعة و المجانية 
إذا أردت إضافة روابط لشبكات إجتماعية أخرى أو أي رابط آخر يكفي أن تضيف الرابط التالي قبل غلق الداله div في  الكود السابق


<a href="هنا تضع الرابط " title="وصف الرابط"><img alt="Give it a title" src="هنا تضع رابط الصورة" /></a>


3- الآن نبحث عن هذا الوسم 




]]></b:skin>

و قبله / أعلاه نضع الكود التالي



.flt-wdt{

position:fixed;

right:10px;

top:40%;

}

.flt-wdt img{

float:right;

clear:right;

margin:5px;

-webkit-transition: all .2s ease-in-out;

-moz-transition: all .2s ease-in-out;

-o-transition: all .2s ease-in-out;

transition: all .2s ease-in-out;

}

.flt-wdt img:hover{

-moz-transform: scale(1.2) rotate(6deg);

-webkit-transform: scale(1.2) rotate(6deg);

-o-transform: scale(1.2) rotate(6deg);

-ms-transform: scale(1.2) rotate(6deg);

transform: scale(1.2) rotate(6deg);

}

إذا أردتم تغيير مكانها من اليمين إلى اليسار يكفي أن تغيروا كلمة right إلى left في الكود السابق (الكلمة المضللة باللون الأخضر)
أما إن أردتم تغير درجة علوها فيكمكنم تغيير النسبة 40% المضللة باللون الاخضر كما شئتم.

الآن يمكنكم معاينة الإضافة و حفظ العمل.

01:11