رئيسية المعهد
رئيسية المعهد  تواصل معنا  حقوق الملكية الفكرية  اربط مدونتك بنا  محول أكواد أدسنس

 

معرض قوالب معهد خبراء بلوجر - دليل مدونات بلوجر - موقع نشر بلوجر - اضافات بلوجر




العودة   معهد خبراء بلوجر > الدعم الفني > إضافات وأدوات بلوجر
تحديث الصفحة أزرار دات فقاقيع متحركة وبتقنية css لمدونات بلوجر
التسجيل التعليمـــات التقويم مشاركات اليوم البحث


إضافة رد
صفحة 1 من 2 1 2
نسخ الرابط
نسخ للمنتديات
 
أدوات الموضوع انواع عرض الموضوع
قديم 09-05-2012, 06:48 PM   #1
shoubed
مدون جديد
 
الصورة الرمزية shoubed
 
تاريخ التسجيل: Aug 2012
المشاركات: 29
افتراضي أزرار دات فقاقيع متحركة وبتقنية css لمدونات بلوجر
أنا : shoubed
سجل معنا لتتمتع بهذه الخاصية





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


طريقة التركيب


ثم قم بالضغط على ctrl + f ثم قم بالبحث على الكود التالي


]]></b:skin>

ثم ضع فوقه مباشرة هدا الكود

كود PHP:
.button{
    font:15px Calibri, Arial, sans-serif;

    /* A semi-transparent text shadow */
    text-shadow:1px 1px 0 rgba(255,255,255,0.4);
 
    /* Overriding the default underline styling of the links */
    text-decoration:none !important;
    white-space:nowrap;
 
    display:inline-block;
    vertical-align:baseline;
    position:relative;
    cursor:pointer;
    padding:10px 20px;
 
    background-repeat:no-repeat;

    /* The following two rules are fallbacks, in case
       the browser does not support multiple backgrounds. */

    background-position:bottom left;
    background-image:url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png');
 
    /* Multiple backgrounds version. The background images
       are defined individually in color classes */
 
    background-position:bottom left, top right, 0 0, 0 0;
    background-clip:border-box;
 
    /* Applying a default border raidus of 8px */
 
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
 
    /* A 1px highlight inside of the button */
 
    -moz-box-shadow:0 0 1px #fff inset;
    -webkit-box-shadow:0 0 1px #fff inset;
    box-shadow:0 0 1px #fff inset;
 
    /* Animating the background positions with CSS3 */
    /* Currently works only in Safari/Chrome */
 
    -webkit-transition:background-position 1s;
    -moz-transition:background-position 1s;
    transition:background-position 1s;
}

.button:hover{
 
    /* The first rule is a fallback, in case the browser
       does not support multiple backgrounds
    */
 
    background-position:top left;
    background-position:top left, bottom right, 0 0, 0 0;
}

.button:active{
    /* Moving the button 1px to the bottom when clicked */
    bottom:-1px;
}

/* The three buttons sizes */

.button.big        { font-size:30px;}
.button.medium    { font-size:18px;}
.button.small    { font-size:13px;}

/* A more rounded button */

.button.rounded{
    -moz-border-radius:4em;
    -webkit-border-radius:4em;
    border-radius:4em;
}


/* Defining four button colors */


/* BlueButton */

.blue.button{
    color:#0f4b6d !important;
 
    border:1px solid #84acc3 !important;
 
    /* A fallback background color */
    background-color: #48b5f2;
 
    /* Specifying a version with gradients according to */
 
     background-image:      url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),
                        -moz-radial-gradient(    center bottom, circle,
                                                rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
                        -moz-linear-gradient(#4fbbf7, #3faeeb);

     background-image:      url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),
                        -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
                                            from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
                        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}

.blue.button:hover{
    background-color:#63c7fe;
 
     background-image:      url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),
                        -moz-radial-gradient(    center bottom, circle,
                                                rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
                        -moz-linear-gradient(#63c7fe, #58bef7);
                     
     background-image:      url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),
                        -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
                                            from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
                        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}

/* Green Button */

.green.button{
    color:#345903 !important;
    border:1px solid #96a37b !important; 
    background-color: #79be1e;
 
       background-image:url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),   -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1)   0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
       background-image:url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),   -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,   from(rgba(162,211,30,1)),   to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%,   from(#82cc27), to(#74b317));
}

.green.button:hover{
    background-color:#89d228;
 
       background-image:url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),   -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1)   0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
       background-image:url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),   -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,   from(rgba(183,229,45,1)),   to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%,   from(#90de31), to(#7fc01e));
}

