قل وداعًا لإحباطات التعامل مع عناصر واجهة مستخدم Plus المعطّلة واستعد لتجربة تدوين أكثر سلاسة وتحسينًا. سنغطي إضافة مربع تحديد اللغة، ضبط الأنماط، وإدراج الكود المطلوب بطريقة آمنة.

إضافة مربع اختيار اللغة للترجمة

تم تصميم المكوّن بحيث لا يتطلب مهارات برمجية متقدمة. فقط اتبع الخطوات لتضمين CSS وJavaScript والوسم HTML.

الخطوات التفصيلية

1. سجّل الدخول إلى لوحة تحكم Blogger.
2. من لوحة التحكم انتقل إلى المظهر.
3. اضغط على السهم الصغير بجوار زر تخصيص ثم اختر تحرير HTML.
4. ابحث عن الوسم قبل نهاية أنماط القالب مثل ]]></b:skin> أو /*]]>*/</style>.
5. ألصق أكواد CSS التالية مباشرة فوقه.
6. انزل إلى قسم الجافاسكريبت (أسفل تعليق /* YOUR CUSTOM JS */) وأضف كود JavaScript كما هو موضح.
7. في ترويسة/هيدر القالب، أضف وسم الزر والعناصر الداعمة كما بالأسفل.
8. احفظ القالب ثم حدّث الصفحة لاختبار العنصر.

أكواد CSS

ألصق المقتطف التالي فوق وسم انتهاء الأنماط مباشرة:

/* Google Translate Widget by Blog Bracket*/

.googleTrans #goog-gt-tt,

.googleTrans .goog-logo-link,

.googleTrans .goog-te-balloon-frame,

.googleTrans .goog-te-gadget img,

.googleTrans .goog-te-gadget > span,

.googleTrans .goog-te-menu-value span,

.googleTrans .goog-tooltip,

.googleTrans .goog-tooltip:hover,

.googleTrans .google-logo-link .googleTrans .goog-te-banner-frame.skiptranslate,

.googleTrans img.goog-te-gadget-icon,

body > .skiptranslate{display:none!important}

.googleTrans .goog-te-gadget{display:block!important;width:initial!important;height:initial!important;font-size:0;line-height:0}

.googleTrans .goog-te-gadget select.goog-te-combo{

  --border-color:var(--linkB);

  outline:0;margin:0;width:100%;height:40px;color:var(--bodyC);

  background-color:transparent;text-align:left;font-size:14px;

  font-family:var(--fontB)!important;line-height:1.25;padding:8px 16px;

  border-width:1px;border-color:var(--border-color);border-radius:4px;cursor:pointer;

  --t-prop:border-color,top,padding,margin,-webkit-transform,-webkit-box-shadow;

  --t-dura:0.15s;--t-func:cubic-bezier(.4,0,.2,1);

  -webkit-appearance:none;-moz-appearance:none;appearance:none;

  -webkit-transition-property:var(--t-prop);-o-transition-property:var(--t-prop);transition-property:var(--t-prop);

  -webkit-transition-duration:var(--t-dura);-o-transition-duration:var(--t-dura);transition-duration:var(--t-dura);

  -webkit-transition-timing-function:var(--t-func);-o-transition-timing-function:var(--t-func);transition-timing-function:var(--t-func)

}

.googleTrans .goog-te-gadget select.goog-te-combo:focus{

  box-shadow:inset 0 0 0 1px var(--border-color);border-color:var(--border-color)

}

.googleTrans .goog-te-gadget select.goog-te-combo > *{background:var(--contentB)}

.drK .googleTrans .goog-te-gadget select.goog-te-combo{--border-color:var(--darkU);color:var(--darkT)}

.drK .googleTrans .goog-te-gadget select.goog-te-combo > *{background:var(--darkB)}

/* Translate CSS */

.transW{visibility:hidden;opacity:0;position:fixed;right:20px;left:20px;bottom:0;display:block;transition:var(--trans-1);-webkit-transition:var(--trans-1);z-index:21;background:var(--contentB);border-radius:10px;box-shadow:0 5px 30px 0 rgba(0,0,0,.05)}

.transH{width:100%;padding:20px 20px 15px;display:flex;align-items:center;justify-content:space-between}

.transH::before{content:attr(data-text);font-size:13px;opacity:.8}

.transCl::after{content:'\2715';font-size:14px}

