[ حصريا ] اضافة أزرار جميلة و أنيقة بتأثيرات رائعة الى مدونة بلوجر [ المجموعة الأولى ]

أزرار جميلة و أنيقة بتأثيرات رائعة الى مدونة بلوجر

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

السلام عليكم و رحمة الله و بركاته

أهلا و سهلا بكم زوار مدونة سمارت المعلوماتية

فى هذه التدوينة ان شاء الله اسمحوا لى أحبابى فى الله أن أقدم لكم اضافة غاية فى الروعة و الجمال فهى تنقل مدونتك من شكل عادى الى شكل أكثر جمالا و أناقة حيث أنه سيجذب الزوار اليك و هى اضافة أزرار احترافية جدا و ذات تأثيرات جميلة و أنيقة جدا الى المدونة الخاصة بك فعند مرور الماوس على الزر تظهر التأثيرات هذه التأثيرات بسيطة و لكنها رائعة و هادئة تجعل شكل الروابط فى مدونتك أكثر جمالية و أناقة و الشئ الجميل فى هذه الأزرار أنها ثلاثة أنواع و هى أزرار كبيرة و أزرار متوسطة و أزرار صغيزة و ليس هذا فقط و انما بالوان مختلفة رائعة جدا و من ثم قم باختيار ما يناسبك حسب ما تريد فى التدوينة الخاصة بك و ما يناسن ألوان مدونتك و اعلم أنه كلما كانت مدونتك جميلة و أنيقة سوف تجذب الزوار الى مدونتك و أيضا اعلم أخى الزائر و حبيبى فى الله أنك لن تجد هذه الاضافة الا فى مدونة سمارت المعلوماتية الخاصة بنا لأننا نقدم المواضيع الحصرية و الجميلة ان شاء الله.

لن أطيل عليكم أحبابى فى الله و أترككم مع المعاينة 

معاينة الأزرار

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

طريقة اضافة الأزرار الى مدونتك

أولا قم بالدخول الى قالب و من ثم تحرير html
ثانيا قم بالبحث عن الكود التالى  ]]></b:skin>   و أضف الكود التالى فوقه مباشرة

.button.small{font: normal normal 12px GESSTwoMediumRegular,Droid Sans; width: 50%;text-align: center;margin: 0px auto;}
.button.medium{font-size:16px; width: 50%;text-align: center;margin: 0px auto;}
.button.large{font-size:20px; width: 50%;text-align: center;margin: 0px auto;}
.button{padding:10px 20px;margin:5px;color:#fff;text-align:center;border:0;cursor:pointer;border-radius:3px;display:block;text-decoration:none;font-weight:400;-webkit-box-shadow:inset 0 -2px rgba(0,0,0,0.15);box-shadow:inset 0 -2px rgba(0,0,0,0.15);color:#fff}
.button.small:hover{-webkit-box-shadow:inset 0 -34px rgba(0,0,0,0.15);box-shadow:inset 0 -34px rgba(0,0,0,0.15);color:#fff}
.button.medium:hover{-webkit-box-shadow:inset 0 -44px rgba(0,0,0,0.15);box-shadow:inset 0 -44px rgba(0,0,0,0.15);color:#fff}
.button.large:hover{-webkit-box-shadow:inset 0 -54px rgba(0,0,0,0.15);box-shadow:inset 0 -54px rgba(0,0,0,0.15);color:#fff}
.red{background:#e74c3c}
.orange{background:#e8930c}
.green{background:#2ecc71}
.blue{background:#3498db}
.purple{background:#9b59b6}
.yellow{background:#FFD600}
.pink{background:#F889EB}
.grey{background:#bdc3c7}
.turquoise{background:#1abc9c}
.midnight{background:#2c3e50}
.asbestos{background:#6d7b7c}
.dark{background:#454545}
.small-button{width:100%;overflow:hidden;clear:both}
.medium-button{width:100%;overflow:hidden;clear:both}
.large-button{width:100%;overflow:hidden;clear:both}

و أخيرا عند عمل تدوينة حدد اللون المراد للزر و اختاره من أسفل

Small Buttons

  <a href='http://blog-ency.blogspot.com/' class="button small red">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button small pink">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button small orange">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button small yellow">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button small green">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button small turquoise">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button small blue">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button small purple">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button small midnight">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button small grey">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button small asbestos">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button small dark">Button Text</a>

 Medium Buttons

  <a href='http://blog-ency.blogspot.com/' class="button medium red">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button medium pink">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button medium orange">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button medium yellow">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button medium green">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button medium turquoise">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button medium blue">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button medium purple">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button medium midnight">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button medium grey">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button medium asbestos">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button medium dark">Button Text</a>

  

Large Buttons

  <a href='http://blog-ency.blogspot.com/' class="button large red">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button large pink">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button large orange">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button large yellow">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button large green">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button large turquoise">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button large blue">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button large purple">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button large midnight">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button large grey">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button large asbestos">Button Text</a>
  <a href='http://blog-ency.blogspot.com/' class="button large dark">Button Text</a>

.
.
.
.
.
.
.
.
 و فى الختام سلام و قبل السلام اترك تعليق تشجيعا للقائمين على المدونة.