/* Orange Button */

.orange.button{
    color:#693e0a !important;
    border:1px solid #bea280 !important; 
    background-color: #e38d27;
 
       background-image:url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),   -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1)   0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
       background-image:url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),   -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,   from(rgba(232,189,45,1)),   to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%,   from(#f1982f), to(#d4821f));
}

.orange.button:hover{
    background-color:#ec9732;
 
       background-image:url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),   -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1)   0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
       background-image:url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),   -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,   from(rgba(241,192,52,1)),   to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%,   from(#f9a746), to(#e18f2b));
}

.gray.button{
    color:#525252 !important;
    border:1px solid #a5a5a5 !important; 
    background-color: #a9adb1;
 
       background-image:url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),   -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1)   0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
       background-image:url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),   -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,   from(rgba(197,199,202,1)),   to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%,   from(#c5c7ca), to(#92989c));
}

.gray.button:hover{
    background-color:#b6bbc0;
 
       background-image:url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),   -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1)   0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
       background-image:url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sA5-EsiGIx8/T0j5R9D0acI/AAAAAAAAADY/hPDrj02PVa4/s1600/button_bg.png'),   -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,   from(rgba(202,205,208,1)),   to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%,   from(#d1d3d6), to(#9fa5a9));
} 



ثم قم بحفض القالب

  • طريقة اضاهر الأزرار

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

الان هده هي أكواد الأزرار من الأكبر الى الصغر


  • الأزرار دات الحجم الكبير(اختر الزر حسب لونه )

<a href="رابط " class="button big blue">ضع جملتك هنا</a>
<a href="رابط " class="button big green">ضع جملتك هنا</a>
<a href="رابط" class="button big orange">ضع جملتك هنا</a>
<a href="رابط " class="button big gray">ضع جملتك هنا</a>

ملاحضة

لا تضع الكود فقط اختر كود زر حسب لونه وقد بينت كل كود ولونه

  • الأزرار دات الحجم المتوسط(اختر الزر حسب لونه )

<a href="رابط" class="button blue medium">ضع جملتك هنا</a>
<a href="رابط" class="button green medium">ضع جملتك هنا</a>
<a href="رابط" class="button orange medium">ضع جملتك هنا</a>
<a href="رابط " class="button gray medium">ضع جملتك هنا</a>


  • الأزرار دات الحجم الصغير (اختر الزر حسب لونه )


<a href="رابط " class="button small blue">ضع جملتك هنا</a>
<a href="رابط " class="button small green">ضع جملتك هنا</a>
<a href="رابط " class="button small orange">ضع جملتك هنا</a>
<a href="رابط" class="button small gray">ضع جملتك هنا</a>


الأزرار دات الحجم الصغير والدائرية الحواف (اختر الزر حسب لونه )


<a href="رابط" class="button small blue rounded">ضع جملتك هنا</a>
<a href="رابط" class="button small green rounded">ضع جملتك هنا</a>
<a href="رابط" class="button small orange rounded">ضع جملتك هنا</a>
<a href="رابط " class="button small gray rounded">ضع جملتك هنا</a>


اختر ما تريد

ولا تنسى تغير رابط بأي رابط تريد أن يتم التحويل له مثلا وأيضا لاتنسى تغير ضع جملتك هنا بالجملة التي ستضهر على الزر دي الفقاقيع المتحركة

ومبروك عليك الازرار

http://arabi-b.blogspot.com/2012/09/...#ixzz25cdZAIEw

الدعم العربي

shoubed غير متواجد حالياً   رد مع اقتباس

مركز رفع موسوعة العربية
قديم 09-05-2012, 06:54 PM   #2
admin
مدير عام
 
الصورة الرمزية admin
 
تاريخ التسجيل: Apr 2012
الدولة: جده
المشاركات: 2,846
افتراضي رد: أزرار دات فقاقيع متحركة وبتقنية css لمدونات بلوجر
أنا : admin
سجل معنا لتتمتع بهذه الخاصية




أزرار جميلة أخي
إن شاء الله يستفيد منها الإخوة المدونون
لا تحرمنا من جديدك

الدعم العربي

admin غير متواجد حالياً   رد مع اقتباس
قديم 09-05-2012, 07:40 PM   #3
ism33ail
مدون نشيط
 
الصورة الرمزية ism33ail
 
تاريخ التسجيل: Jun 2012
الدولة: المغرب
المشاركات: 228
افتراضي رد: أزرار دات فقاقيع متحركة وبتقنية css لمدونات بلوجر
أنا : ism33ail
سجل معنا لتتمتع بهذه الخاصية







