يمكنك الان شراء مساحة اعلانية علي موقعنا معرفه المزيد

اعلان

طريقه تركيب شعار SVG لمدونة بلوجر في قالب Plus UI

شرح لكيفية اضافه لوجو متحرك في قالب بلس يو اي Plus UI.
الرجاء الانتظار 0 ثانية...
قم بالتمرير لأسفل وانقر فوق فتح الرابط للتوجيه
تم فحص وتجهيز الرابط

اهلا ومرحبا بكم جميعاً، اليوم اقدم لكم كيفية اضافة شعار SVG (Logo) منزلق عند التمرير للاسفل في قالب Plus UI Blogger Template الشهير. لجعل مظهر المدونه الخاصه بك أجمل للزوار.

تركيب شعار SVG لمدونة بلوجر

شعار SVG منزلقًا عند التمرير في مدونه Blogger

بناء على طلب من احد المتابعين المدونه، لكيفية اضافه لوجو متحرك في قالب بلس يو اي Plus UI. ونعلم جميعا مدى جودة ايقونات svg وانها لا تفقد شيء من الجوده عند التعديل في الابعاد.

ولهذا السبب شرح اليوم يتطلب شعارا بامتداد svg خاص بمدونتك، وانصحك باستخدام ادوبي الستريتور لتصميم svg.
اذا كنت لا تعلم كيف يتم تصميم شعار svg فلا تقلق، الان قم بتوفير شعار كصورة عادية واذهب الى هذا الموقع لتحويله الى امتداد svg

خطوات تركيب شعار SVG متحرك في قالب Plus UI.

الان ناتي الى طريقه التركيب في مدونه بلوجر بعد تجهيز الشعر بامتداد svg، كل ما عليك هو اتباع الخطوات التاليه والتعديل على الاكواد بالشعار الخاص بك.

  1. اذهب الى الصفحه الرئيسيه بلوجر
  2. من القائمه في الجانب الايمن اذهب الى القالب » تحرير HTML.
  3. الان قم بالبحث عن <!--[ Header widget ]--> بعد ايجاد الوصف قم بنسخ الكود التالي ولصقه اسفله مباشره

ملحوظه
يلزمك تغيير الكود المحدد بكود شعار svg الخاص بك

<div class='headerSvg' id='svgLogo'>
                <svg viewBox='0 0 26 22'>
                  <style>
                    .cls-1{fill:#41B375}
                    .drK .cls-1{fill:#BA0000}
                  </style>
                  <path class='cls-1' d='M18.27,6.41a1.07,1.07,0,0,0-.25,0c-.52,0-1,.38-1.33,1.07l-4.18,8.48a2.44,2.44,0,0,1-2.11,1.55,2.41,2.41,0,0,1-2.1-1.55L4.11,7.45c-.4-.8-1-1.19-1.58-1S1,7.52,1,9.18V20.64A2.5,2.5,0,0,0,3.65,23h0a2.49,2.49,0,0,0,2.6-2.36V13.18l2,4a5.17,5.17,0,0,0,4.6,3.11,5.17,5.17,0,0,0,4.6-3.11l.89-1.8a14.14,14.14,0,0,0,1.44-6.2C19.76,7.52,19,6.58,18.27,6.41Z'/>
                  <path class='svgC' d='M21.71,1.14A4.77,4.77,0,0,0,20.59,1,5.16,5.16,0,0,0,16,4.12l-3,6.15L10,4.12A5.17,5.17,0,0,0,5.39,1a4.69,4.69,0,0,0-1.11.14c-2.47.6-4.15,3-4.28,6V8.21L.06,8A9.71,9.71,0,0,0,.43,6.55,3.18,3.18,0,0,1,2.5,3.86a2.1,2.1,0,0,1,.43,0A2.35,2.35,0,0,1,5,5.37l4.19,8.48a1.61,1.61,0,0,0,1.34,1.07,1.61,1.61,0,0,0,1.35-1.07L16.1,5.37a2.35,2.35,0,0,1,2.1-1.56,2.1,2.1,0,0,1,.43,0c1.27.31,2.15,1.82,2.15,3.66V20.64A2.5,2.5,0,0,0,23.39,23h0A2.5,2.5,0,0,0,26,20.64V7.52C26,4.33,24.28,1.76,21.71,1.14Z'/>
                </svg>
              </div>

الان نقوم بالبحث مجددا عن الوسم التالي ]]></b:skin> وبعد ايجاده نقوم بنسخ الكود التالي ولصقه فوقه مباشره.