.transP{width:100%;padding:0 20px 20px}

.transI:checked ~ .transW{visibility:visible;opacity:1;bottom:20px}

.transI:checked ~ .transW + .fCls{background:rgba(0,0,0,.25);opacity:1;visibility:visible;z-index:19}

@media screen and (min-width:501px){

  .transW{position:absolute;width:280px;top:-5px;bottom:auto;right:0;left:auto;border-radius:15px 5px 15px 15px}

  .transI:checked ~ .transW{top:0;right:0;bottom:auto}

  .transI:checked ~ .transW + .fCls{background:0 0}

}

.drK .transW{background:var(--darkBs)}

كود JavaScript

ألصق المقتطف التالي أسفل تعليق /* YOUR CUSTOM JS */ مباشرة:

eval(function(p,a,c,k,e,d){while(c--){if(k,13},[]);23 17={110:29[15(111)][15(112)],113:14[15(114)](","),115:27[15(30)].32[15(116)][15(117)]};118 27[15(30)][15(31)](17,19.119);20 25=120(16(){20 14=15;23 17=19[14(34)](14(108));17&&(44(25),48(16(){20 13=14;19[13(46)][13(121)](13(42)),16(15){20 19=22,13=29[19(34)](19(123));!1!==36.37.124&&15[19(125)]("126",16(){20 13=19;23 14=15[13(127)],17=15[13(128)][0];14&&17&&129(13(130)+17.131+"")}),13&&13[19(46)].45(19(42))}(17)},43))},43);48(16(){44(25)},132)},133.49(24(134))}).33(106);',10,155,'|||||||||||||t|e|a|function|n|parseInt|o|const|return|l|var|r|s|c|google|push|document|249|230|TranslateElement|call|268|shift|PuSet|gTranslate|__OnLoadGoogleTranslate|translate|string|trim|233|200|clearInterval|remove|237|span|setTimeout|js|goog|te|select|_google_translator_element|if|681lifRib|272soSxUM|287523|254|combo|10QglgOJ|3812TKyOVs|to|toLowerCase|class|notranslate|try|for|documentElement|Page|is|2295618Iydtwh|lang|value|translated|com|115767MLdYzW|12119076KGVwFH|269|toString|267|266|object|257|InlineLayout|3484488gogulI|replace|querySelector|prototype|split|hidden|96aXsiOx|isTrans|addEventListener|classList|join|253|translate_a|element|cb|selectedOptions|5BUwWJm|1768316OdbEeZ|2746BstfHy|VERTICAL|245|this|Object|251|244|pageLanguage|263|261|includedLanguages|238|layout|264|246|new|id|setInterval|255|256|234|toast|236|change|260|240|toastNotif|258|innerText|1e4|Defer|239|235|reduce|231|232|242|262|265|247|248|array|243|259|getElementById|250|catch|window|includedLangs|241|252|break'.split('|')));

هذا الكود يهيّئ عنصر Google Translate ويعالج سلوك الواجهة لتفادي تعارضات واجهة مستخدم Plus.

وسم HTML لزر الترجمة

ضع الوسم التالي داخل قسم الرأس/الهيدر في القالب:

<li class='isTrans hidden'>

  <!--[ Google Translate button ]-->

  <label aria-label='Translate' class='tIc bIc' for='offTrans' onclick='vibRate(50)'>

    <b:include name='translate-icon'/>

  </label>

  <input class='transI hidden' id='offTrans' type='checkbox'/>

  <div class='transW'>

    <div class='transH' data-text='Translate'>

      <label class='transCl' for='offTrans'/>

    </div>

    <div class='transP'>

      <div class='googleTrans hidden' id='_google_translator_element'/>

    </div>

  </div>

  <label class='fCls' for='offTrans'/>

</li>

خاتمة

كانت رحلة إصلاح واجهة مستخدم Plus في قوالب بلوجر المتأثرة بخدمة Google Translate تمرينًا عمليًا على التفكير الإبداعي. من خلال فهم السبب الجذري وتطبيق الكود المناسب، أصبح بإمكانك الآن استعادة استقرار الواجهة وتقديم تجربة أكثر سلاسة لقرّائك.

تذكّر أن التقنية رغم تحدّياتها توفّر حلولًا مرنة. بما تعلّمته هنا، أنت مجهّز للتعامل مع مشكلات مشابهة في المستقبل وتعزيز أداء قالبك باستمرار.