جميلة..
مشكوور يا غالي

الدعم العربي

ism33ail غير متواجد حالياً   رد مع اقتباس
قديم 09-05-2012, 11:15 PM   #4
shoubed
مدون جديد
 
الصورة الرمزية shoubed
 
تاريخ التسجيل: Aug 2012
المشاركات: 29
افتراضي رد: أزرار دات فقاقيع متحركة وبتقنية css لمدونات بلوجر
أنا : shoubed
سجل معنا لتتمتع بهذه الخاصية




شكرا لمروركم الطيب

الدعم العربي

shoubed غير متواجد حالياً   رد مع اقتباس
قديم 09-06-2012, 01:06 PM   #5
السيد ابو جبل
مدون نشيط
 
الصورة الرمزية السيد ابو جبل
 
تاريخ التسجيل: Jul 2012
الدولة: مصر
المشاركات: 272
إرسال رسالة عبر Yahoo إلى السيد ابو جبل
افتراضي رد: أزرار دات فقاقيع متحركة وبتقنية css لمدونات بلوجر
أنا : السيد ابو جبل
سجل معنا لتتمتع بهذه الخاصية




منقول من مدونة تقارب

الدعم العربي

السيد ابو جبل غير متواجد حالياً   رد مع اقتباس
قديم 09-06-2012, 01:19 PM   #6
shoubed
مدون جديد
 
الصورة الرمزية shoubed
 
تاريخ التسجيل: Aug 2012
المشاركات: 29
افتراضي رد: أزرار دات فقاقيع متحركة وبتقنية css لمدونات بلوجر
أنا : shoubed
سجل معنا لتتمتع بهذه الخاصية




اعطني رابط الموضوع في مدونة تقارب
__________________
يمكنكم زيارة مدونتي الشاملة : http://www.arabi-b.blogspot.com
ومنتداي ايضا : http://www.trustnt.eb2a.com
ولمراسلتي : http://www.facebok.com/shoubed
من مواضيع shoubed

الدعم العربي

shoubed غير متواجد حالياً   رد مع اقتباس
قديم 09-06-2012, 01:24 PM   #7
السيد ابو جبل
مدون نشيط
 
الصورة الرمزية السيد ابو جبل
 
تاريخ التسجيل: Jul 2012
الدولة: مصر
المشاركات: 272
إرسال رسالة عبر Yahoo إلى السيد ابو جبل
افتراضي رد: أزرار دات فقاقيع متحركة وبتقنية css لمدونات بلوجر
أنا : السيد ابو جبل
سجل معنا لتتمتع بهذه الخاصية




اقتباس:
المشاركة الأصلية كتبت بواسطة shoubed مشاهدة المشاركة

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


طريقة التركيب


ثم قم بالضغط على ctrl + f ثم قم بالبحث على الكود التالي


]]></b:skin>

ثم ضع فوقه مباشرة هدا الكود

كود PHP:
.button{
    font:15px calibri, arial, sans-serif;

    /* a semi-transparent text shadow */
    text-shadow:1px 1px 0 rgba(255,255,255,0.4);
 
    /* overriding the default underline styling of the links */
    text-decoration:none !important;
    white-space:nowrap;
 
    display:inline-block;
    vertical-align:baseline;
    position:relative;
    cursor:pointer;
    padding:10px 20px;
 
    background-repeat:no-repeat;

    /* the following two rules are fallbacks, in case
       the browser does not support multiple backgrounds. */

    background-position:bottom left;
    background-image:url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png');
 
    /* multiple backgrounds version. The background images
       are defined individually in color classes */
 
    background-position:bottom left, top right, 0 0, 0 0;
    background-clip:border-box;
 
    /* applying a default border raidus of 8px */
 
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
 
    /* a 1px highlight inside of the button */
 
    -moz-box-shadow:0 0 1px #fff inset;
    -webkit-box-shadow:0 0 1px #fff inset;
    box-shadow:0 0 1px #fff inset;
 
    /* animating the background positions with css3 */
    /* currently works only in safari/chrome */
 
    -webkit-transition:background-position 1s;
    -moz-transition:background-position 1s;
    transition:background-position 1s;
}

.button:hover{
 
    /* the first rule is a fallback, in case the browser
       does not support multiple backgrounds
    */
 
    background-position:top left;
    background-position:top left, bottom right, 0 0, 0 0;
}

.button:active{
    /* moving the button 1px to the bottom when clicked */
    bottom:-1px;
}

/* the three buttons sizes */

