اذن بدون اطالة
طريقة التركيب
- قم بالدخول الى لوحة تحكم المدونة
- اختر القالب
- ثم انقر فوق تحرير 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);}
.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://almojtahid159753.blogspot.com/">معاينة</a><span class="up">انقر للعرض</span></div>
<div class="whitebutton"><a href="http://almojtahid159753.blogspot.com/">تحميل</a><span class="up">انقر للعرض</span><span class="down"> 1.6MB .rar </span></div></div>
<div class="whitebutton"><a href="http://almojtahid159753.blogspot.com/">تحميل</a><span class="up">انقر للعرض</span><span class="down"> 1.6MB .rar </span></div></div>
و استبدل رابط المدونة بالرابط الذي ترغب بالانتقال اليه
المصدر المجتهد للمعلوميات
إرسال تعليق
جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).