اضافة تعريف الكاتب بالشكل الجديد 2016 لبلوجر

اضافة تعريف الكاتب بالشكل الجديد 2016 لبلوجر

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

طريقة التركيب

1. داخل القالب ابحث بإستعمال Ctrl+F عن <b:skin/><[[

2. ضع الكود التالي قبله

/* 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;}

3. ابحث عن <data:post.body/> ضع قبله أو بعده الكود الأتي
*ملاحظة قد تجد الكود متكرر مرتين أو أكثر الأخير هو المقصود
اذهب للكود : من هنا
لتغير صورة الكاتب قم بتغير هذا الرابط برابط الصورة الخاصه بك
http://i.imgur.com/3KQAIIw.png
وقم بتغير روابط المواقع الاجتماعيه فيسبوك ، تويتر ، جوجل بلص ، يوتيوب
ومبروك عليك الاضافه
والسلام عليكم ورحمه الله وبركاتة