حلولي https://www.facebook.com/hlo1y https://twitter.com/hlo1y https://www.youtube.com/user/v518v https://plus.google.com/+v518v

تابعنا على :

f tw +G yt vk

KHALED ALMILBE




مدون ومطور قوالب بلوجر
My E-mail : ###
My Phone No. : #%^$#
My Website : www.k2d.us

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

حلولي

مشرف

المزيد

هناك 3 تعليقات

تم النشر فى قسم

تم النشر منذ

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

ازرار معاينة وتحميل شكل جميل
طريقة التركيب
  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 تعليقات:

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

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

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

      حذف

مساحة إعلانية متجاوبة

مواضيع مميزة

إحصائيات المدونة

  • عدد المواضيع :

  • عدد التعليقات :

  • عدد المشاهدات :

المتابعون

اشترك ليصلك كل جديد

  • الإشعارات
  • من نحن

  • اتصل بنا

  • ×

ادخل الاسم (إختيارى)

ادخل البريد الإلكترونى (مطلوب)

ادخل الرسالة (مطلوب)