إضــافــة أزرار الــمـعـايــنــة والــتــحــمــيــل إحــتــرافــيــة

مــرحـبـا أصـدقـاء مـوقـع الـتــقــنـيـة، إلــيـكـم الـيـوم إضـافـة رائعـة لإضـافـة أزرار مــعــايـنـة وتــحــمـيـل بــشـكـل احــتـرافـي لــمـدونـات بــلـوجـر، فـهـو مـن أفـضـل أزرار الـتــحــمـيـل والـمــعــايـنـة تــمـتـاز بــالــشـكـل الاحــتـرافـي والــمــمـيـز وبــتــأثــيــر جــمــيــع يــمــكــنــك اســتــخــدام الأزرار فــي أي شــيء تــريــد غــيــر الــمــعــايــنــة والــتــحــمــيــل...

معاينة

بـدون إطــالـة أتـركــكـم مــع طـريــقــة الـتـركــيــب :
 مراحل تركيب الإضافة

1. ادخل إلى لوحة تحكم المدونة في بلوجر
2. اختر قالب المدونة التي تود تطبيق الشرح فيها
3. اضغط على تحرير HTML
4. ابحث عن الوسم </head>  و اضف الكود التالي فوقه:



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

5. ابحث عن الوسم ]]></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); }

6. لإضــافـة الأزرار فـي الـمــوضـوع :
عــنــد كـتــابــة مــوضــوع نــنـتــقــل مــن تـألــيــف إلــى HTML ووضــع الــكــود الـتــالــي صــورة تـوضــيـحــيــة :


 

<div class="whitebuttondemo">
 <a href="http://www.teqniweb.com/">معاينة</a>
<span class="up">انقر للعرض</span></div>

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










الإسـتـخـدام ( الــتــغـيـيـرات الـمـراد الـعـمـل عــلـيـهـا ) :

•  اسـتـبــدل رابط مدونتي  (teqniweb) بالرابط الذي تريده ان ينتقل إليه عند الضغط
• اسـتـبــدل كـلـمــة مـعـايـنــة بـالـكـمــة الـتــي تـريـدهــا
• اسـتـبــدل كــلـمــة انـقــر لــلـعــرض بـالــكــلـمــة الـتــي تــريـدهــا
• اسـتـبــدل 1.6MB .rar  اسـتـبــدل اسـتـبــدل

أي ســؤال لا تـتــردد بـوضـعــه فــي تـعـلـيــق

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية
سبحان الله، والحمدلله، ولا إله إلا الله، والله أكبر
إذا أعجبك الموضوع فلماذا تبخل علينا بالردود المشجعة ؟!