ويب تيك

خدماتى الذى أقدمها على موقع خمسات

للحصول عليها


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

  • لا تنسى حفض نسخة للقالب 


  1. اول شيئ نقوم به وهو التوجه الى :
  2. لوحة التحكم >> قالب>> تحرير html 
  3. قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)
]]></b:skin>
واضف الكود التالي فوقه مباشرة


/*============================*/


*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.fb-cont {
  overflow: hidden;
  position: relative;
  margin: 100px auto;
  width: 800px;
  padding: 75px;
  padding-bottom: 140px;
  background: #fff;
}
.fb-cont__inner {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.fb-cont__inner:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90%;
  height: 4px;
  margin-top: -2px;
  background: rgba(200, 206, 211, 0.5);
  border-radius: 2px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.fb-cont__drag-cont {
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 0;
  width: 574px;
  height: 100%;
  margin-left: -287px;
  pointer-events: none;
  -webkit-transform: translate3d(50%, 0, 0);
          transform: translate3d(50%, 0, 0);
}
.fb-heading {
  margin: 0 auto 60px;
  font-size: 30px;
  text-align: center;
  color: #737b7b;
}
.fb-emote {
  z-index: 1;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 76px;
  height: 76px;
  cursor: pointer;
}
.fb-emote svg {
  display: block;
  margin-bottom: 15px;
  width: 100%;
  height: 100%;
  background: #c8ced3;
  border-radius: 50%;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}
.fb-emote.s--active svg {
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}
.fb-emote__caption {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #c8ced3;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.fb-emote.s--active .fb-emote__caption {
  color: #655e53;
  -webkit-transform: translateY(15px);
          transform: translateY(15px);
}
.fb-emote__eye {
  stroke: none;
  fill: #fff;
}
.fb-emote__smile {
  stroke: #fff;
  stroke-width: 10;
  stroke-linecap: round;
  fill: none;
}
.fb-active-emote {
  position: absolute;
  left: 0;
  top: 50%;
  width: 110px;
  height: 110px;
  margin-left: -55px;
  margin-top: -55px;
  background: #ffd68c;
  border-radius: 50%;
}
.fb-active-emote svg {
  width: 100%;
  height: 100%;
}
.fb-active-emote__eye {
  stroke: none;
  fill: #655e53;
}
.fb-active-emote__smile {
  stroke: #655e53;
  stroke-width: 10;
  stroke-linecap: round;
  fill: none;
}
.icon-link {
  position: absolute;
  left: 5px;
  bottom: 5px;
  width: 32px;
}
.icon-link img {
  width: 100%;
  vertical-align: top;
}
.icon-link--twitter {
  left: auto;
  right: 5px;
}
 
 ضع فوق

</body>
الكود التالي

<script type='text/javascript'>
function $$(selector, context) {
var context = context || document;
var elements = context.querySelectorAll(selector);
var nodesArr = [].slice.call(elements);
return nodesArr.length === 1 ? nodesArr[0] : nodesArr;
};
var $emotesArr = $$('.fb-emote');
var numOfEmotes = $emotesArr.length;
var $dragCont = $$('.fb-cont__drag-cont');
var $activeEmote = $$('.fb-active-emote');
var $leftEye = $$('.fb-active-emote__eye--left');
var $rightEye = $$('.fb-active-emote__eye--right');
var $smile = $$('.fb-active-emote__smile');
var emoteColors = {
terrible: '#f8b696',
bad: '#f9c686',
default: '#ffd68c'
}
var animTime = 0.5;
$emotesArr.forEach(function($emote, i) {
var progressStep = i / (numOfEmotes - 1);
$emote.dataset.progress = progressStep;
$emote.addEventListener('click', function() {
var progressTo = +this.dataset.progress;
var type = this.dataset.emote;
var $target = document.querySelector('#fb-emote-' + type);
var $lEye = $target.querySelector('.fb-emote__eye--left');
var $rEye = $target.querySelector('.fb-emote__eye--right');
var leftEyeTargetD = $lEye.getAttribute('d');
var rightEyeTargetD = $rEye.getAttribute('d');
var smileTargetD = $target.querySelector('.fb-emote__smile').getAttribute('d');
var bgColor = emoteColors[type];
if (!bgColor) bgColor = emoteColors.default;
$$('.fb-emote.s--active').classList.remove('s--active');
this.classList.add('s--active');
TweenMax.to($activeEmote, animTime, {backgroundColor: bgColor});
TweenMax.to($dragCont, animTime, {x: progressTo * 100 + '%'});
TweenMax.to($leftEye, animTime, {morphSVG: $lEye});
TweenMax.to($rightEye, animTime, {morphSVG: $rEye});
TweenMax.to($smile, animTime, {attr: {d: smileTargetD}});
});
});</script>
واخيرا ابحث عن هذا الكود ستجد اكثر من واحد الاخير هو المقصود 
<data:post.body/> 
الان اضف الكود التالي  :

  1. ان اردت الاضافة تكون فوق المقال الضفه فوق الكود وانا لا انصحك بذلك
  2. وان اردت الاضافة في اسفل المقال اضفه تحت الكود السابق 

<svg class="fb-emotes-svg" style="display: none;">
  <symbol id="fb-emote-terrible" data-emote="terrible" viewBox="0 0 100 100">
    <path class="fb-emote__eye fb-emote__eye--left" d="M32,25 l10,10 a10,10 0 0,1 -20,0 a10,10 0 0,1 10,-10"/>
    <path class="fb-emote__eye fb-emote__eye--right" d="M58,35 l10,-10 a10,10 0 0,1 0,20 a10,10 0 0,1 -10,-10"/>
    <path class="fb-emote__smile" d="M30,68 q20,-13 40,0 M30,68 q20,-13 40,0"/>
  </symbol>
  <symbol id="fb-emote-bad" data-emote="bad" viewBox="0 0 100 100">
    <path class="fb-emote__eye fb-emote__eye--left" d="M22,35 l10,-10 a10,10 0 0,1 0,20 a10,10 0 0,1 -10,-10"/>
    <path class="fb-emote__eye fb-emote__eye--right" d="M68,25 l10,10 a10,10 0 0,1 -20,0 a10,10 0 0,1 10,-10"/>
    <path class="fb-emote__smile" d="M30,68 q20,-10 40,0 M30,68 q20,-10 40,0"/>
  </symbol>
  <symbol id="fb-emote-okay" viewBox="0 0 100 100">
    <path class="fb-emote__eye fb-emote__eye--left" d="M32,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
    <path class="fb-emote__eye fb-emote__eye--right" d="M68,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
    <path class="fb-emote__smile" d="M35,73 q20,-4 35,-8 M35,73 q20,-4 35,-8"/>
  </symbol>
  <symbol id="fb-emote-good" viewBox="0 0 100 100">
    <path class="fb-emote__eye fb-emote__eye--left" d="M32,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
    <path class="fb-emote__eye fb-emote__eye--right" d="M68,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
    <path class="fb-emote__smile" d="M30,68 q20,10 40,0 M30,68 q20,10 40,0"/>
  </symbol>
  <symbol id="fb-emote-great" viewBox="0 0 100 100">
    <path class="fb-emote__eye fb-emote__eye--left" d="M32,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
    <path class="fb-emote__eye fb-emote__eye--right" d="M68,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
    <path class="fb-emote__smile" d="M30,68 q20,15 40,0 M30,68 q20,0 40,0"/>
  </symbol>
</svg>
<div class="fb-cont">
  <div class="fb-heading">كيفية المساعدة التي حصلت عليها؟
</div>
  <div class="fb-cont__inner">
    <div class="fb-emote" data-emote="terrible">
      <svg><use xlink:href="#fb-emote-terrible"/></svg>
      <p class="fb-emote__caption">فظيع</p>
    </div>
    <div class="fb-emote" data-emote="bad">
      <svg><use xlink:href="#fb-emote-bad"/></svg>
      <p class="fb-emote__caption">سيئة</p>
    </div>
    <div class="fb-emote s--active" data-emote="okay">
      <svg><use xlink:href="#fb-emote-okay"/></svg>
      <p class="fb-emote__caption">حسنا</p>
    </div>
    <div class="fb-emote" data-emote="good">
      <svg><use xlink:href="#fb-emote-good"/></svg>
      <p class="fb-emote__caption">جيد</p>
    </div>
    <div class="fb-emote" data-emote="great">
      <svg><use xlink:href="#fb-emote-great"/></svg>
      <p class="fb-emote__caption">عظيم</p>
    </div>
    <div class="fb-cont__drag-cont">
      <div class="fb-active-emote">
        <svg viewBox="0 0 100 100">
          <path class="fb-active-emote__eye fb-active-emote__eye--left" d="M32,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
          <path class="fb-active-emote__eye fb-active-emote__eye--right" d="M68,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
          <path class="fb-active-emote__smile" d="M35,73 q20,-4 35,-8 M35,73 q20,-4 35,-8"/>
        </svg>
      </div>
    </div>
  </div>
</div> 
قم بحفض القالب 
الان مبروك عليك الاضافة اي مشكل لا تتردد التعليقات بيننا 

1
إقرأ المقال




كيف تكون مدون ناجح؟

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

هل تريد أن تتعلم كيف تبني مدونة ناجحة وتكون مدونا ناجحا؟ تابع معي إذن!



النصيحة الأولى : اختر مجالا تحبه وتبرع فيه

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

النصيحة الثانية : لا تجعل الربح هدفك الأول 

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

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


النصيحة الثالثة : أضف لمستك الخاصة وتميز عن المدونات الأخرى


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

  


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

من لوحة التحكم >> قالب>> تحرير html
قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)

]]></b:skin>


 واضف الكود التالي فوقه مباشرة


.post blockquote {
    background: rgb(49, 49, 49) !important;
    border-radius: 4px !important;
    border: 1px solid rgb(221, 221, 221) !important;
    box-sizing: border-box;
    clear: both !important;
    color: rgb(248, 248, 248) !important;
    direction: ltr !important;
    font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif !important;
    font-size: 12px !important;
    font-stretch: normal !important;
    line-height: 1.6em !important;
    margin: 0px 1.15385em;
    max-height: 400px !important;
    outline: 0px;
    overflow-x: auto !important;
    padding: 0px 10px 10px !important;
    position: relative !important;
    quotes: "" "";
    text-align: left !important;
    vertical-align: baseline;
    z-index: 50 !important;}
 بعدها قم بحفظ القالب ولتفعيله ادهب مشاركة جديدة اتبع الصورة


ولاي استفسار باب التعليق مفتوح

4
إقرأ المقال



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

كيفية اضافة هذه الاداه الى مدوناتكم
من لوحة التحكم >> قالب>> تحرير html
قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)

 ]]></b:skin>

 واضف الكود التالي فوقه مباشرة
