هيلبرنت | Helpernt - [ شرح ] : طريقة جعل شعار منتدى الزين فورو متحرك شرح حصرى

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

درسنا اليوم اعتبره تقدم هاااااااااااائل فى منتديات الزين فورو لانها تقترب من منتديات الفى بى vbulletin التى عشقها الملايين على مدار 16 عام الماضية
[اسم الشرح]: جعل شعار منتدى الزين فورو متحرك
[الوصف] : جعل شعار او لوجو منتديات الزين فورو متحركة بمجرد مرور الماوس عليها
[التوافق مع الاصدارات] : يتوافق مع 1.2 1.3 1.4 1.5 اى مع جميع الاصدارات حتى الان
[موقع صاحب المقال] : معهد هيلبرنت

شاهدو معى هذا الفيديو حتى تتضح الامور
مدة العرض : 11 ثانية

الخطوات
ادخل الى لوحة تحكم المنتدى >>>>> ثم المظهر >>>>> ثم اختار الاستايل المراد التعديل عليه >>>> ثم البحث فى القوالب >>> ابحث عن EXTRA.css كما تشاهد بالصورة

http://upload.traidnt.net/upfiles/kSI13910.png

ثم قم بوضع الكود الاتى داخله

كود:

/* shake it baby */

@-webkit-keyframes spaceboots {

0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }

10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }

20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }

30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }

40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }

50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }

60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }

70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }

80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }

90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }

100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }

}

.shake:hover,

.shake:focus {

-webkit-animation-name: spaceboots;

-webkit-animation-duration: 0.8s;

-webkit-transform-origin:50% 50%;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

}

.shake {

display:inline-block

}

2- ثم قم بالبحث مره اخرى داخل القوالب عن logo_block كما بالصوره

http://upload.traidnt.net/upfiles/jLV14026.png

ثم ابحث بداخله عن هذا الكود

كود:

<img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />

واستبداله بالاتى

كود:

<img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" class="shake" />

ثم احفظ حفظكم الله
تم بحمد الله