كود css لعمل زر المشاركة rss -twitter.digg-facebook اسفل صفحات المنتدي

كود css لعمل زر المشاركة rss -twitter.digg-facebook اسفل صفحات المنتدي

قبل
وضع الكود مثال عليه
للنسخة :PhpBB2

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



الكود
للنسخة : PhpBB2
طريقة الوضع : لوحة الادارة/مظهر المنتدي/الصور
والالوان /الوان/ورقة تصميم css

الكود: [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

1. .sharing-cl{
   
2. overflow:hidden;
   
3. margin:-20px
   
4. 0 0 0;
   
5. padding:0;
   
6. list-style:none;
   
7. width:530px;
   
8. }
   
9. .sharing-cl
   
10. 
    
11. a{
    
12. overflow:hidden;
    
13. width:75px;
    
14. height:20px;
    
15. float:left;
    
16. margin-right:5px;
    
17. text-indent:-200px;
    
18. background:url(https://sd-2.archive-host.com/membres/up/24071559914142709/tuto_partager/partager.png)
    
19. 
    
20. no-repeat;
    
21. }
    
22. a.sh-su{background-position:-210px -40px;}
    
23. a.sh-feed{background-position:-70px
    
24. 
    
25. -40px;}
    
26. a.sh-tweet{background-position:-140px -40px;}
    
27. a.sh-mail{background-position:0
    
28. 
    
29. -40px;}
    
30. a.sh-digg{background-position:-280px -40px;}
    
31. a.sh-face{
    
32. margin-right:0;
    
33. background-position:-350px
    
34. 
    
35. -40px;
    
36. }
    
37. a.sh-mail:hover{background-position:0 1px;}
    
38. a.sh-feed:hover{background-position:-70px
    
39. 
    
40. 1px;}
    
41. a.sh-tweet:hover{background-position:-140px 1px;}
    
42. a.sh-su:hover{background-position:-210px
    
43. 
    
44. 1px;}
    
45. .sh-digg:hover{background-position:-280px 1px;}
    
46. a.sh-face:hover{
    
47. background-position:-350px
    
48. 
    
49. 1px;
    
50. }
    
51. #text{
    
52. margin-top:5px;
    
53. font-weight:bold;
    
54. font-family:helvetica,arial,sans-serif;
    
55. }
    
56. #text
    
57. 
    
58. a{
    
59. text-indent:0;
    
60. height:auto;
    
61. text-align:center;
    
62. font-size:11px;
    
63. padding-top:35px;
    
64. color:#999;
    
65. text-decoration:none;
    
66. }
    

بعد
ذلك نذهب الي
لوحة الادارة/ادارة عامة/تشكيل/وصف المنتدي
ثم نلصق
هذا الكود فيه
الكود: [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

2. type=text/javascript
   
3. src=https://sd-2.archive-host.com/membres/up/24071559914142709/tuto_partager/partagerphpbb2.js>
   

....


مثال علي الكود لباقي النسخ

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



طريقة الوضع : لوحة الادارة/مظهر
المنتدي/الصور والالوان /الوان/ورقة تصميم
css

الكود يعمل مع : PhpBB3 – PunBB – Invision
الكود: [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

1. .sharing-cl{
   
2. overflow:hidden;
   
3. margin:-20px
   
4. 0 0 0;
   
5. padding:0;
   
6. list-style:none;
   
7. width:530px;
   
8. }
   
9. .sharing-cl
   
10. 
    
11. a{
    
12. overflow:hidden;
    
13. width:75px;
    
14. height:20px;
    
15. float:left;
    
16. margin-right:5px;
    
17. text-indent:-200px;
    
18. background:url(https://sd-2.archive-host.com/membres/up/24071559914142709/tuto_partager/partager.png)
    
19. 
    
20. no-repeat;
    
21. }
    
22. a.sh-su{background-position:-210px -40px;}
    
23. a.sh-feed{background-position:-70px
    
24. 
    
25. -40px;}
    
26. a.sh-tweet{background-position:-140px -40px;}
    
27. a.sh-mail{background-position:0
    
28. 
    
29. -40px;}
    
30. a.sh-digg{background-position:-280px -40px;}
    
31. a.sh-face{
    
32. margin-right:0;
    
33. background-position:-350px
    
34. 
    
35. -40px;
    
36. }
    
37. a.sh-mail:hover{background-position:0 1px;}
    
38. a.sh-feed:hover{background-position:-70px
    
39. 
    
40. 1px;}
    
41. a.sh-tweet:hover{background-position:-140px 1px;}
    
42. a.sh-su:hover{background-position:-210px
    
43. 
    
44. 1px;}
    
45. .sh-digg:hover{background-position:-280px 1px;}
    
46. a.sh-face:hover{
    
47. background-position:-350px
    
48. 
    
49. 1px;
    
50. }
    
51. #text{
    
52. margin-top:5px;
    
53. font-weight:bold;
    
54. font-family:helvetica,arial,sans-serif;
    
55. }
    
56. #text
    
57. 
    
58. a{
    
59. text-indent:0;
    
60. height:auto;
    
61. text-align:center;
    
62. font-size:11px;
    
63. padding-top:35px;
    
64. color:#999;
    
65. text-decoration:none;
    
66. }
    

بعد
ذلك نذهب الي
لوحة الادارة/ادارة عامة/تشكيل/وصف المنتدي
ثم نلصق هذا الكود فيه
الكود يعمل مع : PhpBB3 – PunBB – Invision

الكود: [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

2. src=https://sd-2.archive-host.com/membres/up/24071559914142709/tuto_partager/partager.js>
   

Translate:a7medvirus
Idea:Alex Fowl


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

فريق المساعدة

شكرااا لك كثيرا

شكرااا لك كثيرا