body {
  margin: 0 0 0 0;
  color: darkGray;
  background-color: rgba(20, 20, 20, .97);
  font-family: 'Source Sans Pro', sans-serif;
  text-rendering: optimizeLegibility;
}
.grid-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  height: auto;
  overflow: hidden;
}
.floatLeft {
  float: left;
}
.floatRight {
  float: right;
}
.grid-item {
  position: relative;
  overflow: hidden;
  margin: 0.2%;
  height: 0px;
}
.grid-item:hover {
  transform: scale(0.97);
  cursor: pointer;
}
.grid-item:active {
  transform: scale(0.93);
  cursor: pointer;
}
.medium {
  width: 19.6%;
  padding-bottom: 19.6%;
}
.wide {
  width: 39.6%;
  padding-bottom: 19.6%;
}
.large {
  width: 39.6%;
  padding-bottom: 39.55%;
}
.grid-item img {
  overflow: hidden;
  width: 105%;
}
.grid-item .info {
  overflow: hidden;
  position: absolute;
  background-color: rgba(15, 15, 15, 0.9);
  bottom: 0;
  height: auto;
  left: 0;
  width: 100%;
  font-size: 100%;
  transition: all 0.25s ease-in-out;
}
.grid-item .show-info {
  height: 100%;
}
.grid-item .hide-info {
  height: 30%;
  max-height: 60px;
}
.grid-item .title {
  margin-top: 5px;
  font-size: 15px;
  padding: 1%;
}
.grid-item .date {
  padding: 1%;
  padding-top: 5px;
  font-size: 13px;
}
.grid-item .description {
  margin-top: 15px;
  font-size: 13px;
  padding: 1%;
}
.grid-item button {
  visibility: collapse;
  text-align: center;
  background: #0096a0;
  color: white;
  position: absolute;
  text-decoration: none;
  border: none;
  left: 50%;
  right: 50%;
  bottom: 25px;
  margin: -20px -50px;
  width: 100px;
  height: 30px;
  transition: background-color 0.1s;
  transition: height 0.1s;
}
.grid-item button:hover {
  background-color: rgba(30, 30, 30, 100);
  cursor: pointer;
  transition: background-color 0.1s;
}
.grid-item button:active {
  background-color: rgba(20, 20, 20, 100);
  cursor: pointer;
  transition: background-color 0.1s;
}
@media all and (max-width:680px) {
  .medium {
    width: 99.3%;
    padding-bottom: 49.3%;
    margin-bottom: 1%;
  }
  .wide {
    width: 99.3%;
    padding-bottom: 49.3%;
    margin-bottom: 1%;
  }
  .large {
    width: 99.3%;
    padding-bottom: 49.3%;
    margin-bottom: 1%;
  }
}


 ضع فوق

  </body>

 الكود التالي 


 <script type='text/javascript'>
//<![CDATA[
'use strict';
$(document).ready(function () {
    var zindex = 10;
    $('.grid-item').click(function () {
        var clickedElment = $(this);
        $('.grid-item').find('> .info').removeClass('show-info');
        $('.grid-item').find('> .info').addClass('hide-info');
        $('.grid-item').find('> .info button').css('visibility', 'collapse');
        if (clickedElment.find('> .info').hasClass('hide-info')) {
            clickedElment.find('> .info').removeClass('hide-info');
            clickedElment.find('> .info').addClass('show-info');
            ;
            clickedElment.find('> .info button').css('visibility', 'visible');
        }
    });
});
//]]>
</script>

 قم بحفظ العمل

 توجه إلى التخطيط وأضف أداة Html/JavaScript ثم ضع بها الكود التالي

<div class="grid-item large floatRight">
    <img src="http://previewcf.turbosquid.com/Preview/2014/05/15__23_36_27/4.jpge6f857fa-d0a7-4085-abd5-63992f3de86dLarge.jpg" />
    <div class="info hide-info">
      <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي ويب تيك درسنا اليوم وهو اضافة اداة مميزة وجميلة ويكنكم وضعها في الصفحة الرئيسية للمدونة تضهر للزائر مهاراتك.ولكي لااطيل عليكم نبدء في الشرح وللعلم فهي سهلة التركيب افتح قالب اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي...</div>
 <a href="#"> <button>اقرا المزيد</button>
    </div>
  </div>
  <div class="grid-item wide floatRight">
    <img src="http://tf3dm.com/imgd/l48919-spaceship-98075.jpg" />
    <div class="info hide-info">
      <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي ويب تيك درسنا اليوم وهو اضافة اداة مميزة وجميلة ويكنكم وضعها في الصفحة الرئيسية للمدونة تضهر للزائر مهاراتك.ولكي لااطيل عليكم نبدء في الشرح وللعلم فهي سهلة التركيب افتح قالب اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي...</div>
 <a href="#"> <button>اقرا المزيد</button>
    </div>
  </div>
  <div class="grid-item medium floatRight">
    <img src="https://cdn.designmaz.net/wp-content/uploads/2014/01/Dark-UI-Kit.jpg" />
    <div class="info hide-info">
      <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي ويب تيك درسنا اليوم وهو اضافة اداة مميزة وجميلة ويكنكم وضعها في الصفحة الرئيسية للمدونة تضهر للزائر مهاراتك.ولكي لااطيل عليكم نبدء في الشرح وللعلم فهي سهلة التركيب افتح قالب اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي...</div>
 <a href="#"> <button>اقرا المزيد</button>
    </div>
  </div>
  <div class="grid-item medium floatRight">
    <img src="http://core0.staticworld.net/images/article/2015/05/windows10musicapp-100587050-orig.png" />
    <div class="info hide-info">
     <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي ويب تيك درسنا اليوم وهو اضافة اداة مميزة وجميلة ويكنكم وضعها في الصفحة الرئيسية للمدونة تضهر للزائر مهاراتك.ولكي لااطيل عليكم نبدء في الشرح وللعلم فهي سهلة التركيب افتح قالب اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي...</div>
 <a href="#"> <button>اقرا المزيد</button>
    </div>
  </div>
  <div class="grid-item medium floatRight">
    <img src="http://www.wp7connect.com/wp-content/uploads/2013/01/conceptsurfacephone1.jpg" />
    <div class="info hide-info">
      <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي ويب تيك درسنا اليوم وهو اضافة اداة مميزة وجميلة ويكنكم وضعها في الصفحة الرئيسية للمدونة تضهر للزائر مهاراتك.ولكي لااطيل عليكم نبدء في الشرح وللعلم فهي سهلة التركيب افتح قالب اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي...</div>
 <a href="#"><button>اقرا المزيد</button>
    </div>
  </div>
  <div class="grid-item medium floatRight">
    <img src="https://img-new.cgtrader.com/items/117013/large_werewolf_3d_model_fbx_9a431241-46fa-4be8-a86f-3095f591306a.png" />
    <div class="info hide-info">
     <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي ويب تيك درسنا اليوم وهو اضافة اداة مميزة وجميلة ويكنكم وضعها في الصفحة الرئيسية للمدونة تضهر للزائر مهاراتك.ولكي لااطيل عليكم نبدء في الشرح وللعلم فهي سهلة التركيب افتح قالب اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي...</div>
 <a href="#"> <button>اقرا المزيد</button>
    </div>
  </div>
ملاحظة : قم بتغير ما يلي
الصورة
العنوان
الوصف
رابط الموضوع

واخيرا احفض الاداة ومبروك عليك الاضافة 
1
إقرأ المقال



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

اولا توجه الى قالب المدونة وابحث عن الكود التالي
]]></b:skin>
واضف فوقها الكود التالي
#oi-web-live {border: 5px solid #fff; padding: 10px 10px;background: #29567D url(http://3.bp.blogspot.com/-JTpuU7eTzso/VEiGa00vQ3I/AAAAAAAADTU/97Fv4hIrXgg/s1600/header-bg.png) no-repeat left bottom; color: #fff; position: relative; overflow: hidden; }.right-live {position: relative; float: right; }.right-live img { width: 118px;}.left-live { text-align: center; overflow: hidden; position: absolute; right: 0; font-size: 17px; left: 0; width: 550px; top: 40px; margin: 0 auto; display: block; font-weight: normal;font-size: 16px;}.time-live { float: left; margin-top: 10px;text-align: center; z-index: 99999999; font-size: 18px; position: relative; width: 129px; font-family: "Ta3alamFont"; }span#saaa { font-size: 37px; margin-right: 3px; margin-left: 21px; line-height: 46px; }.left-live a:hover { background: #F74047; }.left-live a { margin-right: 10px;margin-top: 6px; border-radius: 3px; transition: 0.2s; color: #fff; display: inline-block; padding: 8px; border: 2px solid #F74047; font-size: 16px; font-weight: normal;}
 وهذا هو كود html يمكنك اضافته في اي مكان مثلا في الهيدر فوق الفوتر في اداة داخل التخطيط ...
 <div id='oi-web-live'>
<div class='right-live wow bounceIn animated'>
<img src='https://lh3.googleusercontent.com/-EQrOkedTg4U/VyfYeI0G50I/AAAAAAAAGPI/OzfTkwLXLG48uV9UFqmz3qU05pwFJkmSACCo/s256/streaming.png'/></div>
<div class='left-live wow bounceInUp animated'>
<span id='ssgf1'><i class='fa fa-microphone'/>
البث المباشرة مع يونس ورضاوي للإجابة على تساؤلاتكم التقنية كل خميس فقط. على مدونة ويب تيك</span><a href='#'>قريبا.... <i class='fa fa-spinner fa-spin'/></a></div>
<div class='time-live wow bounceInLeft animated'><i class='fa fa-check-square-o'/>
<span id='saaa'>7</span>:<span id='d9i9a'>30</span>
<span id='ssss'>بتوقيت غرينيتش</span>
</div>
</div>
<div class='clear'/>
قم بتغيير ما يلي بما تريد
البث المباشرة مع يونس ورضاوي للإجابة على تساؤلاتكم التقنية كل خميس فقط. على مدونة ويب تيك
وقم ايضا بتغير # برابط صفحة البت الخاص بك 
ونتمنى من كل شخص استفاد يترك تعليق لتحفيزنا من اجل المزيد


..يسمح بالنسخ فقط عند ذكرك للمصدر مع رابطة وان لم تفعل تسمى سرقة وستتم متابعتك قانونيا بالتوفيقا. .
.
6
إقرأ المقال



بسم الله السلام عليكم اعزائي تحياتي لك زائر اومتابع , موضوع اليوم عن ازرار المعاينة والتحميل لمدونات بلوجر, بالطبع تتواجد الكثير من الاشكال لازرار المعاينة والتحميل ولكن عندي لكم ازرار بشكل جداب وجميل جدا يمكنكم معاينته من هنا

نبدا في الشرح

نتوجه الى القالب ونبحث عن الكود التالي

 ]]></b:skin>
