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

;

السلام عليكم ورحمة الله وتعالى وبركاته

في هذه التدوينة سنتناول فيها طريقة إضافة تعريف الكاتب بشكل جد متميز وإحترافي 

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

نقوم بتحرير القالب
ونبحث عن هذا الوسم ]]></b:skin> بستعمال F+Ctrl
ثم نضع هدا الكود فوقه
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: &#39;Great Vibes&#39;;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: &quot;\f005&quot;;}
.pos_4:hover {background: #CF2C2C;}.pos_3:hover {background: #4669B3;}.

وبعدها نبحث عن هدا الوسم <data:post.body/> ونضع تحته هذا الكود

<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/AVvXsEiKufikQw1c8n1WbRbVfKkc_mXWpNs_Yt1yAlxc97b-rwBMOubV_sxYdo0uD_UVfm-ZEecOUA1kd5csfhJsD_sDlWkBD-C4HM7L2F6BoGitbb-Wk3oGOHWJtOw_losHBe5WghhT5PSz6T4/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>

ونغير ما يجب تغييره

 

هل أعجبك الموضوع؟ ضع بصمتك وشاركه مع أصدقائك

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →