مجموعة صور ست اب رهيبة جدا 2024

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

عن الاضافه

ازرار التحميل والمعاينه مدونات بلوجر كما ذكرت سابقا, احدى الاضافات التي تميز مدونات بلوجر ويوجد على الانترنت العديد والعديد من اضافات التحميل والمعاينه لبلوجر ما يميز اضافه اليوم انها تظهر بعض المعلومات حول الملف مثل الحجم تتميز بشكلها الجذاب والرائع.

لمعاينة الاضافه قبل تركيبها

معاينة انقر للعرض

طريقة تركيب الاضافه :

• توجه الى لوحة التحكم الخاصه بمدونتك
• اضغط على المظهر
• تعديل HTML
• ابحث عن <head/> اضف الكود التالي فوقه

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

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

/* CSS Simple Butn Ar1web */
.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: Electrolize,ge_ss_tvbold;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-right: 6px;}
.whitebutton span {background: #444;color: #fff;display: block;font-size: 12px;font-family: Electrolize,ge_ss_threeregular;height: 40px;line-height: 40px;text-align: center;width: 200px;z-index: 1;text-transform: uppercase;font-weight: bold;}
.whitebutton .up {background: #34B4E2;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-right: 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: #34B4E2;color: #fff;display: block;font-size: 17px;font-weight: 700;font-family:Electrolize,ge_ss_tvbold;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-right: 6px;}
.whitebuttondemo a:hover {color:#fff;}
.whitebuttondemo span {background: #444;color: #fff;display: block;font-size: 12px;font-family: Electrolize,ge_ss_threeregular;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 من الاعلى ومن ثم ضع الكود الذي تريده في المكان الذي تريده

استخدام الكود HTML

<div class="whitebuttondemo">

<a href="ضع الرابط هنا/">معاينة</a>

<span class="up">انقر للعرض</span></div>

<div class="whitebutton">

<a href="ضع الرابط هنا/">تحميل</a>

<span class="up">انقر للعرض</span>

<span class="down"> 1.6MB .rar </span></div>

</div>

الإستخدام

استبدل عباره ضع الرابط هنا  بالرابط الذي تريده ان ينتقل إليه عند الضغط

 استبدل كلمة معاينة بالكمة التي تريدها

استبدل كلمة انقر للعرض بالكلمة التي تريدها

استبدل 1.6MB .rar  بحجم الملف

• لمزيد من الاضافات المتعلقه بمدونات بلوجر توجه الى قسم css في المدونه