ملاحظة
هنا عليك اختيار الكود المناسب لشعار مدونتك " عربي / اجنبي " بمعنى اتجاه المدونة يمين ام يسار!

/* Header SVG */
header .headerSvg {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    -webkit-transition: all .5s ease;
    transition: all .5 ease;
    background: transparent;
    opacity: 1;
    visibility: visible
}
header.stick .headerSvg {
    transform: scale(0);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}
header .headerSvg svg {
    width: 28px;
    height: 28px
}
.headCn .headTtl {
    -webkit-transition: all .2s ease);
    transition: all .2s ease
}
header.stick .headCn .headTtl {
    margin-right: -33px;
    -webkit-transition: all .4s ease;
    transition: all .4s ease
}
@keyframes svHr {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}
/* Header SVG */ header .headerSvg{display:flex;align-items:center;justify-content:center;margin-right:5px;-webkit-transition:all .5s ease;transition:all .5 ease;background:transparent;opacity:1;visibility:visible} header.stick .headerSvg{transform:scale(0);opacity:0;visibility:hidden;-webkit-transition:all .2s ease;transition:all .2s ease} header .headerSvg svg{width:28px;height:28px} .headCn .headTtl{-webkit-transition:all .2s ease);transition:all .2s ease} header.stick .headCn .headTtl{margin-left:-33px;-webkit-transition:all .4s ease;transition:all .4s ease} @keyframes svHr{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

وبهذه الخطوات تركيب الشعار بنجاح، واذا كنت مستخدم قالب اخر غير قالب المذكور في الشرح فيمكنك استخدام الكود التالي لجعل الشعار متحرك. ولا تتردد في ترك تعليق او التواصل معي في حين اذا واجهت مشكله في الاكواد.

<script>/*<![CDATA[*//* Header Scroll */ function headScroll(){var e=window.pageYOffset||document.documentElement.scrollTop,d=qSel("#header"),l=qSel("#mobile-menu");20<e?(addCt(d,"stick"),addCt(l,"slide")):(remCt(d,"stick"),remCt(l,"slide"))}window.addEventListener("scroll",headScroll); /*]]>*/</script>

ينتهي هنا موضوعنا عن "طريقه تركيب شعار SVG لمدونة بلوجر في قالب Plus UI"، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

عن الكاتب

عبدالحميد ميدو، مصمم فلاتر سنابشات ومنشئ محتوى رقمي بخبرة تزيد عن 7 سنوات. لدي شغف بأحدث التقنيات، اهتمامًا خاصًا بلغات البرمجة كـ Python, JS وCSS.

تعليق واحد

  1. لم أجد هاذا الكود
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق.
1 -أ ن يكون التعليق خاص بمحتوى التدوينة ❗
2 - أن لا تضع أي روابط خارجية❗
3 - أي سؤال خارج محتوى التدوينة يتم حذفه ❗
4 - لإضافة كود برمجي حوله أولاً بمحول الأكواد.
5 - لضمان نشر تعليقك يلزمك مراجعة اتفاقية الإستخدام.
ملفات تعريف الارتباط
نستخدم ملفات تعريف الارتباط (Cookies) لفهم كيفية استخدامك لموقعنا وتحسين تجربتك في المحتوى والإعلانات. باستمرارك في تصفح الموقع، فإنك توافق على استخدامنا لملفات تعريف الارتباط وفقًا لسياسة الخصوصية لدينا.
Oops!
يبدو أن هناك خطأ ما في اتصالك بالإنترنت.
يرجى الاتصال بالإنترنت والبدء في التصفح مرة أخرى.
يرجى السماح بعرض الإعلانات
يبدو أنك تستخدم أداة لحظر الإعلانات Adblock.
نحن نعتمد على الارباح التي نحققها من الإعلانات كمصدر تمويل لموقعنا الإلكتروني.
Site is Blocked
Sorry! This site is not available in your country.