اضافات بلوجر بلوجر حصريات الطريقة تغيير شكل المشاركات الشائعة الى شكل رائع احترافي. محمد أمير في 10:31 ص 0 السلام عليكم ورحمة الله وبركاتهاليوم لدي لكم اخواني الطريقة الاحترافية لتغير شكل المشاركات الشائعة الى شكل رائع احترافي.بهذا الشكل الرائعتركيب الكود:1- من لوحة التحكم >> قالب >> تحرير HTML2- قم بالبحث عن الكود التالي باستخدام (CTRL+F)3- قم بالبحث عن الكود ]]> : واضف فوقه مباشراً الكود التالي#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px} #PopularPosts1 ul li:first-child{background:#ff4c54;width:97%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%} #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:72%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%} #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:#c7f25f;width:66%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #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{position:absolute;top:20px;left:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li .item-thumbnail{float:right;border:0;margin-left:10px;background:transparent;padding:0;width:70px;height:70px;} #PopularPosts1 ul li a{font-size:14px;color:#444;text-decoration:none} #PopularPosts1 ul li a:hover{color:#222;text-decoration:none} #PopularPosts1 img{ -moz-border-radius: 130px; -webkit-border-radius: 130px; border-radius: 130px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; padding:4px; border:1px solid #fff !important; } #PopularPosts1 img:hover { border-radius: 0 0 0 0; -moz-transform: scale(1.2) rotate(-711deg) ; -webkit-transform: scale(1.2) rotate(-711deg) ; -o-transform: scale(1.2) rotate(-711deg) ; -ms-transform: scale(1.2) rotate(-711deg) ; transform: scale(1.2) rotate(-711deg) ; } 4-في الأخير اضغط على الحفظ و ألف مبروك Continue reading
اضافات بلوجر بلوجر حصريات أروع أزرار التحميل و المعاينة 2016. محمد أمير في 4:30 م 0 السلام عليكم اخواني في الله اليوم أقدم لكم أحدث وأجمل و أروع أزرار معاينة وتحميل 2016 كما انها خفيفة جدا وتجلب انتباه القارئ بتقنية css.الشكل هو: معاينة اضغط هنا تحميل اضغط هنا1.طريقة تركيب الازرار1- من لوحة التحكم >> قالب >> تحرير HTML2- خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير3- قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)4- قم بالبحث عن الكودb:skin/ واضف فوقه مباشراً الكود التالي #wrap { margin: 20px auto; text-align: center; } .btn-slide, .btn-slide2 { position: relative; display: inline-block; height: 50px; width: 200px; line-height: 50px; padding: 0; border-radius: 50px; background: #fdfdfd; border: 2px solid #0099cc; margin: 10px; transition: .5s; } .btn-slide2 { border: 2px solid #efa666; } .btn-slide:hover { background-color: #0099cc; } .btn-slide2:hover { background-color: #efa666; } .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc; } .btn-slide2:hover span.circle2 { color: #efa666; } .btn-slide:hover span.title, .btn-slide2:hover span.title2 { left: 40px; opacity: 0; } .btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 { opacity: 1; left: 40px; } .btn-slide span.circle, .btn-slide2 span.circle2 { display: block; background-color: #0099cc; color: #fff; position: absolute; float: left; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; left: 0; transition: .5s; border-radius: 50%; } .btn-slide2 span.circle2 { background-color: #efa666; } .btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { position: absolute; left: 90px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: bold; color: #30abd5; transition: .5s; } .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { color: #efa666; left: 80px; } .btn-slide span.title-hover, .btn-slide2 span.title-hover2 { left: 80px; opacity: 0; } .btn-slide span.title-hover, .btn-slide2 span.title-hover2 { color: #fff; } 5.أضف الكود التالي في الموضوع في تبويب html معاينة اضغط هنا تحميل اضغط هنا في الأخير أضف الرابط بد #مصدر الكود الأخAZEZ MOHAMMEDملاحظة :يمكن ازالة احدى الأيقونتين أو تغير اسمها و التحكم فيها كما تشاء Continue reading