كيفية غضافة ازرار المعاينة والتحميل لاي قالب بلوجر 2021
اهلا ومرحبا بكم في موقع دروس تيك، نقدم لكم اليوم شرح كيفية إضافة ازرار المعاينة والتحميل على مدونة بلوجر بشكل احترافي جدا، كثيرا مانحتاج إلى إضافة هذه الازرار لجعل المدونة تبدو متناسقة وجميلة ، في هذا المقال سأشرح لك طريقة إضافة ازرار المعاينة والتحميل بشكل جميل جدا واحترافي بكل بساطة وسأشرح لك واعطريك جميع الاكواد المطلوبة عن طريق Css فقط ولاتحتاج إلى اكواد الجافا سكريبت والتي تقوم بعمل ثقل كبير في الموقع.
معاينة الإضافة :
طريقة إضافة وتركيب أزرار المعاينة والتحميل في قالب بلوجر
أولا تقوم بالذهاب إلى المظهر تضغط على قائمة منسدلة بجانب تحصيص وتختار تعديل html
تضغط في اي مكان في خانة الاكواد وتضغط على Ctrl + F في لوحة المفاتيح
تبحث عن الكود التالي :
]]></b:skin>
قبل هذا الكود مباشرة تقوم بلصق الكود التالي:
#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 #c00;margin: 10px;transition: .5s;}
.btn-slide2 {border: 2px solid #1495bb;}
.btn-slide:hover {background-color: #c00;}
.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: #c00;}
.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: #c00;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: #c00;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: 60px!important}
الآن تأتي إلى المشاركات أو المقال الذي تريد أن تقوم بإضافة أزرار التحميل والمعاينة له وتقوم بالتحويل إلى تعديل 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>
تقوم بتغيير امكان # برابط التحميل أو المعاينة وإذا أردت تغيير كلمة معاينة فيمكنك قبل وضع الكود في المشاركة أو المقال.. بالنسبة لتغيير الالوان فيمكنك تغييرها إذا أردت من الكود الاول الخاص بـ CSS
في الأخير اتمنلى أن ينال الموضوع اعجابكم وللمزيد من الدروس اشترك في قناتنا على اليوتيوب قناة دروس تيك لتتوصل بجديد الشروحات الحصرية.