0
السلام عليكم - مرحبا بكم في تدوينة خاصة باضافات بلوجر على ، درس اليوم هو طريقة تخصص ازرار معاية و تحميل و جعلها تبدو جميلة لمتصفحي المدونة، هذه ازار تعطي مدونة جمالية و تجدبه الزائر للموقع ، اذا كنت تريد ثاثير و كسب ثقة المتابعين فانت بحاجة الى اضافات احترافية بمعنة الكلمة، هكذا جل المدونون يحقوقون مراكز متقدمة في الويب.




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

1. اولا قم بنسخ شفرة CSS التالية ولصقها أو وضعها في 👈 القالب 👈 تعديلHTML  ابحث عن الرمز </ head> اضف الكود فوقها.
<style>.TIMbutton{padding:15px;margin:15px;width:100%;text-align:center}.TIMdownload{margin:5px;padding:15px 25px;text-decoration:none;color:#fff;background:-webkit-gradient(to right,#16a085 0%,#F5D76E 50%,#D24D57 100%);background:linear-gradient(to right,#16a085 0%,#F5D76E 50%,#D24D57 100%);background-size:500%;border-radius:5rem;border:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1em;letter-spacing:0.05em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;outline:none;box-shadow:0 0.5rem 1rem rgba(0,0,0,0.15)}.TIMdownload:hover{animation-name:gradient;-webkit-animation-name:gradient;animation-duration:2s;-webkit-animation-duration:s;animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}.TIMdownload:after{content:"\f019";font-family:fontawesome;font-size:14px;padding-right:10px}.TIMdemo{margin:5px;padding:15px 25px;text-decoration:none;color:#fff;background:-webkit-gradient(to right,#2980b9 0%,#F5D76E 50%,#e67e22 100%);background:linear-gradient(to right,#2980b9 0%,#F5D76E 50%,#e67e22 100%);background-size:500%;border-radius:5rem;border:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1em;letter-spacing:0.05em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;outline:none;box-shadow:0 0.5rem 1rem rgba(0,0,0,0.15)}.TIMdemo:hover{animation-name:gradient;-webkit-animation-name:gradient;animation-duration:2s;-webkit-animation-duration:s;animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}.TIMdemo:after{content:"\f1d8";font-family:fontawesome;font-size:14px;padding-left:10px}@keyframes gradient{0%{background-position:0% 50%}100%{background-position:100%}}</style>
2. قم بحفض القالب،  لمعرفة كيفية استخدامها ، يرجى نسخ شفرة HTML التالية ولصقها في كل منشور في مدونتك التي تريد أن تقدم لها عرض تجريبي وتنزيل. تذكر ، في HTML لا يؤلف.
<div class="TIMbutton"> <a class="TIMdemo" href="#" target="_blank">معاينة</a> <a class="TIMdownload" href="#" target="_blank">تحميل</a></div>

3. إذا لم تظهر ايقونات الموجود على زر العرض المعاينة و التحميل  ، فيرجى نسخ الرمز التالي ولصقه أعلى الرمز </ head> أو </ body>.
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
لمعرفت المزيد أكثر وضوحًا ، يرجى الاطلاع على الاضافة  أدناه.
المصدر مدونة المحترف العربي

إرسال تعليق

جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).

 
Top