مرحبا بكم اعزائى متابعى مدونة دبور فون اليوم اتينا لكم باضافة احترافية وقطعة رائعة بهذه والالوان رائعة والافضل انها css ولا تحتوى على اى اكود تبطى من سرعة المدونة وجذابة ويمكن وضعها بين التدوينات او فى القائمة الجانبية وتعطى منظر رائع لمدونة
معاينة
طريقة التركيب
نذهب الى لوحة تحكم المدونة ← التخطيط ← اضافة اداة جديدة HTML/JavaScript نضع هذا الكود فى الاضافة الجديدة
<style>.circle{background:#fff;border-radius:100%;cursor:pointer;position:relative;width:15em;height:15em;overflow:hidden;transform:translateZ(0);margin:0 auto}.circle h1{color:rgba(189,185,199,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.5em;line-height:7.2em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}.circle h1 a{color:rgba(189,185,199,0);text-decoration:none}.circle:before,.circle:after{border-radius:100%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}.circle:after{transform:rotate(45deg)}.circle:hover:before,.circle:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}.circle:hover > h1 a,.circle:hover > h1{color:rgba(185,185,185,1)}</style><div class="circle"> <<h1><a href="http://dabourphone.blogspot.com/">Dabour-Phone</a></h1></div>
- شرح الأضافة
غير
ماباللون الاحمر بالاسم الذى تريده ان يظهر
ما باللون الاخضر برابط موقعك
شكرا لك علي الاضافة الرائعة أخي الكريم
ردحذفأخي الفاضل لاتحرمنا من تعليقاتك با الود
http://mubll.blogspot.com/
شكرا لك اخى الكريم
حذف