أضافة أداة لزخرفة ونسخ نصوص أسماء ببجي وفري فاير

Text Decoration

بسم الله الرحمن الرحيم

مقدمة

السلام عليكم ورحمة الله وبركاته أهلاً ومرحباً بكم في مقال جديد من قسم بلوجر تحية طيبة مباركة أما بعد:

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

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

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

قبل أي شئ ننصح بأخذ نسخة أحتياطية من قالبك.

أولاً : أذهب إلي المظهر > تعديل HTML > أبحث عن وسم

<head>

أضف كود مكتبة bootstrap التالي أسفله أي تحت منه وهو يخص أيقونة النسخ.

ثانياً : أذهب إلى المظهر > تعديل HTML > أبحث عن وسم

]]></b:skin>

ألصق أكواد Css التالية أعلاه أي فوقه.

@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');
/* Code By Mo Hisham With ♡ */
/*https://sketchwareegy.blogspot.com*/
.conatiner1{
display:block;
font-size:12px;
text-transform:capitalize;
background:none;
height:60px auto;
width:100%;
}
.box-line {
width:100% auto;
height:45px;
background:#2096F3;
border-radius:20px;
box-shadow:0px 1px 1px #000;
margin:5px;
border:1px solid #ccc;
}
.btn-copy{
width:40px;
height:40px;
float:right;
border:none;
cursor:pointer;
background:none;
font-size:11px;
color:#ffffff;
}
.back{
display:flex;
justify-content:center;
align-items:center;
background:#880D4F;
width:60px;
height:100%;
float:right;
border:1px solid #ffffff;
border-radius:0 20px 20px 0;
border-right:none;
border-top:none;
border-bottom:none;
margin-top:0.8px;
}
.back:active{
background:#4CAF50;
transform: scale(0.98);
}
.back:hover{
background:#4CAF50;
}
.txt{
background:none;
border:none;
color:#fff;
outline:none;
direction:rtl;
font-size:12px;
font-family: 'Cairo', sans-serif;
}
.text{
display:flex;
justify-content:center;
align-items:center;
padding-top:10px;
}
/* السطر التالي لتوسيط النص ع شاشات الهواتف */
@media (max-width: 400px){
.text{
margin-right:40%;
 }
 }
/* Code By Mo Hisham With ♡ */
/*https://sketchwareegy.blogspot.com*/

ثالثاً : أذهب إلى المشاركات > مشاركة جديدة > عرض HTML > ألصق كود ال HTML التالي وعدل مايناسبك.

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

<div class="conatiner1"> <div class="box-line"> <div class="back"><button onclick="document.getElementById('mytext1') .select();document.execCommand('copy'); window.alert('تم النسخ✔');" class="btn-copy"><i class="fa fa-copy"> نسخ </i<</button></div> <div class="text"><tt dir="rtl"><textarea readonly="" class="txt" id="mytext1">mo ħīṩħäm</textarea></tt></div> </div> <div class="box-line"> <div class="back"><button onclick="document.getElementById('mytext2') .select();document.execCommand('copy'); window.alert('تم النسخ✔');" class="btn-copy"><i class="fa fa-copy"> نسخ </i<</button></div> <div class="text"><tt dir="rtl"><textarea readonly="" class="txt" id="mytext2">mo ħīṩħäm</textarea></tt></div> </div> <div class="box-line"> <div class="back"><button onclick="document.getElementById('mytext3') .select();document.execCommand('copy'); window.alert('تم النسخ✔');" class="btn-copy"><i class="fa fa-copy"> نسخ </i<</button></div> <div class="text"><tt dir="rtl"><textarea readonly="" class="txt" id="mytext3">mo ħīṩħäm</textarea></tt></div> </div> <div class="box-line"> <div class="back"><button onclick="document.getElementById('mytext4') .select();document.execCommand('copy'); window.alert('تم النسخ✔');" class="btn-copy"><i class="fa fa-copy"> نسخ </i<</button></div> <div class="text"><tt dir="rtl"><textarea readonly="" class="txt" id="mytext4">mo ħīṩħäm</textarea></tt></div> </div> <div class="box-line"> <div class="back"><button onclick="document.getElementById('mytext5') .select();document.execCommand('copy'); window.alert('تم النسخ✔');" class="btn-copy"><i class="fa fa-copy"> نسخ </i<</button></div> <div class="text"><tt dir="rtl"><textarea readonly="" class="txt" id="mytext5">mo ħīṩħäm</textarea></tt></div> </div> <div class="box-line"> <div class="back"><button onclick="document.getElementById('mytext6') .select();document.execCommand('copy'); window.alert('تم النسخ✔');" class="btn-copy"><i class="fa fa-copy"> نسخ </i<</button></div> <div class="text"><tt dir="rtl"><textarea readonly="" class="txt" id="mytext6">mo ħīṩħäm</textarea></tt></div> </div> </div>

تعديل الإضافة

أولاً : النصوص

يمكنك تعديل النصوص كيفما تشاء ولكن لاتزيد عن كلمتين أو ١٢ حرف كحد أقصى.

ثانياً : الألوان

أستبدل مايلي بما يناسبك في أكواد Css.

اللون الأزرق

#2096F3

اللون الأحمر

#880D4F

لون عند الضغط أو تمرير مؤشر الفأرة

#4CAF50

لون النصوص والأزرار

#fff

أخر ما يتوجب علينا ذكره من تعديلات إذا قمت بإضافة الكود في مقالك لأكثر من مره فيجب عليك تعديل الأي دي الخاص بكل عنصر من textarea وأيضا في حدث on click الخاص بكل زر الأي ديهات تبدء من mytext1 إلى mytext6 لاحظ السطريين التاليين.

<div class="back"><button onclick="document.getElementById('mytext1').select(); document.execCommand('copy'); window.alert('تم النسخ✔');" class="btn-copy"><i class="fa fa-copy"> نسخ </i></button></div> <div class="text"><tt dir="rtl"><textarea readonly="" class="txt" id="mytext1">mo ħīṩħäm</textarea></tt></div>

كما تلاحظ بالسطريين السابقين أنهم مكررين ولكن لكل منهما ID أي دي مختلف في كل خانه من الستة خانات أتمنى أن يكون أتضح لك الأمر.

معاينة الإضافة مباشراً

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

سكيتشوير بالمصري

القائمة الرئيسية

الصفحات

أضافة أداة لزخرفة ونسخ نصوص أسماء ببجي وفري فاير | بلوجر

مقدمة

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

تعديل الإضافة

معاينة الإضافة مباشراً

أخر المواضيع من قسم : بلوجر

تعليقات

إرسال تعليق