23‏/11‏/2014

من طلبات الأعضاء المتوالية ، إضافة تعريف الكاتب النسخة الثانية بشكلها البسيط والجميل تحتوي على أيقونات الشبكات الإجتماعية من " تويتر ، فيسبوك ، يوتوب ، جوجل بلس "،لمن أراد الشكل الأول من تعريف الكاتب فليتفضل من هنا
شرح طريقة التركيب
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. داخل القالب ابحث بإستعمال 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'/>
37 Blogger تعليقات
Disqus
37 التعليقات
المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

شكرا أخى لتلبيتك طلبى

المشرف
avatar

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

المشرف
avatar

هل وضعت الكود الخاص بهم @@, ضمن التدوينة

المشرف
avatar

khouya baghi nssawlak dak l2i3lan likayn fo9 f ra2issiya kif darti ta darti lih dak lcadr

المشرف
avatar

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;

المشرف
avatar

اخي لم أجد <[[ :( @@,

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

رووووووووعه شكراا

المشرف
avatar

يعطيك العافيه يالغالي حسام اضافة جميلة موفق اخي

المشرف
avatar
Ahmed Elemam 12/24/2014
delete

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

المشرف
avatar

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

المشرف
avatar
Ahmed Elemam 12/25/2014
delete

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

المشرف
avatar

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

المشرف
avatar
Ahmed Elemam 12/25/2014
delete

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

المشرف
avatar

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

المشرف
avatar
Ahmed Elemam 12/26/2014
delete

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

المشرف
avatar
Ahmed Elemam 12/26/2014
delete

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

المشرف
avatar
Ahmed Elemam 12/26/2014
delete

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

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

المشرف
avatar

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

المشرف
avatar
Ahmed Elemam 12/27/2014
delete

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

المشرف
avatar
أيمن المتوكل 12/28/2014
delete

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

المشرف
avatar
Abdullah Ellaimouny 1/01/2015
delete

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

المشرف
avatar

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

المشرف
avatar
Emad Dmarany 4/24/2015
delete

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

المشرف
avatar
Emad Dmarany 4/24/2015
delete

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

المشرف
avatar

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

المشرف
avatar
Emad Dmarany 4/24/2015
delete

شكرا حبيبي ♥

المشرف
avatar
Emad Dmarany 4/24/2015
delete

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

المشرف
avatar

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

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

المشرف
avatar

سيتم وضعها أخي

المشرف
avatar

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

المشرف
avatar

شكرا لك اخي

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة