إضافة أداة المشاركات الشائعه بشكل أنيق وعصري بالوان خفيفه وانيقه جدا



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

صوره توضيحيه للاضافه

كيفية تثبيت هذه الاضافه على مدوناتكم

     1- من  لوحة التحكم -> قالب -> تحرير HTML -> تابع

     2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 

     3-  الان ضع علامه لى توسيع القالب
     4- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)
]]></b:skin>

والصق الكود التالي قبله تمامآ

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}


5-  الان قم بحفظ القالب

6-  اذهب الآن إلى لوحة التحكم -> تخطيط -> إضافة أداة -> المشاركات الشائعه 

7-  حدد كما في الصوره " عرض ما يصل إلى 9 مشاركات "، وإلغاء صور مصغره من الصوره و مقتطف

وأخيرا قم بحفظ القطعه ومبروك عليكم الاضافه ، أتمنى أن تعجبكم بالتوفيق للجميع

هناك 13 تعليقًا:

  1. شكراا على الموضوع الرائع
    http://afkarpro.blogspot.com

    ردحذف
  2. @afkar
    العفو اخي شكرا لمرورك

    ردحذف
  3. غير معرف23/10/13 12:47

    (o)

    ردحذف
  4. لو سمحت اخى انا عندى مدونه وبجد شكرا ليك على هذا المواضيع الجميله ولكن اريد ان اعمل صوره لمدونه ولكن لا اعرف كيف

    ردحذف
    الردود
    1. من لوحة التحكم > تخطيط > تحرير اداة راس الصفحه
      وبقم برفع الصوره الخاصه بك

      حذف
  5. يا اخي لا تعمل الاضافة اعتقد أنه من
    ]]>
    فدائما اذا أردت أن ادخل اضافة و في الاضافة يجب علي و ضع الاكواد بجاني
    ]]>
    لا تعمل
    رابط مدونتي http://hocine-web.blogspot.com

    ردحذف
  6. انت راجل برنس والله انت برنس يا عم 100 تحيه ليك (h)

    ردحذف
  7. غير معرف21/5/14 01:54

    لم تشتغل عندي

    ردحذف
  8. تسلم ايدك
    http://akoam-web.blogspot.com/

    ردحذف
  9. شكرا تم التطبيق
    فيديو الك
    http://www.video-2lak.com/

    ردحذف
  10. حبي ياريت تسوي دروس للمبتدئن مثلا التقسيم في النشر

    ردحذف