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

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

أعزائي في درسنا اليوم سوف نتعرف على اضافة تعريف الكاتب بصيغة " JavaScript " وكما نعلم بأن

اضافة تعريف الكاتب أو معلومات عن الكاتب about Author هي إضافة تهم كثير من المدونين  وهي ركن اساسي بها ويمتلئ الإنترنت بكثير من الإضافات بعضها جيد والآخر دون المستوى وكنوع من التغير ومواكبة التطويرات قمنا بتصميم  وتعديل على هذه إضافة ، وستكون بإذن الله نافعة جداً وفي الغالب يسعى الكاتب بان يعرف الناس بموقعه وخدماته وهذه الإضافة ستقوم بذلك بإحترافية كيف ؟ ببساطة تصيمها مميز وجذاب لكن طبعا هذا ليس الاساس وليس الجديد فالجديد هو تزويد الإضافة بمجموعة أيقونات جذابه لأهم ما يحب الكاتب ان يعرف به القراء وان يتواصلوا معه عن طريقة, تم إضافة أيقونات اشهر المواقع الإجتماعية فيس بوك  Facebook  تويتر  Twitter  وجوجل بلس  Google plus بالإضافة الىfeedburner  والايقونات مضافة بخاصية إحترافي  وهذا يجعل الإضافة ككل خفيفة وانيقة ويمكنك معاينة الإضافة .

للمعاينة أنقر هنا

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

1- ادخل إلى مدونتك ، ثم اختر لوحة التحكم .

2- من لوحة التحكم اختر تخطيط .

3- من تخطيط اختر إضافة أداة : HTML/JavaScript

4- اضف الكود التالي في صندوق الأداة ثم احفظ .

<h2 class='title'>ضع هنا اسم الكاتب</h2>
<div class='widget-content'>
<!--[if !IE]> -->
<style>
#profilevinay{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profilevinay:hover {
border:2px solid #ccc;
cursor:pointer;
}

.opacity  {
opacity: 0.5;
margin-left: 50px;
-moz-transition: all 0.5s ease-out; 
-o-transition: all 0.5s ease-out; 
-webkit-transition: all 0.5s ease-out; 
-ms-transition: all 0.5s ease-out; 
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg); 
-o-transform: rotate(7deg); 
-webkit-transform: rotate(7deg); 
-ms-transform: rotate(7deg); 
transform: rotate(7deg); 
filter: progid:DXImageTransform.Microsoft.Matrix(
                 M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1; 
}
.opacity:hover  {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg); 
-o-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); 
-ms-transform: rotate(0deg); 
transform: rotate(0deg); 
filter: progid:DXImageTransform.Microsoft.Matrix(
                 M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}

</style>
   <![endif]-->

<style>
#profilevinay{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profilevinay:hover {
border:2px solid #ccc;
cursor:pointer;
}
.opacity  {
opacity: 0.5;
-moz-transition: all 0.5s ease-out; 
-o-transition: all 0.5s ease-out; 
-webkit-transition: all 0.5s ease-out; 
-ms-transition: all 0.5s ease-out; 
transition: all 0.5s ease-out;
zoom: 1; 
}
.opacity:hover  {
opacity: 1;
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
.subspabox {
background: #f8f8f8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHYx76MBTwTPu319OCKd-lfYoqKJ7k4p8Mb8140RaJZXtnTXXc7a6d_fCFw2IeUyh2lNxNmN8g-T0aJby1mfgPZihDRoM1hosbOQGeHMM8SOtJD2bJfT1oeCl4WEoLg8KhoI5MUdcOHu8/s1600/contact-gr.png) no-repeat 98% 50%;
font-family: JF-Flat-regular;
color: #293949;
margin: 0;
width: 62%;
text-align: right;
padding: 4px 25px 6px 0;
border: 1px solid #ddd;
border-radius: 3px;
float: left;
}

.profilevinay {
margin: 0 auto;
text-align: center;
}
</style>


<img class="opacity" id="profilevinay" src="ضع رابط الصورة هنا"  width="60px" height="60px" align="left"/>
ضع هنا تبذة عن الكاتب
<p>تواصل معي</p>
<div class='profilevinay'/>
<ul id='social-icons'>
<li><a class='back' href='http://feeds.feedburner.com/ضع هنا اليوزنيم'>feeds<li class='fa fa-rss fa-2x'/>
<li><a class='back' href='http://www.twitter.com/ضع هنا اليوزنيم'>twitter<li class='fa fa-twitter fa-2x'/>
<li><a class='back' href='http://www.facebook.com/ضع هنا اليوزنيم'>facebook<li class='fa fa-facebook fa-2x'/>
<li><a class='back' href='https://plus.google.com/u/0/ضع هنا اليوزنيم'>google+<li class='fa fa-google-plus fa-2x'/>
</li></a></li></li></a></li></li></a></li></li></a></li></ul>
</div>
</![endif]--></div>

<form action='http://feeds.feedburner.com/ضع هنا اليوزنيم ' id='subspa' method='post' onsubmit='window.open(&apos;http://feeds.feedburner.com/ضع هنا اليوزنيم ;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>

<input class='subspabox' onblur='if (this.value == &quot;&quot;) {this.value = &quot;توصل بجديد المدونة عبر الإشتراك ببريدك الإلكتروني...&quot;;}' onfocus='if (this.value == &quot;توصل بجديد المدونة عبر الإشتراك ببريدك الإلكتروني...&quot;) {this.value = &quot;&quot;;}' type='text' value='توصل بجديد المدونة عبر الإشتراك ببريدك الإلكتروني...'/>
</form>

- لا داعٍ لشرح التغيرات كل شيء واضح من خلال الكود .