728x90 AdSpace

Add Colored Popular Post Widget In blogger اضافة المشاركات الشائعة الملونه الى بلوجر

السلام عليكم ورحمة الله وبركاته ؛ سوف أعرض فى هذا الموضوع اضافة رائعه أثبتت اهميتها فى عالم بلوجر بجداره عالية وهى اداه " المشاركات الشائعة " أو الاكثر مشاهده واهتماما من الزوار ولكن بشكل جديد وذلك بأضافة اللوان مختلفة لك تدوينة معروضة فى المشاركات الشائعة ؛
 Add Colored Popular Post Widget In blogger اضافة المشاركات الشائعة الملونه الى بلوجر
كما نعرف انه من اهم عوامل نجاح اى مدونة هو ما تقدمه المدونة من افاده والشكل الجمالى او الشكل المناسب للزوار ؛ ولهذا قد تحتاج الى ان تضيف بصمة رائعة على ادواتك لجذب انتباه الزوار الى ما تقدمه
وهذا التعديل فى غاية السهولة نتبع الخطوات التالية لتطبيقها
اولا يتوجب عليك أضافة اداة المشاركات الشائعة وذلك عن طريق
  •  سجل الدخول الى لوحة تحكم مدونتك من هنا
  • اختر التبويب ( التخطيط) .
  • ثم اضغط (أضافة أداة ) واختر ----( المشاركات الشائعة) ... وذلك فى حالة عدم اضافتك لها مسبقا 
* نأتى للجزء الاهم وهو تطبيق التعديل على المشاركات الشائعة 
  • من لوحة التحكم أختر التبويب (قالب) .
  • ثم اضغط على ----( تحريرHTML).
  • وقم بالبحث عن الكود الاتى وذلك بواسطة الضغط على لوحة المفاتيح (Ctrl + F)
]]></b:skin>
  •  ثم ضع فوقه مباشرة الكود الاتى :
<!--Popular Posts Styles Start www.bloggertofree.com-->
#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}
<!--Popular Posts Styles End www.cairo-pro.blogspot.com-->
  • وأخيرا قم بالضغط على حفظ وشاهد ما قمت بتطبيقه
ملحوظة اذا اردت ان تصبح المشاركات الشائعة كما بالصور تماما طبق هذه الاعدادات
صورة مصغرة من الصورة
مقتطف
 عرض ما يصل إلى (لابد ان يكون 9 فأقل )مشاكرات
واى استفسارات او مشاكل لاقدر الله فقط اكتب تعليقان واشرح ما واجهك ؛ بالتوفيق
جهاد حسين

شاب مصرى بدأت فى عالم الكمبيوتر بالتعديل على نسخ الويندوز ؛ ومن ثم اتجهت الى تصميم برامج للويندوز #اعمالى ؛ وكان لابد من أيجاد موقع لعرض برامجى وتقديم ما أعرفه لمساعده المستخدمين وللأستفاده من تجاربهم ولذلك قمت بأنشاء المدونة ولكى امتلك موقع مختلف أنجرفت مع تيار تصميم المواقع . عملت فى مجال صيانة أجهزه أبل (أيفون - أيباد - أجهزه الماك ) . والأن عدت الى عالم التدوين .

  • تعليقات بلوجر
  • تعليقات فيسبوك

6 التعليقات:

  1. رائعه هذه الاضافه شكرا لك

    ردحذف
    الردود
    1. الشكر لله اخى الغالى وليد

      حذف
  2. تم تجربتها ررررررررائعه شكرا على المجهود بس للاسف الصوره غير ظاهره ممكن اعرف السبب

    ردحذف
    الردود
    1. الحمد لله الفكره هو قراءة اخر الموضوع :
      1 : نحديد على صوره مصغره من الصور
      من اعدادات الاضافة نفسها

      حذف
  3. اضافة رائعة شكرا :-d

    ردحذف