مجالات العمل الحر ...

ليست هناك تعليقات :

 دى المجالات بالتفصيل لو تعرف حد اعمله منشن وهنزل بوست تانى لفرص العمل وكيف نستغلها ولو جديد هنزل بوست ازاى تتأهل للدخول فى أى مجال منهم :)
 أولاً مجال التصميم بشكل عام
- تصميم لوجوهات
- رسم شخصيات كارتون
- تصميم أغلفة كتب
- تصميم مواقع
- تصوير ومعالجة صور
- تصميم فلايرات وبروشورات
- تصميم كروت شخصية
- تصميم هندسى
- عمل بريزنتيشن Powerpoint
- معالجة وتعديل صور بالفوتوشوب
- تصميم 3 دى موديل
- تصميم تى شيرتات
 - تعليم تصميم عن بعد
ثانياً : الكتابة والترجمة
- كتابة محتوى لمواقع
- ترجمة محتوى
- كتابة اخبار
- كتابة سيرة ذاتية
- كتابة تقييم عن منتج او خدمة
 - نطق اى كلام مكتوب باى لغة والعكس تحويل اى كلام منطوق للكتابة
ثالثاً : الفيديو والانيميشن :
- عمل اعلانات
- عمل شغل ثرى دى
- عمل رسوم متحركة
- تعديل ومعالجة فيديوهات
 - تحويل ملفات من امتداد الى امتداد تانى (باور بوينت الى فيديو مثلا)
