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

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

ازرار معاينة وتحميل شكل جميل
طريقة التركيب
  1. لوحة التحكم
  2. القالب
  3. تحرير HTML
  4. من داخل القالب اضغط CTRL+F
  5. ابحث عن الكود ]]></b:skin>  واضف فوقه مباشراً الكود التالي


#wrap {    margin: 20px auto;    text-align: center;}
.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 {    left: 100%;    margin-left: -45px;    background-color: #fdfdfd;    color: #0099cc;}
.btn-slide2:hover span.circle2 {    color: #efa666;}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {    left: 40px;    opacity: 0;}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {    opacity: 1;    left: 40px;}
.btn-slide span.circle, .btn-slide2 span.circle2 {    display: block;    background-color: #0099cc;    color: #fff;    position: absolute;    float: left;    margin: 5px;    line-height: 42px;    height: 40px;    width: 40px;    top: 0;    left: 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;    left: 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;    left: 80px;}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {    left: 80px;    opacity: 0;}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {    color: #fff;}

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

<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
  <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" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">تحميل</span>
  <span class="title-hover2">اضغط هنا</span>
</a>
</div> 
ملاحظة! : عند نقلك للموضوع حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده، وايضاَ احتراما وتقديراَ للجهود المبذولة.

عن الكاتب

لـدي القليل مـن الخبره ، فـي مجال الـتـدويـن اضـع بالمدونة ما يـفـيـد الزائر والـمـدون ، تــابـعـنـا قـد نـفـيـدك يـومـاً .

3 التعليقات

إضغط هنا لـ التعليقات
9 يناير، 2017 9:18 م ×

اين اضيف الكود في الاول ؟

رد
avatar
حلولي
المشرف
14 فبراير، 2017 8:54 م ×

ابحث عن الكود ]]> واضف فوقه مباشراً

رد
avatar
حلولي
المشرف
14 فبراير، 2017 8:54 م ×

انسخ الكود الموجود برقم 5 وابحث عنه ثم اضف الأكواد فوقة مباشرة

رد
avatar
شكرا لك ولمرورك