ازرار CSS لمدونتك

بسم الله الرحمن الرحيم 

السلام عليكم ورحمة الله وبركاته أصدقائي الأعزاء درس اليوم هو عن كيفية إضافة ازرار CSS لمدونتك 

أولا سجل الدخول إلي مدونتك ثم إذهب إلي  القالب وأبحث عن هذا الكود:

]]></b:skin>

ثانيا : ضع هذا الكود فوق الكود السابق مباشرة

.button, .button:visited { background: #222 url(http://helperblogger.googlecode.com/svn/overlay.png) repeat-x; display: inline-block; padding: 5px 10px 6px; color: #fff; text-decoration: none; -moz-border-radius: 6px; -webkit-border-radius: 6px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; font-family: calibri; } .button:hover { background-color: #111; color: #fff; } .button:active { top: 1px; } .small.button, .small.button:visited { font-size: 11px } .button, .button:visited, .medium.button, .medium.button:visited { font-size: 15px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); } .medium.button, .medium.button:visited { font-size: 15px; padding: 8px 14px 9px; } .large.button, .large.button:visited { font-size: 34px; padding: 8px 14px 9px; } .pink.button, .magenta.button:visited { background-color: #e22092; } .pink.button:hover { background-color: #c81e82; } .green.button, .green.button:visited { background-color: #91bd09; } .green.button:hover { background-color: #749a02; } .red.button, .red.button:visited { background-color: #e62727; } .red.button:hover { background-color: #cf2525; } .orange.button, .orange.button:visited { background-color: #ff5c00; } .orange.button:hover { background-color: #d45500; } .blue.button, .blue.button:visited { background-color: #2981e4; } .blue.button:hover { background-color: #2575cf; } .yellow.button, .yellow.button:visited { background-color: #ffb515; } .yellow.button:hover { background-color: #fc9200; }

ثم أعمل حفظ للقالب ثم وأنت تكتب موضوع او مشاركة جديده وأردت أن تضيف بداخله ازرار CSS فقط كل ما عليك أنك تضغط علي HTML ثم تختار حجم وشكل الزر من هنا :

أولا مجموعة الحجم الكبير 

<center><a href="ضع هنا الرابط" class="large button pink" >ضع هنا النص</a></center><center><a href="ضع هنا الرابط" class="large button blue" >ضع هنا النص</a></center><center><a href="ضع هنا الرابط" class="large button green" >ضع هنا النص</a></center><center><a href="ضع هنا الرابط" class="large button orange" >ضع هنا النص</a></center><center><a href="ضع هانا الرابط" class="large button red" >ضع هنا النص</a></center>

ثانيا مجموعة الحجم المتوسط

<center><a href="ضع هنا الرابط" class="medium button pink" >ضع هنا النص</a></center><center><a href="ضع هنا الرابط" class="medium button blue" >ضع هنا النص</a></center><center><a href="ضع هنا الرابط" class="medium button green" >ضع هنا النص</a></center><center><a href="ضع هنا الرابط" class="medium button orange" >ضع هنا النص</a></center><center><a href="ضع هنا الرابط" class="medium button red" >ضع هنا النص</a></center>

ثالثا مجموعة الحجم الصغير

<center><a href="ضع هنا الرابط" class="small button pink" >ضع هنا النص</a></center><center><a href="ضع هنا الرابط" class="small button blue" >ضع هنا النص</a></center><center><a href="ضع هنا الرابط" class="small button green" >ضع هنا النص</a></center><center><a href="ضع هنا الرابط" class="small button orange" >ضع هنا النص</a></center><center><a href="ضع هنا الرابط" class="small button red" >ضع هنا النص</a></center>

انتهي ولا تنسونافي تعليقاتكم الكريمة