رابعاً : الصوتيات :
- تعديل ومعالجة الملفات الصوتية (الهندسة الصوتية
- دروس موسيقى
- مؤثرات صوتية
- تعليق صوتى
خامساً البرمجة ومتعلقاتها :
- تطوير مواقع
- شغل ووردبريس
- تطبيقات موبايل
- نظم ادارة محتوى
- تحويل ملفات
- تجارة الكترونية
- تسويق الكترونى
- قواعد بيانات
- تطبيقات ديسكتوب
- تحليل بيانات وتقارير
 - دعم فنى
سادساً : التسويق الرقمى ومتعلقاته:
- تحليل مواقع SEO
- سوشيال ميديا
- تجارة دومينات
 - استضافة مواقع
سابعاً : دعاية واعلان
- بانرات دعائية
- ارسال حملات SMS
 - عمل فيديوهات لترويج منتج معين او موقع او غيره
ثامناً : البيزنس :
- كتابة خطة عمل
- استشارات فى ادارة الاعمال
- دراسة السوق
- استشارات قانونية
 - استشارات مالية
تاسعاً تخصصات منوعة
- نصائح تربوية
- نصائح لتربية الحيوانات الاليفة
- نصائح صحية
 - نصائح نفسية
- نصائح سياحية
- نصائح تخسيس
 اكيد مجالاك هنا موجود ولو مش موجود نزله فى كومنت وانا هقلك تبع الفريلانسز ولا لا ..

يعني ايه شغل فريلانس ! Freelance jobs.

ليست هناك تعليقات :







هنتكلم في الموضوع ده بشكل مفصل شوية ،
 فريلانس هو أي عمل حر بتقوم بيه لشخص او مجموعه مقابل الدولارات ودي العمله الشائعه بين الفريلانسرز . طيب هو يختلف عن اي عمل تاني ازاي ؟
 الفريلانس إنت بتكون الكل في الكل انت المدير والمنسق والمسوق وانتا الموظف والكول سنتر وبيكون مستقل بنفسه .
 المجالات اللي معظم الفريلانسر بيتعلموها كتير عشان يدخلوا للعمل الحر ده شاهد الصوره المرفقه مع المنشور ،،
 طيب حضرتك لو أنا شايف نفسي في مجال تكنولوجيا المعلومات منها تصميم جرافيك ازاي اوصل للعملاء المهتمين بالتصميم ؟
 بعد ما تكون مستعد تماما للعمل والمفروض تبدأ عمل تطوعي مبدئيًا حتي تاخد خبره بمجرد ما تكون واثق من نفسك تعرض اعمالك في صفحاتك الشخصية تويتر يوتيوب في حالة الموشن جرافيك فيس بوك بيهانس وغيره ..
 تبدأ بمواقع الخدمات المصغره اللي هتطور نفسك اكتر فيها زي خمسات دوت كوم ولو عندك لغة انجليزي ولو بسيطه تدخل لموقع فريلانسر .
ومن هنا هتكون بدايتك ..
 طيب عايز نصيحتك ليا يا عصام الدين وإنت ليك خمس سنين في المجال ده وليك سمعه حلوه ف خمسات وتقييمات حلوه وتجربتك لتطوير اكتر من 25 ويب سايت .
 اولا الحمد لله علي كل حال وده توفيق من ربنا ومن ناس كتير اسست فيا كل الثوابت والروح اللي تخليني استمر وسط كمية الانتقادات اللي مريت بيها !
 أنا اتعلمت كتير من بداية ازاي اكتب اسمي علي صورة وحاجات كتير ملهاش قيمه في مجال الديزاين الكبير او مجال تطوير الويب اللي كانت بدايته تطوير البلوجر وحلم امتلاك موقع باسمي .
 كان واقف معايا شباب سوريين قدموا ليا كتير جدا أنا مريت بمراحل فشل واخدت قرارات كتير اني ابعد عن المجال ده لكن القرار نفسه كان صعب لما يوقف جنبك حد من بلد غير بلدك ولما طلبت من حد من بلدي للأسف مشفتش حد عنده خبره كافيه متاح والمتاح مشغول وباختصار كل اللي بعمله جزء من اللي شفته من الشباب السوري رغم كمية العقبات اللي قدامهم ودايما كانوا يقولوا " مش معني إنو انتا ما معك حدا ليدعمك تنزل لبحر الفشل واحنا مين ما كان ما بيقدر يدعمنا اكتر من حالنا خلي حالك اقوي .. " فهمت لحظتها اني لسه قدامي مشوار مع نفسي اتعلم كل حاجه وادي كل حاجه وقتها الكامل وحقها وكان مصدري الاول مواقع اجنبية لإن المحتوي العربي فقير جداا .
#اتعلم_صح
#فريلانسر
#عصام_الدين

كيفية الحصول على زوار حقيقيين لموقعك

ليست هناك تعليقات :

بعض الطرق المفيدة فى اشهار وزيادة الزوار لموقعك ومدونتك ..

- محركات البحث
 يمكن أن تحصل على عدد هائل من الزيارات لموقعك من خلال محركات البحث .  و ذلك بتحسين السيو SEO الخاص بموقعك .


- الوصلات الخارجية
وهى عن طريق عمل وصلات خارجية لموقعك او مواضيع تقوم بإعادة توجيه الزائر الى موقعك .

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

- الاعلان في المواقع الاجتماعية .
وهى طرح اعلانات ممولة لموقعك او لمنتج معين داخل موقعك فى الفيس بوك وتويتر وغيرهم .

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

قالب value معرب للبلوجر

ليست هناك تعليقات :



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

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

  1. القالب متجاوب مع السيو
  2. القالب يتمتع بخاصية العرض علي جميع الاجهزة بطرق مناسبه جدًأ
  3. القالب يضم محرك بحث أحترافيـــ
  4. القالب يضم قائمة علوية منسدلة
  5. القالب يضم أزرار المتابعة الأجتماعية 
  6. القالب صديق محركات البحث وسريع التصفح
  7. القالب مهيئ لمحركات البحث باشكل أحترافي 
  8. والمزيد من الإضافات ... أكتشفها بنفسك

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

ليست هناك تعليقات :


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


أولا نذهب الى التخطيط ثم نضيف ويدجيت HTML/JavaScript


<style>
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://mybloggertricks.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;   
-moz-transition: ease-in 0.2s all;   
-o-transition: ease-in 0.2s all;   
-ms-transition: ease-in 0.2s all;   
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="###" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="###" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="###" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="###" rel='external nofollow' target='_blank' ></a>
</div>

وبالطبع لا تنسي استبدال ال ### بروابط صفحاتك الخاصة على جوجل والفيس بوك وتويتر .

دمتم بخير :)

