10772047211989472
recent
آخر الأخبار

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

الخط

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

شرح التركيب

1 - توجه الي مدونتك
2 - ثم اختيار المظهر ثم تعديلHTML
3 - ثم البحث عن الوسم ]]></b:skin>
4 - ثم قم باضافة هذه الاكواد فوقه

@-webkit-keyframes Gradient {

      0% { background-position:0% 50%; }50% { background-position:100% 50%; }100% { background-position:0% 50%; }

}

@keyframes Gradient {

    0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; }

}

.button { list-style:none; text-align:center; border:0; margin:10px 0; clear:both; text-decoration:none; }

.button li { display:inline; margin:0 3px; padding:0; list-style:none; }

.button li a.demo,.button li a.download { display:block; position:relative; vertical-align:top; height:52px; line-height:52px; padding:0 30px; font-size:16px; color:#fff; text-align:center; text-decoration:none; border-radius:3px; cursor:pointer; margin:auto; box-shadow:0 10px 20px rgba(0,0,0,0.06),0 6px 6px rgba(0,0,0,0.09); }

.button li a.demo { background:linear-gradient(-45deg,#3aa4f3,#3aa4f3,#f28d47,#f28d47); background-size:400% 400%; animation:Gradient 15s ease infinite; }

.button li a.download { background:linear-gradient(-45deg,#f28d47,#f28d47,#3aa4f3,#3aa4f3); margin:20px auto 0 auto; background-size:400% 400%; animation:Gradient 15s ease infinite; }

.button li a.demo:hover,.button li a.download:hover { box-shadow:0 4px 5px rgba(0,0,0,0.06),0 1px 1px rgba(0,0,0,0.09); }

5 - قم بوضع هذا الكود في اي موضوع في مدونتك
6 - كود التحميل

<div style="text-align: center;">

<ul class="button">

<li><a class="download" href="/" rel="nofollow noopener" target="_blank">تحميل</a></li>

</ul>

</div>

7 - كود المعاينة

<div style="text-align: center;">

<ul class="button">

<li><a class="demo" href="/" rel="nofollow noopener" target="_blank">معانية</a></li>

</ul>

</div>

هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق
ليست هناك تعليقات
إرسال تعليق

إرسال تعليق

صديقي. إذا أعجبك الموضوع رجاءً قم بإضافة تعليق على الموضوع لتشجيعنا

نموذج الاتصال
الاسمبريد إلكترونيرسالة