اضافة كود المشاركات الشائعة في بلوجر هي أحدي أهم الادوات لدي المدونات بلوجر ولكن معانا أداة مميزة جدا وأظن انها هتعجب الجميع أنشاء الله مرقمة و جاهزة للاستعمال و تقدر تغير أعدادته من خلال الكود
شكل الأضافة
يمكن المعاينة
جه وقت التركيب أول حاجة هتركب المشاركات الشائعة العادية هتروح للمدونة ثم التخطيط ثم أضافة اداة ثم المشاركات الشائعة ضع الأعدادات كما موضح بالصورة هتعرض أي رقم أنتا عايزو عرض المواضيع أخنياري دوس حفظ
شرح تركيب الاستايل الخاص بال أداة
هتروح للقالب ثم تحرير html هدوس في المربع الكود ثم أضغط : ctrl + f دي تعني البحث في الأكواد
هتبحث عن الكود ده : ]]></b:skin>
ضع الكود ده فوقه
/* ==========================POPULAR POST - ashb7a simple========================== */#PopularPosts1 ul li a:hover{color:#000; text-decoration: none !important; margin-bottom:0 !important;}#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block;font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin-right:35px; 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;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 {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{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{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{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{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{width:90%}#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}#PopularPosts1 ul li:first-child + li + li + li{width:90%}#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}#PopularPosts1 ul li:first-child + li + li{width:90%}#PopularPosts1 ul li:first-child + li + li:after{content:"3"}#PopularPosts1 ul li:first-child + li{width:90%}#PopularPosts1 ul li:first-child + li:after{content:"2"}#PopularPosts1 ul li:first-child{width:90%}#PopularPosts1 ul li:first-child:after{content:"1"}#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}#PopularPosts1 ul li { background:#FFFFFF; border: 2px solid #777777; border-radius: 25px 0; margin: 6px 0; padding: 10px; position: relative;}
#PopularPosts1 ul li:hover{background:#F1FBFE; border: 2px solid #06BBFD;}#PopularPosts1 img {border-radius:200px;max-width:60px;max-height:60px;margin-left:4px;}
.popular-posts li { list-style:none; margin:-7px -30px -5px 5px; text-align: Left;}.PopularPosts .item-thumbnail { background:#D40147; border-radius: 0 8px 8px 0; float: right; margin: 0 0 0 8px; padding: 8px 8px 0;}.item-thumbnail img { background:#F1F1F1; border: 2px solid #777; border-radius: 50%; height: 58px; padding: 0; transition: all 1.5s ease 0s; width: 60px;}.item-thumbnail img:hover {transform: rotate(1440deg); -webkit-transform: rotate(1440deg);}.PopularPosts .item-title { border-radius: 8px 0 0 8px; height: 76px; margin: 0 5px; padding-bottom: 0.2em;}.popular-posts .item-title a {color: #222;}.popular-posts .item-title a:hover {color: #D40147;}
بعد كدا حفظ
الكود معدل لا يحتاج ألي تعديل لو كونت عندك خبرة في css هتعرف تعدل عليه ولكن هذا المنظر جميل جدا ويتناسب معه الجميع بأذن الله
هناك 3 تعليقات:
مشكور علي الكود الجميل ده
نورت أخي الكريم ولا شكر علي واجب
نورت أخي الكريم ولا شكر علي واجب
علق لكن حظر من قول :( ما يلفظ إلا لديه رقيب عتيد )
_
عزيزي الزائر لضمان عرض تعليقق لا تعرض أرقام هواتف أو روابط أعلانية أو صور أباحيه
_ ملحوظة : ضع المؤشر للأستخدام التعبيرات _
المسموح به هو عرض رابط مدونتك لتعرض المشكلة به أو رابط صورة للمشكلة
الأبتساماتأخفاء الأبتسامات