2016/06/23

إضافة أداة مرحبا يا رمضان النسخة الثانية لمدونات بلوجر

إضافة أداة مرحبا يا رمضان 2 لمدونات بلوجر
إضافة أداة مرحبا يا رمضان 2 لمدونات بلوجر

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

النسخة الأولى : أداة مرحبا يا رمضان لمدونات بلوجر
يمكنك المعاينة من خلال المدونة أيضا !

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

1. إبحث عن     </head> ثم أضف الكود التالي فوقه
<style>
/*<![CDATA[*/
 .fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 

.idul_layout{text-align:center;position:fixed;top:0;right:0;bottom:0;left:0;background:#3498db;z-index:99999;display:none}
.idul_message{font-family:droid arabic kufi;width:50%;background:rgba(33, 149, 242, 0);font-size:16px;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#fff;position:absolute;top:10%;right:50%;margin-right:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.profile-idul,.profile-idul2{padding:4px}
.idul_message:before{content: "";
    height: 0;
    width: 0px;
    position: absolute;
    right: 283px;
    border: 20px solid #ffffff;
    border-color:rgba(32, 149, 243, 0) rgba(33, 150, 242, 0) #ffffff;
    bottom: -45px;
}
.profile-idul{background:#FFC107;border:1px solid transparent;border-radius:100%;position:fixed;bottom:10px;left:40px;cursor:pointer;width:100px;height:100px;z-index:9999}
.profile-idul2{background:#fff;border:1px solid transparent;border-radius:100%;position:absolute;bottom:-240px;right:200px;width:200px;height:200px}
.close_idul{font-size:40px;color:#fff;position:absolute;top:-30px;left:-30px;cursor:pointer}
@media (max-width:800px){.idul_message{width:90%!important;margin-right:-45%!important;}
.profile-idul2{right:50%;margin-right:-105px;}
..idul_message:before{right:50%;margin-right:-20px;}
.close_idul{color:#555;top:-16px;left:0;}
}
.tada{-webkit-animation:tada 1s linear 1s infinite normal;animation:tada 1s linear 1s infinite normal}
@-webkit-keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
@keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
/*]]>*/
</style>
2.الخطوة الثانية والأخير إبحث عن الوسم </body> ثم أضف الكواد التالية فوقهه
<img class='profile-idul tada' expr:alt='data:post.author' height='50' onclick='openIdulfitri()' src='https://blogger.googleusercontent.com/img/proxy/AVvXsEiJPNl1sJLRFUVeQeesQih-4idDy1McdQxVfHGZSCEzQkQ-uMcbsXxSBhc3dweGpLIPLfIlwS3S3u3qnSGsAMVEhyv82bt0l8yxb4cFbfFQ3pvCRKG-fdrHzF_DQI3VrE6HIqzlx1cfjPVK8NsS-D-jIzRGQJKAEY__=s90-p' title='إضغط لأقول لك شيئا!' width='50'/>
<div class='idul_layout animated fadeInDown' id='tech5academy-blogspot-com'>
  <div class='idul_message'>
    <h2>&quot;مرحبا يا رمضان&quot;</h2>

    <p>
      <br/><br/> بصفتي  <b>

</b> مشرف في مدونة <b>أكاديمية التقنية</b>
 أهنؤكم وأقول لكم :
      <br/>
   <br>
الله يتقبل صيامك وقيامك ومبارك عليك الشهر 
</br>
</p>
    <img class='profile-idul2' expr:alt='data:post.author' height='200' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk4kmlnxl5BCC4mzSViFbVWXa3R3VYgmFxX_eJ05UK_TFTwjDlbNV7hWuLKM_pJQuOzDZ7a5rAgmxWoGBWxkyYrzepVuAPwpj77dPsNikyAOm8DFd4kcg8scC0YsSPX3eQgA16mGPNQ0LQ/w500-h498/%25D9%2585%25D8%25AD%25D9%2585%25D8%25AF.png' width='200'/>

    <div class='close_idul' onclick='closeIdulfitri()'>&amp;times</div>
  </div>
</div>
<script>
//<![CDATA[
var _0xf212=["\x37\x20\x63\x28\x29\x7B\x35\x20\x30\x3D\x36\x2E\x61\x28\x22\x62\x2D\x38\x2D\x39\x22\x29\x3B\x22\x33\x22\x21\x3D\x3D\x30\x2E\x32\x2E\x31\x3F\x30\x2E\x32\x2E\x31\x3D\x22\x33\x22\x3A\x30\x2E\x32\x2E\x31\x3D\x22\x34\x22\x7D\x3B\x37\x20\x64\x28\x29\x7B\x35\x20\x30\x3D\x36\x2E\x61\x28\x22\x62\x2D\x38\x2D\x39\x22\x29\x3B\x22\x34\x22\x21\x3D\x3D\x30\x2E\x32\x2E\x31\x3F\x30\x2E\x32\x2E\x31\x3D\x22\x34\x22\x3A\x30\x2E\x32\x2E\x31\x3D\x22\x33\x22\x7D\x3B","\x7C","\x73\x70\x6C\x69\x74","\x65\x7C\x64\x69\x73\x70\x6C\x61\x79\x7C\x73\x74\x79\x6C\x65\x7C\x62\x6C\x6F\x63\x6B\x7C\x6E\x6F\x6E\x65\x7C\x76\x61\x72\x7C\x64\x6F\x63\x75\x6D\x65\x6E\x74\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x62\x6C\x6F\x67\x73\x70\x6F\x74\x7C\x63\x6F\x6D\x7C\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64\x7C\x74\x65\x63\x68\x35\x61\x63\x61\x64\x65\x6D\x79\x7C\x6F\x70\x65\x6E\x49\x64\x75\x6C\x66\x69\x74\x72\x69\x7C\x63\x6C\x6F\x73\x65\x49\x64\x75\x6C\x66\x69\x74\x72\x69","\x72\x65\x70\x6C\x61\x63\x65","","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function(_0x953dx1,_0x953dx2,_0x953dx3,_0x953dx4,_0x953dx5,_0x953dx6){_0x953dx5= function(_0x953dx3){return _0x953dx3.toString(36)};if(!_0xf212[5][_0xf212[4]](/^/,String)){while(_0x953dx3--){_0x953dx6[_0x953dx3.toString(_0x953dx2)]= _0x953dx4[_0x953dx3]|| _0x953dx3.toString(_0x953dx2)};_0x953dx4= [function(_0x953dx5){return _0x953dx6[_0x953dx5]}];_0x953dx5= function(){return _0xf212[6]};_0x953dx3= 1};while(_0x953dx3--){if(_0x953dx4[_0x953dx3]){_0x953dx1= _0x953dx1[_0xf212[4]]( new RegExp(_0xf212[7]+ _0x953dx5(_0x953dx3)+ _0xf212[7],_0xf212[8]),_0x953dx4[_0x953dx3])}};return _0x953dx1}(_0xf212[0],14,14,_0xf212[3][_0xf212[2]](_0xf212[1]),0,{}))
//]]>
</script>
5.إحفظ القالب إذا أعجبتك الإضافة وتريد نسخ أخرى (هناك الكثير) شارك التدوينة مع أصدقائك ولاتنسى التعليق

2016/06/07

قالب Simplify معرب

قالب Simplify معرب
قالب Simplify معرب

قالب اليوم هو Simplify 2016 قالب بلوجر شخصي فريد من نوعة يتميز بسرعته الفائقة وأناقته الجميلة يعرض مواضيعك بأبهى حلى ,إنه نسخة مصغرة لقالب N Light يمكنك التحكم الكامل للقالب من التخطيط فقط ,تم تعريبه يدويا مع بعض اللمسات السحرية ليصبح قالب عربي متكامل ’
أيضا لم أضف له حقوق التعريب هدية مني إليكم بمناسبة رمضان
يمكنك معاينته وتحميله عبر الأزرار التالية


مميزات القالب


  • متجاوب
  • صديق لسيو 
  • مكان للإعلانات
  • شخصي
  • Schema.org مفعلة
  • عمودين
  • مسار الموضوع لتقوية السيو
  • إعلانات متجاوبة
  • محرك بحث 
  • فهرس مخصص
  • إتصل بنا مخصصة
  • والمزيد ....


يمكنك وضع إي إستفسار وأنا سأجاوبك في أسرع وقت
إلى اللقاء أصدقائي

إضافة أداة مرحبا يا رمضان لمدونات بلوجر

إضافة أداة مرحبا يا رمضان  لمدونات بلوجر
إضافة أداة مرحبا يا رمضان  لمدونات بلوجر

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

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

أداة مرحبا يا رمضان أداة جميلة لتهنئة الزوار بشكل جميل وإحترافي تضهر على شكل أيقونة دائرية في أسفل المدونة على اليسار عند الضغط علها تنبثق لك رسالة بتأثيرات CSS جميلة (Animation) يمكنك معاينتها على مدونتنا في الأسفل على اليسار

طريقة التركيب
1. اذهب الى لوحة التحكم فى بلوجر - تسجيل الدخول
2. انتقل الى قسم قالب
3.إضغط على تحرير HTML
4.إبحث عن الوسم </head> وأضف الكود التالي فوقه

<style>
/*<![CDATA[*/
.tech5academy{-webkit-animation:tech5academy 1s linear 1s infinite normal;animation:tech5academy 1s linear 1s infinite normal}
@-webkit-keyframes tech5academy{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
@keyframes tech5academy{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
.idul_layout{text-align:center;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(9,150,13,.8);z-index:99999;display:none}
.tech5cademy_message{font-family:droid arabic naskh;width:50%;background:#fff;font-size:16px;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#333;position:absolute;top:10%;right:50%;margin-right:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.profile-idul,.profile-tech5academy{padding:4px}
.tech5cademy_message:before{content:"";height:0;width:0;position:absolute;bottom:-40px;right:20px;border:20px solid transparent;border-color:#fff transparent transparent}
.profile-idul{background:#0c9f17;border:1px solid transparent;border-radius:100%;position:fixed;bottom:10px;left:40px;cursor:pointer;width:50px;height:50px;z-index:9999}
.profile-tech5academy{background:#fff;border:1px solid transparent;border-radius:100%;position:absolute;bottom:-240px;right:-120px;width:200px;height:200px}
.close_idul{font-size:40px;color:#fff;position:absolute;top:-30px;left:-30px;cursor:pointer}
@media (max-width:800px){.tech5cademy_message{width:90%!important;margin-right:-45%!important;}
.profile-tech5academy{right:50%;margin-right:-105px;}
.tech5cademy_message:before{right:50%;margin-right:-20px;}
.close_idul{color:#555;top:-16px;left:0;}
}
/*]]>*/
</style>
5.إبحث عن الوسم </body> وأضف الكود التالي فوقه

<img class='profile-idul tech5academy' expr:alt='data:post.author' height='50' onclick='openIdulfitri()' src='//lh3.googleusercontent.com/-F9t5skf9yRE/AAAAAAAAAAI/AAAAAAAABBM/i-_M0z-X9SM/s512-c/photo.jpg' title='أنقر فوقي لأقول لك شيئا' width='50'/>
<div class='idul_layout animated flip' id='id_fitri'>
  <div class='tech5cademy_message'>
    <h2>&quot;مرحبا يا رمضان&quot;</h2>

    <p>
      <br/><br/> بصفتي  <b>

</b> مشرف في مدونة <b>أكاديمية التقنية</b>
 أهنؤكم وأقول لكم :
      <br/>
   <br>
الله يتقبل صيامك وقيامك ومبارك عليك الشهر 
</br>
</p>
    <img class='profile-tech5academy' expr:alt='data:post.author' height='200' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk4kmlnxl5BCC4mzSViFbVWXa3R3VYgmFxX_eJ05UK_TFTwjDlbNV7hWuLKM_pJQuOzDZ7a5rAgmxWoGBWxkyYrzepVuAPwpj77dPsNikyAOm8DFd4kcg8scC0YsSPX3eQgA16mGPNQ0LQ/w500-h498/%25D9%2585%25D8%25AD%25D9%2585%25D8%25AF.png' width='200'/>
    <div class='close_idul' onclick='closeIdulfitri()'>&amp;times</div>
  </div>
</div>
<script>
//<![CDATA[
function openIdulfitri(){var e=document.getElementById("id_fitri");"block"!==e.style.display?e.style.display="block":e.style.display="none"};
function closeIdulfitri(){var e=document.getElementById("id_fitri");"none"!==e.style.display?e.style.display="none":e.style.display="block"};
//]]>
</script>

6. إحفظ القالب

التغييرات الأساسية

  • غير إسم مدونتي بإسم مدونتك
  • غير روابط الصور
  • يمكنك الإستعانة بأداة الألوان لتغير لون الإضافة

2016/05/23

Phenomena خط عصري جديد بسبعة أوزان

Phenomena هو خط من الخطوط الحرة القائمة على الأشكال الهندسية المستديرة بطابع عصري وأنيق
Phenomena خط عصري جديد بسبعة أوزان
السلام عليكم ورحمة الله وبركاته
Phenomena هو خط من الخطوط الحرة القائمة على الأشكال الهندسية المستديرة بطابع عصري وأنيق ,صممها : Radomir Tinkov و Plamen Motev وتشمل سبعة أوزان مختلفة وأكثر من 500 حرف ورمز رسومي مع مجموعة واسع من اللغات (اللاتينية، السيريلية، البلغارية، وما إلى ذلك).
 نترككم مع المعاينة والتحميل

  • معاينة الخط

معاينة الخط phenomena
معاينة الخط phenomena


نرجو منكم دعمنا بتعليقاتكم ومشاركة الموضوع مع أصدقائكم
والسلام عليكم ورحمة الله وبركاته

2016/05/03

قالب N Light معرب

 قالب N Light معرب
 قالب N Light معرب

السلام عليكم ورحمة الله وبركاته,
 قالب N Light معرب- قالب بلوجر بلون أزرق غامق ألوانه متناسقة جميل وجذاب يتميز بسرعتة وهو كذالك صديق لمحركات البحث والسيو يتناسب مع المدونات التي تدون في مجال البلوجر ,مدونات التصميم,الشخصية...إلخ .يمكنك معاينته وتحميله عبر الأزرار التالية


مميزات القالب


  • متجاوب
  • صديق جداً جداً للسيو
  • هيدر جميل
  • إقرء المزيد مع صور مصغرة
  • رابط مختصر للتدوينة أسفل المواضيع
  • أداة التعريف بالمدونة
  • مربع بحث
  • ترقيم الصفحات
  • إضافات مثل صناديق الأكواد والأزرار...إلخ
  • والمزيد...

2016/05/01

إضافة صندوق تعريف الكاتب بشكل جميل ورائع

إضافة صندوق تعريف الكاتب بشكل جميل ورائع
إضافة صندوق تعريف الكاتب

السلام عليكم ورحمة الله وبركاته’في تدوينتنا هذه سنتعرف على كيفية إضافة صندوق تعريف الكاتب بشكل جميل ورائع لاشك أن الكل يعرف هذه الإضافة وقد سبق وأن طرحنا الجزء الأول "إضافة صندوق تعريف الكاتب الجزء الأول" ولكن هذا الجزء الثاني أحسن لأنه بسيط وسهل التركيب 
يمكنك معاينة الإضافة عبر الز التالي


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

إبحث عن الوسم ]]></b:skin> وأضف الكود التالي فوقه

/* AUTHOR Box Tech5academy.blogspot.com */
.tl-author{background:#eef1f3;padding:25px;color:#222222;margin:15px -25px 35px -25px;font-family: 'Droid Arabic Naskh', serif;}
.tl-author a {color:#e5192c;}
.tl-author p {font-size: 14px;}
.tl-author .tl-authAvatar img{width:100px;height:100px;overflow:hidden;;float: right;margin-left: 30px;}
.tl-author p.tl-authName{font-weight:700;font-size:18px;margin-bottom:7px;margin-top:-7px}
.tl-author .tl-authDesc{display:block;margin-top:3px}
.tl-author .fa {background:#777777;}
.tl-authDesc p{margin-bottom:20px}
.auth-profiles ul li {margin: 0;}
.tl-author .tl-authSocial{font-size:12px;margin-top:-8px;text-align:center}
.list-unstyled{padding-left:0;list-style:none;margin:2px}.list-inline li{display:inline-block;padding-right:5px;padding-left:5px;margin-bottom:10px}.tl-colored-social .fa,.tl-social-icons .fa{font-size:16px}.tl-colored-social .fa,.tl-social-icons .fa{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}.tl-colored-social .fa,.tl-social-icons .fa{width:35px;height:35px;line-height:35px;text-align:center;color:#FFF;color:rgba(255,255,255,0.8)}.tl-colored-social.icon-circle .fa,.tl-social-icons.icon-circle .fa{border-radius:50%}.tl-colored-social.icon-rounded .fa,.tl-social-icons.icon-rounded .fa{border-radius:2px}.tl-colored-social.icon-flat .fa,.tl-social-icons.icon-flat .fa{border-radius:0}.tl-colored-social .fa:hover,.tl-colored-social .fa:active,.tl-social-icons .fa:hover,.tl-social-icons .fa:active{color:#FFF}.tl-colored-social.icon-zoom .fa:hover,.tl-colored-social.icon-zoom .fa:active,.tl-social-icons.icon-zoom .fa:hover,.tl-social-icons.icon-zoom .fa:active,.tl-social-sidebar li:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}.tl-colored-social.icon-rotate .fa:hover,.tl-colored-social.icon-rotate .fa:active,.tl-social-icons.icon-rotate .fa:hover,.tl-social-icons.icon-rotate .fa:active{-webkit-transform:scale(1.1) rotate(360deg);-moz-transform:scale(1.1) rotate(360deg);-ms-transform:scale(1.1) rotate(360deg);-o-transform:scale(1.1) rotate(360deg);transform:scale(1.1) rotate(360deg)}.tl-colored-social .fa-dribbble,.tl-social-icons .fa-dribbble:hover,.tl-socialicons .tl-dribbble:hover .tl-sicon{background-color:#F46899}.tl-colored-social .fa-stumbleupon,.tl-social-icons .fa-stumbleupon:hover{background-color:#eb4924}.tl-colored-social .fa-reddit,.tl-social-icons .fa-reddit:hover{background-color:#5f99cf}.tl-colored-social .fa-facebook,.tl-social-icons .fa-facebook:hover,.tl-socialicons .tl-facebook:hover .tl-sicon{background-color:#3C599F}.tl-colored-social .fa-rss,.tl-social-icons .fa-rss:hover{background-color:#f26522}.tl-colored-social .fa-lastfm,.tl-social-icons .fa-lastfm:hover{background-color:#d51007}.tl-colored-social .fa-flickr,.tl-social-icons .fa-flickr:hover{background-color:#FF0084}.tl-colored-social .fa-instagram,.tl-social-icons .fa-instagram:hover,.tl-socialicons .tl-instagram:hover .tl-sicon{background-color:#685243}.tl-colored-social .fa-foursquare,.tl-social-icons .fa-foursquare:hover,.tl-socialicons .tl-foursquare:hover .tl-sicon{background-color:#0086BE}.tl-colored-social .fa-github,.tl-social-icons .fa-github:hover,.tl-socialicons .tl-github:hover .tl-sicon{background-color:#070709}.tl-colored-social .fa-google-plus,.tl-social-icons .fa-google-plus:hover,.tl-socialicons .tl-googleplus:hover .tl-sicon{background-color:#CF3D2E}.tl-colored-social .fa-instagram,.tl-social-icons .fa-instagram:hover{background-color:#A1755C}.tl-colored-social .fa-linkedin,.tl-social-icons .fa-linkedin:hover{background-color:#0085AE}.tl-colored-social .fa-pinterest,.tl-social-icons .fa-pinterest:hover,.tl-socialicons .tl-pinterest:hover .tl-sicon{background-color:#CC2127}.tl-colored-social .fa-twitter,.tl-social-icons .fa-twitter:hover,.tl-socialicons .tl-twitter:hover .tl-sicon{background-color:#32CCFE}.tl-colored-social .fa-vk,.tl-social-icons .fa-vk:hover,.tl-socialicons .tl-vk:hover .tl-sicon{background-color:#375474}.tl-colored-social .fa-soundcloud,.tl-social-icons .fa-soundcloud:hover,.tl-socialicons .tl-soundcloud:hover .tl-sicon{background-color:#FF4100}.tl-colored-social .fa-vine,.tl-social-icons .fa-vine:hover,.tl-socialicons .tl-vine:hover .tl-sicon{background-color:#35B57C}.tl-colored-social .fa-xing,.tl-social-icons .fa-xing:hover{background-color:#00555C}.tl-colored-social .fa-youtube,.tl-social-icons .fa-youtube:hover,.tl-socialicons .tl-youtube:hover .tl-sicon{background-color:#C52F30}.top-social ul li{margin:0;padding:0}div#socialicons-top{float:left}.top-social .list-unstyled{margin:0}
.tl-socialicons{text-align:center;overflow:auto;font-size:22px;margin:0 -8px}.tl-socialicons .tl-socialInner{position:relative;overflow:hidden;padding-left:8px}.tl-socialicons .tl-social{float:left;width:25%}.tl-socialicons .tl-sinn{padding-right:8px}.tl-socialicons .tl-sinn:hover .tl-sicon{color:#fff}.tl-socialicons .tl-sicon{display:block;padding:10px 0;}.tl-socialicons .tl-facebook .tl-sicon{color:#3B5998}.tl-socialicons .tl-googleplus .tl-sicon{color:#DD4B39}.tl-socialicons .tl-twitter .tl-sicon{color:#2AA9E0}.tl-socialicons .tl-instagram .tl-sicon{color:#685243}.tl-socialicons .tl-pinterest .tl-sicon{color:#CC2028}.tl-socialicons .tl-youtube .tl-sicon{color:#DE1829}.tl-socialicons .tl-vine .tl-sicon{color:#35B57C}.tl-socialicons .tl-soundcloud .tl-sicon{color:#FF4100}.tl-socialicons .tl-vk .tl-sicon{color:#45668e}.tl-socialicons .tl-foursquare .tl-sicon{color:#f94877}.tl-socialicons .tl-github .tl-sicon{color:#333333}.tl-socialicons .tl-dribbble .tl-sicon{color:#ea4c89}.tl-socialicons .tl-sicon{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease}.tl-socialicons .tl-scount{display:block;color:#222222;background:#F5F5F5;padding:5px 0;position:relative;margin-bottom:8px;font-size:14px;font-weight:600}.tl-socialicons .tl-scount:after{bottom:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(238,238,238,0);border-bottom-color:#FFFFFF;border-width:4px;margin-left:-4px}

ثم إبحث عن <div class='post-footer-line post-footer-line-1'> وأضف الكود التالي تحته (أسفله)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tl-author'>
<div class='tl-authAvatar'><img alt='Mohamed' class='avatarr' height='96' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiCGbQKPmtmialM1OWk2c_SAh2D4IrMaCmXuy758rrwBii1JjChSzHA_4N8vmVjsnEGbAbpZcGu__pqDlVfqkhUy9EWlTpX9vbVd842j_RDe1ErIXrb4_BuS-Tw5Txujxr4QqRz7si1dmK/s1600/M.png' width='96'/>
</div>
<div class='tl-authDesc'>
<a href='#'><p class='tl-authName'>محمد</p></a>
<p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة&#1548; لقد تم توليد هذا النص من مولد النص العربى&#1548; حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق</p>
<div class='tl-authSocial'>
<div class='auth-profiles'>
<ul class='tl-social-icons icon-flat list-unstyled list-inline'>
<li>
<a href='#'><i class='fa fa-twitter'/></a></li>
<li>
<a href='#'><i class='fa fa-facebook'/></a></li>
<li>
<a href='#'><i class='fa fa-google-plus'/></a></li>
<li>
<a href='#'><i class='fa fa-pinterest'/></a></li>
<li>
<a href='#'><i class='fa fa-github'/></a></li>
<li>
<a href='#'><i class='fa fa-dribbble'/></a></li>
</ul></div></div>
</div>
</div></b:if>

وأخيرا غير بعض الجمل الأساسية مثل الإسم و الوصف ...

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

2016/04/09

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

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

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


إبحث عن </head> وأضف الكود التالي فوقه
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

ثانيا إبحث عن ]]></b:skin> وأضف الكود التالي فوقه

/* صندوق المتابعة والإنضمام للمدونة  */
#HTML68 .sosmedarl-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.sosmedarl-img{position:relative;max-height:140px;overflow:hidden}
.sosmedarl-img img {max-width:100%;width:100%;transition:all .6s;}
.sosmedarl-img:hover img{transform:scale(1.2) rotate(-10deg)}
.sosmedarl-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}
.sosmedarl-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}
.sosmedarl-float{text-align:center;display:table;width:100%;height:100%}
.sosmedarl-float a{background:transparent;color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:90%;text-transform:uppercase;vertical-align:middle;border:2px solid #fefefe;border-radius:3px;transition:all .3s}
.sosmedarl-float:hover a{background:#e74c3c;color:#fff;border-color:transparent;}
.sosmedarl-float a i{font-weight:normal;margin:0 0 0 5px}
.sosmedarl-wrpicon{display:block;margin:15px auto;position:relative;}
.sosmedarl-wrpicon .extender{width:100%;display:block;}
.extender{text-align:center;font-size:16px}
.extender .sosmedarl-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}
.extender .sosmedarl-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;padding:0 12px;line-height:32px;border-radius:3px;font-size:12px;width:100%;}
.extender .sosmedarl-icon i{font-family:fontawesome;margin:0 0 0 3px}
.sosmedarl-icon.fbl a{background:#3b5998}
.sosmedarl-icon.twitt a{background:#19bfe5}
.sosmedarl-icon.crcl a{background:#d64136}
.sosmedarl-icon.fbl a:hover,.sosmedarl-icon.twitt a:hover,.sosmedarl-icon.crcl a:hover{background:#404040}
.extender .sosmedarl-icon:hover a,.extender .sosmedarl-icon a:hover{color:#fff;}
.sosmedarl-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.sosmedarl-info p{margin:5px 0}
.sosmedarl-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.sosmedarl-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.sosmedarl-info h4:before,.sosmedarl-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.08);}
.sosmedarl-info h4:before {margin-right:-50%;text-align:left;}

ثالثا إبحث عن <b:section class='sidebar' id='sidebar' preferred='yes'> وأضف الكود التالي أسفله (تحته)

<b:widget id='HTML68' locked='false' title='Sosial Media' type='HTML' visible='true'>
        <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<div class='sidebar_about_author'>
<div class='inner_wrapper'>
<div class='sosmedarl-img'>
<img alt='إسم مدونك' class='img-responsive' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAyFTgxq2Frerc-kHIwDsWfuTcoX-_e9SLBhyphenhyphenQ6Vz6w9Q0EVQXf0HHibNBozsqKMYSXYO-JSW5FL52l75bVvTTgecOg6KVUjamrY1qrtDs2uXmvsLfFQd7xMjnpbFM2JzHcWGuLzZBBdVK/s1600/x-theme.png' title='Judul Blog' width='300'/>
<div class='aboutfloat-img'><span class='sosmedarl-float'><a href='#' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-user'/> Join Our Site</a></span></div>
</div>
</div>
<div class='sosmedarl-info'>
  <h4><span>إسم مدونتك</span></h4>
<p>وصف قصير للمدونة</p>
</div>
<div class='sosmedarl-wrpicon'>
<ul class='extender'>
<li class='sosmedarl-icon fbl'><a href='#' target='_blank' title='تابع أخر أخبارنا على فيس بوك'><i class='fa fa-facebook fa-fw'/>أعجبني</a></li>
<li class='sosmedarl-icon twitt'><a href='#' target='_blank' title='تابعنا على توتر'><i class='fa fa-twitter fa-fw'/>تابعني</a></li>
<li class='sosmedarl-icon crcl'><a href='#' rel='nofollow' target='_blank' title='أضفنا إلى دوائرك في جوجل بلس'><i class='fa fa-google-plus fa-fw'/>إنضمام</a></li>
</ul>
</div>
</div>
</div>
</b:includable>
</b:widget>
مع مراعاة تغيير الأسماء والروابط المشار إليها
ثم إحفظ القالب ومبرك عليك الإضافة الجديدة
هكذا يكون درسنا قد إنتهى إلى تدوينة جديدة إنشاء الله


2016/04/07

اضافة شريط متحرك يضم اخر اخبار المدونه مع صور مصغرة

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


  1. من لوحة تحكم المدونة
  2. إضغط على تخطيط في العمود الأيمن
  3. ثم ضع الكود التالي في أداة HTML/Javascript جديدة فوق رسائل المدونة الإلكترونية


<style type='text/css'>
/*News Ticker Tech5academy*/
.ticker-wrap{display:block;text-align:center;margin:20px auto 0 auto;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-right:6px solid #03A9F4}
.ticker-wrap>span{display:inline-block;background:#fefefe;padding:0;font-size:11px}
.ticker-wrap>span>a{color:#222;text-decoration:none}
#ticker{height:45px;overflow:hidden;background:#fefefe;text-align:right}
#ticker ul{padding:0;margin:0;list-style:none}
#ticker ul li{height:45px;white-space:nowrap}
#ticker ul li img{float:right;width:35px;height:35px;margin:5px}
#ticker ul li h3{font-family: droid arabic kufi,sans-serif;margin:0;font-size:14px;font-family: droid arabic naskh;}
#ticker ul li h3 a{color:#333;text-decoration:none;line-height:25px!important}
#ticker ul li .tickermeta{font-family: droid arabic naskh,sans-serif;font-size:12px;line-height:20px!important;color:#999}
</style>
<div class='ticker-wrap' data-domain='tech5academy.blogspot.com'>

<div id='ticker'>
</div>
</div>

<script type='text/javascript'>
//<![CDATA[
// News ticker Tech5academy
function getauthor(t){for(var e=0;e<t.length;e++)var i=t[e].name.$t;return i}function getmeta(t){var e=[];e[1]="يناير",e[2]="فبراير",e[3]="مارس",e[4]="ابريل",e[5]="مايو",e[6]="يونيو",e[7]="يوليو",e[8]="اغسطس",e[9]="سبتمبر",e[10]="اكتوبر",e[11]="نوفمبر",e[12]="ديسمبر";var i=t.substring(0,4),a=t.substring(5,7),n=t.substring(8,10),r=e[parseInt(a,10)]+" "+n+" "+i;return r}function ACADEMYTicker(t){var e=document.querySelector("#ticker"),i=t.feed.entry,a="<ul id='ticket-wrapper-inner'>";if(i){for(var n=0;n<i.length;n++){for(var r=i[n],s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){var l=r.link[s].href;break}try{var o='<img src="'+r.media$thumbnail.url+'"/>'}catch(t){var o=""}var u=r.title.$t,c=getauthor(r.author),d=getmeta(r.published.$t);a+="<li>"+o+'<h3><a href="'+l+'">'+u+'</a></h3><div class="tickermeta"><span>'+c+"</span> - <span>"+d+"</span></div></li>"}a+="</ul>",e.innerHTML=a}$("#ticker").vTicker()}!function(t){var e={speed:700,pause:4e3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1},i={moveUp:function(t,e){i.animate(t,e,"up")},moveDown:function(t,e){i.animate(t,e,"down")},animate:function(e,i,a){var n=e.itemHeight,r=e.options,s=e.element,l=s.children("ul"),o="up"===a?"li:first":"li:last";s.trigger("vticker.beforeTick");var u=l.children(o).clone(!0);if(0<r.height&&(n=l.children("li:first").height()),n+=r.margin+2*r.padding,"down"===a&&l.css("top","-"+n+"px").prepend(u),i&&i.animate){if(e.animating)return;e.animating=!0,l.animate("up"===a?{top:"-="+n+"px"}:{top:0},r.speed,function(){t(l).children(o).remove(),t(l).css("top","0px"),e.animating=!1,s.trigger("vticker.afterTick")})}else l.children(o).remove(),l.css("top","0px"),s.trigger("vticker.afterTick");"up"===a&&u.appendTo(l)},nextUsePause:function(){var e=t(this).data("state"),i=e.options;e.isPaused||2>e.itemCount||a.next.call(this,{animate:i.animate})},startInterval:function(){var e=t(this).data("state"),a=this;e.intervalId=setInterval(function(){i.nextUsePause.call(a)},e.options.pause)},stopInterval:function(){var e=t(this).data("state");e&&(e.intervalId&&clearInterval(e.intervalId),e.intervalId=void 0)},restartInterval:function(){i.stopInterval.call(this),i.startInterval.call(this)}},a={init:function(n){a.stop.call(this);var r=jQuery.extend({},e);n=t.extend(r,n);var r=t(this),s={itemCount:r.children("ul").children("li").length,itemHeight:0,itemMargin:0,element:r,animating:!1,options:n,isPaused:n.startPaused?!0:!1,pausedByCode:!1};t(this).data("state",s),r.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:n.margin,padding:n.padding}),isNaN(n.height)||0===n.height?(r.children("ul").children("li").each(function(){var e=t(this);e.height()>s.itemHeight&&(s.itemHeight=e.height())}),r.children("ul").children("li").each(function(){t(this).height(s.itemHeight)}),r.height((s.itemHeight+(n.margin+2*n.padding))*n.showItems+n.margin)):r.height(n.height);var l=this;n.startPaused||i.startInterval.call(l),n.mousePause&&r.bind("mouseenter",function(){!0!==s.isPaused&&(s.pausedByCode=!0,i.stopInterval.call(l),a.pause.call(l,!0))}).bind("mouseleave",function(){(!0!==s.isPaused||s.pausedByCode)&&(s.pausedByCode=!1,a.pause.call(l,!1),i.startInterval.call(l))})},pause:function(e){var i=t(this).data("state");if(i){if(2>i.itemCount)return!1;i.isPaused=e,i=i.element,e?(t(this).addClass("paused"),i.trigger("vticker.pause")):(t(this).removeClass("paused"),i.trigger("vticker.resume"))}},next:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveUp(a,e)}},prev:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveDown(a,e)}},stop:function(){t(this).data("state")&&i.stopInterval.call(this)},remove:function(){var e=t(this).data("state");e&&(i.stopInterval.call(this),e=e.element,e.unbind(),e.remove())}};t.fn.vTicker=function(e){return a[e]?a[e].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void t.error("Method "+e+" does not exist on jQuery.vTicker"):a.init.apply(this,arguments)}}(jQuery),$(function(){var t=document.createElement("script");t.src="http://"+$(".ticker-wrap").data("domain")+"/feeds/posts/summary?alt=json&callback=ACADEMYTicker",t.type="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)});
//]]>
</script>

التغييرات الأساسية :
غير رابط مدوني براط مدونتك مع الحفاظ على عدم  إضافة أي نوع من البروتوكل مثل http و https
 ثم إضغط على حفض ومبروك عليك الإضافة.

إن لم تشتغل عندك أو تريد وضع الأكواد داخل القالب
أضف الكود المحدد باللون الأخضر فوق ]]></b:skin>
أضف الكود المحدد باللون الأزرق تحت <div id='main-wrapper'>
أضف الكود المحدد باللون الأصفر فوق </body>

2016/04/05

إزالة السكرول بار الجانبي الموجود في صندوق تعليقات بلوجر

إزالة السكرول بار الجانبي الموجود في صندوق تعليقات بلوجر

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

من لوحة تحكم المدونة إضغط على "قالب" ثم "تحرير HTML" ثم إبحث بإستعمال ctrl+f عن الوسم </style> ثم ضع الكود التالي فوقه

#comment-editor{height:250px!important}

إنه كود بسيط ولكنه سيحل المشكل
موعدنا إنشاء الله سيكون في تدوينا أخرى حصرية

2016/04/03

Mockup غلاف مجلة رائع بصيغة PSD

Mockup غلاف مجلة رائع بصيغة PSD
Mockup غلاف مجلة رائع بصيغة PSD

بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين سيدنا محمد وعلى آله وصحبه أجمعين

في تدونتنا اليوم حول التصميم نقدم Mockup غلاف مجلة رائع مفتوح بصيغة PSD عالي الجودة بمقاس A4 يمكنك عرض أعمالك عليه بكل سهولة وطبعة أيضا يمكنك معاينته بجودة عالية وتحميله مجانا عب الأزرار التالية


معاينة اللير
اللير

 هل أعجبك الموك أب شاركنا رأيك 

2016/03/24

إضافة أداة إختصار رابط التدوينة من Goo.gl أسفل المشاركات

إضافة أداة إختصار رابط التدوينة من Goo.gl أسفل المشاركات
إضافة أداة إختصار رابط التدوينة من Goo.gl أسفل المشاركات

السلام عليكم ورحمة الله وبراكاته,
في تدوينتنا هاته سنشرح كيفية إضافة أداة إختصار رابط التدوينة من Goo.gl والتي ستكون أسفل المشاركات وهي عبارة عن زر  تضغط عليه ثم يعطيك نافدة منبثقة مع الرابط المختصر من موقع Goo.gl على هذا الشكل http://goo.gl/uwQIL0 مثلا  و لكيفية التركيب تابع الدرس

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

1. إبحث عن  </head> بإستعمال ctrl+F ثم أضف الكود التالي فوقه


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.shorturl{font-size:100%;font-family:droid arabic kufi;font-weight:bold;color:#666!important}
.shorturl a.url{text-decoration:none!important;color:#fff!important;display:inline-block;margin:0 0 0 5px;border-radius:3px;background:#03A9F4;box-shadow:0 1px 0 rgba(0,0,0,.08);text-shadow:none;line-height:23px;padding:5px 5px 5px 5px;transition:all 400ms ease-in-out}
.loading-shorturl{display:none}
.shorturl a.url:hover{color:#0000;background:#607D8B;}
.shorturl a.url:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}
.clear{clear:both}
</style>
</b:if>

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



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/shortenurl.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>

3. وأخيرا إبحث عن <data:post.body/> ثم أضف الكود التالي فوقها


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span class='shorturl'>
رابط مختصر للتدوينة:<a class='url' expr:onclick='&quot;shortenUrl(this, &amp;#39;&quot; + data:post.url + &quot;&amp;#39;, &amp;#39;googl&amp;#39;);return false;&quot;' href='javascript:void(0)' title='Click to get short URL'>أحصل على الرابط</a></span><span class='loading-shorturl'><img alt='loading short url' src='data:image/gif;base64,R0lGODlhEAALAPQAAP///wAAANra2tDQ0Orq6gYGBgAAAC4uLoKCgmBgYLq6uiIiIkpKSoqKimRkZL6+viYmJgQEBE5OTubm5tjY2PT09Dg4ONzc3PLy8ra2tqCgoMrKyu7u7gAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCwAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7AAAAAAAAAAAA'/></span>
<div class='clear'/>
</b:if>

والسلام عليكم ورحمة الله وبركاته إلى درس أخر متميز بإذن الله

2016/03/14

قالب FLASHBACK معرب ومطور

قالب FLASHBACK معرب
قالب FLASHBACK معرب ومطور

قَالب FLASHBACK معرب- قالب أسود بسيط  بألوان متناسقة يتميز بسرعة التحميل يتناسب مع المدونات الشخصية والربحية أيضاً يمكنك تحميل القالب ومعاينة عبر الأزرار التالية


المميزات

  • متجاوب
  • سريع التحميل
  • متوافق مع سيو
  • قائمة أفقية مع أزرار التواصل الإجتماعي
  • ثلاثة أعمدة في الفوتر
  • قائمة بسيطة في الفوتر
  • محرك بحث متخصص
  • أزرار المشاركة
  • زر الصعود إلى الأعلى
  • والمزيد...