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

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

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

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

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

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

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

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

والسلام عليكم ورحمه الله وبركاته