اليوم اتينا لكم باضافة تعتبر من افضل الاضافات و التي هي اضافة ازرارالتحميل و المعاينة بشكل احترافي
اذن بدون اطالة
طريقة التركيب
- قم بالدخول الى لوحة تحكم المدونة
- اختر القالب
- ثم انقر فوق تحرير HTML
ابحث عن الوسم و ضع الكود التالي فوقه
ابحث عن الوسم ]]> و ضع الكود التالي فوقه
/* 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);}
.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 و ضع الكود التالي
و استبدل رابط المدونة بالرابط الذي ترغب بالانتقال اليه
المصدر المجتهد للمعلوميات