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

السلام عليكم 

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

سيظهر التحميل بهذا الشكل

تحميل اضغط للتحميل

والمعاينة بهذا الشكل

معاينة اضغط للمعاينة

1. نفتح قالب

2. نختار تعديل html

3. نلصق الكود التالي فوق ]]></b:skin>

#wrap { margin: 20px auto;text-align: center;}#wrap br {display: none;}.btn-slide, .btn-slide2 { position: relative; display: inline-block; height: 50px; width: 200px; line-height: 50px; padding: 0; border-radius: 50px; background: #fdfdfd; border: 2px solid #0099cc; margin: 10px; transition: .5s;}.btn-slide2 { border: 2px solid #efa666;}.btn-slide:hover { background-color: #0099cc;}.btn-slide2:hover { background-color: #efa666;}.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 { right: 100%; margin-right: -45px; background-color: #fdfdfd; color: #0099cc;}.btn-slide2:hover span.circle2 { color: #efa666;}.btn-slide:hover span.title, .btn-slide2:hover span.title2 { right: 40px; opacity: 0;}.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 { opacity: 1; right: 40px;}.btn-slide span.circle, .btn-slide2 span.circle2 { display: block; background-color: #0099cc; color: #fff; position: absolute; float: right; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; right: 0; transition: .5s; border-radius: 50%;}.btn-slide2 span.circle2 { background-color: #efa666;}.btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { position: absolute; right: 90px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: bold; color: #30abd5; transition: .5s;}.btn-slide2 span.title2, .btn-slide2 span.title-hover2 { color: #efa666; right: 80px; }.btn-slide span.title-hover, .btn-slide2 span.title-hover2 { right: 80px; opacity: 0;}.btn-slide span.title-hover, .btn-slide2 span.title-hover2 { color: #fff;}

لم ننته بعد !

نضيف الكود التالي فوق </head>

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

لحظة ! لازال هناك المزيد!!!

داخل html في تحرير التدوينة قم باضافة الكود التالي

<center> <div id="wrap"> <a href="#" class="btn-slide"> <span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">معاينة</span> <span class="title-hover">اضغط للمعاينة</span> </a> <a href="#" class="btn-slide2"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">تحميل</span> <span class="title-hover2">اضغط للتحميل</span> </a> </div> </center>

مع استبدال الهاشتاج الاول (#) برابط المعينة والثاني برابط التحميل

لا تنس دعمي بتعليق وشكرا