آخر الأخبار
جاري التحميل ...
الرئيسية / ازرار
‏إظهار الرسائل ذات التسميات ازرار. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات ازرار. إظهار كافة الرسائل
Admin Amer لا يوجد تعليق

اكثر من 10 ازرار بأشكال مختلفة على مدونات بلوجر كتبها: المدون التقني - الخبير عامر بشير

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.
اكثر من 10 ازرار بأشكال مختلفة على مدونات بلوجر

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

يمكنك معاينة شكل الازرار من هنا


الان نبدا بشرح التركيب


  1. ابحث في القالب على  وضع هذا الكود فوقه مباشرة



  • يمكنك تغيير خلفيات الازرار بوضع الرابط في مكان الاتي


  1. .btnabdoutech23--cover1{background-image:url(هنا خلفية تريدها)}
  2. .btnabdoutech23--cover2{background-image:url(هنا خلفية تريدها)}
  3. .btnabdoutech23--cover3{background-image:url(هنا خلفية تريدها)}
  4. .btnabdoutech23--cover4{background-image:url(هنا خلفية تريدها)}
  5. .btnabdoutech23--cover5{background-image:url(هنا خلفية تريدها)}
الان احفظ القالب 

  • و الان في كل موضوع اردت فيه ضهور زر تضيف هذا الكود




  • الان نشرح كيفية التحكم بشكل الازرار
1- الان لتحكم ب الايقونة
في الايقونات توجد 4 ايقونات في المثال توجد ايقونة الداون لود




  • انتا غير icon-download الجزء الذي ب الاحمر 
  • icon-{nameIcon}
  • اسماء الاشكال  cloud, open, clip, link , zip
2- الان لتحكم بتأثير
في التأثيرات يوجد 4 تأثيرات

