أضافة مميزة جدا و بشكل جديد

 تركيب صندوق ازرار التحميل و المعاينة و زر للمشتريات

تركيب الأضافة

 أولاً ، قم بفتح لوحة تحكم بلوجر انقر على المظهر وانقر على زر تعديل

أضف هذا الكود قبل الوسم ]]></b:skin>

/* NQnia Download */

#btn-nqnia{margin:10px auto;text-align:center}

#btn-nqnia br{display:none}

.btn-nqnia1{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:7px;background:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);margin:10px;transition:.5s}

.btn-nqnia2{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:7px;background:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);margin:10px;transition:.5s}

.btn-nqnia3{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:7px;background:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);margin:10px;transition:.5s}

.btn-nqnia1:hover{background-color:linear-gradient(225deg,#4285f4 0,#1a73e8 75%)}

.btn-nqnia2:hover{background-color:linear-gradient(225deg,#4285f4 0,#1a73e8 75%)}

.btn-nqnia3:hover{background-color:linear-gradient(225deg,#4285f4 0,#1a73e8 75%)}

.btn-nqnia1:hover span.circle,.btn-nqnia2:hover span.circle2,.btn-nqnia3:hover span.circle3{left:100%;border-radius:100%;margin-left:-45px;background-color:transparent}

.btn-nqnia1:hover span.circle{color:#fff}

.btn-nqnia2:hover span.circle2{color:#fff}

.btn-nqnia3:hover span.circle3{color:#fff}

.btn-nqnia1:hover span.title,.btn-nqnia2:hover span.title2,.btn-nqnia3:hover span.title3{left:40px;opacity:0}

.btn-nqnia1:hover span.title-hover,.btn-nqnia2:hover span.title-hover2,.btn-nqnia3:hover span.title-hover3{opacity:1;left:40px}

.btn-nqnia1 span.circle{display:block;background-color:#fff;color:#1a73e8;position:absolute;float:left;margin:5px;line-height:55px;height:40px;width:40px;top:0;left:5px;transition:.5s;border-radius:100%}

.btn-nqnia2 span.circle2{display:block;background-color:#fff;color:#1a73e8;position:absolute;float:left;margin:5px;line-height:55px;height:40px;width:40px;top:0;left:5px;transition:.5s;border-radius:100%}

.btn-nqnia3 span.circle3{display:block;background-color:#fff;color:#1a73e8;position:absolute;float:left;margin:5px;line-height:55px;height:40px;width:40px;top:0;left:5px;transition:.5s;border-radius:100%}

.btn-nqnia1 span.title,.btn-nqnia1 span.title-hover,.btn-nqnia2 span.title2,.btn-nqnia2 span.title-hover2,.btn-nqnia3 span.title3,.btn-nqnia3 span.title-hover3{position:absolute;left:90px;text-align:center;margin:0 auto;font-size:16px;font-weight:bold;color:#fff;transition:.5s}

.btn-nqnia2 span.title2,.btn-nqnia2 span.title-hover2{color:#fff;left:70px}

.btn-nqnia3 span.title3,.btn-nqnia3 span.title-hover3{color:#fff;left:60px}

.btn-nqnia1 span.title-hover,.btn-nqnia2 span.title-hover2,.btn-nqnia3 span.title-hover3{left:80px;opacity:0}

.btn-nqnia1 span.title-hover,.btn-nqnia2 span.title-hover2,.btn-nqnia3 span.title-hover3{color:#fff}

نقوم بالحفظ

ثانيا عند كتابة اي موضوع و رغبتنا باضافة الازرار 

ننتقل الى عرض HTML و نضيف الأزرار في المكان المناسب

الأكواد الخاصة بالأزرار

<div id="btn-nqnia">

<a href="http://bit.ly/2BZyxbe" class="btn-nqnia1" target="_blank">

<span class="circle"><svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M21,14H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10L8,21V22H16V21L14,18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z" /> </svg></span>

<span class="title">Demo</span>

<span class="title-hover">Click here</span>

</a>

</div>

<div id="btn-nqnia">

<a href="http://bit.ly/2BZyxbe" class="btn-nqnia2" target="_blank">

<span class="circle2"><svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" /> </svg></span>

<span class="title2">Download</span>

<span class="title-hover2">Click here</span>

</a>

</div>

<div id="btn-nqnia">

<a href="http://bit.ly/2BZyxbe" class="btn-nqnia3" target="_blank">

<span class="circle3"><svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z" />

</svg></span>

<span class="title3">Buy Now</span>

<span class="title-hover3">Click here</span>

</a>

</div>

و مبروك عليك الأضافة

وفي الختام !

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