-->
العربي ويب العربي ويب
recent

آخر الأخبار

recent
recent
جاري التحميل ...

إضافة زر التحميل بتقنية CSS3 لمدونات بلوجر بشكل أنيق

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


أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب
سنتعرف اليوم على طريقة تركيب زر التحميل بتقنية CSS3 لمدونات بلوجر بشكل أنيق وبخطوات بسيطة

صورة الإضافة

لمشاهدة العرض التوضيحي


خطوات إضافة زر التحميل لمدونات بلوجر

تابع معي ...

أولا توجه الى لوحة تحكم مدونتك  من هنا 
2 - قالب (المظهر) >> تحرير Html >>
3 - إبحث عن الوسم التالي عبر الضغط على Ctrl + F
</body>.
4 - أضف الكود التالي أعلاه (فوق)
<style>
.abt-button {
    margin: 50px auto;
    width: 200px;
}
 /* Get this button at https://el3araby-web.blogspot.com */
.abt-button a {
    background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent;
    color: white;
    display: block;
    font: 17px/50px Helvetica,Verdana,sans-serif;
    height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
  /*TYPE*/
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  /*GRADIENT*/
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */
}
.abt-button a, .abt-button p {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.abt-button p {
    background: #222222;
    color: #FFFFFF;
    display: block;
    font: 12px/45px Helvetica,Verdana,sans-serif;
    height: 40px;
    margin: -40px 0 0 10px;
    position: absolute;
    text-align: center;
    transition: margin 0.5s ease 0s;
    width: 180px;
    z-index: 1;
  /*TRANSITION*/
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;
}
.abt-button:hover .up {
    margin: -5px 0 0 10px !important;
}
.abt-button:hover .down {
    line-height: 35px !important;
    margin: -85px 0 0 10px !important;
}
.abt-button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */
}
.abt-button:active .up {
    margin: -20px 0 0 10px !important;
}
.abt-button:active .down {
    margin: -70px 0 0 10px !important;
}
</style>
5 - إضغط حفظ المظهر
الآن عندما تقوم بكتابة موضوع وتريد إضافة زر التحميل إضغط على تبويب  HTML 
وأضف الكود التالي في المكان المناسب
<div class="abt-button">
      <a href="#">Download</a>
      <p class="up">click to begin</p>
      <p class="down">1.2MB .zip</p>
    </div>
للتعديل على الإضافة

إستبدل العلامة # برابط التحميل
إستبدل Download بما تريد
إستبدل click to begin بما تريد
إستبدل 1.2MB .zip بحجم وصيغة الملف

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها
باب التعليقات مفتوح للجميع

كاتب الموضوع

محمد العربي

0 تعليق على موضوع : إضافة زر التحميل بتقنية CSS3 لمدونات بلوجر بشكل أنيق

  • اضافة تعليق

  • الأبتساماتأخفاء الأبتسامات



    ஜ العربي ويب ஜ | ஜ شعارنا إثراء المحتوى العربي ஜ

    إضغط على | إنضم لموقعنا + متابعتنا عبر مواقع التواصل | وكن أول من يتوصل بجديدنا

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

    إتصل بنا

    اخر تعليقات بلوجر

    تغريداتي علي التويتر

    زوار المدونة

    Statistics

    احصاءات المدونة

    جميع الحقوق محفوظة لـ

    العربي ويب

    2017

    –>