لاضافت اي تأثير ضف هذا الى جانب الكلاس مثال   class='btnabdoutech23 icon-download btnabdoutech23--shake'

  • انتا غير btnabdoutech23--shake الجزء الذي ب الاحمر
  •  {btnabdoutech23--{ اسم التأثير
  • اسماء التأثيرات flip, rotate, rubber , shake

3- الان لتحكم في الخلفيات
في الخلفيات يوجد 5 خلفيات ويمكنك تغييرهم بوضع رابط الصورة فقط في المكان الذي حددته لك في اول الموضوع

لاضافت اي خلفية ضف هذا جانب الكلاس  مثال  class='btnabdoutech23 icon-download btnabdoutech23--shake btnabdoutech23--cover1'

  • لتغيير الخلفيات انتا تجدهم مرقمين cover1 cover 2 cover3 cover4 cover5 
  • انتا غيرهم كما تريد
وان اعجبك احد ازرار التي في المعاينة يمكنك اخذه ونسخه 
الان نصل الى نهاية الشرح لذا اذا اعجبتك التدوينة لا تنسى الاشتراك في المدونة من هنا لكي تتوصل بكل ما هوا جديد
Admin Amer لا يوجد تعليق

إضافة ازرار تصغير و تكبير الخط على المواضيع في مدونات بلوجر كتبها: المدون التقني - الخبير عامر بشير

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

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

الان نتجه الى معاينة الاضافة عبر الزر التالي

بداية الشرح


  1. إبحث في القالب على  وضع هذا الكود فوقه مباشرة




  1. إبحث في القالب على   وضع هذا الكود فوقه مباشرة




  1. الان ضع هذا فوق المواضيع ذات صلة او امام ازرار المشاركة التي تأتي اسفل التدوينة المهم اي شئ يضهر اسفل التدوينة انتا قم ب البحث عليه وضع هذا الكود فوقه او اسفل و إن لم تفهم جيدا فيمكن الاتصال بي من هنا






الان احفظ القالب و مبروك عليك الاضافة اذا اعجبتك التدوينة لا تنسى الاشتراك في المدونة من هنا لدعمي على تقديم المزيد
Admin Amer لا يوجد تعليق

اضافة صندوق الاشتراك بالمواقع التواصل الاجتماعي بشكل إحترافي #3 كتبها: المدون التقني - الخبير عامر بشير

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.
السلام عليكم مرحبا بكم في مدونة الخبير عامر بشير اليوم اقدم لكم اضافة رائعة لبلوجر وهي عبارة عن صندوق الاشتراك في مواقع التواصل الاجتماعي الشكل الثالث حيث نشرت في تدوينات سابقة النسخ الاخرى يمكنك مشاهدتها من هنا و من هنا




معاينة


  1. ابحث على  وضع هذا الكود فوقه مباشرة




  1. ضع هذا الكود في المكان الذي تريده ان بضهر فيه 





الان إحفظ القالب و مبروك عليك الاضافة لا تنسى الاشتراك في المدونة و القناة لكي تتوصل بكل جديد من الشروحات الكتابة و المصورة
Admin Amer لا يوجد تعليق

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

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.
اضافة أزرار مواقع التواصل الاجتماعى بشكل احترافى







لتحميل الكود من هنا

و للمعاينة من هنا
Admin Amer لا يوجد تعليق

أزرار رد الفعل احترافية لبلوجر+اكثر من 17 شكل كتبها: المدون التقني - الخبير عامر بشير

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.
أزرار رد الفعل احترافية لبلوجر+اكثر من 17 شكل

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


  1. نسجل في هذا الموقع من هنا
أزرار رد الفعل احترافية لبلوجر+اكثر من 17 شكل


أزرار رد الفعل احترافية لبلوجر+اكثر من 17 شكل

أزرار رد الفعل احترافية لبلوجر+اكثر من 17 شكل



  1. ثم ابحث عن  

  3. وضعها اسفلها و احفظ
    Admin Amer لا يوجد تعليق

    ازرار رائعة لبلوجر بتأثير متريال ديزاين كتبها: المدون التقني - الخبير عامر بشير

    السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

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





    1. نبحث عن <[[
    2. ونضع هذا الكود فوقه

    @media only screen and (min-width: 993px) {
        .container {
            width: 85%;
        }
    }
    @media only screen and (min-width: 993px) {
        .container {
            width: 70%;
        }
    }
    @media only screen and (min-width: 601px) {
        .container {
            width: 85%;
        }
    }
    .container {
        margin: 0 auto;
        max-width: 1280px;
        width: 90%;
    }
    .btn-space{
        text-align: center;
    }
    .ripple {
        text-align: center;
        display: inline-block;
        padding: 8px 30px;
        border-radius: 2px;
        letter-spacing: .5px;
        border-radius: 2px;
        text-decoration: none;
        color: #fff;
        overflow: hidden;
        position: relative;
        z-index: 0;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }
    .ripple:hover {
        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    }
    .ink {
        display: block;
        position: absolute;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 100%;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
    }
    .animate {
        -webkit-animation: ripple 0.55s linear;
        -moz-animation: ripple 0.55s linear;
        -ms-animation: ripple 0.55s linear;
        -o-animation: ripple 0.55s linear;
        animation: ripple 0.55s linear;
    }
    @-webkit-keyframes ripple {
        100% {
            opacity: 0;
            -webkit-transform: scale(2.5);
        }
    }
    @-moz-keyframes ripple {
        100% {
            opacity: 0;
            -moz-transform: scale(2.5);
        }
    }
    @-o-keyframes ripple {
        100% {
            opacity: 0;
            -o-transform: scale(2.5);
        }
    }
    @keyframes ripple {
        100% {
            opacity: 0;
            transform: scale(2.5);
        }
    }
    .red {
        background-color: #F44336;
    }
    .pink {
        background-color: #E91E63;
    }
    .blue {
        background-color: #2196F3;
    }
    .cyan {
        background-color: #00bcd4;
    }
    .teal {
        background-color: #009688;
    }
    .yellow {
        background-color: #FFEB3B;
        color: #000;
    }
    .orange {
        background-color: #FF9800;
    }
    .brown {
        background-color: #795548;
    }
    .grey {
        background-color: #9E9E9E;
    }
    .black {
        background-color: #000000;
    }

    1. ثم نبحث عن
    2. ونضع هذا الكود فوقه






    1. و اخيرا ضع هذا الكود في المكان الذي تريده


          تحميل
          تحميل
          تحميل
          تحميل
          تحميل
          تحميل
          تحميل
          تحميل
          تحميل
          تحميل
       
     

    1. للمعاينة

    تحميل تحميل تحميل تحميل تحميل تحميل تحميل تحميل تحميل تحميل