معهد خبراء بلوجر - اضافة اداة المتابعة على المواقع الاجتماعية احترافية

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

http://3.bp.blogspot.com/-koN5zOuGKX...ns+titre+2.jpg

الشرح :

1-قم بتسجيل الدخول إلى حسابك بلوجر.
2- من لوحة التحكم الخاصة بمدونتك توجه إلى قالب .
3- بعدها إختر تحرير HTML ثم أنقر على متابعة .
4- بعد ظهور صفحة تعديل القالب إختر توسيع قوالب عناصر واجهة المستخدم.
5- الأن قم بالبحث عن :
]]></b:skin>
بعد إيجاد الكود ضع هذا قبله

كود PHP:


		
			
#w2b-share ul {position:fixed;right:20px;top:100px;list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}#w2b-share ul li a {display: block;float: right;width: 64px;height:64px;background-image: url('http://1.bp.blogspot.com/-fhKt1mgpXbE/T2kFQI-_K2I/AAAAAAAABcE/xNPE5D4-9h4/s1600/omnidal-social.png');margin-top:3px;margin-bottom: 3px;background-repeat: no-repeat;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-ms-transition: all 0.3s ease;transition: all 0.3s ease;}#w2b-share ul li a.facebook   {background-position: 0px -0px;   }#w2b-share ul li a.facebook:hover   {background-position: 0px -65px;   }#w2b-share ul li a.twitter   {background-position: -66px -0px;  }#w2b-share ul li a.twitter:hover   {background-position: -66px -65px;  }#w2b-share ul li a.flickr  {background-position: -131px -0px;  }#w2b-share ul li a.flickr:hover  {background-position: -131px -65px;  }#w2b-share ul li a.google    {background-position: -197px -0px; }#w2b-share ul li a.google:hover    {background-position: -197px -65px; }#w2b-share ul li a.youtube   {background-position: -262px -0px; }#w2b-share ul li a.youtube:hover   {background-position: -262px -65px; }#w2b-share ul li a.omnidal   {background-position: -327px -0px; }#w2b-share ul li a.omnidal:hover   {background-position: -327px -65px; }

6 - بعد إضافة الكود قم بالبحث مرة أخرى عن :

<body>

ضع بعده هذا الكود مع تغيير ما هو بالأحمر

كود PHP:


		
			

<div id='w2b-share'><ul><li><a class='facebook' href='http://www.facebook.com/Th3Dev' title='اشترك في صفحتي على Facebook'/></li><li><a class='twitter' href='https://twitter.com/SufianSmaili' title='تابعني عبر twitter'/></li><li><a class='flickr' href='#' title='تابعني عبر flickr  '/></li><li><a class='google' href='https://plus.google.com/110250527281023691653/posts' title='تابعني عبر google+'/></li><li><a class='youtube' href='http://www.youtube.com/user/s9smaili' title='تابع قناتي على اليوتيوب'/></li><li><a class='omnidal' href='http://www.blogger.com/follow-blog.g?blogID=2027653763198871955' title='انضم لأعضاء المدونة'/></li></ul></div>

بالتوفيق وأي مشكلة أو إستفسار فلا تتردد :)

الموضوع الأصلي : http://www.th3dev.com/2012/09/blog-post_5.html