السلام عليكم متابعي مدونة ألجيريان جوست اليوم سوف اشرح لكم طريقة اضافة ازرار
المعاينة والتحميل بشكل احترافي هذه الإضافة ستفيدك كثيرا وتسهل للزائر معاينة موضوع او تحميل برنامج وما شبه ذلك
بالطبع تتواجد الكثير من الاشكال لازرار المعاينة والتحميل ولكن عدنا لكم بازرار بشكل فلات والوان متناسقة ايضا يمكنك تغييرها وهو كود " CSS " بسيط مع تأثير " hover " لا يلزم الكثير من الخبرات ايضا يمكنك عمل معاينة للازرار عبر زر المعاينة
وهدا هو مضهر الإضافة
- اذهب الى لوحة التحكم فى بلوجر - تسجيل الدخول
- انتقل الى قسم قالب
- اضغط على زر تحرير HTML
- ضع الكود التالي فوق ]]></b:skin>
.btn-btn2{display:table;margin:0 auto}#wrap{margin:20px auto;text-align:center}a.btn{display:inline-block;position:relative;text-decoration:none;font-weight:100;letter-spacing:.5px;padding:10px 20px;margin:10px;color:#ff5722;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;border:1px solid #ff5722;line-height:25px}a.btn:hover{background:rgb(236, 154, 128);color:#fff;box-shadow:inset 0 -50px 0 #ff5722}a.btn::before{color:#ff5722;display:-webkit-inline-box;content:"\f06e";font-family:fontawesome;margin:0 0 0 5px}a.btn:hover::before{color:#fff}a.btn2{display:inline-block;position:relative;text-decoration:none;font-weight:500;background:#ff5722;letter-spacing:.5px;padding:10px 20px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #ff5722;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;line-height:25px}a.btn2:hover{background:#cc4014;color:#fff;box-shadow:inset 0 -50px 0 #2a4057}a.btn2::before{color:#FFFFFF;display:-webkit-inline-box;content:"\f090";font-family:fontawesome;margin:0 0 0 5px}
بعد وضع الكود في المكان المطلوب
الأن عندما تقوم بكتابة مشاركة
قم بالضغط علي صيغة HTML
وضع الكود التالي في المشاركة
هذا كود التحميل
<a class="btn2" href="ضع هنا رابط التحميل" rel="nofollow" target="_blank">تحميل</a>
وهذا كود المعاينة
<a class="btn" href="صع الرابط هنا" rel="nofollow" target="_blank">معاينة</a>
ثم قم بحفظ القالب ومبروك عليك الإضافة واذا اعجبك الموضوع الرجاء مشاركة الموضوع لكي يستفيد اصدقائك
0 التعليقات:
إرسال تعليق