كيفية إضافة أداة التبرع أو الدعم الفني في موقع بلوجر

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

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

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

   أداة التبرع المالي او الدعم المادي: 

هذه الأداة بتصميم رائع تم إنشائها بواسطة HTML و Css فإذا كان لديك موقع يقوم على جميع التبرعات أو تقديم الخدمات أو موقع لجمعية ربحية فستحتاجها بالتأكيد، الأداة تدعم طريقتين للدعم وهي بايبال أومعلومات البنك الخاص بك ويمكنك تعديل الطريقة كما تشاء يكفيك ان تعرف طريقة تغيير الأيقونات، لن تؤثر الأداة على سرعة الصفحة أو أدائها.

  معاينة

  إضافة أداة الدعم المادي لبلوجر

اولا انتقل الى حسابك في بلوجر

ثانيا توجه إلى لوحة المظهر ⬅ تعديل HTML  

تالثا ابحث عن الوسم </head>

وضع كود CSS التالي فوقه مباشرة:

<style>
/* bank box  by https://www.tikniya.xyz */
.ti9-dnt-box{position:relative;max-width:500px;background-color:#fefefe;box-shadow:0 5px 12px -2px rgb(0 0 0 / 12%); border:1px solid #eceff1;border-radius:5px; padding:15px;margin:20px 0; display:flex;align-items:center;font-size:13px;transition:all .2s ease;}
.ti9-dnt-box .ti9-dnt-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px; background:#f1f1f0;border-radius:5px;border:1px solid transparent}
.ti9-dnt-box .ti9-dnt-txt{flex-grow:1; width:calc(100% - 150px);padding:0 15px;line-height:20px}
.ti9-dnt-box .ti9-dnt-sw{position:absolute;padding:1px 3px;margin-top:-80px;margin-right:230px;width:30px;height:30px;background:#ff0000 ;border-radius:50%;border:1px solid #eceff1;transition:all .2s ease;z-index:10}
#ti9-check-dnt:checked ~ .ti9-dnt-box{padding-top:200px}
#ti9-check-dnt:checked ~ .ti9-dnt-box .ti9-dnt-hidden{visibility:visible;opacity:1}
#ti9-check-dnt:checked ~ .ti9-dnt-box .ti9-dnt-sw{margin-top:-450px}
#ti9-check-dnt:checked ~ .ti9-dnt-box .ti9-dnt-sw svg{transform:rotate(180deg)}
#ti9-check-dnt,#ti9-check-bnk{display:none}
#ti9-check-bnk:checked ~ .ti9-dnt-pp{visibility:hidden;opacity:0;position:relative}
#ti9-check-bnk:checked ~ .ti9-dnt-rk{visibility:visible;opacity:1;position:absolute;margin-top:-43px}
.ti9-dnt-hidden{position:absolute;width:calc(100% - 30px);background-color:transparent;margin:-250px auto auto -15px;visibility:hidden;opacity:0;transition:all .2s ease}
.ti9-dnt-hidden h2{font-size:20px;margin:10px auto;text-align:center}
.ti9-dnt-hidden span{font-size:17px;color:#767676;margin-right:35px}
.ti9-dnt-trn,.ti9-dnt-pp,.ti9-dnt-rk{display:inline-block;width:calc(100% - 30px);border:1px solid #999;background:#fefefe;border-radius:3px;margin:10px 25px 0;padding:10px;transition:all .2s ease}
.ti9-dnt-pp{position:absolute}
.ti9-dnt-rk{margin:10px 25px 0;visibility:hidden;opacity:0;transition:all .2s ease;}
.ti9-dnt-svg{width:20px;height:20px;position:absolute;fill:#767676;margin-top:3px}
.ti9-dnt-sw svg,.ti9-dnt-svg.line{fill:none!important;stroke:#fff;stroke-width:2}
.ti9-dnt-svg.line{stroke:#767676}
@media screen and (max-width:500px){.ti9-dnt-box .ti9-dnt-sw{margin-right:160px}}
@media screen and (max-width:455px){.ti9-dnt-box .ti9-dnt-sw{margin:-90px auto auto 130px}#ti9-check-dnt:checked ~ .ti9-dnt-box .ti9-dnt-sw{margin-top:-460px}}
</style>
    

وفي الأخير كل ماعليك فعله هو نسخ رمز HTML التالي ووضعه في الصفحة التي تريد :

<input id="ti9-check-dnt" type="checkbox">
<div class="ti9-dnt-box">
<label class="ti9-dnt-sw" for="ti9-check-dnt"><svg viewBox="0 0 24 24"><g transform="translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)"><path d="M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0"></path></g></svg></label>
<div class="ti9-dnt-icon"><svg class="ti9-dnt-svg line" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 8h1a4 4 0 0 1 0 8h-1"></path><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path><line x1="6" x2="6" y1="1" y2="4"></line><line x1="10" x2="10" y1="1" y2="4"></line><line x1="14" x2="14" y1="1" y2="4"></line></svg></div>
<div class="ti9-dnt-hidden">
<h2>شكر لك على الدعم !</h2>
<label class="ti9-dnt-trn" for="ti9-check-bnk">
<svg class="ti9-dnt-svg line" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect height="16" rx="2" ry="2" width="22" x="1" y="4"></rect><line x1="1" x2="23" y1="10" y2="10"></line></svg>
<span>Bank </span></label>
<input id="ti9-check-bnk" type="checkbox">
<a class="ti9-dnt-pp" href="https://www.paypal.me/teste" target="_blank">
<svg class="ti9-dnt-svg" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g><path d="M26.28,9.58A6.64,6.64,0,0,0,19.65,3H10a1,1,0,0,0-1,.84L5.58,25.29a1,1,0,0,0,.23.8,1,1,0,0,0,.76.36H10.7l-.22,1.39a1,1,0,0,0,1,1.16h4.65a1,1,0,0,0,1-.83l1-6.11h3.15a7.46,7.46,0,0,0,7.43-7.45v-.28A5.87,5.87,0,0,0,26.28,9.58ZM10.85,5h8.8a4.64,4.64,0,0,1,4.51,3.61,5.68,5.68,0,0,0-1.32-.15H14.5a1,1,0,0,0-1,.84L12.91,13a1,1,0,0,0,2,.32l.46-2.88h7.49a3.87,3.87,0,0,1,1.4.27,6.47,6.47,0,0,1-6.4,5.69H13.22a1,1,0,0,0-1,.83L11,24.45H7.74Zm15.86,9.61a5.46,5.46,0,0,1-5.43,5.45h-4a1,1,0,0,0-1,.83l-1,6.11H12.64l.22-1.39h0l1.2-7.19h3.78A8.46,8.46,0,0,0,26,12.1a3.82,3.82,0,0,1,.71,2.23Z"></path></g></svg>
<span>Paypal</span></a>
<div class="ti9-dnt-rk">
<p>omar elyounsy CH : بنك المغرب </p>

 /معرف الحساب: 00-00-000000-00
</div>
</div>
<div class="ti9-dnt-txt">
اذا كانت مواضيعنا تعجبك. قم بدعمنا والتبرع بمبلغ صغير لنستمر في المزيد.
</div>
</div>

   التعديل على الأكواد

قم بتغيير الرابط https://www.paypal.me/teste برابط حسابك على بايبال

 وقم بتغيير :  بنك المغرب: omar elyounsy CH /معرف الحساب: 00-00-000000-00 بمعلومات حسابك على البنكي

يمكنك تغيير الجمل الواضحة في الأداة بما تراه مناسب

ملاحظة : الأداة تحتوي على رموز svg والتي لا تدعمها بعض القوالب، تأكد من أن القالب الخاص بك يمكنه وضع الرموز عليها.

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