.button.big        { font-size:30px;}
.button.medium    { font-size:18px;}
.button.small    { font-size:13px;}

/* a more rounded button */

.button.rounded{
    -moz-border-radius:4em;
    -webkit-border-radius:4em;
    border-radius:4em;
}


/* defining four button colors */


/* bluebutton */

.blue.button{
    color:#0f4b6d !important;
 
    border:1px solid #84acc3 !important;
 
    /* a fallback background color */
    background-color: #48b5f2;
 
    /* specifying a version with gradients according to */
 
     background-image:      Url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),
                        -moz-radial-gradient(    center bottom, circle,
                                                rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
                        -moz-linear-gradient(#4fbbf7, #3faeeb);

     background-image:      Url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),
                        -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
                                            from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
                        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}

.blue.button:hover{
    background-color:#63c7fe;
 
     background-image:      Url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),
                        -moz-radial-gradient(    center bottom, circle,
                                                rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
                        -moz-linear-gradient(#63c7fe, #58bef7);
                     
     background-image:      Url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),
                        -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
                                            from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
                        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}

/* green button */

.green.button{
    color:#345903 !important;
    border:1px solid #96a37b !important; 
    background-color: #79be1e;
 
       background-image:url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),   -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1)   0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
       background-image:url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),   -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,   from(rgba(162,211,30,1)),   to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%,   from(#82cc27), to(#74b317));
}

.green.button:hover{
    background-color:#89d228;
 
       background-image:url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),   -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1)   0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
       background-image:url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),   -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,   from(rgba(183,229,45,1)),   to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%,   from(#90de31), to(#7fc01e));
}

/* orange button */

.orange.button{
    color:#693e0a !important;
    border:1px solid #bea280 !important; 
    background-color: #e38d27;
 
       background-image:url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),   -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1)   0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
       background-image:url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),   -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,   from(rgba(232,189,45,1)),   to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%,   from(#f1982f), to(#d4821f));
}

.orange.button:hover{
    background-color:#ec9732;
 
       background-image:url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),   -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1)   0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
       background-image:url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),   -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,   from(rgba(241,192,52,1)),   to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%,   from(#f9a746), to(#e18f2b));
}

.gray.button{
    color:#525252 !important;
    border:1px solid #a5a5a5 !important; 
    background-color: #a9adb1;
 
       background-image:url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),   -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1)   0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
       background-image:url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),   -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,   from(rgba(197,199,202,1)),   to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%,   from(#c5c7ca), to(#92989c));
}

.gray.button:hover{
    background-color:#b6bbc0;
 
       background-image:url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),   -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1)   0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
       background-image:url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),     url('http://3.bp.blogspot.com/-sa5-esigix8/t0j5r9d0aci/aaaaaaaaady/hpdrj02pva4/s1600/button_bg.png'),   -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,   from(rgba(202,205,208,1)),   to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%,   from(#d1d3d6), to(#9fa5a9));
} 



ثم قم بحفض القالب

  • طريقة اضاهر الأزرار

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

الان هده هي أكواد الأزرار من الأكبر الى الصغر


  • الأزرار دات الحجم الكبير(اختر الزر حسب لونه )

<a href="رابط " class="button big blue">ضع جملتك هنا</a>
<a href="رابط " class="button big green">ضع جملتك هنا</a>
<a href="رابط" class="button big orange">ضع جملتك هنا</a>
<a href="رابط " class="button big gray">ضع جملتك هنا</a>

ملاحضة

لا تضع الكود فقط اختر كود زر حسب لونه وقد بينت كل كود ولونه

  • الأزرار دات الحجم المتوسط(اختر الزر حسب لونه )

<a href="رابط" class="button blue medium">ضع جملتك هنا</a>
<a href="رابط" class="button green medium">ضع جملتك هنا</a>
<a href="رابط" class="button orange medium">ضع جملتك هنا</a>
<a href="رابط " class="button gray medium">ضع جملتك هنا</a>


  • الأزرار دات الحجم الصغير (اختر الزر حسب لونه )


<a href="رابط " class="button small blue">ضع جملتك هنا</a>
<a href="رابط " class="button small green">ضع جملتك هنا</a>
<a href="رابط " class="button small orange">ضع جملتك هنا</a>
<a href="رابط" class="button small gray">ضع جملتك هنا</a>


الأزرار دات الحجم الصغير والدائرية الحواف (اختر الزر حسب لونه )


