الدرس 70 : طريقة إضافة ميزة للشعار الخاص بك

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

السلام عليكم أحباء ومتابعي مدونة منبع المعلوميات

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

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

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

ستأتينا واجهة جديدة 

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

مثلما ترون أنا في قالبي الوسم هو " header-inner " قد يختلف من قالب إلى قالب لهذا يجب أن تنفذوا الخطوات السابقة .

ثم نأخذ ذلك الوسم و نذهب إلى القالب  ثم تحرير Html و نستعمل ctrl + F للبحث عن ذلك الوسم 

ثم نضيف تحته مباشرة هذا الكود :

<div id="ball"><style> :host { display: inline-block; height: 24px; position: relative; width: 24px; } @-webkit-keyframes animPos { 0% { -webkit-transform: translate(-98%, 0);} 100% { transform: translate(98%, 0); } } @-webkit-keyframes animZOrder { 0% { z-index: 100; } 100% { z-index: 1; } } @keyframes animPos { 0% { -moz-transform: translate(-98%, 0);} 100% { transform: translate(98%, 0); } } @keyframes animZOrder { 0% { z-index: 100; } 100% { z-index: 1; } } div#ball { margin-left: 19px; float: left; } .outer { -webkit-animation: animZOrder 3520ms linear infinite; -moz-animation: animZOrder 3520ms linear infinite; height: 10px; position: absolute; width: 11px; } .inner { -webkit-animation: animPos 880ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; -moz-animation: animPos 880ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); border-radius: 50%; height: 100%; position: absolute; width: 100%; } .ball0 { -webkit-animation-delay: 2640ms; -webkit-transform: rotate(45deg); -moz-animation-delay: 2640ms; -moz-transform: rotate(45deg); } .ball1 { -webkit-animation-delay: 1760ms; -webkit-transform: rotate(135deg); -moz-animation-delay: 1760ms; -moz-transform: rotate(135deg); } .ball2 { -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); } .ball3 { -webkit-animation-delay: 880ms; -webkit-transform: rotate(315deg); -moz-animation-delay: 880ms; -moz-transform: rotate(315deg); } .ball0 .inner { background: linear-gradient(315deg, #05d, #07f, #07f); } .ball1 .inner { background: linear-gradient(225deg, #d00, #e33, #f75); } .ball2 .inner { background: linear-gradient(90deg, #074, #094, #5b5); } .ball3 .inner { background: linear-gradient(0deg, #fa3, #fc0, #fd6); } </style><div class="outer ball0"><div class="inner"></div></div><div class="outer ball1"><div class="inner"></div></div><div class="outer ball2"><div class="inner"></div></div><div class="outer ball3"><div class="inner"></div></div></div>

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