random

آخر الأخبار

random
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>

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

عن الكاتب

فرحات دوت كوم

التعليقات



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

فرحات دوت كوم