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

ازرار اخترافية الى بلوجر المجموعة الثانية

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

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

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

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

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

اضغط هنا اضغط هنا اضغط هنا

اضغط هنا اضغط هنا اضغط هنا

اضغط هنا اضغط هنا اضغط هنا

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

• أولا قم بالدخول الى قالب و من ثم تحرير html
• ثانيا قم بالبحث عن الكود التالى

  ]]></b:skin>  

•  و أضف الكود التالى فوقه مباشرة

.btn-1 {
  background-color: #F27935;
}
.btn-1 .round {
  background-color: #f59965;
}
.btn-2 {
  background-color: #00AFD1;
}
.btn-2 .round {
  background-color: #00c4eb;
}
.btn-3 {
  background-color: #5A5B5E;
}
.btn-3 .round {
  background-color: #737478;
}
smart {
  text-decoration: none;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  padding: 12px 53px 12px 23px;
  color: #fff;
  text-transform: uppercase;
  font-family: GESSTwoMediumRegular,sans-serif;
  font-weight: bold;
  position: relative;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  display: inline-block;width: 25%;
}
smart span {
  position: relative;
  z-index: 3;
}
smart .round {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  position: absolute;
  right: 3px;
  top: 3px;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  z-index: 2;
}
smart .round i {
  position: absolute;
  top: 50%;
  margin-top: -6px;
  left: 50%;
  margin-left: -4px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.txt {
  font-size: 14px;
  line-height: 1.45;
}
.type-1 smart:hover {
  padding-left: 48px;
  padding-right: 28px;
}
.type-1 smart:hover .round {
  width: calc(100% - 6px);
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
}
.type-1 smart:hover .round i {
  left: 12%;
}
.type-2 smart:hover .round {
  background: none;
}
.type-2 smart:hover .round i {
  left: 70%;
}
.type-3 .round {
  background: transparent;
}
.type-3 smart {
  position: relative;
  overflow: hidden;
}
.type-3 smart.btn-1:after {
  background-color: #f59965;
}
.type-3 smart.btn-2:after {
  background-color: #00c4eb;
}
.type-3 smart.btn-3:after {
  background-color: #737478;
}
.type-3 smart:after {
  content: "";
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 37px;
  height: 38px;
  position: absolute;
  right: 3px;
  top: 3px;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.type-3 smart:hover:after {
  right: 100%;
  width: 50%;
}
.type-3 smart:hover i {
  margin-left: 4px;
}

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

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://googledrive.com/host/0B-3cyo_HIYMIbGhrM09nZk5sVmc/GESSTwoMediumRegular.css' rel='stylesheet' type='text/css'/>
<div class="type-1">
    <smart href="" class="btn btn-1">
      <span class="txt">اضغط هنا</span>
      <span class="round"><i class="fa fa-chevron-right"></i></span>
    </smart>

    <smart href="" class="btn btn-2">
      <span class="txt">اضغط هنا</span>
      <span class="round"><i class="fa fa-chevron-right"></i></span>
    </smart>

    <a href="" class="btn btn-3">
      <span class="txt">اضغط هنا</span>
      <span class="round"><i class="fa fa-chevron-right"></i></span>
    </smart>
</div>

<div class="type-2">
    <smart href="" class="btn btn-1">
      <span class="txt">اضغط هنا</span>
      <span class="round"><i class="fa fa-chevron-right"></i></span>
    </smart>

    <smart href="" class="btn btn-2">
      <span class="txt">اضغط هنا</span>
      <span class="round"><i class="fa fa-chevron-right"></i></span>
    </smart>

    <smart href="" class="btn btn-3">
      <span class="txt">اضغط هنا</span>
      <span class="round"><i class="fa fa-chevron-right"></i></span>
    </a>
</div>

<div class="type-3">
    <smart href="" class="btn btn-1">
      <span class="txt">اضغط هنا</span>
      <span class="round"><i class="fa fa-chevron-right"></i></span>
    </smart>
    <smart href="" class="btn btn-2">
      <span class="txt">اضغط هنا</span>
      <span class="round"><i class="fa fa-chevron-right"></i></span>
    </smart>

    <smart href="" class="btn btn-3">
      <span class="txt">اضغط هنا</span>
      <span class="round"><i class="fa fa-chevron-right"></i></span>
    </smart>
</div>

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