ازرار رائعة بتقنية css...حصريا


السلام عليكم ورحمة الله وبركاته،اليوم احببت ان اعرض عليكم هذه الاضافة الرائعة والتي هي عبارة عن ازرار يمكن استعمالها في العديد من الاماكن داخل المدونة وما يميزها هو امكانية التحكم في حجمها واللون الذي تختاره وايضا انها تعمل بتقنية  CSS والتي تعطي للمدونة مظهرا جميلا وبدون ان اطيل عليكم تابعوا الشرح 

معاينة مباشــرة ↓



طريقة تركيب هذه الاضافة بالمدونة؟

 اول خطوة هي اضافة الكود التالي للمدونة

تسجبل الدخول الى المدونة.
تحرير القالب.
اضغط على زر توسعة القالب. 
 ثم ابحث عن الكود التالي باستعمال مفتاحي  ctrl+f 

]]></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: 13px;
 font-weight: bold;
 line-height: 1;
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

.medium.button, .medium.button:visited {
 font-size: 14px;
 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;
}

واخيرا احفظ القالب

والان نأتي الى اختيار الازرار المناسبة

طريقة استعمال الازرار؟


يمكنك استعمال هذه الازرار في اي مكان حنى داخل المواضيع ولادراج الازرار في اداة الجافا اتبع التالي

  1. اختر الكود الذي يعجبك من الاسفل
  2. قم بإضافة اداة الجافا سكربت فأي مكان تريده
  3. الصق الكود داخل هذه الاداة 

  1. كود الازرار كبيرة الحجم
<center><a href="LINK HERE" class="large button pink" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button blue" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button green" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button orange" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button red" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button yellow" >LINK TEXT HERE</a></center>


2.كود ازرار متوسطة الحجم

<center><a href="LINK HERE" class="medium button pink" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button blue" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button green" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button orange" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button red" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button yellow" >LINK TEXT HERE</a></center>

  • غير كلمة LINK HEREبالرابط الذي تريد
  • غير كلمة LINK TEXT HERE بالجملة او الكلمة التي ستظهر داخل الازرار.
  • ويمكن اختيار الون عن طريق تغيير اسماء الالوان 




روابط هذا المـــوضوع قــابلــة للنــــسخ
URL
HTML

تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
fortek