اضافة المواضيع الاكثر مشاهدة بشكل جميل وألوان جذابة popular posts css3

at 11:42 PM

اضافة المواضيع الاكثر مشاهدة

السلام عليكم ورحمت الله وبركاته,عيد مبارك سعيد على الامة الاسلامية , وتقبل الله منا ومنكم شهر رمضان بالمغفرة والرضوان .

اخواني الكرام اقدم لكم هدا الدرس و الدى هو عبارة عن اضافة المواضيع الاكثر مشاهدة في المدونة بشكل جميل و بتقنية css3 التي تطفي على المدونة جمالا واحترافية,كما هو ضاهر في الصورة.

اولا يجب عليك تفعيل خاصية المشاركات الشائعة, قد تم تفعيلها مسبقا من خلال لوحة تحكم بلوجر. ثم الذهاب الي تحرير HTML والبحث عن الوسم التالي :

  ]]></b:skin>


تم تقوم بادراج الكود التالي قبله مباشرة : 

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}<br /> #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;}<br /> #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}<br /> #PopularPosts1 ul li:first-child:after,<br /> #PopularPosts1 ul li:first-child + li:after,<br /> #PopularPosts1 ul li:first-child + li + li:after,<br /> #PopularPosts1 ul li:first-child + li + li + li:after,<br /> #PopularPosts1 ul li:first-child + li + li + li + li:after,<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li:after,<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,<br /> #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}<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}<br /> #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}<br /> #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}<br /> #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}<br /> #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}<br /> #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}<br /> #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}<br /> #PopularPosts1 ul li:first-child + li + li:after{content:"3"}<br /> #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}<br /> #PopularPosts1 ul li:first-child + li:after{content:"2"}<br /> #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}<br /> #PopularPosts1 ul li:first-child:after{content:"1"}<br /> #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}<br /> #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

تم تقوم بمعاينة الصفحة الرئيسية والتاكد من نجاح الاضافة , بعد دلك تقوم بالحفظ ...
ثم بحمد الله ...الى اللقاء في درس جديد

Share :