لأن الكثير يحتاج إلى تعلم إضافة زر تحميل ومعيانة للقوالب لأجل موقعة يظهر بشكل احترفي طريقة عمل زر تحميل ومعيانة للقوال
فعمل زر التحميل والمعاينة يطعي مظهر جميل للمقال.
يمكنك تركيب زر التحميل والعماينة بطرق سهلة وهو بإعطائك كودين فقط كود تقوم بوضعة في القالب مكن css . وثم تعمل حفظ والكود الثاني تضيفة داخل مقالتك.
كيفية تركيب زر التحميل والمعاينة
يمكنك إضافة زر تحميل ومعاينة للقوالب وغيرها بشكل احترفي ومظهر جميل للغايةيمكنك تركيب زر التحميل والمعاينة بطرق سهلة وهو بإعطائك كودين فقط كود تقوم بوضعة في القالب مكن css . وثم تعمل حفظ والكود الثاني تضيفة داخل مقالتك.
المكان الماسب لموضع كود css
- المكان الأول وهو الذي يعرفة كثير من الناس تذخل من المظهر وتفتح أكواد HTML وتقوم بالبحث عن وسم الإغلاق في الكود. وتبحث عن كلمة b:skin هذا الكود ]]></b:skin> ثم تقوم بإضافة كود css فوقه مباشرة وتعمل حفظ.
- المكان الثاني وهوالضغط على مكان المظهر ثم فتح التخصيص ثم عمل تعديل والحبحث عن إضافة css ولصق الأكود داخل المربحع ثم عمل حفظ .
الكود الثاني وهو كود HTML
وهذا الكود نقوم بإضافته مكان المشاركات أو المقالات بقوم بإنشاء مقالة جديدة نشرفيها قالب أو تطبيق أو أي شيء ثم نقو بإضافة الكود في المكان الماسب لة ونضيف فقط رابطين أولا رابط التحميل ستجد علامة # تقوم تقوم بحذفها واستبدالها برابط المعاينة وكذلك رابط التحميل
كيفية تركيب كود HTML في المشاركات
- أولا هذه الأكود لا تصلح أن تضيفها هكذا كما تكتب مقالة لابد أن تعدل حتى تظهر أكواد HTML .
ثم تقوم بفتح أكواد HTML تضغط رأس الصفحة على مكان القم بالجهة اليمنى ثم تحولها ألى وضع HTML.
- ثم تبحث عن المكان الذي علمتة تقوم بحذف العلامة فقط بدون التالعرض للرموز التي حولها ثم تضيف مكان العلامة الكود المطلوب.
أكواد زر التحميل والمعاينة
الأكواد التي تحتاجها في عمل زر التحميل والعماينة هو كودين
الكود الأول هو
كود css.
يمنكنك نسخه من هنا
#wrap {margin: 10px auto;text-align: center;
}
.btn-slide, .btn-slide2 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 50px;background: #fdfdfd;border: 2px solid #1495bb;margin: 10px;transition: .5s;}
.btn-slide2 {border: 2px solid #1495bb;}
.btn-slide:hover {background-color: #1495bb;}
.btn-slide2:hover {background-color: #a8c93d; border-color: #a8c93d;}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {left: 100%;margin-left: -45px;background-color: #fdfdfd;color: #1495bb;}
.btn-slide2:hover span.circle2 {color: #a8c93d;}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {left: 40px;opacity: 0;}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {opacity: 1;left: 40px;}
.btn-slide span.circle, .btn-slide2 span.circle2 {display: block;background-color: #1495bb;color: #fff;position: absolute;float: left;margin: 5px;line-height: 42px;height: 40px;width: 40px;top: -2px;left: 0;transition: .5s;border-radius: 50%;}
.btn-slide2 span.circle2 {background-color: #1495bb;}
.btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 {position: absolute; left: 90px;text-align: center;margin: 0 auto;font-size: 16px;font-weight: bold;color: #1495bb;transition: .5s;top:-2px}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {color: #1495bb;left: 72px;}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {left: 80px;opacity: 0;}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {color: #fff;}
span.title{left: 70px!important}
]]></b:skin>
وتقوم بوضع الكود فوقها مباشرة
الكود الثاني وهو كود HTML فهذا الكود لازم يكود معك في أي مشاركة تحب تضيف لها
كود التحميل بخلاف الكود الأول يكفي أتضيفه مرة واحدة.
الكود الثاني هذا قم بنسخة منها
<div id="wrap"> <a class="btn-slide" href="#" target="_blank">
<span class="circle"><i class="fa fa-eye"></i></span>
<span class="title">معاينة القالب</span>
<span class="title-hover">اضغط هنا</span>
</a>
<a class="btn-slide2" href="#" rel="nofollow" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">تحميل مباشر</span>
<span class="title-hover2">اضغط هنا</span>
</a>
</div>
ويمكنك تنزيل ملف لجميع الأكواد الموجودة في الشرح استخدم الذي يناسبك انسخ الأكواد الدي فوق أو حمل هذا الملف
للتحميل اضغط هنا
شكرا على تعليقك