جعل صور المشاركات الشائعة تتحرك بشكل دائرى

كيفية جعل صور المشاركات الشائعة تتحرك بشكل دائرى عند وضع موشر الماوس على الصورة شكل جديد واعجبنى والفت انتباهى كثيرا ولا يسبب ثقل للمدونة فاحببت ان اضع لكم الطريقة واتمنى بأن هذه الطريقة تعجبكم فلن اطيل عليكم وساترك لكم التجربة واتوقع بأن هذه الطريقة ستقوم بأضافتها الى مدونتك لجعل المدونة تظهر بشكل رائع وجميل نأتى الى طريقة التركيب فى البداية يجب بأن تكون لديك اضافة المشاركات الشائعة وانا اعلم بأنها متواجدة لديك الأن وقبل كل شيى قم باخذ نسخة احتياطية من قالبك ومن هنا درس بسيط يعلمك طريقة اخذ نسخة احتياطية الان ناتى الى الطريقة فى البداية ادخل الى لوحة تحكم مدونتك ومن بعدها اضغط على القالبالأن اضغط على تحرير
  HTML

الان اضغط على زر متابعة

الان قم بتوسيع القالب كما واضح لتا بالصورة التالية

الان اضغط على CTRL + F من الكيبورد لظهور عملية البحث عن الأكود بالمتصفح
ابحث عن هذا الكود :

 ]]></b:skin>

اضف قبلة مباشرة هذا الكود :

 .popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}

الأن ابحث عن هذا الكود :

 <b:widget id='PopularPosts2' locked='false' title='المشاركات الشائعة' type='PopularPosts'>

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

الان ماذا نفعل قم بتغير الكود السابق الى هذا الكود :

<b:widget id='PopularPosts1' locked='false' title='المشاركات الشائعة' type='PopularPosts'><b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPVAhQGV6zw5QkFqJwCFNQdLChqlhAxb8WGljsexLZbVeoxGDS_l0qBMHVvjWHktbr8CI7ebqTbWgUuSb3gzL_9QPIaCgQ5m4iT6_cspji4-yemN-bIQ5VjXvLUbllJHCe57O7QxWBSUqV/s1600/no-image.gif'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable></b:widget>

قم بتغير كلمة المشاركات الشائعة الى الأسم الذى تريدة المشار لنا باللون الأصفر وقبل ان تضغط حفظ النموذج بالامكان ان تضغط على زر معاينة للتاكد من تركيب الأضافة بشكل سليم وان شاء الله يعمل معكم بنجاح فى النهاية انتهى الشرح وارجو بأن هذه الأضافة اعجبتكم ولن اقول غير (( لا خير فى كاتم العلم ))