للبحـث بداخـل المدونــة . . .

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

ازرار تحميل و معاينة بشكل مميز




ازرار تحميل و معاينة بشكل مميز


اضافة رائعة بشكل مميز لأظهار المواضيع بشكل جذاب اذا كان بحاجة لازرار تحميل و معاينة


شرح التركيب بالفيديو






شرح تركيب الأضافة


اولا قم بنسخ شفرة 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,#f10000 5%,#ffe075 50%,#ff7800 100%);background-size:500%;border-radius:5px;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.2rem 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:&quot;\f019&quot;;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,#0581d2 9%,#eff16d 50%,#e67e22 100%);background-size:500%;border-radius:5px;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.2rem 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:&quot;\f1d8&quot;;font-family:fontawesome;font-size:14px;padding-right: 13px;}
@keyframes gradient{0%{background-position:0% 50%}100%{background-position:100%}}
</style>



إضافة الأزرار للموضوع


الانتقال عند كتابة تدوينة الى html 


<div class="TIMbutton">
  <a class="TIMdemo" href="#" target="_blank">معاينة</a>
  <a class="TIMdownload" href="#" target="_blank">تحميل</a>
</div>



إظهار الايقونات


إذا لم تظهر ايقونات الموجود على زر العرض المعاينة و التحميل  ، فيرجى نسخ الرمز التالي ولصقه أعلى الرمز </ head> أو </ body>.


<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css




ثم الضغط على حفظ 




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

إرسال تعليق

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

مواضيع مهمة

ملفات تعريف الأرتباط
يستخدم موقعنا ملفات تعريف الارتباط Cookies لتحسين تجربتك أثناء تصفحك لموقعنا .
إقرأ المزيد
هنـاك مشكـلة !
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت وبدء التصفح مرة أخرى.
تـم الكشــف عن مانــع أعلانــات !
المعذرة ! لقد إكتشفنا أنك قمت بتنشيط Ad-Blocker يرجى النظر في دعمنا من خلال تعطيل Ad-Blocker الخاص بك فهو يساعدنا في تطوير هذا الموقع . . . وشكرا لتفهمك !
Site is Blocked
Sorry! This site is not available in your country.