الكاتب
السلام عليكم ورحمة الله وبركاته ؛ سوف أعرض فى هذا الموضوع اضافة رائعه أثبتت اهميتها فى عالم بلوجر بجداره عالية وهى اداه " المشاركات الشائعة " أو الاكثر مشاهده واهتماما من الزوار ولكن بشكل جديد وذلك بأضافة اللوان مختلفة لك تدوينة معروضة فى المشاركات الشائعة ؛
كما نعرف انه من اهم عوامل نجاح اى مدونة هو ما تقدمه المدونة من افاده والشكل الجمالى او الشكل المناسب للزوار ؛ ولهذا قد تحتاج الى ان تضيف بصمة رائعة على ادواتك لجذب انتباه الزوار الى ما تقدمه
وهذا التعديل فى غاية السهولة نتبع الخطوات التالية لتطبيقها
اولا يتوجب عليك أضافة اداة المشاركات الشائعة وذلك عن طريق
- سجل الدخول الى لوحة تحكم مدونتك من هنا
- اختر التبويب ( التخطيط) .
- ثم اضغط (أضافة أداة ) واختر ----( المشاركات الشائعة) ... وذلك فى حالة عدم اضافتك لها مسبقا
* نأتى للجزء الاهم وهو تطبيق التعديل على المشاركات الشائعة
- من لوحة التحكم أختر التبويب (قالب) .
- ثم اضغط على ----( تحرير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 فأقل )مشاكرات
عرض ما يصل إلى (لابد ان يكون 9 فأقل )مشاكرات
واى استفسارات او مشاكل لاقدر الله فقط اكتب تعليقان واشرح ما واجهك ؛ بالتوفيق