وضع اداة محرر html فى مدونتك

ليست هناك تعليقات :




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


<div class="post hentry">
<a name="8811546607569798962"></a>
<span itemprop="itemreviewed"><span itemprop="description">
<h3 class="post-title entry-title">
HTML Editor
</h3>
</span></span>
<div class="post-header">
<div class="post-header-line-1" style="padding:0 15px;margin-bottom:10px;">
<div class="authordata"><span class="post-author vcard">
</span>, <span class="post-timestamp">
</span>
</div>
<div class="commentsdata"><span class="post-comment-link">
</span>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div class="post-body entry-content">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br></div>
<table style="width: 330px;">
<tbody>
<tr><td valign="top"><form method="post" name="form1">
<textarea name="code" onclick="focus(this.code)" style="border-radius: 3px; border: solid 1px #cccccc; color: #a3a3a3; font-family: arial; font-size: 12px; font-weight: bold; height: 500px; margin: 0px; padding: 5px; scroll: auto; width: 200px;">&lt;style&gt;
Add CSS Code Here
&lt;/style&gt;

Add HTML Code Here</textarea>
</form>
</td><td valign="top"><iframe frameborder="0" name="preview" src="about:blank" style="background: #ffffff; border-radius: 3px; border: solid 1px #cccccc; height: 500px; padding: 5px; width: 315px;">
</iframe>
</td>
</tr>
</tbody></table>
<br>
<button onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">
 Preview</button>
<button id="#send" onclick="window.document.form1.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">
Clear </button>
<br>
 
 



<br>
<br>
<br>
<br></div>
<div style="clear: both;"></div>
</div>
<div class="post-footer">
<div class="post-footer-line post-footer-line-1">
<span class="post-icons">
<span class="item-control blog-admin pid-527409205">
<a href="https://www.blogger.com/page-edit.g?blogID=487386897649934372&amp;pageID=8811546607569798962&amp;from=pencil" title="Edit Page" target="_blank">
<img alt="" class="icon-action" height="18" src="http://img2.blogblog.com/img/icon18_edit_allbkg.gif" width="18">
</a>
</span>
</span>
<div class="post-share-buttons">
<a class="goog-inline-block share-button sb-email" href="https://www.blogger.com/share-post.g?blogID=487386897649934372&amp;pageID=8811546607569798962&amp;target=email" target="_blank" title="Email This">
<span class="share-button-link-text">Email This</span>
</a><a class="goog-inline-block share-button sb-blog" href="https://www.blogger.com/share-post.g?blogID=487386897649934372&amp;pageID=8811546607569798962&amp;target=blog" onclick="window.open(this.href, &quot;_blank&quot;, &quot;height=270,width=475&quot;); return false;" target="_blank" title="BlogThis!">
<span class="share-button-link-text">BlogThis!</span>
</a><a class="goog-inline-block share-button sb-twitter" href="https://www.blogger.com/share-post.g?blogID=487386897649934372&amp;pageID=8811546607569798962&amp;target=twitter" target="_blank" title="Share to Twitter">
<span class="share-button-link-text">Share to Twitter</span>
</a><a class="goog-inline-block share-button sb-facebook" href="https://www.blogger.com/share-post.g?blogID=487386897649934372&amp;pageID=8811546607569798962&amp;target=facebook" onclick="window.open(this.href, &quot;_blank&quot;, &quot;height=430,width=640&quot;); return false;" target="_blank" title="Share to Facebook">
<span class="share-button-link-text">Share to Facebook</span>
</a>
<div class="goog-inline-block dummy-container"><div id="___plusone_0" style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 300px; height: 20px;"><iframe ng-non-bindable="" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 300px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" tabindex="0" vspace="0" width="100%" id="I0_1485616993910" name="I0_1485616993910" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&amp;source=blogger%3Ablog%3Aplusone&amp;size=medium&amp;width=300&amp;annotation=inline&amp;hl=en&amp;origin=http%3A%2F%2Fbbloggertutorials.blogspot.com.eg&amp;url=http%3A%2F%2Fbbloggertutorials.blogspot.com%2Fp%2Fhtml-editor_23.html&amp;gsrc=3p&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.ar.fRV-S-MQ0dQ.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCOoopkHr5NM_cofk4696iiBjgghQw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&amp;id=I0_1485616993910&amp;parent=http%3A%2F%2Fbbloggertutorials.blogspot.com.eg&amp;pfname=&amp;rpctoken=34415339" data-gapiattached="true" title="+1"></iframe></div></div>
</div>
</div>
<div class="post-footer-line post-footer-line-2"><span class="post-labels">
</span>
</div>
<div class="post-footer-line post-footer-line-3"><span class="post-location">
</span>
</div>
</div>
</div>