<a href="رابط" class="button small blue rounded">ضع جملتك هنا</a>
<a href="رابط" class="button small green rounded">ضع جملتك هنا</a>
<a href="رابط" class="button small orange rounded">ضع جملتك هنا</a>
<a href="رابط " class="button small gray rounded">ضع جملتك هنا</a>


اختر ما تريد

ولا تنسى تغير رابط بأي رابط تريد أن يتم التحويل له مثلا وأيضا لاتنسى تغير ضع جملتك هنا بالجملة التي ستضهر على الزر دي الفقاقيع المتحركة

ومبروك عليك الازرار

http://arabi-b.blogspot.com/2012/09/...#ixzz25cdzaiew
اضافة جميل بس يا ريت تكتب المصدر الحقيقى هذا الاضافة من مدونة تقارب

الدعم العربي

السيد ابو جبل غير متواجد حالياً   رد مع اقتباس
قديم 09-06-2012, 03:24 PM   #8
السيد ابو جبل
مدون نشيط
 
الصورة الرمزية السيد ابو جبل
 
تاريخ التسجيل: Jul 2012
الدولة: مصر
المشاركات: 272
إرسال رسالة عبر Yahoo إلى السيد ابو جبل
افتراضي رد: أزرار دات فقاقيع متحركة وبتقنية css لمدونات بلوجر
أنا : السيد ابو جبل
سجل معنا لتتمتع بهذه الخاصية




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

الدعم العربي

السيد ابو جبل غير متواجد حالياً   رد مع اقتباس
قديم 09-06-2012, 03:41 PM   #9
Po!nt
مدون مميز
 
الصورة الرمزية Po!nt
 
تاريخ التسجيل: Aug 2012
المشاركات: 566
افتراضي رد: أزرار دات فقاقيع متحركة وبتقنية css لمدونات بلوجر
أنا : Po!nt
سجل معنا لتتمتع بهذه الخاصية




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

أخي سيد أبوجبل لو تتكرم وتضع لنا رابط الموضوع الأصلي من "مدونة تقارب" أكون شاكر لك.
__________________
BMTdesigner.com
---------------
موقع يجمع أفضل الأدوات والمصادر وخامات التصميم المفتوحة المصدر والمجانية في موقع واحد لخدمة المصممين
من مواضيع Po!nt

الدعم العربي

Po!nt غير متواجد حالياً   رد مع اقتباس
قديم 09-06-2012, 04:30 PM   #10
shoubed
مدون جديد
 
الصورة الرمزية shoubed
 
تاريخ التسجيل: Aug 2012
المشاركات: 29
افتراضي رد: أزرار دات فقاقيع متحركة وبتقنية css لمدونات بلوجر
أنا : shoubed
سجل معنا لتتمتع بهذه الخاصية




نعم اخي قلت له مسبقا اعطنا الرابط الاصلي لان هذه التدوينة غير منقولة من مدونة تقارب

الدعم العربي

التعديل الأخير تم بواسطة shoubed ; 09-06-2012 الساعة 04:33 PM
shoubed غير متواجد حالياً   رد مع اقتباس
إضافة رد
صفحة 1 من 2 1 2

مواقع النشر (المفضلة)

« الموضوع السابق | الموضوع التالي »

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك
BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
شرح كيفية اضافة أزرار css3 الى بلوجر | مدونة أنس إدريس anased دروس بلوجر 2 05-08-2013 01:07 PM
نافذة دعائية متحركة لمدونات بلوجر جديدة jeussef إضافات وأدوات بلوجر 4 09-01-2012 11:44 AM
حل مشكلة عدم ظهور أزرار المشاركة المقدمة من بلوجر admin دروس بلوجر 5 08-25-2012 10:17 AM
جديد أضف صور و نصوص ملونة و متحركة لتعليقاتك على بلوجر السيد ابو جبل إضافات وأدوات بلوجر 4 08-24-2012 10:26 PM
أضف أزرار المشاركة الاجتماعية بشكل طافي لمدونة بلوجر AHMED_ELBRANS إضافات وأدوات بلوجر 8 07-08-2012 07:06 PM



سياسة الخصوصية - Privacy-Policy - اربط مدونتك بنا - حقوق الملكية والتأليف - الاتصال بنا - معهد خبراء بلوجر - الأرشيف - الأعلى


لتصفح أفضل وللاستفادة القصوى من خصائص المعهد ننصحكم باستعمال :

Powered by vBulletin® Copyright ©2000 - 2025 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012 Google
أعلن على المعهد : اتصل بنا - منتدي كنوز - الدعم العربي - قوالب بلوجر - او او انيمي
رئيسية المعهد
الساعة الآن 06:14 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته
التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر)