كيفية إضافة أزرار التحميل والمعاينة والشراء بطريقة احترافية في مدونة بلوجر

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

معاينة انقر هنا

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

شرح تركيب اضافة  أزرار التحميل والمعاينة والشراء

1. انتقل إلى الموضوع 
2. تحرير HTML 
3. ابحث عن ]]:</b:skin> 
4. بالضغط على الشفت وحرف F من لوحة المفاتيج 
5. أضف الكود التالي فوقه مباشرة. 

شاهد المثال المصور

/* أزرار التحميل والمعاينة والشراء */

#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 class="btn-nqnia1" href="https://www.photoomax.com/p/blog-page_7.html" target="_blank">

<span class="circle"><svg style="height: 24px; width: 24px;" viewbox="0 0 24 24"> <path 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" fill="currentColor"> </path></svg></span>

<span class="title">تجريبي </span>

<span class="title-hover">انقر هنا</span>

</a>

</div>

<div id="btn-nqnia">

<a class="btn-nqnia2" href="https://www.photoomax.com/p/blog-page_7.html" target="_blank">

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

<span class="title2">تحميل</span>

<span class="title-hover2">انقر هنا</span>

</a>

</div>

<div id="btn-nqnia">

<a class="btn-nqnia3" href="https://www.photoomax.com/p/blog-page_7.html" target="_blank">

<span class="circle3"><svg style="height: 24px; width: 24px;" viewbox="0 0 24 24"> <path 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" fill="currentColor">

</path></svg></span>

<span class="title3">شراء</span>

<span class="title-hover3">انقر هنا</span>

</a>

</div>

الإستخدام

استبدل الرابط بالون الاحمر بالرابط الذي تريده ان ينتقل إليه عند الضغط

 استبدل كلمة تحميل بالكمة التي تريدها

 استبدل كلمة معاينة بالكمة التي تريدها

استبدل كلمة شراء بالكلمة التي تريدها