خطير : إضافة الحماية الشهيرة WOT تبيع وتتجسس على بيانات تصفح مستخدميها !

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

قبل أسبوع، نشر صحفيون تقرير استقصائي على  الإذاعة التلفزيونية الألمانية NDR تم الكشف من خلاله عن قيام إضافة WOT ( اختصارا لجملة "Web of Trust" ) المشهورة على نطاق جد ضخم ببيع بيانات المستخدمين، بما فيها بيانات زيارة المواقع "browsing history"، إضافة لبيانات أخرى جد حساسة كالمعاملات المالية وهويات المستخدمين...
وفي رد أولي لشركة WOT، أكدت أن بيانات المستخدمين التي باعتها مجهولة ولا تحدد هوية المستخدمين، لكن سرعانما تم تكديب ادعائات الشركة بتمكن الصحفيين من تحديد هوية  50 مستخدم من البيانات المباعة والتي حصلوا عليها من وسطائهم.
وفي تصريح لفايرفوكس على صحيفة The Register، أكدت سحبها التام للإضافة بعد استلام العديد من الشكايات وبتحليل دقيق لعمل الإضافة، تبين أنها لا توافق شروط متجر فايرفوكس، وأشارت أن متجرها لن يقبل الإضافة إلا بعد تحيينها ووقف تتبع نشاطات المستخدمين. وفي نفس السياق حذفت كل من غوغل، أوبرا، سفاري، أنترنت إكسبلورر إضافة WOT على متاجرهم، لكن المستخدمين الحاليين للتطبيق يتعين عليهم حذف الإضافة يدويا إلى حين صدور تحديث جديد لها.

بعد تحليل لشيفرة الإضافة من طرف الباحث Rob Wu وطرحه على موقع github، تبين أن هناك وظيفة إضافية تمكن من تنفيذ تعليمات برمجية عشوائية على أي صفحة، بما في ذلك سحب تسجيلات وتاريخ زيارة المواقع، قد تكون هي السبب في عدم حماية هوية المستخدم أثناء تدتول البيانات.
وفي بلاغ حديث عقب الضجة التي أثارها التحقيق، أكدت WOT عن سعيها الدائم في الحفاظ على بيانات المستخدمين مجهولة، فبعد دراسة معمقة للأمر تبين أن تقنيات الحفاظ على هويات المستخدم غير كافية لذا قررت الإضافة أن تسحب خدمتها من متاجر المتصفحات الحالية إلى حين صدور تحديث جديد، يشمل خاصية تبادل البيانات وقابلية الموافقة على الأمر، مع تعزيز حماية هوية المستخدم بالنسبة للبيانات التي تسجلها على المتصفحات حيث تعد هذه السمة من بين السمات الرئيسية التي تشتغل عليها الإضافة.

خطير : إضافة الحماية الشهيرة WOT تبيع وتتجسس على بيانات تصفح مستخدميها !

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

قبل أسبوع، نشر صحفيون تقرير استقصائي على  الإذاعة التلفزيونية الألمانية NDR تم الكشف من خلاله عن قيام إضافة WOT ( اختصارا لجملة "Web of Trust" ) المشهورة على نطاق جد ضخم ببيع بيانات المستخدمين، بما فيها بيانات زيارة المواقع "browsing history"، إضافة لبيانات أخرى جد حساسة كالمعاملات المالية وهويات المستخدمين...
وفي رد أولي لشركة WOT، أكدت أن بيانات المستخدمين التي باعتها مجهولة ولا تحدد هوية المستخدمين، لكن سرعانما تم تكديب ادعائات الشركة بتمكن الصحفيين من تحديد هوية  50 مستخدم من البيانات المباعة والتي حصلوا عليها من وسطائهم.
وفي تصريح لفايرفوكس على صحيفة The Register، أكدت سحبها التام للإضافة بعد استلام العديد من الشكايات وبتحليل دقيق لعمل الإضافة، تبين أنها لا توافق شروط متجر فايرفوكس، وأشارت أن متجرها لن يقبل الإضافة إلا بعد تحيينها ووقف تتبع نشاطات المستخدمين. وفي نفس السياق حذفت كل من غوغل، أوبرا، سفاري، أنترنت إكسبلورر إضافة WOT على متاجرهم، لكن المستخدمين الحاليين للتطبيق يتعين عليهم حذف الإضافة يدويا إلى حين صدور تحديث جديد لها.

