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

بلوجر > قالب > تحرير HTML وتطبيق الكود بالأسفل

ابحث عن </style> او ]]></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 {
    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 فعليًا }

فواصل الأسطر : ثاني خيار { اضغط على "Enter" للحصول على فواصل الأسطر }

كما في الصورة اسفل

ثم ادخل على Html

كما موضح في الصورة

ثم الصق الكود

 <div id="wrap">
<a href="url" 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="url" 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>

غير كلمة url بالرابط الذي تريدة

اي اخطاء شاركنا بالتعليقات وسوف يتم الأجابة عنها

للمعاينة :

معاينة
أضغط هنا

تحميل
أضغط هنا

Omran

1 تعليق

css, html

الخميس، 1 يناير 2015

عن الكاتبعمران سليمان

مبتدئ في البرمجة واسعى لتطوير الويب العربي

قد تهمك

1 التعليقات:

رد

غير معرف

27 يناير 2022 في 6:19 م

Merit Casino | Best Online Casino in the USA - xn
› › Casino › › Casino The online gaming experience that we all adore at The Merit Casino is 메리트카지노총판 the same as the worrione first thing that many of us would expect from the world to enjoy when deccasino playing online.