اليوم نقدم لكم اضافة رائعة جدا تستخدم لتمييز موضوع أو تدوينة معينة
بشكل جميل في واجهة المدونة في السايدبار
- لتركيب اضافة الموضوع المميز
- من لوحة التحكم اذهب التخطيط ثم إصافة اداة HTML/JavaScript
- ألصق هذا الكود :
<div class="team_arab">
<img alt="عرب تيم" src="رابط صورة التدوينة" /><a href="رابط التدوينة"><i class="fa fa-arrows-alt"></i></a><p>اسم التدوينة</p></div><style>.team_arab{position:relative;padding-top:5px}.team_arab img{width:100%;height:200px}.team_arab a{display:block;width:48px;height:48px;background:rgba(255,255,255,0.8);color:#e23a3e;font-size:20px;text-align:center;line-height:2.6;opacity:0;-webkit-transition:all .3s ease 0;-moz-transition:all .3s ease 0;-ms-transition:all .3s ease 0;-o-transition:all .3s ease 0;transition:all .3s ease 0;-webkit-transform:scale(0.2);-moz-transform:scale(0.2);-ms-transform:scale(0.2);-o-transform:scale(0.2);transform:scale(0.2);position:absolute;top:76px;left:126px;z-index:1001;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}.team_arab p{position:absolute;bottom:0;left:0;background: rgba(77, 135, 209, 0.6);text-align: center;padding:12px 29px;margin:0;font-size:15.1px;color:#FFF;}.team_arab:hover a{opacity:1;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.team_arab:hover a:hover{color:#333}.team_arab_posts{float:right;width:730px;background:#FFF;margin:24px 0;-webkit-box-shadow:0 0 5px #DDD;-moz-box-shadow:0 0 5px #DDD;box-shadow:0 0 5px #DDD}.team_arab_post{position:relative;padding:24px;border-bottom:1px solid #EEE}.team_arab_post_title h1{padding:0;margin:0;font-size:24px;font-weight:400}</style>
<img alt="عرب تيم" src="رابط صورة التدوينة" /><a href="رابط التدوينة"><i class="fa fa-arrows-alt"></i></a><p>اسم التدوينة</p></div><style>.team_arab{position:relative;padding-top:5px}.team_arab img{width:100%;height:200px}.team_arab a{display:block;width:48px;height:48px;background:rgba(255,255,255,0.8);color:#e23a3e;font-size:20px;text-align:center;line-height:2.6;opacity:0;-webkit-transition:all .3s ease 0;-moz-transition:all .3s ease 0;-ms-transition:all .3s ease 0;-o-transition:all .3s ease 0;transition:all .3s ease 0;-webkit-transform:scale(0.2);-moz-transform:scale(0.2);-ms-transform:scale(0.2);-o-transform:scale(0.2);transform:scale(0.2);position:absolute;top:76px;left:126px;z-index:1001;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}.team_arab p{position:absolute;bottom:0;left:0;background: rgba(77, 135, 209, 0.6);text-align: center;padding:12px 29px;margin:0;font-size:15.1px;color:#FFF;}.team_arab:hover a{opacity:1;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.team_arab:hover a:hover{color:#333}.team_arab_posts{float:right;width:730px;background:#FFF;margin:24px 0;-webkit-box-shadow:0 0 5px #DDD;-moz-box-shadow:0 0 5px #DDD;box-shadow:0 0 5px #DDD}.team_arab_post{position:relative;padding:24px;border-bottom:1px solid #EEE}.team_arab_post_title h1{padding:0;margin:0;font-size:24px;font-weight:400}</style>
- ونقوم بتغير كل ما بالوان الاحمر بما يلزم
مبروك عليك الاضافة المميزه و الرائعه وكده نكون خلصنا شرح النهارده