بعد تحليل لشيفرة الإضافة من طرف الباحث Rob Wu وطرحه على موقع github، تبين أن هناك وظيفة إضافية تمكن من تنفيذ تعليمات برمجية عشوائية على أي صفحة، بما في ذلك سحب تسجيلات وتاريخ زيارة المواقع، قد تكون هي السبب في عدم حماية هوية المستخدم أثناء تدتول البيانات.
وفي بلاغ حديث عقب الضجة التي أثارها التحقيق، أكدت WOT عن سعيها الدائم في الحفاظ على بيانات المستخدمين مجهولة، فبعد دراسة معمقة للأمر تبين أن تقنيات الحفاظ على هويات المستخدم غير كافية لذا قررت الإضافة أن تسحب خدمتها من متاجر المتصفحات الحالية إلى حين صدور تحديث جديد، يشمل خاصية تبادل البيانات وقابلية الموافقة على الأمر، مع تعزيز حماية هوية المستخدم بالنسبة للبيانات التي تسجلها على المتصفحات حيث تعد هذه السمة من بين السمات الرئيسية التي تشتغل عليها الإضافة.

فيسبوك تطلق تطبيق ذكاء اصطناعي لعمل فلترات على الفيديو و البث المباشر بشكل مدهش

أضحى تطبيق Prisma من بين أفضل التطبيقات إن لم نقل أفضلها لإضافة فلترات على الصور، حيث يعتمد في الأساس على ذكاء اصطناعي يقوم بالتعرف على الصور وفلترتها بشكل مناسب أفضل من أي تطبيق مبني على خوارزميات عادية.
كعادتها، فيسبوك لم  تترك أي مجال صاعد دون أن تنهل منه نهلا، فبعد تحقيقها  لإنجازات كبيرة في ميدان الذكاء الاصطناعي خاصة فيما يتعلق بالتعرف على الوجوه في الصور، تعمل اليوم على تطبيق جديد قد استفاد منه مطوري Prisma ، وتسمى تطبيقات الذكاء الاصطناعي من هذا النوع  ب"style transfer".

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

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

هذا وقد تم بناء الذكاء الصنعي على تطبيق Caffe2 المفتوح المصدر وتقنيات التعلم العميق ''Deep Learning'' ليصبح اسم التقنية الجديدة لفيسبوك Caffe2Go والتي عرفت أول ظهور لها للعلن في مؤتمر WSJD 2016  قبل شهر، لكنها اليوم متاحة ببعض البلدان على نظامي Android و iOS .

فيسبوك تطلق تطبيق ذكاء اصطناعي لعمل فلترات على الفيديو و البث المباشر بشكل مدهش

أضحى تطبيق Prisma من بين أفضل التطبيقات إن لم نقل أفضلها لإضافة فلترات على الصور، حيث يعتمد في الأساس على ذكاء اصطناعي يقوم بالتعرف على الصور وفلترتها بشكل مناسب أفضل من أي تطبيق مبني على خوارزميات عادية.
كعادتها، فيسبوك لم  تترك أي مجال صاعد دون أن تنهل منه نهلا، فبعد تحقيقها  لإنجازات كبيرة في ميدان الذكاء الاصطناعي خاصة فيما يتعلق بالتعرف على الوجوه في الصور، تعمل اليوم على تطبيق جديد قد استفاد منه مطوري Prisma ، وتسمى تطبيقات الذكاء الاصطناعي من هذا النوع  ب"style transfer".

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

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

