من طلبات الأعضاء المتوالية ، إضافة تعريف الكاتب النسخة الثانية بشكلها البسيط والجميل تحتوي على أيقونات الشبكات الإجتماعية من " تويتر ، فيسبوك ، يوتوب ، جوجل بلس " يمكنكم معاينتها بالنزول قليلا في نفس هذه الصفحة
* الأكواد التالية توضع فوق : </head>
1. كود الأيقونات إذا كان لديك لا داعي لإضافته
<link href='//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css' rel='stylesheet'/>
* خط : 'Great Vibes'
شرح طريقة تركيب صندوق الكاتب
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;}
* ملاحظة قد تجد الكود متكرر مرتين أو أكثر الأخير هو المقصود -- بإمكانك الإستغناء عن البحث عنه إذا كان لديك أزرار المشاركة إلى غير ذلك وتعرف مكان الأكواد بالبحث عن الإسم
<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMpKtSagqDCsTEkh-4EGlhELQ3-q7nTh6BcY0x3oaF_JE4iQ2_DXI_5vTgYHGh-0cS4iDxFBQ_qAHOrQHrQirdz-IkcLLulblgpQ8AXEULHAxqhGecAS99ymSNOmM0dQBnToMbXO816V8/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;'>Zied Zaabi</span> : من <span style='font-style: normal;color:#EC2424;'>Tunisia</span>, <span style='font-style: normal;color:#333333;'>اهتمامي وحبي لتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحة وواضبة على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته </span>,<span style='font-style: normal;color:#333333;'>لدي إهتمامات اخرى منها الرياضة ، ألعاب الفيديو ، والتصميم بحد ذاته ومدونة عرب ويب تعبر عما أهواه . </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>
تعليقات بلوجر
تعليقات فيسبوك