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

بسم الله الرحمان الرحيم

اما بعد متتبعي ومتتبعات مدونة حاسوبي Astuce

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

بدون اطالة لنشاهد التجربة

معاينة

تركيب الاضافة

توجه الى محرر HTML الخاص بمدونتك او موقعك وابحث عن الوسم التالي
 ]]></b:skin>

واضف فوقه مباشرة الكود التالي

.hassoubiview::before  {
background-color: #444444;
color:#fff;
height: 0;
overflow: hidden;
position: absolute;
right: 0;
text-align: center;
transition: all 0.7s ease 0s;
width: 100%;
}

.hassoubiview::before {content: "اضغط للمعاينة";}
.hassoubiview:hover::before {height: 40px;}
.hassoubiview {
text-decoration:none;
border: 1px solid #fff;
box-shadow: 0 1px 1px 1px #444444;
color: #fff;
display: inline-block;
font-weight: bold;
height: 40px;
line-height: 40px;
position: relative;
font-family:tahoma;
text-align: center;
width: 200px;
margin:10px 5px;
}
.hassoubiview {background-color: #0081E4;}

.hassoubidownload::before  {
background-color: #444444;
color:#fff;
height: 0;
overflow: hidden;
position: absolute;
right: 0;
text-align: center;
transition: all 0.7s ease 0s;
width: 100%;
}
.hassoubidownload::before {content: "اضغط للتحميل";}
.hassoubidownload:hover::before {height: 40px;}
.hassoubidownload {
border: 1px solid #fff;
box-shadow: 0 1px 1px 1px #444444;
color: #fff;
text-decoration:none;
display: inline-block;
font-weight: bold;
height: 40px;
font-family:tahoma;
line-height: 40px;
position: relative;
text-align: center;
width: 200px;
margin:10px 5px;
}
.hassoubidownload {background-color: #FC5400;}

تحديد الكل

ولاستدعاء الازار ما عليك سوى لصق الكود التالي في المكان المناسب

زر معاينة

<a href="https://astuce-hassoubi.blogspot.com" class="hassoubiview">معاينة</a>

زر تحميل

<a href="https://astuce-hassoubi.blogspot.com" class="hassoubidownload">تحميل</a>

اما بخصوص التنسيق

استبدل كلمة ' اظغط للمعاينة ' و ' اظغط للتحميل ' بالنص الذي يظهر عند مرور الفارة على الزر
واسنبدل كلمة ' معاينة ' و 'تحميل ' بعنوان الزر
استبدل الكود التالي بلون خلفية زر التحميل--->#FC5400
استبدل الكود التالي بلون خلفية زر المعاينة--->#0081E4

• غرّد
• شارك
• شارك
• شارك
• شارك