هذا وقد تم بناء الذكاء الصنعي على تطبيق Caffe2 المفتوح المصدر وتقنيات التعلم العميق ''Deep Learning'' ليصبح اسم التقنية الجديدة لفيسبوك Caffe2Go والتي عرفت أول ظهور لها للعلن في مؤتمر WSJD 2016  قبل شهر، لكنها اليوم متاحة ببعض البلدان على نظامي Android و iOS .

غالاكسي X : هاتف جديد من سامسونغ قابل للطي بشكل كلي !

في الأشهر القليلة الماضية، انتشرت عدة تقارير لشركات كبرى أنتجت شاشات قابلة للطي، لكن لحد الآن لم نلاحظ ظهور أي منتج كامل من هذاالنوع للسوق العالمية نظرا لعدة مشاكل تقنية، لكن قد تحطم العملاقة سامسونج هذا الحاجز السنة المقبلة .

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

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

ومن المرتقب أن يتم الإعلان عن هاتف غالاكسي X (بمعنى مجهول الاسم) السنة المقبلة بمؤتمر "Mobile World" بإسبانيا.

غالاكسي X : هاتف جديد من سامسونغ قابل للطي بشكل كلي !

في الأشهر القليلة الماضية، انتشرت عدة تقارير لشركات كبرى أنتجت شاشات قابلة للطي، لكن لحد الآن لم نلاحظ ظهور أي منتج كامل من هذاالنوع للسوق العالمية نظرا لعدة مشاكل تقنية، لكن قد تحطم العملاقة سامسونج هذا الحاجز السنة المقبلة .

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

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

ومن المرتقب أن يتم الإعلان عن هاتف غالاكسي X (بمعنى مجهول الاسم) السنة المقبلة بمؤتمر "Mobile World" بإسبانيا.

كود منع نسخ الصور لمدونات بلوجر

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

فائدة الكود منع نسخ النصوص وتعطيل نسخ الصور

1. من لوحة تحكم اذهب الى القالب واضغط على تحرير القالب  
2. فوق هذا الوسم  <body/> نضع الكود التالي
3. يمكنك ايضا وضع الكود داخل ادات html في التخطيط

<script type='text/javascript'> //<![CDATA[ function nocontext(e) {var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName; if (clickedTag == "IMG") {alert(alertMsg);return false;}} var alertMsg = "ممنوع نسخ الصور";document.oncontextmenu = nocontext; //]]></script>

اضافة تأثير على صندوق المواضيع

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

شرح طريقة التركيب