وبعدها اضف الكود التالي فوقه
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
.boxy {
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 1.5em;
  color: rgba(255, 255, 255, 0);
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  padding: 0.6em 1.6em;
  margin: 0.6em;
  border-style: solid;
  border-width: 1px;
  transition: all 0.2s ease;
  border-image: linear-gradient(155deg, #fb83fa 0%, #31bcb8 100%) 1 round;
  background: linear-gradient(155deg, #fb83fa 0%, #31bcb8 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.boxy:hover {
  box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(49, 188, 184, 0.4), -2px -2px 6px rgba(251, 131, 250, 0.4);
}
.boxy:hover {
  color: rgba(255, 255, 255, 0.1);
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.4);
}
.boxy.red {
  border-image: linear-gradient(155deg, #fc5c3c 0%, #ffb638 100%) 1 round;
  background: linear-gradient(155deg, #fc5c3c 0%, #ffb638 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.boxy.red:hover {
  box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(255, 182, 56, 0.4), -2px -2px 6px rgba(252, 92, 60, 0.4);
}
.boxy.green {
  border-image: linear-gradient(155deg, #06e5de 0%, #AAFFA9 100%) 1 round;
  background: linear-gradient(155deg, #06e5de 0%, #AAFFA9 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.boxy.green:hover {
  box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(170, 255, 169, 0.4), -2px -2px 6px rgba(6, 229, 222, 0.4);
}
.boxy.la {
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 0.05em;
  font-size: 3em;
  padding: 0.3em;
  border-width: 2px;
  display: block;
  width: 70%;
  margin: 0.6em auto;
  border-image: linear-gradient(155deg, #F0C27B 0%, #ad1ba3 100%) 1 round;
  background: linear-gradient(155deg, #F0C27B 0%, #ad1ba3 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.boxy.la:hover {
  box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(173, 27, 163, 0.4), -2px -2px 6px rgba(240, 194, 123, 0.4);
}
p {
  color: rgba(255, 255, 255, 0.7);
  margin: 30px;
}
قم بحفظ القالب
وهذا هو كود html اضفه بداخل المشاركة في تبويب html

<a class="boxy" href="#">
  للتحميل
</a>
<a class="boxy red" href="#">
  للمعاينة
</a>
<a class="boxy green" href="#">
  للتحميل
</a>
الى هنا ينتهي الدرس بالتوفيق
.يسمح بالنسخ فقط عند ذكرك للمصدر مع رابطة وان لم تفعل تسمى سرقة وستتم متابعتك قانونيا بالتوفيقا.
0
إقرأ المقال



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

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

توجه الى القالب وابحث عن الكود التالي
]]></b:skin>
 واضف الكود التالي فوقه مباشرة
/* https://oi-web.blogspot.com
----------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
/* https://oi-web.blogspot.com
----------------------------------*/
header {
  padding: 2em 0;
  border-bottom: 10px solid #00796B;
  background: #009688;
  color: #FFFFFF;
  overflow: hidden;
}
header h1 {
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-size: 4em;
  font-weight: 300;
  letter-spacing: 5px;
  text-shadow: 1px  1px  #00796B, 2px  2px  #00796B, 3px  3px  #00796B, 4px  4px  #00796B, 5px  5px  #00796B, 6px  6px  #00796B, 7px  7px  #00796B, 8px  8px  #00796B, 9px  9px  #00796B, 10px  10px  #00796B, 11px  11px  #00796B, 12px  12px  #00796B, 13px  13px  #00796B, 14px  14px  #00796B, 15px  15px  #00796B, 16px  16px  #00796B, 17px  17px  #00796B, 18px  18px  #00796B, 19px  19px  #00796B, 20px  20px  #00796B, 21px  21px  #00796B, 22px  22px  #00796B, 23px  23px  #00796B, 24px  24px  #00796B, 25px  25px  #00796B, 26px  26px  #00796B, 27px  27px  #00796B, 28px  28px  #00796B, 29px  29px  #00796B, 30px  30px  #00796B, 31px  31px  #00796B, 32px  32px  #00796B, 33px  33px  #00796B, 34px  34px  #00796B, 35px  35px  #00796B, 36px  36px  #00796B, 37px  37px  #00796B, 38px  38px  #00796B, 39px  39px  #00796B, 40px  40px  #00796B, 41px  41px  #00796B, 42px  42px  #00796B, 43px  43px  #00796B, 44px  44px  #00796B, 45px  45px  #00796B, 46px  46px  #00796B, 47px  47px  #00796B, 48px  48px  #00796B, 49px  49px  #00796B, 50px  50px  #00796B, 51px  51px  #00796B, 52px  52px  #00796B, 53px  53px  #00796B, 54px  54px  #00796B, 55px  55px  #00796B, 56px  56px  #00796B, 57px  57px  #00796B, 58px  58px  #00796B, 59px  59px  #00796B, 60px  60px  #00796B, 61px  61px  #00796B, 62px  62px  #00796B, 63px  63px  #00796B, 64px  64px  #00796B, 65px  65px  #00796B, 66px  66px  #00796B, 67px  67px  #00796B, 68px  68px  #00796B, 69px  69px  #00796B, 70px  70px  #00796B, 71px  71px  #00796B, 72px  72px  #00796B, 73px  73px  #00796B, 74px  74px  #00796B, 75px  75px  #00796B, 76px  76px  #00796B, 77px  77px  #00796B, 78px  78px  #00796B, 79px  79px  #00796B, 80px  80px  #00796B, 81px  81px  #00796B, 82px  82px  #00796B, 83px  83px  #00796B, 84px  84px  #00796B, 85px  85px  #00796B, 86px  86px  #00796B, 87px  87px  #00796B, 88px  88px  #00796B, 89px  89px  #00796B, 90px  90px  #00796B, 91px  91px  #00796B, 92px  92px  #00796B, 93px  93px  #00796B, 94px  94px  #00796B, 95px  95px  #00796B, 96px  96px  #00796B, 97px  97px  #00796B, 98px  98px  #00796B, 99px  99px  #00796B, 100px  100px  #00796B, 101px  101px  #00796B, 102px  102px  #00796B, 103px  103px  #00796B, 104px  104px  #00796B, 105px  105px  #00796B, 106px  106px  #00796B, 107px  107px  #00796B, 108px  108px  #00796B, 109px  109px  #00796B, 110px  110px  #00796B, 111px  111px  #00796B, 112px  112px  #00796B, 113px  113px  #00796B, 114px  114px  #00796B, 115px  115px  #00796B, 116px  116px  #00796B, 117px  117px  #00796B, 118px  118px  #00796B, 119px  119px  #00796B, 120px  120px  #00796B;
}
main {
/*padding: 1em;*/
}
footer {
/* padding: 1em;*/
}
footer .copy {
  float: left;
}
footer .thanks {
  float: right;
}
الان قم بحفظ القالب او قم باضافة الكود التالي في المكان الذي تريده داخل القالب او في التخطيط 
<header>
  <h1> قم بكتابة ما تريد هنا </h1>
</header>

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



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

وصف المنتج

قالب مرن و تجاوبي (بوتستراب)
يستخدم أحدث تقنيات الويب في تصميم المواقع مع سرعة تصفُح
إمكانيّة تغيير الشعار و الروابط الإجتماعيّة بسهولة
قالب داعم لإعلانات أدسنس و سهولة تعديلها من لوحة التحكُم
دعم لكُل إصدارات الووردبرس
قالب عربي 100%

لتحميل القالب من هنا
0
إقرأ المقال


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


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

1 . توجه لقالب >> تحرير 
2. ابحث بإستعمال CTRL+F عن  ]]></b:skin>  أو ضعه بين <style>  </style>
3. ضع الكود التالي قبله [ فوقه ]
.buttonz{display:inline-flex;border-radius:4px;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;color:#FFF!important;
background:url(//ar1web-com.googlecode.com/svn/trunk/rainbow.png);background-size:cover;padding:8px 25px;text-shadow:none;transition:all 1s;}
.buttonz:hover, .buttonz:hover, .buttonz.link:hover {box-shadow: 0px 0px 18px 18px rgba(80, 80, 80, 0);} 

4. ضع الكود التالي إما فوق </head> أو فوق </body>
 <script type='text/javascript'>
var intval = null;
var pos = 0;
$(document).ready(function() {
intval = window.setInterval(moveBg, 70);
});
function moveBg() {
pos++;
$('.buttonz').css({backgroundPosition: (pos * 1) + '% 1px'});
}
  </script> 

5. لتفعيل الزر ضع الكود التالي بداخل الموضوع بتبويب HTML
 <a class='buttonz' href='هنا الرابط' target='_blank'>إسم الزر</a> 


منقول من : عرب ويب
.اتمنى ان يعجبكم الدرس.
2
إقرأ المقال


بسم الله الرحمن الرحيم

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

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

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

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

و اليوم سأقدم لكم بديل او حلّ لهؤلاء الذين بدأوا مشاريعهم لتوّ و واجهتهم هذه المشكلة , انه مصمم شعارات (مولد) يقدم خدماته على الشبكة ” لوجستر ”  و هو من افضل المواقع التي تقدم خدمة تصميم الشعارات على الشبكة فهو يمكنك من تصميم  شعاراتك بشكل احترافي أيضا  ” لوجستر ” يقدم الكثير من الخدمات الاخرى كتصميم card busness  و Favicon …….




وهنا سأقدم طريقة استعمال الموقع لإنشاء شعار في أربع خطوات:

الخطوة الاولى:

اذهب الى الصفحة الرئيسة وانقر على ” Create logo for free” صفحة جديدة ستفتح لك قم بإدخال الاسم (اسم الشركة مثلا) ثم قم باختيار تصنيف الشعار.




الخطوة الثانية:

الخدمة تقوم بإنشاء العشرات من الشعارات و كل ما عليك هو اختيار الانسب بنسبة لك .

الخطوة الثالثة:

الان يمكنك التعديل على الشعار من خلال تغير الالوان والصورة الرمزية … او يمكنك فقط حفضه من دون تعديله.



الخطوة الاخيرة:

هي تحميل الشعار. لوجستر يوفر جميع صيغ الصور المعروفة مثل    PNG , JPEG ,SVG  و حتى PDF .

أنصحك بتجربة الموقع فحق يقدم خدمة جميلة.

رابط الموقع: www.logaster.com


أرجو أن تكون المقالة قد أعجبتكم ..
2
إقرأ المقال



درس اليوم حول

حصريا كود ميتا تاج لسنة 2016 | كود جعل مدونتك تظهر بشكل كامل في محرك البحت اقل من يومين كما فعلت انا و الارشفه السريعه  لمدونات بلوجر
الدليل امامك



يعد كود الميتا تاج من اهم عوامل السيو التى تساعد على الارشفه السريعه والدقيقه لمدونات بلوجر

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

اول شيئ ادهب للقالب وابحث عن الكود ستجده في الاول
<head>
ضع الكود التالي اسفله

 <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta  content='اضف اسم موقعك مع وصف قصير'name='description'/>
    <meta content='ضع اقسام موقعك' name='keywords'/>
    <meta content='global' name='distribution'/>
    <meta content='10 days' name='revisit'/>
    <meta content='10 days' name='revisit-after'/>
    <meta content='document' name='resource-type'/>
    <meta content='all' name='audience'/>
    <meta content='general' name='rating'/>
    <meta content='all' name='robots'/>
    <meta content='index, follow' name='robots'/>
    <meta content='اسم صاحب المدونة بالانجليزية' name='author'/>
    <meta content=' ar ' name='language'/>
    <meta content='الدولة' name='country'/>
    </b:if>

ملاحظة غير الجمل الملونة
ولا تنسى دعمنا بتعليق للمزيد

14
إقرأ المقال



حصريا اضافة تعريف الكاتب من انا في صفحة تابتة للبلوجر

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

من لوحة التحكم >> قالب>> تحرير html
قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)

 ]]></b:skin>

 واضف الكود التالي فوقه مباشرة

/* oi-web.blogspt.com! */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400);
@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.6, 0.6);
            transform: scale(0.6, 0.6);
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 0.0;
  }
}
@keyframes pulsate {
  0% {
    -webkit-transform: scale(0.6, 0.6);
            transform: scale(0.6, 0.6);
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 0.0;
  }
}
body {
  background-repeat: repeat, no-repeat;
  background-size: auto, 100% 100%;
  background-attachment: fixed;
  color: #ecf0f1;
  font-family: 'Noto Sans Kufi Arabic', sans-serif  font-size: 16px;
  line-height: 1.5;
  font-weight: 300;
  min-height: 100%;
  overflow-y: scroll;
  width: 100%;
}
h1, h2 {
  font-weight: 300;
  line-height: 1.2;
}
.profile-card {
  height: 305px;
  width: 600px;
  position: relative;
  margin: 4em auto;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.profile-card header {
  width: 100%;
  height: 100%;
  text-align: center;
  /* FF3.6+ */
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(0, 0, 0, 0.9)), color-stop(100%, transparent));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#00000000',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
}
.profile-card header a {
  position: relative;
}
.profile-card header a:before {
  content: "";
  border: 15px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  height: 90px;
  width: 90px;
  position: absolute;
  left: 0;
  bottom: 3px;
  -webkit-animation: pulsate 1.6s ease-out;
          animation: pulsate 1.6s ease-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  opacity: 0.0;
  z-index: 99;
}
.profile-card header img {
  position: relative;
  border-radius: 50%;
  height: 90px;
  width: 90px;
  padding: 0;
  margin: 0;
  border: 15px solid transparent;
  margin-top: 12px;
  z-index: 9999;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
.profile-card header a:hover img {
  -webkit-transform: scale(1.06, 1.06);
          transform: scale(1.06, 1.06);
}
.profile-card header a:hover:before {
  -webkit-animation: none;
          animation: none;
}
.profile-card header h1 {
  text-align: center;
  font-size: 28px;
  font-weight: 400;
  opacity: 0.9;
  margin-bottom: 8px;
}
.profile-card header h2 {
  font-size: 18px;
  margin-top: 0;
  opacity: 0.9;
}
.profile-card .profile-bio {
  position: absolute;
  bottom: 0;
}
.profile-card .profile-bio p {
  margin: 24px;
  text-align: center;
  opacity: 0.9;
}
.profile-card .profile-social-links {
  position: relative;
  background-color: white;
  margin: 0 auto;
  text-align: center;
  padding: 6px 0;
}
.profile-card .profile-social-links li {
  display: inline-block;
  padding: 3px 5px 0;
}
.profile-card .profile-social-links li img {
  height: 28px;
  opacity: 0.8;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
}
.profile-card .profile-social-links li a:hover img {
  opacity: 1;
  -webkit-transform: scale(1.1, 1.1);
          transform: scale(1.1, 1.1);
}
.profile-card .profile-social-links:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
  border-width: 10px;
  margin-left: -10px;
}
قم بحفظ القالب

