تزيين قرائة المزيد بلغة السي إس إس css

 سكريبت إقرأ المزيد في الموضوع التالي

سكريبت إقرأ المزيد لمدونة قوقل بلوجر وطريقة تركيبه

تابع معي كيفية تزيين كلمة قرائة المزيد بلغة السي إس إس css

أولا

لقد قمنا بوضع قرائة المزيد في الوسم ديف div وقمنا بتسمية الكلاس class ب elfadil3-rd

الآن إذهب إلى لوحة تحكم البلوجر واذهب إلى تعديل html

ثم إبحت عن 

]]></b:skin>

  اختر كود من الأكود التالية ثم ضعه فوقه

الكود الأول 1 :

.elfadil3-rd{ background:#fff; text-align:right; cursor:pointer; color:#821A0C; margin:5px 0; float:right; border-right:2px solid #8F3314; border-left:10px solid #8F3314; border-bottom:2px solid #8F3314; border-top:2px solid #8F3314; padding:5px; font:bold 14px sans-serif; } .elfadil3-rd:hover{ background:#fff; font:bold 16px sans-serif; color:#CC410E; border-right:2px dotted #8F3314; border-left:10px solid #CC410E; border-bottom:2px dotted #8F3314; border-top:2px dotted #8F3314; }

مثال

قرائة المزيد ->>

الكود التاني 2 : هذا الكود كنت قد صنعته لأزرار موقع كنت قد برمجته أتشاركه معكم اليوم

.elfadil3-rd{ text-align:center; border: #006600; border-style: solid; border-width: 5px; color:#ffd700; padding:10px; margin:0px; background:linear-gradient(to bottom,#0047b3 2%,#002966 98%);} .elfadil3-rd:hover{ border: #006600; border-style: solid; border-width: 5px; color:#ffd700; padding:10px; margin:0px; background: linear-gradient(to bottom,#003380 5%,#003d99 100%);}

مثال

قرائة المزيد ->>

الكود الثالت 3 : أتشارك معكم هذا الزر الذي كنت قد صنعته لموقعي  القديم ،

.elfadil3-rd{ background-color: #f5f5f5; border: #f5f5f5; border-style: solid; border-width: 5px; border-radius: 20px ; box-shadow: 4px 4px 4px #003d99; color: #006600; padding:10px; margin:10px; background:linear-gradient(to bottom,#99ff99 40%,#85e085 100%);} .elfadil3-rd:hover{ background-color: #f5f5f5; border: #f5f5f5; border-style: solid; border-width: 5px; border-radius: 15px ; box-shadow: 6px 6px 4px #337ab7; color: #006600; padding:10px; margin:10px; background:linear-gradient(to bottom,#ffff4d 2%,#999900 98%);}

مثال

قرائة المزيد ->>

سأقوم بإضافة أكواد أخرى كلما أتيحت لي الفرصة

 تستطيع تعديل الكود كيفما تشاء وإن احتجت إلى أي مساعدة في شرح الكود فلا تتردد بكتابة سؤالك هنا

مواضيع قد تفيدك