إضافة تعريف الكاتب بشكل أنيق

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

الأكواد المستعملة

* الأكواد التالية توضع فوق : </head>

1. كود الأيقونات إذا كان لديك لا داعي لإضافته

<link href='//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css' rel='stylesheet'/>

2. الخطوط المستعملة 
* خط : ge_ss_threeregular 

<link href='https://ar1web-com.googlecode.com/svn/trunk/font-ge_dinar.css' rel='stylesheet'/>

* خط : 'Great Vibes'

<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>Zied</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>

* ضع روابط الشبكات الإجتماعية باللون المحدد بالأصفر

* غير صورة الكاتب الرابط محدد باللون الأزرف فاتح

* باقي الكلمات غيرها بخاصتك

لمن لم يجد نفس الكود في المرحلة الأخيرة ، اترك رابط مدونتك لمساعدتك .. تحياتي

 

5:42 ص