إضافة للمقارنة بين صورتين باستخدام شريط سهل الحركة يتوسطهما لمدونات بلوجر

مرحبا بكم زوار مدونة أبو إياد، اليوم سنتطرق لإضافة بسيطة وجميلة جدا لمدونات بلوجر، خاصة للمدونات التي تهتم بالتصميم والصور وشروحات الفوتوشوب أو المصوريين photographers.

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

والأن بعد معاينتها هل أعجبتك؟ اذا أعجبتك ستمر معنا لأهم أول خطوة يجب القيام بها هي تحميل هذا الملف: jquery.beforeafter.min.js ورفعه على أي إستضافة أو على google codeمثلا أو على dropbox نفسه، أنصحكم بتحميله وإعادة رفعه في حالة ما قمت بحذف بالخطأ أو شئ من هذا القبيل لن تلتحق بكم أي أضرار.

بعد القيام بالخطوة السابقة سنقوم بالمرور إلى الخطوة الثانية والقيام بالتالي:

     1.  الدخول الى لوحة التحكم www.blogger.com
     2.  ثم الدخول على القالب Template
     3.  ثم تحرير Html
     4.  ثم البحث (Ctrl+F) عن الوسم

</head>

     5.  أصف فوقه أو قبله الكود التالى مع تغيير الرابط الأحمر برابط الملف الذي رفعناه:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js' type='text/javascript'/>

<script src='https://dl.dropboxusercontent.com/s/5l05j1v1pbur8jh/jquery.beforeafter.min.js' type='text/javascript'/>

<script type='text/javascript'>

$(function(){

$(&#39;#antesydespues1&#39;).beforeAfter({showFullLinks : true});

});

</script>

<script>

(function(i,s,o,g,r,a,m){i[&#39;GoogleAnalyticsObject&#39;]=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,&#39;script&#39;,&#39;//www.google-analytics.com/analytics.js&#39;,&#39;ga&#39;);

ga(&#39;create&#39;, &#39;UA-48685622-1&#39;, &#39;mosawir.com&#39;);

ga(&#39;send&#39;, &#39;pageview&#39;);

</script>

     6.  ثم في أخر خطوة سنقوم بالدخول إلى الموضوع الذي نريد أن تظهر فيه الإضافة ونقوم بإضافة الكود التالي في المناسب:

<div id='antesydespues1'>
<div><img alt='before' src='رابط الصورة1' width='500' height='291'/></div>
<div><img alt='after' src='رابط الصورة2' width='500' height='291'/></div>
</div>

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

هل أعجبك الموضوع ؟