close

أحبتي في الله متابعي مدونة تجيكو للمعلوميات في هذه التدوينة و في قسم الخاص بالبلوجر سنتطرق إلى كيفية اضافة ازرار معاينة و تحميل بشكل إحترافي , هذهأزرار هي إضافة رائعة لكل مدونة حيث تمكن من إطفاء رونق و جمالية على روابط و تدوينة .


طريقة التركيب الأزرار :
  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 مع تغيير ما يجب




معاينة لأزرار :



إلى هنا ينتهي درسنا إذا أعجبك الموضوع شاركه لتعم الفائدة و تابع المدونة ليصك كل جديد من هنا

OmarNasser

أيوب الحدادي

انا عمر من من جمهورية مصر العربية عمري 14 سنه من محافظة السويس مصمم قوالب مدير مدونة بروتك كنت اعمل في نكهه من قبل

ليست هناك تعليقات:

إرسال تعليق