1. داخل القالب ابحث عن  <b:skin/><[[  وضع الكود التالي فوقه
2. أو ضعه بين   <style> و <style/>  فوق  <head/>  

@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp} .animated { -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 0.6s; animation-duration: 0.6s; }

1. إبحث عن  <body/>  وضع الكود التالي فوقه

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <script type='text/javascript'> //<![CDATA[ (function(){var a,b=function(a,b){return function(){return a.apply(b,arguments)}};a=function(){function a(){}return a.prototype.extend=function(a,b){var c,d;for(c in a)d=a[c],null!=d&&(b[c]=d);return b},a.prototype.isMobile=function(a){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(a)},a}(),this.WOW=function(){function c(a){null==a&&(a={}),this.scrollCallback=b(this.scrollCallback,this),this.scrollHandler=b(this.scrollHandler,this),this.start=b(this.start,this),this.scrolled=!0,this.config=this.util().extend(a,this.defaults)}return c.prototype.defaults={boxClass:"wow",animateClass:"animated",offset:0,mobile:!0},c.prototype.init=function(){var a;return this.element=window.document.documentElement,"interactive"===(a=document.readyState)||"complete"===a?this.start():document.addEventListener("DOMContentLoaded",this.start)},c.prototype.start=function(){var a,b,c,d;if(this.boxes=this.element.getElementsByClassName(this.config.boxClass),this.boxes.length){if(this.disabled())return this.resetStyle();for(d=this.boxes,b=0,c=d.length;c>b;b++)a=d[b],this.applyStyle(a,!0);return window.addEventListener("scroll",this.scrollHandler,!1),window.addEventListener("resize",this.scrollHandler,!1),this.interval=setInterval(this.scrollCallback,50)}},c.prototype.stop=function(){return window.removeEventListener("scroll",this.scrollHandler,!1),window.removeEventListener("resize",this.scrollHandler,!1),null!=this.interval?clearInterval(this.interval):void 0},c.prototype.show=function(a){return this.applyStyle(a),a.className=""+a.className+" "+this.config.animateClass},c.prototype.applyStyle=function(a,b){var c,d,e;return d=a.getAttribute("data-wow-duration"),c=a.getAttribute("data-wow-delay"),e=a.getAttribute("data-wow-iteration"),a.setAttribute("style",this.customStyle(b,d,c,e))},c.prototype.resetStyle=function(){var a,b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],e.push(a.setAttribute("style","visibility: visible;"));return e},c.prototype.customStyle=function(a,b,c,d){var e;return e=a?"visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;":"visibility: visible;",b&&(e+="-webkit-animation-duration: "+b+"; -moz-animation-duration: "+b+"; animation-duration: "+b+";"),c&&(e+="-webkit-animation-delay: "+c+"; -moz-animation-delay: "+c+"; animation-delay: "+c+";"),d&&(e+="-webkit-animation-iteration-count: "+d+"; -moz-animation-iteration-count: "+d+"; animation-iteration-count: "+d+";"),e},c.prototype.scrollHandler=function(){return this.scrolled=!0},c.prototype.scrollCallback=function(){var a;return this.scrolled&&(this.scrolled=!1,this.boxes=function(){var b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],a&&(this.isVisible(a)?this.show(a):e.push(a));return e}.call(this),!this.boxes.length)?this.stop():void 0},c.prototype.offsetTop=function(a){var b;for(b=a.offsetTop;a=a.offsetParent;)b+=a.offsetTop;return b},c.prototype.isVisible=function(a){var b,c,d,e,f;return c=a.getAttribute("data-wow-offset")||this.config.offset,f=window.pageYOffset,e=f+this.element.clientHeight-c,d=this.offsetTop(a),b=d+a.clientHeight,e>=d&&b>=f},c.prototype.util=function(){return this._util||(this._util=new a)},c.prototype.disabled=function(){return!this.config.mobile&&this.util().isMobile(navigator.userAgent)},c}()}).call(this); // WOW new WOW( { offset: 100 } ).init(); //]]></script></b:if></b:if>

نأتي للمرحلة الأخيرة إبحث عن <b:includable id='post' var='post'> ستجد بجانبه سهم إضغط عليه, بأول الكود الذي أسفله ستجد كلمة تشبهه هذه class='post hentry' قد تجد كتابة معها لا تقلق ذلك لن يشكل فارقا المهم أضف هذه الكتابة wow zoomInUp' data-wow-duration='0.6s في داخل ' ' بحيث ستصبح هكذا :

class='post hentry wow zoomInUp' data-wow-duration='0.6s'

إضافة صناديق الملاحظات حصريا

كيفية اضافة صناديق الملاحظات فى مدونتك , اذا كنت مدون وترغب فى إبهار القراء بالمدونة الخاصة بك فلا تقلق مع مساعدة هذه الاداة وساشارككم اليوم يمكنك تقديم ملاحظات بشكل عصري وانيق فى مقالاتك , 

قبل تثبيت الاضافة فى المدونة الخاصة بك القي نظرة على الاضافة

 عن طريق الضغط على زر المعاينة ادناه

شرح طريقة التركيب :

1. معاينة الاضافة من هنا
2. انتقل الى قسم   القالب اضغط على زر تحرير  HTML 
3. داخل القالب ابحث عن  <b:skin/><[[  وضع الكود التالي فوقه
4. أو ضعه بين   <style> و <style/>  فوق  <head/>  

/* CSS Note by Jazairiweb */ .note { position: relative; width: 30%; padding: 1.2em 1.5em; margin: 2em auto; color: #fff; background: #343436; overflow: hidden; text-align: right; font-size: 14px; } .note.black { background: #343436; } .note.blue { background: #3498DB; } .note.red { background: #ea6153; } .note.purple { background: #9B59B6; } .note.yellow { background: #F1C40F; } .note.turquoise { background: #1ABC9C; } .note.red:before { border-color: #fff #fff #ea6153 #ea6153; background: #ea6153; } .note.blue:before { border-color: #fff #fff #3498DB #3498DB; background: #3498DB; } .note.purple:before { border-color: #fff #fff #9B59B6 #9B59B6; background: #9B59B6; } .note.yellow:before { border-color: #fff #fff #F1C40F #F1C40F; background: #F1C40F; } .note.turquoise:before { border-color: #fff #fff #1ABC9C #1ABC9C; background: #1ABC9C; } .note:before { content: ""; position: absolute; top: 0; right: 0; border-width: 0 16px 16px 0; border-style: solid; border-color: #fff #fff #343436 #27ae60; background: #27ae60; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2); display: block; width: 0 }

1. والان اضف اي كود من الاكواد التالية عندما تريد كتابة ملاحظة فى مقالك

<div class='note black'>الملاحظة هنا</div>

<div class='note blue'>الملاحظة هنا</div>

<div class='note red'>الملاحظة هنا</div>

<div class='note purple'>الملاحظة هنا</div>

<div class='note yellow'>الملاحظة هنا</div>

<div class='note turquoise'>الملاحظة هنا</div>

وبعد الانتهاء، إذا كنت تواجه أي نوع من المشاكل، يجب عليك التعليق عن طريق صندوق التعليقات بالاسفل .

اضافة اخر المواضيع مع التاريخ وعدد التعليقات

هذه المرة على موقع جزائري ويب كيفية اضافة اداة اخر المواضيع لمدونات بلوجر مع التاريخ وعدد تعليقات

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

شرح التركيب :

1. تقوم بالدخول الى لوحة التحكم فى بلوجر
2. بعدها على التخطيط , اضافة اداة
3. ثم تقوم باضافة الكود التالي داخل  html / javascript 

<style scoped='' type='text/css'> #recent-posts{color:#999;font-size:12px} #recent-posts img{background:#fafafa;float:right;height:60px;margin-left:8px;width:60px;border-radius:4px} #recent-posts ul{margin:0;padding:0} #recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)} #recent-posts ul li:last-child{border-bottom:0} #recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal} </style> <div id='recent-posts'> <script type='text/javaScript'> var rcp_numposts=5; var rcp_snippet_length=150; var rcp_info='yes'; var rcp_comment='التعليقات'; var rcp_disable='T?t Nh?n xét'; function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMvGgD6HvPsCdHBPA8gbU3ymz1cK2aOAe7vGMC1oXhyDiiLsKCBvXacdSzqLyD2d3Iv3QoN3HZDA5shKo8TCl5hNj5lOxWDPvWcxH3mQWyamFNKqsejynJWCMcpUl80A_NT7UWFxhDUc4f/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>'); </script> </div>

معاينة الاضافة

أضافة صفحة تحميل احترافية حصريا

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

شرح طريقة التركيب + معاينة الاضافة من هنا

1. قم بالدخول الى تحرير قالب مدونتك HTML  
2. ابحث عن هذه الوسم  <head/>   وضع الكود التالي فوقه

<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background: rgba(23, 38, 47, 0.93);z-index:1000}.balls{width:30px;height:30px;position:absolute;background-color:#ccc;top:45%;border-radius:50%}.balls:nth-child(1){background-color:#FF5460;animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(2){background-color:#FF9D84;animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(3){background-color:#F0E797;animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(4){background-color:#75B08A;animation:move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23)}@keyframes move{0%{left:0%}100%{left:100%}} #logo_jazairiweb{ margin:15% auto; width:400px;} #logo_jazairiweb li.s-home{ display:inline ; font-weight:normal ;position:relative} #logo_jazairiweb li.s-home a { color: rgba(240, 239, 239, 0.96) ; font-size: 33px ; font-family: GESSTwoLight,Great Vibes} #logo_jazairiweb li.s-home:hover{background: none} </style>

1. قم بوضع الكود التالي أسفل هذه الوسم   <body>  

<div id='loader'> <div class='balls'/> <div class='balls'/> <div class='balls'/> <div class='balls'/><div id='logo_jazairiweb'><li class='s-home'> <a><i class='fa fa-globe' style='color:#fff;padding-right:10px;font-size:24px'/> انتظر ثوان من فضلك..... </a></li></div> </div> <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/> <script type='text/javascript'> $(window).load(function () { setTimeout(function () { $(&quot;.balls&quot;).fadeOut(&quot;slow&quot;); setTimeout(function () { $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;) }, 1000) }, 1000) }); </script>

• 
  

طريقة عمل محتوى مخفي

مرحبا بكل متابعي موقع جزائري ويب اليوم اقدم لكم موضوع رائع وهو طريفة عمل محتوى مخفي أو بالتحديد محتوى قابل للإظهار والإخفاء Hide and show وتفيد هذه الطريقة في المدونات التي تكون مواضيعها طويلة فيمكن إستخدامها لإخفاء جزء من الموضوع و يمكنك القيام باخفاء نص ,صورة اوحتى مقطع فيديو

شرح طريقة التركيب :

1. معاينة الاضافة من هنا
2. ضع الكود التالي في الموضوع داخل HTML  

<div><input style = 'background: #aa65c7; color: #fff; text-align: center; margin: 0 auto; border: none; border-radius: 3px; padding: 8px 16px; margin-right: 150px; font-size: 19px; font-weight: normal; font-family: Electrolize,GESSTwoLight; box-shadow: 0px 3px 0px 0px #883da7; vertical-align: middle; cursor: pointer; text-shadow: 0 1px rgba(0, 0, 0, 0.3); transition: background 0.1s ease-in-out;' value="اضغط هنا" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'اخفاء الكود';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'اضهار الكود';}" type="button" /><div style="display: none;">ضع الكود الدي تريد اخفائه هنا</div></div>

اضافة ازرار التواصل الاجتماعى مع تأثيرات

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

شرح و كيفية تركيب الازرار:

1. كل ما عليك فعله ان تدخل الى " تحرير القالب "
2. بحث باستعمال CTRL+F عن  <b:skin/><[[  وضع الكود التالي فوقه

ul.cbttopshare { float: right; margin: -4px 0; } ul.cbttopshare li {float:left;list-style: none outside none;border:none;} ul.cbttopshare li a{background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpgGTqYKrrq2xAXAF0BqN6TMPWTvfkxMCj25QFrUc2fyvgs7dLCKzaS26xNyme8Ua9kOsly40ffGI4-XNiM3PNXNgHXIL5Swb1eVnQsUUCHoCb3Bj0ryk1D7DMkeLqyAD0WP-yWsUHroGr/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px} .ie7 ul.cbttopshare li a, .ie8 ul.cbttopshare li a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpgGTqYKrrq2xAXAF0BqN6TMPWTvfkxMCj25QFrUc2fyvgs7dLCKzaS26xNyme8Ua9kOsly40ffGI4-XNiM3PNXNgHXIL5Swb1eVnQsUUCHoCb3Bj0ryk1D7DMkeLqyAD0WP-yWsUHroGr/s1600/spice-social-gadget-sprite.png)} ul.cbttopshare li.facebook a{ background-position:0 0} ul.cbttopshare li.flickr a{ background-position:-32px 0} ul.cbttopshare li.dribbble a{ background-position:-64px 0} ul.cbttopshare li.googleplus a{ background-position:-96px 0} ul.cbttopshare li.linkedin a{ background-position:-128px 0} ul.cbttopshare li.pinterest a{ background-position:-160px 0} ul.cbttopshare li.rss a{ background-position:-192px 0} ul.cbttopshare li.skype a{ background-position:-224px 0} ul.cbttopshare li.twitter a{ background-position:-256px 0} ul.cbttopshare li.vimeo a{ background-position:-288px 0} ul.cbttopshare li.youtube a{ background-position:-320px 0} ul.cbttopshare li.facebook a:hover, #sidebar ul.cbttopshare li.facebook a:hover{ background-position:0 -32px} ul.cbttopshare li.flickr a:hover, #sidebar ul.cbttopshare li.flickr a:hover{ background-position:-32px -32px} ul.cbttopshare li.dribbble a:hover, #sidebar ul.cbttopshare li.dribbble a:hover{ background-position:-64px -32px} ul.cbttopshare li.googleplus a:hover, #sidebar ul.cbttopshare li.googleplus a:hover{ background-position:-96px -32px} ul.cbttopshare li.linkedin a:hover, #sidebar ul.cbttopshare li.linkedin a:hover{ background-position:-128px -32px} ul.cbttopshare li.pinterest a:hover, #sidebar ul.cbttopshare li.pinterest a:hover{ background-position:-160px -32px} ul.cbttopshare li.rss a:hover, #sidebar ul.cbttopshare li.rss a:hover{ background-position:-192px -32px} ul.cbttopshare li.skype a:hover, #sidebar ul.cbttopshare li.skype a:hover{ background-position:-224px -32px} ul.cbttopshare li.twitter a:hover, #sidebar ul.cbttopshare li.twitter a:hover{ background-position:-256px -32px} ul.cbttopshare li.vimeo a:hover, #sidebar ul.cbttopshare li.vimeo a:hover{ background-position:-288px -32px} ul.cbttopshare li.youtube a:hover, #sidebar ul.cbttopshare li.youtube a:hover{ background-position:-320px -32px} blockquote { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 #FBFBFB; border-color: #DDDDDD #DDDDDD -moz-use-text-color; border-image: none; border-style: solid; border-width: 1px 1px 2px; padding: 5px; clear: both; } 

1. ثم احفظ القالب بالضغط على الزر البرتقالى حفظ النموذج 
2. ثم انتقل الى قسم " التخطيط " اضغط على " ضافة آداة "
3.  ثم اضف اداة  HTML / JAVA  وضع الكود التالي :

<!--Social Icons Started --> <ul class='cbttopshare'> <li class='facebook'> <a href='http://www.facebook.com' rel='nofollow' target='_blank' title='facebook'> </a></li> <li class='googleplus'> <a href='https://plus.google.com' rel='nofollow' target='_blank' title='googleplus'> </a></li> <li class='pinterest'> <a href='http://pinterest.com' rel='nofollow' target='_blank' title='pinterest'> </a></li> <li class='twitter'> <a href='http://twitter.com' rel='nofollow' target='_blank' title='twitter'> </a></li> <li class='rss'> <a href='http://feedburner.com' rel='nofollow' target='_blank' title='rss'> </a></li> <li class='skype'> <a href='http://www.skype.com' rel='nofollow' target='_blank' title='Skype'> </a></li> <li class='vimeo'> <a href='http://www.vimeo.com' rel='nofollow' target='_blank' title='vimeo'> </a></li> <li class='flickr'> <a href='http://www.flickr.com' rel='nofollow' target='_blank' title='flickr'> </a></li> <li class='linkedin'> <a href='http://www.linkedin.com' rel='nofollow' target='_blank' title='linkedin'> </a></li> <li class='youtube'> <a href='http://www.youtube.com' rel='nofollow' target='_blank' title='youtube'> </a></li> </ul> <!--Social Icons End--> 

معاينة الاضافة :