اضافة اداة المتابعة على المواقع الاجتماعية ممتازة 2013
السلام عليكم و رحمة الله.
أقدم لكم اليوم إضافة سريعة، جميلة و سهلة التركيب، من خلالها ستعرض على زوارك متابعة جديدك على المواقع الاجتماعية كتويتر أو يوتيوب أو عبر الخلاصات و المفضلات...
كما و يمكنكم تخصيصها لتوافق مبتغاكم. تركيبها يسير، فقط ازرع كود css في ملف القالب style ثم ضع كود html في أي مكان بين وسمي body. يمكنكم معاينة الإضافة من خلال الصورة المرفقة.
الشرح :
1-قم بتسجيل الدخول إلى حسابك بلوجر.
2- من لوحة التحكم الخاصة بمدونتك توجه إلى قالب .
3- بعدها إختر تحرير HTML ثم أنقر على متابعة .
4- بعد ظهور صفحة تعديل القالب إختر توسيع قوالب عناصر واجهة المستخدم.
5- الأن قم بالبحث عن :
]]></b:skin>
بعد إيجاد الكود ضع هذا قبله
#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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieJDznzKZb1auDv3foZa734rJemfO6DI_xEZf_r3mpaJRz2UJlsNBFKRZZTnByDY5v2akPo0boFCuwJLs2LMV2SpsU5T34b3QLsvq_zs58laPeDDRSBCAm-9seHOyUjWouuUrVT0LLXd3b/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>
ضع بعده هذا الكود مع تغيير ما هو بالأحمر
<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>
بالتوفيق وأي مشكلة أو إستفسار فلا تتردد :)