استخدام كاميرا الهاتف لتصبح ويب كام

ليست هناك تعليقات :


البعض يجد صعوبة فى ضبط الكاميرا الخاصة به وقد لا تتوفر كاميرا الويب عند الجميع , لذالك قمت بتجربة بسيطة اتمنى ان تفيدكم ان شاء الله .
سنعتمد على برنامج على الويندوز وضبط اعدادات التطبيق الذي نضعه على الهاتف الأندرويد ..
أولا نقوم بتحمل البرنامج على الويندوزمن هنا  ونقوم بتثبيته ثم فتح البرنامج كما بالصورة ثم نضغط على رمز الويفي wifi  فقط سنحتاج الى ال ip الذي يظهر لنا ( سنجده في التطبيق على الهاتف الاندرويد )..

الآن نقوم بتحميل التطبيق من جوجل بلاى من هنا  وتثبيته ثم نقل ال ip الموجود به الى البرنامج ثم نضغط start ..
ونتمنى لكم الاستمتاع بتطبيق الشرح البسيط :) دمتم بخير 

إضافة من أنا - profile card - للبلوجر

ليست هناك تعليقات :


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

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

 ]]></b:skin> 

ونضيف فوقه الكود التالى :

.profile-card {
  float: right;
background: #FFB300;
width: 56px;
height: 56px;
position: fixed;
left: 1220px;
top: 50%;
    z-index: 2;
overflow: hidden;
    opacity: 0;
    margin-top: 70px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0px 3px 6px rgba(0 ,0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
    -webkit-animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia_landscape 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
    animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia_landscape 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}
.profile-card header {
    width: 179px;
    height: 280px;
    padding: 40px 20px 30px 20px;
    display: inline-block;
    float: left;
    border-right: 2px dashed #EEEEEE;
background: #FFFFFF;
    color: #000000;
    margin-top: 50px;
    opacity: 0;
    text-align: center;
    -webkit-animation: moveIn 1s 3.1s ease forwards;
    animation: moveIn 1s 3.1s ease forwards;
}
.profile-card header h1 {
    color: #FF5722;
}
.profile-card header a {
    display: inline-block;
    text-align: center;
    position: relative;
    margin: 25px 30px;
}
.profile-card header a:after {
position: absolute;
    content: "";
bottom: 3px;
right: 3px;
width: 20px;
height: 20px;
    border: 4px solid #FFFFFF;
    -webkit-transform: scale(0);
    transform: scale(0);
    background: -webkit-linear-gradient(top, #2196F3 0%, #2196F3 50%, #FFC107 50%, #FFC107 100%);
    background: linear-gradient(#2196F3 0%, #2196F3 50%, #FFC107 50%, #FFC107 100%);
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-animation: scaleIn 0.3s 3.5s ease forwards;
    animation: scaleIn 0.3s 3.5s ease forwards;
}
.profile-card header a > img {
    width: 120px;
    max-width: 100%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: -webkit-box-shadow 0.3s ease;
    transition: box-shadow 0.3s ease;
    -webkit-box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06);
}
.profile-card header a:hover > img {
    -webkit-box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1);
}
.profile-card .profile-bio {
    width: 175px;      
    height: 180px;
    display: inline-block;
    float: right;
    padding: 50px 20px 30px 20px;
background: #FFFFFF;
    color: #333333;
    margin-top: 50px;
    text-align: center;
    opacity: 0;
    -webkit-animation: moveIn 1s 3.1s ease forwards;
    animation: moveIn 1s 3.1s ease forwards;
}
.profile-social-links {
    width: 218px;      
    display: inline-block;
    float: right;
    margin: 0px;
    padding: 15px 20px;
background: #FFFFFF;
    margin-top: 50px;
    text-align: center;
    opacity: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-animation: moveIn 1s 3.1s ease forwards;
    animation: moveIn 1s 3.1s ease forwards;
}
.profile-social-links li {
    list-style: none;
    margin: -5px 0px 0px 0px;
    padding: 0px;
    float: left;
    width: 33.3%;
    text-align: center;
}
.profile-social-links li a {
    display: inline-block;
    width: 24px;
    height: 24px;
    padding: 6px;
    position: relative;
    overflow: hidden!important;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.profile-social-links li a img {
    position: relative;
    z-index: 1;
}
.profile-social-links li a:before {
    display: block;
    content: "";
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 0px;
    top: 0px;
    width: 36px;
    height: 36px;
    opacity: 1;
    -webkit-transition: transform 0.4s ease, opacity 1s ease-out;
    transition: transform 0.4s ease, opacity 1s ease-out;
    -webkit-transform: scale3d(0, 0, 1);
    transform: scale3d(0, 0, 1);
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.profile-social-links li a:hover:before {
    -webkit-animation: ripple 1s ease forwards;
    animation: ripple 1s ease forwards;
}
.profile-social-links li a img,
.profile-social-links li a svg {
    width: 24px;
}

@media screen and (min-aspect-ratio: 4/3) {
    body {
        background-size: 100% auto;
    }
    body:before {
        width: 0px;
    }
    @-webkit-keyframes puff {
        0% {
            top: 100%;
            width: 0px;
            padding-bottom: 0px;
        }
    100% {
            top: 50%;
            width: 100%;
            padding-bottom: 100%;
        }     }
    @keyframes puff {
        0% {
            top: 100%;
            width: 0px;
            padding-bottom: 0px;
        }
    100% {
            top: 50%;
            width: 100%;
            padding-bottom: 100%;
        }     }
}
@media screen and (min-height: 480px) {
.profile-card {
-webkit-animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia_portrait 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia_portrait 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}
.profile-card header {
        width: auto;
        height: auto;
        padding: 30px 20px;
        display: block;
        float: none;
        border-right: none;
    }
    .profile-card .profile-bio {
        width: auto;
        height: auto;
        padding: 15px 20px 30px 20px;
        display: block;
        float: none;
margin-right: 20px;
    }
    .profile-social-links {
        width: 100%;    
        display: block;
        float: none;
    }
}
@media screen and (min-aspect-ratio: 4/3) {
    body {
        background-size: 100% auto;
    }
    body:before {
        width: 0px;
-webkit-animation: puff_landscape 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
animation: puff_landscape 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
}
}
@-webkit-keyframes init {
    0% {
    width: 0px;
    height: 0px;
    }
100% {
        width: 56px;
        height: 56px;
        margin-top: 0px;
        opacity: 1;
    } }
@keyframes init {
    0% {
    width: 0px;
    height: 0px;
    }
100% {
        width: 56px;
        height: 56px;
        margin-top: 0px;
        opacity: 1;
    } }
@-webkit-keyframes puff_portrait {
    0% {
        top: 100%;
        height: 0px;
        padding: 0px;
    }
100% {
        top: 50%;
        height: 100%;
        padding: 0px 100%;
    } }
@keyframes puff_portrait {
    0% {
        top: 100%;
        height: 0px;
        padding: 0px;
    }
100% {
        top: 50%;
        height: 100%;
        padding: 0px 100%;
    } }
@-webkit-keyframes puff_landscape {
0% {
top: 100%;
width: 0px;
padding-bottom: 0px;
}
100% {
top: 50%;
width: 100%;
padding-bottom: 100%;
} }
@keyframes puff_landscape {
0% {
top: 100%;
width: 0px;
padding-bottom: 0px;
}
100% {
top: 50%;
width: 100%;
padding-bottom: 100%;
} }
@-webkit-keyframes borderRadius {
    0% {
        -webkit-border-radius: 50%;
    }
100% {
        -webkit-border-radius: 0px;
    } }
@keyframes borderRadius {
    0% {
        -webkit-border-radius: 50%;
    }
100% {
        border-radius: 0px;
    } }
@-webkit-keyframes moveDown {
    0% {
       top: 50%;
    }
50% {
  top: 40%;
    }
    100% {
       top: 100%;
    } }
@keyframes moveDown {
    0% {
       top: 50%;
    }
50% {
  top: 40%;
    }
    100% {
       top: 100%;
    } }
@-webkit-keyframes moveUp {
    0% {
        background: #FFB300;
        top: 100%;
    }
50% {
  top: 40%;
    }
    100% {
       top: 50%;
       background: #E0E0E0;
    } }
@keyframes moveUp {
    0% {
        background: #FFB300;
        top: 100%;
    }
50% {
  top: 40%;
    }
    100% {
       top: 50%;
       background: #E0E0E0;
    } }
@-webkit-keyframes materia_landscape {
    0% {
        background: #E0E0E0;
    }
    50% {
        -webkit-border-radius: 4px;
    }
    100% {
        width: 440px;
        height: 280px;
        background: #FFFFFF;
        -webkit-border-radius: 4px;
    }
}
@keyframes materia_landscape {
    0% {
        background: #E0E0E0;
    }
    50% {
        border-radius: 4px;
    }
    100% {
        width: 440px;
        height: 280px;
        background: #FFFFFF;
        border-radius: 4px;
    }
}
@-webkit-keyframes materia_portrait {
0% {
background: #E0E0E0;
}
50% {
-webkit-border-radius: 4px;
}
100% {
width: 280px;
height: 440px;
background: #FFFFFF;
-webkit-border-radius: 4px;
}
}
@keyframes materia_portrait {
0% {
background: #E0E0E0;
}
50% {
border-radius: 4px;
}
100% {
width: 280px;
height: 440px;
background: #FFFFFF;
border-radius: 4px;
}
}
@-webkit-keyframes moveIn {
    0% {
        margin-top: 50px;
        opacity: 0;
    }
100% {
        opacity: 1;
        margin-top: -20px;
    } }
@keyframes moveIn {
    0% {
        margin-top: 50px;
        opacity: 0;
    }
100% {
        opacity: 1;
        margin-top: -20px;
    } }
@-webkit-keyframes scaleIn {
    0% {
        -webkit-transform: scale(0);
    }
100% {
        -webkit-transform: scale(1);
    } }
@keyframes scaleIn {
    0% {
        transform: scale(0);
    }
100% {
        transform: scale(1);
    } }
@-webkit-keyframes ripple {
    0% {
        transform: scale3d(0, 0, 0);
    }
    50%, 100% {
        -webkit-transform: scale3d(1, 1, 1);
    }
    100% {
        opacity: 0;
    }
}
@keyframes ripple {
    0% {
        transform: scale3d(0, 0, 0);
    }
    50%, 100% {
        transform: scale3d(1, 1, 1);
    }
    100% {
        opacity: 0;
                   }

ثم نبحث عن الوسم

    </header>


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

<aside class='profile-card'>
<header>
<!-- here&#8217;s the avatar -->
<a href='https://www.facebook.com/essameldien20'>
<img src='https://4.bp.blogspot.com/-uQlow4p1tqU/V7t9_rmKX2I/AAAAAAAAAFU/AjL92rcOE1I34_04KnnlZyzHmQj5lKP5wCLcB/s1600/Untitled-1%2Bcopy.png'/>
</a>
<!-- the username -->
<h1>من أنا&#1567;</h1>
<!-- and role or location -->
<h2>عصام الدين</h2>
</header>
<!-- bit of a bio; who are you? -->
<div class='profile-bio'>
<p>خبير بلوجر ووردبريس.مطور ويب </p>
<p>مصر / قنا</p>
<p>واتساب 0201129692448</p>
</div>


</aside>
<!-- that&#8217;s all folks! -->
    </div> 

 والنتيجة تظهر فى مدونتكم فقط قم بتغيير ما باللون الاحمر لمعلوماتكم الخاصة .
بالتوفيق لكم ..