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

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

اضافة ازرار معاينة و تحميل الاحترافية - اليوم معنا درس من اجمل دروس بلوجر و الذي طلبه مني الكثير من المدونين عبر البريد الإلكتروني و هذه الازرار يمكن ان تستخدم في اكثر من شيء في المدونة مثل معاينة قوالب بلوجر و اضافة روابط التحميل بدلا من وضعها هكذا دون اي شيء و هذا لا يدل ع الاحترافية لذلك دعونا اولا نرى نتيجة الدرس

 شرح تركيب

1.قم بالدخول إلى لوحة تحكم المدونة
2.اختر قالب
3.ثم انقر فوق تحرير HTML

ابحث عن الوسم </head> و اضف الكود التالي فوقه

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

ابحث عن الوسم]]></b:skin> و اضف الكود التالي فوقه

/* Custom Button */ .whitebutton { margin: 20px auto; padding: 20px 0; width: 200px; } .whitebutton a { background: #fff; color: #666; display: block; font-size: 17px; font-weight: 700; font-family: 'Droid Arabic Kufi',Verdana,sans-serif; height: 50px; line-height: 50px; text-align: center; text-decoration: none; text-transform: uppercase; width: 200px; position: relative; z-index: 2; } .whitebutton a:before { content: '\f019'; font-family: FontAwesome; font-weight: normal; padding: 8px; margin-left: -90px; margin-right: 30px; } .whitebutton span { background: #444; color: #fff; display: block; font-size: 12px; font-family: 'Droid Arabic Kufi', Verdana,sans-serif; height: 40px; line-height: 40px; text-align: center; width: 200px; z-index: 1; text-transform: uppercase; font-weight: bold; } .whitebutton .up { background: #e25734; margin: -25px auto; opacity: 0; border-radius: 0 0 5px 5px; transform: translate(0,-50px); transition: 350ms; } .whitebutton .down { margin: -30px auto; opacity: 0; border-radius: 5px 5px 0 0; transform: translate(0,-50px); transition: 350ms; } .whitebutton .down:before { content:'\f14a'; font-family: FontAwesome; font-weight: normal; margin-left: -6px; color: #aaa; } .whitebutton:hover .up { opacity: 1; transform: translate(0,0); } .whitebutton:hover .down { opacity: 1; transform: translate(0,-90px); } .whitebuttondemo { margin: 20px auto; padding: 20px 0; width: 200px; } .whitebuttondemo a { background: #e25734; color: #fff; display: block; font-size: 17px; font-weight: 700; font-family:'Droid Arabic Kufi',Verdana,sans-serif; height: 50px; line-height: 50px; text-align: center; text-decoration: none; text-transform: uppercase; width: 200px; position: relative; z-index: 2; transition: 350ms; } .whitebuttondemo a:before { content:'\f002'; font-family: FontAwesome; font-weight: normal; padding: 8px; margin-left: -90px; margin-right: 30px; } .whitebuttondemo a:hover { color: #fff; } .whitebuttondemo span { background: #444; color: #fff; display: block; font-size: 12px; font-family: 'Droid Arabic Kufi', Verdana,sans-serif; height: 40px; line-height: 40px; text-align: center; width: 200px; z-index: 1; text-transform: uppercase; font-weight: bold; } .whitebuttondemo .up { background: #444; margin: -25px auto; opacity: 0; border-radius: 0 0 5px 5px; transform: translate(0,-50px); transition: 350ms; } .whitebuttondemo:hover .up { opacity: 1; transform: translate(0,0); }

كيفية اضافة الازرار في الموضوع

عند كتابة موضوع ننتقل من تأليف إلى HTML ووضع كود التالي

<div class="whitebuttondemo"><a href="http://mudwnp.blogspot.com/">معاينة</a><span class="up">انقر للعرض</span></div><div class="whitebutton"><a href="http://mudwnp.blogspot.com/">تحميل</a><span class="up">انقر للعرض</span><span class="down"> 1.6MB .rar </span></div></div>

شارك الموضوع إذا أعجبك

share

Mohamed Elsayed