11‏/05‏/2016

سنوافيكم اليوم باضافة لصندوق وسائل الاعلام الاجتماعية بشكل احترافي يجمع بين الأناقة والتأثيرات المختلفة، ستخدم موقعك بشكل كامل يشمل صورة (كوفر) وزر يرافقها بالإضافة الى الازرار الاجتماعية بما ان صورة التدوينة توضح الفكرة فلا ضرر من المعاينة الحية 😉
شرح طريقة التركيب
1. من التخطيط أضف أداة Html/Javascript وضع بها كود الإضافة
<style>
.about_blog { padding: 0; overflow: hidden;background: #fff; }
.about-ar1web-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.about-ar1web-img{position:relative;max-height:140px;overflow:hidden}
.about-ar1web-img img {max-width:100%;width:100%;transition:all .6s;}
.about-ar1web-img:hover img{transform:scale(1.2) rotate(-10deg)}
.about-ar1web-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;right:0;left:0;bottom:0;z-index:2;transition:all .3s}
.about-ar1web-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;right:22.5%;z-index:3}
.about-ar1web-float{text-align:center;display:table;width:100%;height:100%}
.about-ar1web-float a{color: #fff; padding: 8px 14px; z-index: 2; display: table-cell; width: 100%; font-size: 100%; text-transform: uppercase; vertical-align: middle; transition: all .3s; border: 2px solid #FFFFFF; font-weight: bold; background: rgba(0,0,0,0.5); text-shadow: 0 2px 0 rgba(0,0,0,0.15); box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 2px 0 -1px rgba(0,0,0,0.13), 0 3px 0 -1px rgba(19, 18, 18, 0.38), 0 3px 13px -1px rgba(0, 0, 0, 0.08); border-radius: 2px;}
.about-ar1web-float:hover a{background:#fff; color: #444!important;}
.about-ar1web-float a i{font-weight:normal;margin-left:5px}
.about-ar1web-wrpicon{display:block;margin:0 auto;position:relative;}
.extender{text-align:center;font-size:16px;    margin: 15px!important;}
.extender .about-ar1web-icon{display: inline-block!important; border: 0!important; margin: 0!important; padding: 0!important; width: 32%!important;}
.extender .about-ar1web-icon a{background: #ccc; display: inline-block; font-weight: 400; color: #fff; line-height: 32px; border-radius: 3px; font-size: 12px; width: 100%; border: 1px solid rgba(0,0,0,0.21); border-bottom-color: rgba(0, 0, 0, 0.27); text-shadow: 0 1px 0 rgba(0,0,0,0.15); box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 2px 0 -1px rgba(0, 0, 0, 0), 0 3px 0 -1px rgba(0,0,0,0.08), 0 3px 13px -1px rgba(0, 0, 0, 0.08);}
.extender .about-ar1web-icon i{font-family:fontawesome;margin:0 3px 0 0}
.about-ar1web-icon.fbl a{background:#3b5998}
.about-ar1web-icon.twitt a{background:#19bfe5}
.about-ar1web-icon.crcl a{background:#d64136}
.about-ar1web-icon.fbl a:hover,.about-ar1web-icon.twitt a:hover,.about-ar1web-icon.crcl a:hover{background:#313B42}
.extender .about-ar1web-icon:hover a,.extender .about-ar1web-icon a:hover{color:#fff;}
.about-ar1web-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.about-ar1web-info p{margin:5px 0;font: 12px Droid Arabic Naskh;    color: #444;}
.about-ar1web-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.about-ar1web-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.about-ar1web-info h4:before,.about-ar1web-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0, 0, 0, 0.08)}
.about-ar1web-info h4:before {margin-right:-50%;text-align:left;}
</style>
<div class="about_blog">
<div class="inner_wrapper">
<div class="about-ar1web-img">
<img alt="alwan may" class="img-responsive" height="auto" src="https://1.bp.blogspot.com/-SgMP9usY17o/Vq1wQUX40FI/AAAAAAAAA5Q/OOnHGeHuOL4/s1600/Festival-Of-Colors-People-HD-Wallpaper.jpg" width="300" />

<div class="aboutfloat-img">
<span class="about-ar1web-float"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-user"></i> انضم لموقعنا</a></span></div>
</div>
</div>
<div class="about-ar1web-info">
<h4>
تابعنا جديد موقعنا</h4>
تميز بلا حدود</div>
<div class="about-ar1web-wrpicon">
<ul class="extender">
<li class="about-ar1web-icon fbl"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-facebook fa-fw"></i> صفحتنا</a></li>
<li class="about-ar1web-icon twitt"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-twitter fa-fw"></i> تابعنا</a></li>
<li class="about-ar1web-icon crcl"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-google-plus fa-fw"></i> جوجل</a></li>
</ul>
</div>
</div>
تخصيص الإضافة :
المحدد بالأحمر # يغير بالرابط
المحدد بالبرتقالي يغير بالكلمات
المحدد بالأخضر يخص رابط الصورة

28‏/03‏/2016

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



إن واجهتك مشكلة في التحميل من المصدر الرئيسي، هناك روابط مباشرة في الجانب 👈

27‏/03‏/2016

قالب SEOFastBlogger معرب - نعود لكم من جديد بقالب يتميز بالبساطة ، ايضا التصميم المسطح، شكله انيق جدا، تم تصميمه بواسطة (bootstrap) ، كذلك قمنا بتعريبه بشكل يدوى بأستعمال خط (Arabic) أنيق احترافي، ايضا مناسب مع القالب من حيث الحجم ، ايضا القالب يعمل بشكل جيد على سطح المكتب، الاجهزة اللوحية ، الهواتف بشكل عام. هل هذا كل شئ ؟ بالطبع لا، قد تم تصميم نموذج مخصص للهواتف.


الواجهة كاملة



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

الواجهة كاملة



25‏/03‏/2016

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

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

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

إن أعجبتك فكرة ان تحتفظ بملفات موقعك بحسابك الخاص حرصا على أن تحذف أكواد مستضافة من قبل مستخدم آخر أو موقع فتابع الشرح التالي

شرح فتح حساب بموقع Github
1. قم بالدخول للموقع https://github.com/
2. اضغط على Sign up ثم املأ الخانات:
Username - اسم مستخدم
Email Address ـ البريد الإلكتروني
Password - الباسوورد (يجب أن يتضمن أرقام)
3. اضغط على Finish sign up
* ملاحظة أولا قم بتفعيل الحساب على بريدك قبل الإنتقال للخطوة التالية

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



2. ضع في خانة Repository name اسم موقعك أو أي اسم تريد وطبق الباقي كما في الصورة




3. سيوجهك للمجلد الخاص بك اضغط على New file
4. ضع اسم الملف متبوع بـ .js أو .css في الخانة 1 والكود في الخانة 2



5. اضغط على Commit new file

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



2. قبل أن تنسخ الرابط ادخل لهذا الموقع https://rawgit.com
3. ضع الرابط المنسوخ في الخانة الأولى وسينتج لك رابطين انسخ الذي في الخانة اليمنى (Use this URL for development)



4. واخيرا، قم بوضع الرابط في الكود بالموقع / المدونة مثال:
<script src='https://cdn.rawgit.com/iHussam/ar1web/master/tajriba.js' type='text/javascript'></script>
وبهذا نكون قد وصلنا لنهاية الشرح لاستضافة الملفات على Github، لمن واجه صعوبة في شيء فاستفساراتكم مرحب بها

23‏/03‏/2016

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



21‏/03‏/2016

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

19‏/03‏/2016

مرحبا بمتابعينا الأعزاء في كل مكان وزمان، سنتعرف اليوم على اضافة جديدة بمدونتنا ألا وهي تأثير التمرير بواسطة اللمس ليس حرفيا أنك تلمس الشاشة 😜 لا، ستمكنك الإضافة بالنزوال والصعود فقط بالتحكم بالمُؤشر (Cursor) هذا التأثير رائع ويشتغل بشكل طبيعي، بها يستطيع قرائك النزول أو الصعود بدون استعمال شريط التمرير (Scroll bar) ايضا يمكنك النزول أو الصعود بسرعة عبر السحب كما بالهواتف.
قبل أن تضيف هذا التأثير قم بتجربته أولا
شرح طريقة التركيب
1. توجه الى قالب >> تحرير
2. انسخ الكود التالي وضعه فوق </body>
 <script type='text/javascript'>
//<![CDATA[
function TouchScroll() {
 var instance = this;
    var Event = {
        CHANGE: 'change',
        COMPLETE: 'complete',
        ERROR: 'error',
        TOUCH_START: 'touchstart',
        TOUCH_MOVE: 'touchmove',
        TOUCH_END: 'touchend',
        MOUSE_DOWN: 'mousedown',
        MOUSE_MOVE: 'mousemove',
        MOUSE_UP: 'mouseup'
    };
 this.options = {
  'element': null
 };
 var drag = false;
 var startevent = {};
 var startpercentage = {};
 var axis = 'y';
 var target;
 this.load = function(data) {
  for (var item in data) {this.options[item] = data[item];}
  addListeners();
  setupAnimation();
 }
 function setupAnimation() {
  window.requestAnimFrame = (function() {
   return  window.requestAnimationFrame       || 
   window.webkitRequestAnimationFrame || 
   window.mozRequestAnimationFrame    || 
   window.oRequestAnimationFrame      || 
   window.msRequestAnimationFrame     || 
   function(callback, element) {window.setTimeout(callback, 1000 / 60);};
  })();
 }
 function addListeners() {
  if (instance.options.element.addEventListener) {
   instance.options.element.addEventListener(Event.MOUSE_DOWN, onTouchStart, false);
   instance.options.element.addEventListener(Event.MOUSE_MOVE, onTouchMove, false);
   instance.options.element.addEventListener(Event.MOUSE_UP, onTouchEnd, false);
   instance.options.element.addEventListener(Event.TOUCH_START, onTouchStart, false);
   instance.options.element.addEventListener(Event.TOUCH_MOVE, onTouchMove, false);
   instance.options.element.addEventListener(Event.TOUCH_END, onTouchEnd, false);
  }
 }
 function onTouchStart(e) {
  drag = true;
  target = instance.options.element || e.target;
  startevent = e;
  startpercentage = {x: (e.x/window.innerWidth)*100, y: (e.y/window.innerHeight)*100}
  //console.log('onTouchStart', e, target);
  e.preventDefault();
 }
 function onTouchMove(e) {
  if (drag == true) {
   var diffx = (startevent.pageX-e.pageX);
   var diffy = (startevent.pageY-e.pageY);
   target.scrollLeft += diffx;
   target.scrollTop += diffy;
   
   if (Math.abs(diffx) > 60) {axis = 'x';}
   else if (Math.abs(diffy) > 100) {axis = 'y';}

   //console.log('onTouchMove', target, diffx, diffy);
   e.preventDefault();
  }
 }
 function onTouchEnd(e) {
  drag = false;

  var endpercentage = {x: (e.x/window.innerWidth)*100, y: (e.y/window.innerHeight)*100}
  var diffpercentagex = -(endpercentage.x-startpercentage.x);
  var diffpercentagey = -(endpercentage.y-startpercentage.y);
  
  var diffx = (window.innerWidth/100)*diffpercentagex;
  var diffy = (window.innerHeight/100)*diffpercentagey;
  
  //console.log('onTouchEnd', e, diffpercentagex, diffpercentagey);
  
  //animate();
  
  scrollAxis(diffx*1.5, diffy*1.5, axis);
  
  e.preventDefault();
 }
 function animate() {
  requestAnimFrame(animate);
  console.log('animate');
 }
 function scrollAxis(diffx, diffy, axis) {
  var x = target.scrollLeft;
  var y = target.scrollTop;
  var start = y;
  var stop = start+diffy;
  if (axis == 'x') {
   start = x;
   stop = start+diffx;
  }
  
  var distance = stop > start ? stop - start : start - stop;
  if (distance < 50) {
   if (axis == 'x') { instance.updatePosition(stop, y); }
   else { instance.updatePosition(x, stop); }
   return;
  }
  var speedY = Math.round(distance);
  if (speedY >= 20) speedY = 20;
  var step = Math.round(distance / 30);
  var leapY = stop > start ? start + step : start - step;
  var timer = 0;
  //console.log(axis, distance, target, start, stop);
  if (stop > start) {
   for ( var i=start; i<stop; i+=step ) {
    if (axis == 'x') { setTimeout("touchscroll.updatePosition("+leapY+", 0)", timer*speedY); }
    else { setTimeout("touchscroll.updatePosition(0, "+leapY+")", timer*speedY); }
    leapY += step;
    if (leapY > stop) leapY = stop;
    timer++;
   }
   return;
  }
  for ( var i=start; i>stop; i-=step ) {
   if (axis == 'x') { setTimeout("touchscroll.updatePosition("+leapY+", 0)", timer*speedY); }
   else { setTimeout("touchscroll.updatePosition(0, "+leapY+")", timer*speedY); }
   leapY -= step;
   if (leapY < stop) leapY = stop;
   timer++;
  }
 }
 this.updatePosition = function(x, y) {
  //console.log('window.scrollTo', x, y);
  target.scrollLeft = x;
  target.scrollTop = y;
 }
}
TouchScroll.prototype = new TouchScroll();

var touchscroll = new TouchScroll();
touchscroll.load({
    'element': document.getElementsByTagName('body')[0]
});
//]]>
</script>