ادخل إلى لوحة تحكم المدونة
انتقل إلى الصفحات
انقر على إنشاء صفحة جديدة
انتقل من وضع تأليف إلى وضع HTML

<!-- oi-web.blogspt.com! -->
<aside class="profile-card">
  <header>
    <!-- here’s the avatar -->
    <a href="https://oi-web.blogspot.com">
      <img src="https://lh5.googleusercontent.com/proxy/BKBOkXTDCoyIl5dp7Gvfv0y88wtxmPi5MoQzYZ49xmxs481u1ZeP5b6xXIOaP2VDplfVxLu4Bi7iKAM9rI3NVkSgPQxD2z99oMoHEb0sO_lQmz-GQmzPJF4sty4U0UcKSir7AWgDj1V9Gg=s0-d">
    </a>
    <!-- the username -->
<h1>يونس ورضاوي</h1>
    <!-- and role or location -->
    <h2>مبرمج ومطور مواقع</h2>
  </header>
  <!-- bit of a bio; who are you? -->
  <div class="profile-bio">
    <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصو.</p>
  </div>
  <!-- some social links to show off -->
  <ul class="profile-social-links">
    <!-- twitter - el clásico  -->
    <li>
      <a href="http://twitter.com/">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-twitter.svg">
      </a>
    </li>
    <!-- envato – use this one to link to your marketplace profile -->
    <li>
      <a href="http://themeforest.net">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-envato.svg">
      </a>
    </li>
    <!-- codepen - your codepen profile-->
    <li>
      <a href="#">
        <img src="http://blog.virginmobile.sa/img/icons/png/glyph_share_facebook_96x96_2x.png">
      </a>
    </li>
    <!-- oi-web.blogspt.com -->
  </ul>
</aside>
<!-- oi-web.blogspt.com! -->
 ملاحظة قم بتغيير مايلي
الصورة
الروابط
الكتابة
ولا تنسا دعمنا بتعلق
0
إقرأ المقال





اضافة ايقونات المتحركة مع SVG و CSS للبلوجر
مرحبا بكم متابعي ويب تيك درسنا اليوم وهو اضافة اداة مميزة وجميلة ويكنكم وضعها في الصفحة الرئيسية للمدونة تضهر للزائر مهاراتك.
ولكي لااطيل عليكم نبدء في الشرح وللعلم فهي سهلة التركيب

  • افتح قالب مدونتك وابحث عن الكود التالي
 ]]></b:skin>

  • وبعدها اضف الكود التالي فوقه

