إضافة تعريف الكاتب | الشكل الثاني

إضافة تعريف الكاتب | الشكل الثاني

يوجد الآن مشاهدة التعليقات : 37

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

من طلبات الأعضاء المتوالية ، إضافة تعريف الكاتب النسخة الثانية بشكلها البسيط والجميل تحتوي على أيقونات الشبكات الإجتماعية من " تويتر ، فيسبوك ، يوتوب ، جوجل بلس "،لمن أراد الشكل الأول من تعريف الكاتب فليتفضل من هنا
شرح طريقة التركيب
1. داخل القالب ابحث بإستعمال Ctrl+F عن <b:skin/><[[
3. ضع الكود التالي قبله
/* CSS Author Box V2 */
.pro-me-left i{font-size:200%;margin:3px;color:#E2E2E2;text-shadow:2px 2px #FFF;}
.pro-me{margin:10px auto;width:635px;background:rgba(238, 238, 238, 0.3);border:1px solid rgba(221, 221, 221, 0.3);text-align:right;display:table;}
.pro-me-right{float:right;width:200px;margin:5px 5px 30px 5px;position:relative;border-left:1px dashed #DDD;}
.pro-me-left{width:98%;text-shadow:1px 1px #fff;font-family: Electrolize,ge_ss_threeregular;font-size:100%;color:#666;padding:10px;}.pro-me-left h6 a{font-family: 'Great Vibes';font-size: 35px;margin:20px auto;text-decoration:none;}
.hero-image-parent{position:relative;height:160px;width:160px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border:1px dashed #DDD;}
.pos{position:absolute;display:block;height:33px;width:33px;border:1px solid #DDD;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;z-index:100;opacity:0;}
.hero-image-holder{width:130px;height:130px;position:relative;margin:0 auto;margin-right: 12px;}
.hero-image.hero_animate{width:130px;height:130px;margin:-52px 0 0 -64px;border-radius:50%;}
.hero-image{position: absolute;top: 45%;left: 46%;overflow: hidden;background-position: center center;background-repeat: no-repeat;box-shadow: inset 5px 0 0 4px rgba(242, 242, 242, 1), 0 1px 2px rgba(150, 150, 150, 0.73);transition: all 0.2s ease-out;border: 4px solid #fff;}
.pos_1{top:60px;left:-26px;}.pos_2{top:125px;left:0px;}.pos_3{top:150px;right:65px;}.pos_4{top:129px;right:3px;}.pos span{display:none;top:0;}a.pos i{color:#34AACD;font-size:22px;}a.pos.pos_1 i{position:relative;top:5px;right:5px;}a.pos.pos_2 i{position:relative;top:5px;right:7px;}a.pos.pos_3 i{position:relative;top:6px;right:11px;}a.pos.pos_4 i{position:relative;top:7px;right:4px;}
a.pos.pos_1 i,a.pos.pos_2 i,a.pos.pos_3 i,a.pos.pos_4 i{color:#fff;}.pos_2{background:#F03D3D;}.pos_1{background:#2AA9E0;}.pos_3{background:#3B5998;}.pos_4{background:#E42D2D;}
.fa-star:before {content: "\f005";}
.pos_4:hover {background: #CF2C2C;}.pos_3:hover {background: #4669B3;}.pos_2:hover {background: #E24D4D;}
4. ابحث عن <data:post.body/> ضع قبله أو بعده الكود الأتي
* ملاحظة قد تجد الكود متكرر مرتين أو أكثر الأخير هو المقصود -- بإمكانك الإستغناء عن البحث عنه إذا كان لديك أزرار المشاركة إلى غير ذلك وتعرف مكان الأكواد بالبحث عن الإسم
<div class='pro-me'>
<div class='pro-me-right'>
<div class='hero-image-parent'>
<a class='pos pos_3' href='https://www.facebook.com/' style='opacity: 1;'><i class='fa fa-facebook'/></a>
<a class='pos pos_1' href='https://twitter.com/' style='opacity: 1;'><i class='fa fa-twitter'/></a>
<a class='pos pos_2' href='https://www.youtube.com/' style='opacity: 1;'><i class='fa fa-youtube'/></a>
<a class='pos pos_4' href='https://plus.google.com/' style='opacity: 1;'><i class='fa fa-google-plus'/></a>
<div class='hero-image-holder'>
<img alt='Hm' class='hero-image hero_animate' src='http://3.bp.blogspot.com/--ezHEbfm2Oc/VGFApHQo2-I/AAAAAAAAGsQ/Ii6q-8hEbFI/s1600/iHussam.png'/>
</div>
</div>
</div>
<div class='pro-me-left'>
<h6><a class='g-profile' data-gapiattached='true' data-gapiscan='true' data-onload='true' href='https://plus.google.com/+iHussam' rel='author' title='Hm'>
<span>iHussam</span>
</a>
</h6>
<p><span style='font-style: normal; font-weight: normal;'>حسام بها</span> :  من <span style='font-style: normal;color:#EC2424;'>المملكة المغربية</span>, <span style='font-style: normal;color:#333333;'>اهتمامي وحبي لتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين &#1548; كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحة وواضبة على ما أحبه من عمل لأصل إلى ما أريده &#1548; ليس كمستقبل لكن كهدف حققته </span>,<span style='font-style: normal;color:#333333;'>لدي إهتمامات اخرى منها الرياضة &#1548; ألعاب الفيديو &#1548; والتصميم بحد ذاته ومدونة عرب ويب تعبر عما أهواه .  </span><br/>
<i class='fa fa-star'/><i class='fa fa-star'/><i class='fa fa-star'/><i class='fa fa-star-half-o'/><i class='fa fa-star-half-o'/>
</p></div>
</div>
* ضع روابط الشبكات الإجتماعية باللون المحدد بالأصفر
* غير صورة الكاتب الرابط محدد باللون الأزرق
الأكواد المستعملة
* الأكواد التالية توضع فوق : </head>
1. كود الأيقونات إذا كان لديك لا داعي لإضافته
<link href='//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css' rel='stylesheet'/>
2. الخطوط المستعملة
* خط : ge_ss_threeregular
* خط : 'Great Vibes'
<link href='https://ar1web-com.googlecode.com/svn/trunk/font-ge_dinar.css' rel='stylesheet'/>

<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'/>
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 37 تعليقًا:

  1. شكراً أخي اضافة مميزة بحق
    رأيك بمدونتي المتواضعة
    http://arabic3professional.blogspot.com/

    ردحذف
  2. غير معرف11/24/2014

    شكرا جزيلا لك أخي حسام ^_^

    ردحذف
  3. شكرا أخى لتلبيتك طلبى

    ردحذف
  4. اخى الايقونات لا تظهر عندى يظهر لون الخلفيه فقط @@,

    ردحذف
    الردود
    1. هل وضعت الكود الخاص بهم @@, ضمن التدوينة

      حذف
    2. http://ahmedelemamsite.blogspot.com/2014/11/blog-post.html
      هذا موضوع تجريبى لتجربه الاداه

      حذف
    3. http://ahmedelemamsite.blogspot.com/2014/11/blog-post.html
      هذا موضوع تجريبى لتجربه الاداه
      حتى تشوف الخطا

      حذف
    4. غير أسماء الأيقونات هم هكذا :
      fa fa-facebook
      fa fa-youtube
      fa fa-twitter
      fa fa-gplus
      ضع بدل fa fa هذه icon لتصبح هكذا : icon-facebook

      حذف
  5. khouya baghi nssawlak dak l2i3lan likayn fo9 f ra2issiya kif darti ta darti lih dak lcadr

    ردحذف
    الردود
    1. khassek def class o la id li3lan bach kat3teh t3riif o mnb3d kadiif lo css lihwa hada nefsso .
      margin: 0 auto;
      text-align: center;
      overflow: hidden;
      margin-top: 20px;
      background: url(http://4.bp.blogspot.com/-xaSAYDTCql4/U1AO14YolTI/AAAAAAAAD94/Lenz-oZ0o2c/s1600/pattern-1.png);
      padding: 1px 10px;
      width: 730px;

      حذف
  6. اخي لم أجد <[[ :( @@,

    ردحذف
  7. ابحث عن skin ستجده متكرر مرتين الأخير هو المقصود وسيظهر لك <b:skin/><[[

    ردحذف
  8. رووووووووعه شكراا

    ردحذف
  9. يعطيك العافيه يالغالي حسام اضافة جميلة موفق اخي

    ردحذف
  10. Ahmed Elemam12/24/2014

    http://elemamsite.blogspot.com/2014/12/10.html
    تظهر الاداه هكذا اخى ارجو المساعده وشكرا لك
    ♥♥♥♥

    ردحذف
  11. ضع الكود الأول فوق هذا الكود /* CSS Top Menu */ إبحثه عنه داخل القالب

    ردحذف
  12. Ahmed Elemam12/25/2014

    هناك خطا ظهر اخر الصورة ليست فى مكانها
    ههههههههههههههه
    انا اسف على الازعاج
    ارجو الحل

    ردحذف
  13. لقد تركت الكود متكرر إحذف الأول الذي وضعته

    ردحذف
  14. Ahmed Elemam12/25/2014

    حذفتة وما زالت نفس المشكله ♥

    ردحذف
  15. ابحث عن .hero-image.hero_animate وضع الكود التالي بدل الموجود margin: -58px 0 0 -73px; ثم إبحث عن .post img
    وإحذف هذا الكود background:#fff;

    ردحذف
  16. Ahmed Elemam12/26/2014

    قمت بتطبيق الخطوات وحدث هذا

    ردحذف
  17. Ahmed Elemam12/26/2014

    قمت بتطبيق الخطوات وحدث هذا
    http://im83.gulfup.com/lVrnm0.jpg

    ردحذف
  18. Ahmed Elemam12/26/2014

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

    http://im89.gulfup.com/wItpsi.jpg

    ردحذف
  19. أرسل القالب : info@ar1web.com
    أو ضع رابط تحميل وسأصلح المشكل

    ردحذف
  20. Ahmed Elemam12/27/2014

    http://www.gulfup.com/?xY8BQb
    تفضل اخى

    ردحذف
  21. أيمن المتوكل12/28/2014

    الطريقة لم تنجح اخي

    ردحذف
  22. Abdullah Ellaimouny1/01/2015

    اخى لم تعمل معى برجاء ربطها بقالبى وجزاك الله كل خير
    http://www.gulfup.com/?x6cT78

    ردحذف
  23. هلا اخي كيف اعمل اتصل بنا زي عندك كدا وتكون شغال http://prntscr.com/5zl3ui

    ردحذف
  24. Emad Dmarany4/24/2015

    السلام عليكم اخي العزيز حسام اشرح لي كيفية مسح السليدر الذي كان في القالب الخاص بك في الاعلى وارجو الشرح شكرا احي الكريم

    ردحذف
  25. Emad Dmarany4/24/2015

    وكيفية مسح هذه الاضافه

    ردحذف
  26. القالب لم ينشر لذا ليس هناك دعم فيه

    ردحذف
  27. Emad Dmarany4/24/2015

    شكرا حبيبي ♥

    ردحذف
  28. Emad Dmarany4/24/2015

    وانا ازاي احزف من القالب تبعي ♀

    ردحذف
  29. اخي اريد هذه الاضافه الذي في الصوره التاليه

    http://im76.gulfup.com/BLwTUn.png

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

    ردحذف
  31. شكرا لك اخي

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم