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

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

شعار 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"، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

فتح رابط التوجية