grid{max-width:960px;width:100%;margin:0 auto;text-align:center}
.grid--cell{width:24%;text-align:center;vertical-align:top;display:inline-block;padding:10px;padding-bottom:20px}
.animation-wrapper{position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);overflow:hidden;border-radius:5%;width:100%;padding-bottom:100%}
.animation-wrapper--software-bg{background:-webkit-linear-gradient(225deg,#ff3231,#b90100);background:linear-gradient(-135deg,#ff3231,#b90100)}
.animation-wrapper--website-bg{background:-webkit-linear-gradient(225deg,#bcd74c,#7f9d01);background:linear-gradient(-135deg,#bcd74c,#7f9d01)}
.animation-wrapper--webapp-bg{background:-webkit-linear-gradient(225deg,#f68e51,#eb5700);background:linear-gradient(-135deg,#f68e51,#eb5700)}
.animation-wrapper--win-app-bg{background:-webkit-linear-gradient(225deg,#fcc000,#da8e00);background:linear-gradient(-135deg,#fcc000,#da8e00)}
.animation-wrapper--win-mobile-app-bg{background:-webkit-linear-gradient(225deg,#01bcf3,#006e8e);background:linear-gradient(-135deg,#01bcf3,#006e8e)}
.title{display:inline-block;font-size:75%;font-weight:bold;color:#fff;padding:6px 9px;margin-top:15px;border-radius:5px}
.title--software{background-color:#ff3231}
.title--webdev{background-color:#7f9d01}
.title--webapp{background-color:#eb5700}
.title--win-app{background-color:#d8a500}
.title--win-mobile-app{background-color:#0195c0}
.screen-shine{position:relative;top:0;right:0;width:100%;height:100%;text-align:right;background-image:url("http://www.iamglynnsmith.com/codepen/css_animated_svg/animation_modular_screen_shine.svg");background-size:cover;background-position:top right;opacity:0.3}
.absolute{position:absolute;top:0;width:100%}
.software-monitor{left:0;top:6%;height:100%;z-index:6}
.software-screen--bg{left:0;height:100%}
@-webkit-keyframes software-screen--fg-mask{
  0%{height:0%}
  65%{height:35%}
  85%{height:35%}
  100%{height:0%}
}
@keyframes software-screen--fg-mask{
  0%{height:0%}
  65%{height:35%}
  85%{height:35%}
  100%{height:0%}
}
.software-screen--fg-mask{vertical-align:top;left:0%;margin-top:10%;height:30%;overflow:hidden;-webkit-animation:software-screen--fg-mask 3s linear infinite;animation:software-screen--fg-mask 3s linear infinite}
@-webkit-keyframes software-screen--fg{
  0%{-webkit-transform:translate(0,-10%);transform:translate(0,-10%)}
  69%{-webkit-transform:translate(0,-10%);transform:translate(0,-10%)}
  90%{-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}
  100%{-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}
}
@keyframes software-screen--fg{
  0%{-webkit-transform:translate(0,-10%);transform:translate(0,-10%)}
  69%{-webkit-transform:translate(0,-10%);transform:translate(0,-10%)}
  90%{-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}
  100%{-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}
}
.software-screen--fg{left:0;-webkit-animation:software-screen--fg 3s linear infinite;animation:software-screen--fg 3s linear infinite}
.software-screen--shine{right:0;height:100%;opacity:0.6;z-index:10}
.software-keyboard{left:0;top:7%;height:100%}
.software-hand{left:0;top:7%;height:100%;background:url("http://www.iamglynnsmith.com/codepen/css_animated_svg/animation_software_development_hand.svg");background-size:600% 100%;background-position:top left}
@-webkit-keyframes software-hand--left{
  0%{background-position:-300% 0}
  5%{background-position:-200% 0}
  10%{background-position:-100% 0;-webkit-transform:translate(0,0%) scale(-1,1);transform:translate(0,0%) scale(-1,1)}
  15%{background-position:0 0;-webkit-transform:translate(0,5%) scale(-1,1);transform:translate(0,5%) scale(-1,1)}
  20%{background-position:-100% 0}
  25%{background-position:-200% 0}
  30%{background-position:-400% 0;-webkit-transform:translate(0,5%) scale(-1,1);transform:translate(0,5%) scale(-1,1)}
  35%{background-position:-100% 0;-webkit-transform:translate(0,0) scale(-1,1);transform:translate(0,0) scale(-1,1)}
  40%{background-position:0% 0}
  45%{background-position:-200% 0;-webkit-transform:translate(0,0) scale(-1,1);transform:translate(0,0) scale(-1,1)}
  50%{background-position:0% 0;-webkit-transform:translate(0,5%) scale(-1,1);transform:translate(0,5%) scale(-1,1)}
  55%{background-position:-100% 0}
  60%{background-position:-200% 0;-webkit-transform:translate(0,5%) scale(-1,1);transform:translate(0,5%) scale(-1,1)}
  65%{background-position:0 0;-webkit-transform:translate(-2%,7%) scale(-1,1);transform:translate(-2%,7%) scale(-1,1)}
  95%{background-position:0 0;-webkit-transform:translate(0,2%) scale(-1,1);transform:translate(0,2%) scale(-1,1)}
}
@keyframes software-hand--left{
  0%{background-position:-300% 0}
  5%{background-position:-200% 0}
  10%{background-position:-100% 0;-webkit-transform:translate(0,0%) scale(-1,1);transform:translate(0,0%) scale(-1,1)}
  15%{background-position:0 0;-webkit-transform:translate(0,5%) scale(-1,1);transform:translate(0,5%) scale(-1,1)}
  20%{background-position:-100% 0}
  25%{background-position:-200% 0}
  30%{background-position:-400% 0;-webkit-transform:translate(0,5%) scale(-1,1);transform:translate(0,5%) scale(-1,1)}
  35%{background-position:-100% 0;-webkit-transform:translate(0,0) scale(-1,1);transform:translate(0,0) scale(-1,1)}
  40%{background-position:0% 0}
  45%{background-position:-200% 0;-webkit-transform:translate(0,0) scale(-1,1);transform:translate(0,0) scale(-1,1)}
  50%{background-position:0% 0;-webkit-transform:translate(0,5%) scale(-1,1);transform:translate(0,5%) scale(-1,1)}
  55%{background-position:-100% 0}
  60%{background-position:-200% 0;-webkit-transform:translate(0,5%) scale(-1,1);transform:translate(0,5%) scale(-1,1)}
  65%{background-position:0 0;-webkit-transform:translate(-2%,7%) scale(-1,1);transform:translate(-2%,7%) scale(-1,1)}
  95%{background-position:0 0;-webkit-transform:translate(0,2%) scale(-1,1);transform:translate(0,2%) scale(-1,1)}
}
.software-hand--left{-webkit-transform:scale(-1,1);transform:scale(-1,1);-webkit-animation:software-hand--left 3s steps(1,end) infinite;animation:software-hand--left 3s steps(1,end) infinite}
@-webkit-keyframes software-hand--right{
  0%{background-position:0 0}
  2%{background-position:-100% 0}
  4%{background-position:0 0}
  6%{background-position:-500% 0;-webkit-transform:translate(0,0);transform:translate(0,0)}
  8%{background-position:0 0;-webkit-transform:translate(0,5%);transform:translate(0,5%)}
  10%{background-position:-100% 0}
  12%{background-position:-0 0}
  14%{background-position:-200% 0}
  16%{background-position:0 0}
  18%{background-position:-200% 0}
  20%{background-position:-100% 0;-webkit-transform:translate(0,5%);transform:translate(0,5%)}
  22%{background-position:-200% 0;-webkit-transform:translate(0,0);transform:translate(0,0)}
  24%{background-position:0 0}
  26%{background-position:-500% 0}
  28%{background-position:0 0}
  30%{background-position:-200% 0}
  32.5%{background-position:-400% 0}
  50%{background-position:0 0}
  52%{background-position:-200% 0}
  54%{background-position:-500% 0;-webkit-transform:translate(0,0);transform:translate(0,0)}
  56%{background-position:-100% 0;-webkit-transform:translate(0,5%);transform:translate(0,5%)}
  58%{background-position:0 0}
  60%{background-position:-200% 0}
  62%{background-position:-100% 0}
  64%{background-position:0 0}
  66%{background-position:-500% 0}
  68%{background-position:-200% 0}
  70%{background-position:0% 0;-webkit-transform:translate(0,5%);transform:translate(0,5%)}
  72%{background-position:-200% 0;-webkit-transform:translate(0,0);transform:translate(0,0)}
  74%{background-position:-300% 0}
  76%{background-position:-500% 0}
  78%{background-position:0 0}
  80%{background-position:-500% 0}
  82.5%{background-position:-400% 0}
  100%{background-position:-400% 0}
}
@keyframes software-hand--right{
  0%{background-position:0 0}
  2%{background-position:-100% 0}
  4%{background-position:0 0}
  6%{background-position:-500% 0;-webkit-transform:translate(0,0);transform:translate(0,0)}
  8%{background-position:0 0;-webkit-transform:translate(0,5%);transform:translate(0,5%)}
  10%{background-position:-100% 0}
  12%{background-position:-0 0}
  14%{background-position:-200% 0}
  16%{background-position:0 0}
  18%{background-position:-200% 0}
  20%{background-position:-100% 0;-webkit-transform:translate(0,5%);transform:translate(0,5%)}
  22%{background-position:-200% 0;-webkit-transform:translate(0,0);transform:translate(0,0)}
  24%{background-position:0 0}
  26%{background-position:-500% 0}
  28%{background-position:0 0}
  30%{background-position:-200% 0}
  32.5%{background-position:-400% 0}
  50%{background-position:0 0}
  52%{background-position:-200% 0}
  54%{background-position:-500% 0;-webkit-transform:translate(0,0);transform:translate(0,0)}
  56%{background-position:-100% 0;-webkit-transform:translate(0,5%);transform:translate(0,5%)}
  58%{background-position:0 0}
  60%{background-position:-200% 0}
  62%{background-position:-100% 0}
  64%{background-position:0 0}
  66%{background-position:-500% 0}
  68%{background-position:-200% 0}
  70%{background-position:0% 0;-webkit-transform:translate(0,5%);transform:translate(0,5%)}
  72%{background-position:-200% 0;-webkit-transform:translate(0,0);transform:translate(0,0)}
  74%{background-position:-300% 0}
  76%{background-position:-500% 0}
  78%{background-position:0 0}
  80%{background-position:-500% 0}
  82.5%{background-position:-400% 0}
  100%{background-position:-400% 0}
}
.software-hand--right{right:0;-webkit-animation:software-hand--right 6s steps(1,end) infinite;animation:software-hand--right 6s steps(1,end) infinite}
.web-hardware{margin:0 auto;border-radius:6px}
.web-hardware--desktop{width:70%;height:55%;top:14%;left:8%;padding:6% 3%;background-color:#262626}
.web-hardware--mobile{width:25%;height:45%;top:30%;right:8%;padding:5% 2%;background-color:#444}
@-webkit-keyframes web-scroller-anim{
  0%{background-position:0 0}
  35%{background-position:0 99.5%}
  36%{background-position:0 100%}
  50%{background-position:0 100%}
  85%{background-position:0 0.5%}
  86%{background-position:0 0}
  100%{background-position:0 0}
}
@keyframes web-scroller-anim{
  0%{background-position:0 0}
  35%{background-position:0 99.5%}
  36%{background-position:0 100%}
  50%{background-position:0 100%}
  85%{background-position:0 0.5%}
  86%{background-position:0 0}
  100%{background-position:0 0}
}
.web-screen{width:100%;height:100%;background-color:#000;border-radius:2px;-webkit-animation:web-scroller-anim 9s infinite;animation:web-scroller-anim 9s infinite}
.web-screen--website-desktop{background:url("http://www.iamglynnsmith.com/codepen/css_animated_svg/animation_website_development_desktop.svg");background-size:100%}
.web-screen--website-mobile{background:url("http://www.iamglynnsmith.com/codepen/css_animated_svg/animation_website_development_mobile.svg");background-size:100%}
.web-screen--webapp-desktop{background:url("http://www.iamglynnsmith.com/codepen/css_animated_svg/animation_webapp_development_desktop.svg");background-size:100%}
.web-screen--webapp-mobile{background:url("http://www.iamglynnsmith.com/codepen/css_animated_svg/animation_webapp_development_mobile.svg");background-size:100%}
.win-desktop{top:-3%;left:0;height:100%}
@-webkit-keyframes shortcut-icon-01{
  10%{fill:#F4D387}
  11%{fill:white}
  12%{fill:white}
  13%{fill:#F4D387}
}
@keyframes shortcut-icon-01{
  10%{fill:#F4D387}
  11%{fill:white}
  12%{fill:white}
  13%{fill:#F4D387}
}
.win-desktop--shortcut-icon-01{-webkit-animation:shortcut-icon-01 10s linear infinite;animation:shortcut-icon-01 10s linear infinite;fill:#F4D387}
@-webkit-keyframes shortcut-icon-02{
  16%{fill:#ED9E48}
  18%{fill:white}
  86%{fill:white}
  87%{fill:#ED9E48}
}
@keyframes shortcut-icon-02{
  16%{fill:#ED9E48}
  18%{fill:white}
  86%{fill:white}
  87%{fill:#ED9E48}
}
.win-desktop--shortcut-icon-02{-webkit-animation:shortcut-icon-02 10s linear infinite;animation:shortcut-icon-02 10s linear infinite;fill:#ED9E48}
@-webkit-keyframes app-window{
  16%{opacity:0}
  18%{opacity:1}
  86%{opacity:1}
  87%{opacity:0}
}
@keyframes app-window{
  16%{opacity:0}
  18%{opacity:1}
  86%{opacity:1}
  87%{opacity:0}
}
.win-desktop--window{-webkit-animation:app-window 10s linear infinite;animation:app-window 10s linear infinite;opacity:0}
@-webkit-keyframes win-desktop--app-window--close-button{
  84%{fill:#aa0000}
  84.2%{fill:#ff0000}
  92%{fill:#aa0000}
}
@keyframes win-desktop--app-window--close-button{
  84%{fill:#aa0000}
  84.2%{fill:#ff0000}
  92%{fill:#aa0000}
}
.win-desktop--app-window--close-button{fill:#aa0000;-webkit-animation:win-desktop--app-window--close-button 10s linear infinite;animation:win-desktop--app-window--close-button 10s linear infinite}
@-webkit-keyframes win-desktop--app-link{
  24%{fill:#ccc}
  25%{fill:#888}
  73%{fill:#888}
  74%{fill:#ccc}
}
@keyframes win-desktop--app-link{
  24%{fill:#ccc}
  25%{fill:#888}
  73%{fill:#888}
  74%{fill:#ccc}
}
.win-desktop--app-link{fill:#ccc;-webkit-animation:win-desktop--app-link 10s linear infinite;animation:win-desktop--app-link 10s linear infinite}
@-webkit-keyframes app-chrome{
  28%{opacity:0}
  30%{opacity:1}
  74%{opacity:1}
  75%{opacity:0}
}
@keyframes app-chrome{
  28%{opacity:0}
  30%{opacity:1}
  74%{opacity:1}
  75%{opacity:0}
}
.win-desktop-chrome{-webkit-animation:app-chrome 10s linear infinite;animation:app-chrome 10s linear infinite;opacity:0}
.win-desktop--button{fill:#E5E5E5}
@-webkit-keyframes win-desktop--button-press{
  36%{fill:#E5E5E5}
  38%{fill:#91d329}
  86%{fill:#91d329}
}
@keyframes win-desktop--button-press{
  36%{fill:#E5E5E5}
  38%{fill:#91d329}
  86%{fill:#91d329}
}
.win-desktop--button-01{-webkit-animation:win-desktop--button-press 10s linear infinite;animation:win-desktop--button-press 10s linear infinite}
.win-desktop--button-02{-webkit-animation:win-desktop--button-press 10s 0.65s linear infinite;animation:win-desktop--button-press 10s 0.65s linear infinite}
.win-desktop--button-03{-webkit-animation:win-desktop--button-press 10s 1.35s linear infinite;animation:win-desktop--button-press 10s 1.35s linear infinite}
@-webkit-keyframes modal-reveal{
  52%{opacity:0}
  56%{opacity:1}
  62%{opacity:1}
  64%{opacity:0}
}
@keyframes modal-reveal{
  52%{opacity:0}
  56%{opacity:1}
  62%{opacity:1}
  64%{opacity:0}
}
.win-desktop-chrome--modal{-webkit-animation:modal-reveal 10s linear infinite;animation:modal-reveal 10s linear infinite;opacity:0}
.win-desktop--modal-button{-webkit-animation:button-press 10s 2.45s linear infinite;animation:button-press 10s 2.45s linear infinite}
@-webkit-keyframes win-desktop--tick{
  62%{opacity:0}
  64%{opacity:1}
  66%{opacity:1}
  68%{opacity:0}
}
@keyframes win-desktop--tick{
  62%{opacity:0}
  64%{opacity:1}
  66%{opacity:1}
  68%{opacity:0}
}
.win-desktop--tick{opacity:0;-webkit-animation:win-desktop--tick 10s linear infinite;animation:win-desktop--tick 10s linear infinite}
@-webkit-keyframes win-desktop--cursor{
  0%{-webkit-transform:translate(11%,4%);transform:translate(11%,4%)}
  8%{-webkit-transform:translate(-32%,-19%);transform:translate(-32%,-19%)}
  11%{-webkit-transform:translate(-32%,-19%);transform:translate(-32%,-19%)}
  24%{-webkit-transform:translate(-26%,-15%);transform:translate(-26%,-15%)}
  26%{-webkit-transform:translate(-26%,-15%);transform:translate(-26%,-15%)}
  34%{-webkit-transform:translate(24%,-12%);transform:translate(24%,-12%)}
  36%{-webkit-transform:translate(24%,-12%);transform:translate(24%,-12%)}
  42%{-webkit-transform:translate(-10%,1%);transform:translate(-10%,1%)}
  43%{-webkit-transform:translate(-10%,1%);transform:translate(-10%,1%)}
  49%{-webkit-transform:translate(25%,15%);transform:translate(25%,15%)}
  52%{-webkit-transform:translate(25%,15%);transform:translate(25%,15%)}
  60%{-webkit-transform:translate(8%,9%);transform:translate(8%,9%)}
  65%{-webkit-transform:translate(8%,9%);transform:translate(8%,9%)}
  72%{-webkit-transform:translate(-26%,-15%);transform:translate(-26%,-15%)}
  75%{-webkit-transform:translate(-26%,-15%);transform:translate(-26%,-15%)}
  83%{-webkit-transform:translate(33%,-22%);transform:translate(33%,-22%)}
  85%{-webkit-transform:translate(33%,-22%);transform:translate(33%,-22%)}
  92%{-webkit-transform:translate(11%,4%);transform:translate(11%,4%)}
}
@keyframes win-desktop--cursor{
  0%{-webkit-transform:translate(11%,4%);transform:translate(11%,4%)}
  8%{-webkit-transform:translate(-32%,-19%);transform:translate(-32%,-19%)}
  11%{-webkit-transform:translate(-32%,-19%);transform:translate(-32%,-19%)}
  24%{-webkit-transform:translate(-26%,-15%);transform:translate(-26%,-15%)}
  26%{-webkit-transform:translate(-26%,-15%);transform:translate(-26%,-15%)}
  34%{-webkit-transform:translate(24%,-12%);transform:translate(24%,-12%)}
  36%{-webkit-transform:translate(24%,-12%);transform:translate(24%,-12%)}
  42%{-webkit-transform:translate(-10%,1%);transform:translate(-10%,1%)}
  43%{-webkit-transform:translate(-10%,1%);transform:translate(-10%,1%)}
  49%{-webkit-transform:translate(25%,15%);transform:translate(25%,15%)}
  52%{-webkit-transform:translate(25%,15%);transform:translate(25%,15%)}
  60%{-webkit-transform:translate(8%,9%);transform:translate(8%,9%)}
  65%{-webkit-transform:translate(8%,9%);transform:translate(8%,9%)}
  72%{-webkit-transform:translate(-26%,-15%);transform:translate(-26%,-15%)}
  75%{-webkit-transform:translate(-26%,-15%);transform:translate(-26%,-15%)}
  83%{-webkit-transform:translate(33%,-22%);transform:translate(33%,-22%)}
  85%{-webkit-transform:translate(33%,-22%);transform:translate(33%,-22%)}
  92%{-webkit-transform:translate(11%,4%);transform:translate(11%,4%)}
}
.win-desktop--cursor{-webkit-transform:translate(11%,4%);transform:translate(11%,4%);-webkit-animation:win-desktop--cursor 10s cubic-bezier(0.77,0,0.175,1) infinite;animation:win-desktop--cursor 10s cubic-bezier(0.77,0,0.175,1) infinite}
.win-mobile{left:0;height:100%}
@-webkit-keyframes win-mobile--home-back{
  61%{fill:#333}
  61.2%{fill:#fff}
  63%{fill:#333}
  86%{fill:#333}
  86.2%{fill:#fff}
  88%{fill:#333}
  90%{fill:#333}
  90.2%{fill:#fff}
  91.9%{fill:#333}
  92%{fill:#333}
  92.2%{fill:#fff}
  94%{fill:#333}
}
@keyframes win-mobile--home-back{
  61%{fill:#333}
  61.2%{fill:#fff}
  63%{fill:#333}
  86%{fill:#333}
  86.2%{fill:#fff}
  88%{fill:#333}
  90%{fill:#333}
  90.2%{fill:#fff}
  91.9%{fill:#333}
  92%{fill:#333}
  92.2%{fill:#fff}
  94%{fill:#333}
}
.win-mobile--home-back{fill:#333;-webkit-animation:win-mobile--home-back 10s linear infinite;animation:win-mobile--home-back 10s linear infinite}
.win-mobile--home{opacity:1}
@-webkit-keyframes win-mobile--home-bg{
  8%{opacity:0}
  16%{opacity:1}
  95%{opacity:1}
  99%{opacity:0}
}
@keyframes win-mobile--home-bg{
  8%{opacity:0}
  16%{opacity:1}
  95%{opacity:1}
  99%{opacity:0}
}
.win-mobile--home-bg{opacity:0;-webkit-animation:win-mobile--home-bg 10s cubic-bezier(0.165,0.84,0.44,1) infinite;animation:win-mobile--home-bg 10s cubic-bezier(0.165,0.84,0.44,1) infinite}
@-webkit-keyframes win-mobile--home-row-01{
  9%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
  11%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  94%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  97%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
}
@keyframes win-mobile--home-row-01{
  9%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
  11%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  94%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  97%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
}
.win-mobile--home-row-01{-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:33% 0;transform-origin:33% 0;opacity:0;-webkit-animation:win-mobile--home-row-01 10s cubic-bezier(0.165,0.84,0.44,1) infinite;animation:win-mobile--home-row-01 10s cubic-bezier(0.165,0.84,0.44,1) infinite}
@-webkit-keyframes win-mobile--home-row-02{
  10%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
  12%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  95%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  98%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
}
@keyframes win-mobile--home-row-02{
  10%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
  12%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  95%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  98%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
}
.win-mobile--home-row-02{-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:48% 0;transform-origin:48% 0;opacity:0;-webkit-animation:win-mobile--home-row-02 10s cubic-bezier(0.165,0.84,0.44,1) infinite;animation:win-mobile--home-row-02 10s cubic-bezier(0.165,0.84,0.44,1) infinite}
@-webkit-keyframes win-mobile--home-row-03{
  11%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
  13%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  96%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  98%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
}
@keyframes win-mobile--home-row-03{
  11%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
  13%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  96%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  98%{opacity:0;-webkit-transform:scale(0,1);transform:scale(0,1)}
}
.win-mobile--home-row-03{-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:60% 0;transform-origin:60% 0;opacity:0;-webkit-animation:win-mobile--home-row-03 10s cubic-bezier(0.165,0.84,0.44,1) infinite;animation:win-mobile--home-row-03 10s cubic-bezier(0.165,0.84,0.44,1) infinite}
@-webkit-keyframes win-mobile--home-shortcut{
  17%{fill:#D60000}
  17.2%{fill:#fff}
  25%{fill:#D60000}
}
@keyframes win-mobile--home-shortcut{
  17%{fill:#D60000}
  17.2%{fill:#fff}
  25%{fill:#D60000}
}
.win-mobile--home-shortcut{fill:#D60000;-webkit-animation:win-mobile--home-shortcut 10s linear infinite;animation:win-mobile--home-shortcut 10s linear infinite}
@-webkit-keyframes win-mobile--app-01{
  23%{opacity:0;-webkit-transform:scale(0.5,0.5);transform:scale(0.5,0.5)}
  26%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  90%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  94%{opacity:0;-webkit-transform:scale(0.5,0.5);transform:scale(0.5,0.5)}
}
@keyframes win-mobile--app-01{
  23%{opacity:0;-webkit-transform:scale(0.5,0.5);transform:scale(0.5,0.5)}
  26%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  90%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  94%{opacity:0;-webkit-transform:scale(0.5,0.5);transform:scale(0.5,0.5)}
}
.win-mobile--app-01{-webkit-transform:scale(0.5,0.5);transform:scale(0.5,0.5);opacity:0;-webkit-animation:win-mobile--app-01 10s cubic-bezier(0.77,0,0.175,1) infinite;animation:win-mobile--app-01 10s cubic-bezier(0.77,0,0.175,1) infinite}
@-webkit-keyframes win-mobile--app-01--bg{
  26%{fill:red}
  34%{fill:#330000}
  100%{fill:#330000}
}
@keyframes win-mobile--app-01--bg{
  26%{fill:red}
  34%{fill:#330000}
  100%{fill:#330000}
}
.win-mobile--app-01--bg{fill:red;-webkit-animation:win-mobile--app-01--bg 10s cubic-bezier(0.77,0,0.175,1) infinite;animation:win-mobile--app-01--bg 10s cubic-bezier(0.77,0,0.175,1) infinite}
@-webkit-keyframes win-mobile--app-01-icons{
  30%{opacity:0}
  32%{opacity:1}
  100%{opacity:1}
}
@keyframes win-mobile--app-01-icons{
  30%{opacity:0}
  32%{opacity:1}
  100%{opacity:1}
}
.win-mobile--app-01-icons{opacity:0;-webkit-animation:win-mobile--app-01-icons 10s linear infinite;animation:win-mobile--app-01-icons 10s linear infinite}
@-webkit-keyframes win-mobile--app-01--shortcut-01{
  36%{opacity:0.2}
  36.2%{opacity:1}
  44%{opacity:0.2}
}
@keyframes win-mobile--app-01--shortcut-01{
  36%{opacity:0.2}
  36.2%{opacity:1}
  44%{opacity:0.2}
}
.win-mobile--app-01--icons--shortcut-01{opacity:0.2;fill:#fff;-webkit-animation:win-mobile--app-01--shortcut-01 10s linear infinite;animation:win-mobile--app-01--shortcut-01 10s linear infinite}
.win-mobile--app-01--icons--shortcut-02{opacity:0.2;fill:#fff;-webkit-animation:win-mobile--app-01--shortcut-01 10s 3.25s linear infinite;animation:win-mobile--app-01--shortcut-01 10s 3.25s linear infinite}
@-webkit-keyframes win-mobile--app-02{
  42%{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9)}
  44%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  62%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  64%{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9)}
  72%{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9)}
  74%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  88%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  90%{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9)}
  100%{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9)}
}
@keyframes win-mobile--app-02{
  42%{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9)}
  44%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  62%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  64%{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9)}
  72%{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9)}
  74%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  88%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}
  90%{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9)}
  100%{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9)}
}
.win-mobile--app-02{opacity:0;-webkit-transform:scale(0.9,0.9);transform:scale(0.9,0.9);-webkit-animation:win-mobile--app-02 10s linear infinite;animation:win-mobile--app-02 10s linear infinite}
@-webkit-keyframes win-mobile--app-02--button{
  51%{fill:#4d4d4d}
  51.2%{fill:#bbb}
  65%{fill:#bbb}
  65.2%{fill:#4d4d4d}
}
@keyframes win-mobile--app-02--button{
  51%{fill:#4d4d4d}
  51.2%{fill:#bbb}
  65%{fill:#bbb}
  65.2%{fill:#4d4d4d}
}
.win-mobile--app-02--button_01{fill:#4d4d4d;-webkit-animation:win-mobile--app-02--button 10s linear infinite;animation:win-mobile--app-02--button 10s linear infinite}
.win-mobile--app-02--button_02{fill:#4d4d4d;-webkit-animation:win-mobile--app-02--button 10s 0.2s linear infinite;animation:win-mobile--app-02--button 10s 0.2s linear infinite}
.win-mobile--app-02--button_03{fill:#4d4d4d;-webkit-animation:win-mobile--app-02--button 10s 0.4s linear infinite;animation:win-mobile--app-02--button 10s 0.4s linear infinite}
.win-mobile--app-02--button_04{fill:#4d4d4d;-webkit-animation:win-mobile--app-02--button 10s 2.9s linear infinite;animation:win-mobile--app-02--button 10s 2.9s linear infinite}
.win-mobile--app-02--button_05{fill:#4d4d4d;-webkit-animation:win-mobile--app-02--button 10s 3.04s linear infinite;animation:win-mobile--app-02--button 10s 3.04s linear infinite}
.win-mobile--app-02--button_06{fill:#4d4d4d;-webkit-animation:win-mobile--app-02--button 10s 3.19s linear infinite;animation:win-mobile--app-02--button 10s 3.19s linear infinite} 



  •  والان قم بحفظ القالب 
  • وهذا هو الكود يمكنك وضعه في صفحة تابتة او اي مكان في القالب 


<div class="grid">
<!-- SOFTWARE DEVELOPMENT ========================================================================== -->
<div class="grid--cell">
<div class="animation-wrapper animation-wrapper--software-bg">
<div class="absolute software-monitor">
<!-- Monitor hardware + screen chrome/UI -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute software-screen software-screen--bg">
<!-- Monitor feet -->
<g fill="#333">
<circle cx="80" cy="152" r="4" />
<circle cx="220" cy="152" r="4" />
</g>
<!-- Browser chrome BG -->
<path fill="#A6A6A6" d="M60 149.5c-1.38 0-2.5-1.12-2.5-2.5V19c0-1.38 1.12-2.5 2.5-2.5h180c1.38 0 2.5 1.12 2.5 2.5v128c0 1.38-1.12 2.5-2.5 2.5H60z" />
<!-- Monitor Bezel -->
<path fill="#333" d="M240 19v128H60V19h180m0-5H60c-2.76 0-5 2.24-5 5v128c0 2.76 2.24 5 5 5h180c2.76 0 5-2.24 5-5V19c0-2.76-2.24-5-5-5z" />
<!-- Browser page BG -->
<path fill="#E5E5E5" d="M60 26h180v116H60z" />
<!-- Sidebar BG -->
<path fill="#D1D1D1" d="M80 26h30v116H80z" />
<!-- Browser buttons -->
<path fill="#191919" d="M218 20h5v5h-5zm7.5 0h5v5h-5z" />
<!-- Line numbers -->
<path fill="#D60000" d="M233 20h5v5h-5zM96.02 26.33h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.47h-1.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h1.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zm0 7.33h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1-.82-1.84-1.84-1.84zm0 7.27h-1.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h1.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zm0 7.53h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1-.82-1.84-1.84-1.84zm0 7.27h-1.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h1.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zm0 7.53h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84z"
/>
</svg>
<!-- Monitor screen mask - Height is animated for R "code reveal" -->
<div class="absolute software-screen software-screen--fg-mask">
<!-- Monitor screen R graphic - Translates upwards for R "code scroll" -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute software-screen software-screen--fg">
<path fill="#D60000" d="M130.02 33.73h-3.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h3.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm18 0h-10.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h10.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM170.02 41.13h-21.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h21.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm-29 7.4h-14.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h14.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM177.02 56h-6.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h6.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zm1 7.33h-28.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h28.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm-24 7.4h-13.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h13.85c1.02 0 1.84-.82 1.84-1.83 0-1-.82-1.84-1.84-1.84zM176.02 78h-9.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h9.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zm-32 7.53h-17.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h17.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM169.02 92.93h-29.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h29.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM157.02 100.33h-2.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h2.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm-16 7.4h-2.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h2.85c1.02 0 1.84-.82 1.84-1.83 0-1-.82-1.84-1.84-1.84zM168.02 115h-25.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h25.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zM159.02 129.93h-6.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h6.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm19 0h-11.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h11.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84z"
/>
<path fill="#bbb" d="M161.02 33.73h-5.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h5.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm-20 7.4h-10.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h10.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM159.02 48.53h-10.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h10.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM159.02 78h-14.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h14.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zM132.02 92.93h-5.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h5.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM162.02 107.73h-13.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h13.85c1.02 0 1.84-.82 1.84-1.83 0-1-.82-1.84-1.84-1.84zM163.02 122.53h-15.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h15.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84z"
/>
<path fill="#888" d="M175.02 48.53h-8.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h8.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm-12 7.47h-22.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h22.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zM178.02 70.73h-16.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h16.85c1.02 0 1.84-.82 1.84-1.83 0-1-.82-1.84-1.84-1.84zm-41 7.27h-10.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h10.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zM175.02 85.53h-22.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h22.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM146.02 100.33h-11.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h11.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM173.02 122.53h-2.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h2.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84z"
/>
</svg>
</div>
<!-- Monitor screen shine overlay -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute software-screen software-screen--shine">
<linearGradient id="a" x1="195" x2="41" y1="-26" y2="128" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFF" stop-opacity=".75" />
<stop offset="1" stop-color="#FFF" stop-opacity="0" />
</linearGradient>
<linearGradient id="b" x1="244.5" x2="138.5" y1="45.5" y2="151.5" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFF" stop-opacity=".55" />
<stop offset="1" stop-color="#FFF" stop-opacity="0" />
</linearGradient>
<path fill="url(#a)" d="M240 19H60v128h52" />
<path fill="url(#b)" d="M240 59V41L134 147h18" />
</svg>
</div>
<!-- Keyboard -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute software-keyboard">
<path fill="#E0E0E0" d="M70 166h160v58H70z" />
<g fill="#FFF">
<path d="M73 169h11v7H73zm13 0h11v7H86zm26 0h11v7h-11zm-13 0h11v7H99zm26 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm-98 9h11v7H92zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h18v7h-18zm-123 9h11v7H86zm13 0h11v7H99zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm-96 9h11v7H94zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm-99 9h11v7H99zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h24v7h-24zm-13 9h16v7h-16zm18 0h19v7h-19zm-5-27h11v7h-11zm0-18h11v7h-11zm13 0h11v7h-11zm-143 9h17v7H73zm0 9h11v7H73zm0 9h19v7H73zm0 9h24v7H73zm0 9h19v7H73zm21 0h16v7H94zm18 0h76v7h-76zM216 187v9h-5v7h16v-16"
/>
</g>
</svg>
<!-- Left & right hands - Have to be done with DIV BG's as we need to animate the BG position for switching sprites -->
<div class="absolute software-hand software-hand--left"></div>
<div class="absolute software-hand software-hand--right"></div>
</div>
<h1 class="title title--software">تطوير البرمجيات
</h1>
</div>
<!-- WEBSITE DEVELOPMENT ========================================================================== -->
<div class="grid--cell">
<div class="animation-wrapper animation-wrapper--website-bg">
<!-- Desktop screen -->
<div class="absolute web-hardware web-hardware--desktop">
<!-- Animated DIV BG for simple scrolling through site GFX -->
<div class="web-screen web-screen--website-desktop">
<div class="screen-shine"></div>
</div>
</div>
<!-- Mobile screen -->
<div class="absolute web-hardware web-hardware--mobile">
<!-- Animated DIV BG for simple scrolling through site GFX -->
<div class="web-screen web-screen--website-mobile">
<div class="screen-shine"></div>
</div>
</div>
</div>
<h1 class="title title--webdev">تطوير المواقع
</h1>
</div>
<!-- WEBAPP DEVELOPMENT ========================================================================== -->
<div class="grid--cell">
<div class="animation-wrapper animation-wrapper--webapp-bg">
<!-- Desktop screen -->
<div class="absolute web-hardware web-hardware--desktop">
<!-- Animated DIV BG for simple scrolling through site GFX -->
<div class="web-screen web-screen--webapp-desktop">
<!-- Screen shine set to DIV BG because background-size: cover is magical -->
<div class="screen-shine"></div>
</div>
</div>
<!-- Mobile screen -->
<div class="absolute web-hardware web-hardware--mobile">
<!-- Animated DIV BG for simple scrolling through site GFX -->
<div class="web-screen web-screen--webapp-mobile">
<!-- Screen shine set to DIV BG because background-size: cover is magical -->
<div class="screen-shine"></div>
</div>
</div>
</div>
<h1 class="title title--webapp">تطوير تطبيق الويب
</h1>
</div>
<!-- WINDOWS DESKTOP APPLICATIONS ========================================================================== -->
<div class="grid--cell">
<div class="animation-wrapper animation-wrapper--win-app-bg">
<!-- Monitor and desktop chrome -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-desktop">
<!-- Desktop colour -->
<path fill="#FCC000" d="M30 240c-2.76 0-5-2.24-5-5V65c0-2.76 2.24-5 5-5h240c2.76 0 5 2.24 5 5v170c0 2.76-2.24 5-5 5H30z" />
<!-- Device -->
<g fill="#333">
<circle cx="60" cy="245" r="10" />
<circle cx="240" cy="245" r="10" />
<path d="M270 65v170H30V65h240m0-10H30c-5.52 0-10 4.48-10 10v170c0 5.52 4.48 10 10 10h240c5.52 0 10-4.48 10-10V65c0-5.52-4.48-10-10-10z" />
</g>
<!-- Taskbar -->
<path fill="#E48109" d="M30 224h240v11H30z" />
<!-- Taskbar inactive buttons and systray -->
<path fill="#ED9E48" d="M91 226h40v7H91zm45 0h40v7h-40zm112 1h20v5h-20z" />
<!-- Desktop inactive shortcuts -->
<path fill="#F4D387" d="M40 105h20v20H40zm0 30h20v20H40zm0 30h20v20H40z" />
<g fill="#FFF">
<!-- Windows button -->
<path d="M32 226h3v3h-3zm0 4h3v3h-3zm4-4h3v3h-3zM36 230h3v3h-3z" />
<!-- Desktop wallpaper graphic -->
<path d="M210 142V85l-62 8.9V142m0 6v48.08l62 8.92v-57m-72-6V94.94l-48 7.2V142m0 6v39.86l48 7.2V148" opacity=".15" />
</g>
</svg>
<!-- App shortcuts -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-desktop">
<!-- Desktop shortcut -->
<path fill="#F4D387" d="M40 75h20v20H40z" class="win-desktop--shortcut-icon-01" />
<!-- Taskbar shortcut button -->
<path fill="#ED9E48" d="M46 226h40v7H46z" class="win-desktop--shortcut-icon-02" />
</svg>
<!-- App window -->
<div class="win-desktop--window">
<!-- App chrome -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-desktop win-desktop--app-window">
<path fill="#E48109" d="M50 72h200v143H50z" />
<path fill="#FFF" d="M50 91h200v117H50z" />
<path fill="#E5E5E5" d="M50 91h40v117H50z" />
<path fill="#CCC" d="M55 106.5h30v4H55zm0 10h30v4H55zm0 10h30v4H55zm0 10h30v4H55zm0 10h30v4H55zm0 10h30v4H55zm0 10h30v4H55zM50 81h200v10H50z" />
<path fill="#7F4506" d="M52 75h86v4H52z" />
<path fill="#7F4506" d="M232 73h7v7h-7zm-10 0h7v7h-7z" />
<!-- Close X button -->
<path d="M242 73h7v7h-7z" class="win-desktop--app-window--close-button" />
<!-- Sidebar link -->
<path fill="#CCC" d="M55 96.5h30v4H55z" class="win-desktop--app-link" />
<!-- In-app screen -->
<g fill="#E5E5E5" class="win-desktop-chrome">
<rect width="40" height="20" x="100" y="100" />
<rect width="40" height="20" x="150" y="100" />
<!-- Button 01 -->
<rect width="40" height="20" x="200" y="100" class="win-desktop--button win-desktop--button-01" />
<!-- Button 02 -->
<rect width="40" height="20" x="100" y="130" class="win-desktop--button win-desktop--button-02" />
<rect width="40" height="20" x="150" y="130" />
<rect width="40" height="20" x="200" y="130" />
<rect width="40" height="10" x="100" y="160" />
<rect width="90" height="10" x="150" y="160" />
<!-- Ok button-->
<rect width="40" height="10" x="200" y="180" class="win-desktop--button win-desktop--button-03" />
</g>
</svg>
<!-- Modal window -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-desktop win-desktop-chrome--modal">
<!-- Modal BG -->
<path d="M50 81h200v127H50z" opacity=".7" />
<!-- Modal dialog -->
<path fill="#FFF" d="M100 114.5h100v70H100z" />
<path fill="#E5E5E5" d="M110 124h80v6h-80zm0 12h80v6h-80zm0 12h60v6h-60zm5 16h30v10h-30z" />
<!-- Modal button -->
<path d="M155 164h30v10h-30z" class="win-desktop--button win-desktop--modal-button" />
</svg>
<!-- Tick overlay -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-desktop win-desktop--tick">
<rect width="200" height="127" x="50" y="81" fill="#FFF" opacity=".75" />
<circle cx="150" cy="145" r="35" fill="#91D329" />
<g fill="#FFF">
<rect width="40" height="10" x="135.3" y="140" transform="rotate(-45 155.307 145.005)" />
<rect width="25" height="10" x="126.89" y="145.3" transform="rotate(45 139.396 150.303)" />
</g>
</svg>
</div>
<!-- Mouse cursor -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-desktop win-desktop--cursor">
<g stroke="#000" stroke-miterlimit="10">
<path d="M153.7 152.66l-7.2-7v10l2.45-.97 1.56 3.63 2.57-1-1.56-3.7z" opacity=".4" />
<path fill="#FFF" d="M153.7 149.66l-7.2-7v10l2.45-.97 1.56 3.63 2.57-1-1.56-3.7z" />
</g>
</svg>
<!-- Screen shine -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-desktop">
<linearGradient id="a" x1="210" x2="21" y1="5" y2="194" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFF" stop-opacity=".5" />
<stop offset="1" stop-color="#FFF" stop-opacity="0" />
</linearGradient>
<linearGradient id="b" x1="272.22" x2="139.69" y1="90.22" y2="222.74" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFF" stop-opacity=".3" />
<stop offset="1" stop-color="#FFF" stop-opacity="0" />
</linearGradient>
<path fill="url(#a)" d="M270 65H30v138h69.68" />
<path fill="url(#b)" d="M270 111.9V88L129.95 213h23.95" />
</svg>
</div>
<h1 class="title title--win-app">تطبيقات سطح المكتب ويندوز
</h1>
</div>
<!-- WINDOWS MOBILE APPLICATIONS ========================================================================== -->
<div class="grid--cell">
<div class="animation-wrapper animation-wrapper--win-mobile-app-bg">
<!-- Device BG -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-mobile">
<path stroke="#000" stroke-width="10" stroke-miterlimit="10" d="M100 50h100v200H100z" stroke-linejoin="round" />
<path d="M100 50h100v200H100z" />
<path fill="#333" d="M134.28 143.18l32.53 32.53-5.6 5.7-32.5-32.5zm-8.48 8.48l26.86 26.87-5.65 5.66-26.8-26.9zm11.3-11.3l36.78-36.78 2.83 2.83-36.7 36.8zm5.67 5.64l45.25-45.24 2.83 2.83-45.25 45.2zm5.65 5.67l13.43-13.43 2.83 2.83-13.44 13.43zm5.66 5.65l18.38-18.38 2.83 2.83-18.4 18.38z"
/>
<path fill="#7F807F" d="M122.13 146.9c.6.6.22.9-.23 1.35l-1.9 1.9-3.2 3.2c-.4.4-1.12-.44-1.22-.78-.1-.33.33-.6.53-.8l1.8-1.8-8.1-8.15-.8 3.3c-.3 1-1.4-.12-1.3-.78 0-.35.2-.76.3-1.1.2-1 .44-1.97.65-2.95.05-.4 1.07-1.6 1.44-1.2.26.2.5.4.7.7l3.3 3.3 5.4 5.4 1.96-2c.27-.3.68.1.88.3.1.1-.1-.1 0 0zm4.1-13.76c2.56 2.55 4.8 6.27 1.73 9.36-3.08 3.1-6.6.6-9.1-1.9-2.53-2.53-4.8-6.27-1.72-9.35 3.1-3.1 6.6-.6 9.1 1.9.82.8-.9-.9 0 0zm-1.35 1.56c-1.6-1.6-4.44-4.4-6.66-2.2-2.15 2.16.42 4.96 2 6.55 1.42 1.4 4 4.1 6.17 2.6 2.9-2 .2-5.2-1.6-6.95zm4-6.68c.62.62.72 1.16.07 1.8-.66.67-1.2.57-1.82-.06-.64-.64-.77-1.17-.1-1.84.67-.67 1.2-.54 1.84.1.18.18-.2-.2 0 0zm5.74 5.75c.63.63.74 1.17.1 1.82-.68.6-1.2.5-1.84-.1-.63-.7-.75-1.2-.1-1.9.67-.7 1.22-.6 1.84.1.2.1-.18-.2 0 0zm6.64-11c2.37 2.36 1.2 5.56-1.1 7.5-.66.55-2.4 1.9-3.33 1.4-.32-.18-.8-.57-.9-.93-.16-.47 1.06-.63 1.35-.74 2.23-.9 5.22-4.1 2.18-6.04-2.05-1.3-4 .88-5.35 2.22-.4.47-1.6-.64-1.1-1.1.2-.34.7-.7 1-.95.9-.88 1.5-2.13 1-3.36-.4-1.24-1.8-2.1-3.1-1.52-1.2.54-1.8 1.8-2.1 3-.05.25-.1 1.2-.53 1.04-.47-.2-.97-.8-.97-1.3-.05-2.3 2.6-5 4.8-5.1 1.46-.1 2.8 1 3.46 2.2.63 1.2.4 2.4-.2 3.5 1.5-1.2 3.64-1.4 5.05 0 .5.5-.32-.36 0 0zm6.72-11.37c2.55 2.55 4.8 6.27 1.72 9.36-3.08 3.08-6.6.6-9.1-1.9-2.53-2.54-4.8-6.28-1.72-9.35 3.1-3 6.6-.6 9.1 1.9zm-1.36 1.55c-1.6-1.6-4.44-4.4-6.65-2.2-2.16 2.16.42 4.97 2 6.56 1.4 1.4 4 4.1 6.16 2.7 2.93-2 .23-5.2-1.5-6.9-.54-.5.4.4 0 0z"
/>
</svg>
<!-- Home screen -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-mobile win-mobile--home">
<!-- BG -->
<path d="M100 50h100v200H100z" class="absolute win-mobile win-mobile--home-bg" />
<!-- 1st row -->
<g class="absolute win-mobile win-mobile--home-row-01">
<path fill="#0056A7" d="M100 61h32v32h-32zm0 34h66v32h-66z" />
<path fill="#7A3293" d="M100 129h32v32h-32z" />
<path fill="#399743" d="M100 163h15v15h-15zm17 0h15v15h-15zm-17 17h15v15h-15zm17 0h15v15h-15z" />
<path fill="#0056A7" d="M100 197h66v32h-66zm0 34h15v15h-15zm17 0h15v15h-15z" />
</g>
<!-- 2nd row -->
<g class="absolute win-mobile win-mobile--home-row-02">
<path fill="#7A3293" d="M134 61h32v32h-32z" />
<path d="M134 129h32v32h-32z" class="win-mobile--home-shortcut" />
<path fill="#0056A7" d="M134 163h32v32h-32zm0 68h15v15h-15zm17 0h15v15h-15z" />
</g>
<!-- 3rd row -->
<g class="absolute win-mobile win-mobile--home-row-03">
<path fill="#7A3293" d="M168 61h32v32h-32z" />
<path fill="#F57929" d="M168 95h32v32h-32z" />
<path fill="#0056A7" d="M168 163h32v32h-32zm0 34h32v32h-32zm0 34h32v15h-32z" />
<path fill="#399743" d="M168 129h15v15h-15zm17 0h15v15h-15zm-17 17h15v15h-15zm17 0h15v15h-15z" />
</g>
</svg>
<!-- Mobile app -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-mobile win-mobile--app-01">
<!-- BG -->
<path d="M100 50h100v200H100z" class="win-mobile--app-01--bg" />
<!-- App screen 01 icons -->
<g class="absolute win-mobile win-mobile--app-01-icons">
<path d="M108 94h22v22h-22z" class="win-mobile--app-01--icons--shortcut-01" />
<path d="M108 184h22v22h-22z" class="win-mobile--app-01--icons--shortcut-02" />
<g fill="#fff" opacity="0.2">
<path d="M108 64h22v22h-22z" />
<path d="M138 64h54v7h-54z" />
<path d="M138 75h54v4h-54zM138 82h54v4h-54z" />
<path d="M138 94h54v7h-54z" />
<path d="M138 105h54v4h-54zM138 112h54v4h-54z" />
<path d="M108 124h22v22h-22z" />
<path d="M138 124h54v7h-54z" />
<path d="M138 135h54v4h-54zM138 142h54v4h-54z" />
<path d="M108 154h22v22h-22z" />
<path d="M138 154h54v7h-54z" />
<path d="M138 165h54v4h-54zM138 172h54v4h-54z" />
<path d="M138 184h54v7h-54z" />
<path d="M138 195h54v4h-54zM138 202h54v4h-54z" />
<path d="M108 214h22v22h-22z" />
<path d="M138 214h54v7h-54z" />
<path d="M138 225h54v4h-54z" />
</g>
</g>
</svg>
<!-- App screen 02 icons -->
<div class="absolute win-mobile win-mobile--app-02">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<rect width="100" height="200" x="100" y="50" fill="#000000" />
<g fill="#4D4D4D">
<rect width="22" height="22" x="139" y="64" />
<rect width="22" height="22" x="170" y="64" class="win-mobile--app-02--button_03" />
<rect width="22" height="22" x="108" y="64" />
<rect width="22" height="22" x="139" y="94" class="win-mobile--app-02--button_04" />
<rect width="22" height="22" x="170" y="94" />
<rect width="22" height="22" x="108" y="94" class="win-mobile--app-02--button_01" />
<rect width="22" height="22" x="139" y="124" />
<rect width="22" height="22" x="170" y="124" />
<rect width="22" height="22" x="108" y="124" />
<rect width="22" height="22" x="139" y="154" />
<rect width="22" height="22" x="170" y="154" />
<rect width="22" height="22" x="108" y="154" class="win-mobile--app-02--button_05" />
<rect width="22" height="22" x="139" y="184" class="win-mobile--app-02--button_02" />
<rect width="22" height="22" x="170" y="184" class="win-mobile--app-02--button_06" />
<rect width="22" height="22" x="108" y="184" />
</g>
</svg>
</div>
<!-- Device decoration -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-mobile">
<path d="M100 50h100v11H100zm0 182h100v18H100z" />
<rect width="8" height="5" x="104" y="53" fill="#333" />
<rect width="8" height="5" x="188" y="53" fill="#333" />
<!-- Back button -->
<rect width="8" height="8" x="104" y="237" class="win-mobile--home-back" />
<rect width="8" height="8" x="188" y="237" fill="#333" />
<path fill="#FFF" d="M154 241v-4l-4 .74V241m0 1v3.26l4 .74v-4m-5-1v-3.17l-3 .6V241m0 1v2.57l3 .6V242" />
</svg>
<!-- Screen shine -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-mobile">
<linearGradient id="a" x1="203.29" x2="97.8" y1="76.29" y2="181.78" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFF" stop-opacity=".3" />
<stop offset="1" stop-color="#FFF" stop-opacity="0" />
</linearGradient>
<linearGradient id="b" x1="175" x2="84.49" y1="25" y2="115.51" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFF" stop-opacity=".5" />
<stop offset="1" stop-color="#FFF" stop-opacity="0" />
</linearGradient>
<path fill="url(#a)" d="M100 162.26v21.72L200 96.9V73" />
<path fill="url(#b)" d="M100 50v81.02L200 50" />
</svg>
</div>
<h1 class="title title--win-mobile-app">تطبيقات ويندوز موبايل
</h1>
</div>
</div>


 وهذا الكود كما ذكرت من قيل يمكن اضافته في اي مكان

0
إقرأ المقال

Mohon Aktifkan Javascript!Enable JavaScript

البث المباشرة مع يونس ورضاوي للإجابة على تساؤلاتكم التقنية كل خميس فقط. على مدونة ويب تيكقريبا....
7:30 بتوقيت غرينيتش