-->
U3F1ZWV6ZTQyNDE2ODc1NjA2X0FjdGl2YXRpb240ODA1MjQ2Nzc0Njc=
Translate
recent
مواضيع حصريه

اسهل طريقة إضافة كود زر المعاينة أو زر التحميل بشكل احترافي لمواضيع بلوجر 2020 | Professional preview button or download button blogger

اسهل طريقة إضافة كود زر المعاينة أو زر التحميل بشكل احترافي لمواضيع بلوجر 2020 | Professional preview button or download button blogger



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



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


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

شاهد ايضا كيفية كتابة مقال blogger | الطريقة الصحيحة لكتابة المقالات لتصدر نتائج البحث

الخطوة الاولي وضع كود CSS

  1. نذهب الي المظهر
  2. ثم تعديل HTML
  3. نضغط علي Ctrl+F
  4. نكتب في البحث كلمه Skin
  5. عندما نجد وسم ]]></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 بجانب كلمه تأليف كما بالصوره


والأن انسخ الكود الاسفل ولصقه في اخر سطر المكان الفارغ، وقم بتغيير الروابط الموجود باللون الازرق الى الروابط الخاص بك.



<div id="wrap">
<a class="btn-slide" href="https://www.egninja.com/" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">معاينة</span>
  <span class="title-hover">اضغط هنا</span>
</a>
<a class="btn-slide2" href="https://www.egninja.com/" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">تحميل</span>
  <span class="title-hover2">اضغط هنا</span>
</a>
</div>



واخيراً قم بالرجوع الى تأليف ومعاينة الموضوع، وستشاهد قد تمت اضافة زر تحميل وزر معاينة.
لا تبخل علينا برأيك او بتعليق حتي تشجعنا علي الاستكمال في تقديم الأفضل لك
والسلام عليكم ورحمه الله وبركاته
الاسمبريد إلكترونيرسالة