اداة تعريف الكاتب بشكل مميز

السلام عليكم اليوم سوف نقدم اضافة جديدة في الشكل مألوفة و قد اصبحث من ابجديات المدونات و هي اضافة تعريف الكاتب لكن قد دمجنا مع هذه الاضافة اضافتين اخريين و هما مواقع التواصل الاجتماعي جوجل بلاس فايسبوك و تويتر و الاضافة الثانية عبارة عن اداة الاشتراك بالبريد الالكتروني

طبعا هذه الاضافة هي التي نعتمدها في مدونة خربوش للتصميم لان للحصول على الاضافة ما عليك الى اتباع الخطوات التالية : في HTML القالب ابحث عن هذا الوسم ]]></b:skin>  و اضف قبله اكواد ال CSS التالية:

.postauthor {

background: #f8f8f8;

border-right: none;

border-left: none;

padding: 10px;

margin: 0;

overflow: hidden;

}

.postauthor img {

float: right;

background: #fff;

margin: 0 0 0 8px;

padding: 4px;

border: 1px solid #E0E0E0;

border-radius: 3px;

}

.postauthor h4 {

font: normal 14px &#39;GTMR&#39;, tahoma;

color: #0096C5;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-CM05asFZAnqHKQAFFCPOuJDq0-fuMb_2w4qlTBdxjgsN8dhyvNpxsfH1gfCJ-7XPqfgoB2fHYXMSToJnqEd3sreQtdw_RC1NuHD_36I4dEeoUMdsDYW6ltAqpOi6juHBNTyPaGhJXP8a/s1600/user.png) no-repeat 86% 50%;

padding: 0 126px 0;

}

.postauthor a {

color: #5DA86C;

font-size: 14px;

padding-right: 2px;

}

.postauthor p {

font: normal 11px GTMR, tahoma;

color: #34495e;

line-height: 2em;

text-shadow: 0 1px 0 #fff;

}

#social_postauthor {

margin: 16px 0 0;

overflow: hidden;

background: #fff;

padding: 4px;

border-radius: 3px;

border: 1px solid #ddd;

}

#social_postauthor ul{margin:0;padding:0;overflow:hidden;}

#social_postauthor ul li {

float: right;

padding: 0;

margin: 3px 2px;

border-radius: 2px;

transition: 0.5s;

}

#social_postauthor ul li a{

display: inline-block;

float: right;

font-size: 0;

height: 30px;

line-height: 0;

text-indent: -9999em;

width: 30px;

transition:0.5s;

}

#social_postauthor ul li:hover{

transform:rotate(360deg);

-ms-transform:rotate(360deg); /* IE 9 */

-webkit-transform:rotate(360deg); /* Safari and Chrome */

-moz-transform:rotate(360deg); /* Safari and Chrome */

-o-transform:rotate(360deg); /* Safari and Chrome */

transition:0.5s;

}

#social_postauthor ul li span{

font: normal 13px GTMR, tahoma;

text-shadow: 0 1px 0 #fff;

padding: 4px 4px 4px 4px;

}

#social_postauthor .txt {

padding: 4px 0;

}

#social_postauthor .fb {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSrlOBBPoLgOrhcTvLWpQ7IckkLcPAUtroWUna8UTKmQT2RiCYpl4KwqLQvVfEi6J2wP2jol0LGwZPSp7O81PjM0EB4AHFhhXvlN9LA4yyP_r40UGrzoZJQTld2RYg36NWCQyZc1mMD80/s1600/fb.png) no-repeat 50% center;

background-color: #003366;

}

#social_postauthor .tw {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBrzfU6s_B0ngMsrxG17uFdTuUtypaAsepcxmgVWGM-A9E5nxWBG14LWbpms-opAGEXBrhnG64E8zXVkWOlKQpRAFn0PidJrzc9aGf-YXNdpoBNnPf-Gxd7CM1kyy1tgtNcpPfm4MVJIQ/s1600/tw.png) no-repeat 50% center;

background-color: #0ba6f7;

}

#social_postauthor .gl {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEA88eHtlhlKMHDcrYABx7fv6BvXUl1BOoNabiP1lG92jebZ5dRh5dQ1CNIHlArOAnebnXjFkrVlhmMm1Xl5hKQZ1ED_xZgY81ZdOUNTYZQeDirFab58iNMnRZIeluf7YmC9CWnLhRfIY/s1600/g.png) no-repeat 50% center;

background-color: #dc311b;

}

#subspa {

margin:0;

}

.subspabox {

background: #f8f8f8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSvPTK4cyTY4cweoHtTRh5g6wZXOaJexxsoWfgGj5_x_YqvG2F4ETF3MNO3QAGKRsHLcNwmuEmWvnb6zGrj9ELgTBme-o-eNxQIvqWtMLWRT67z9RWS_wy376Ds7Nd5WrzAcqY43Tp-mM/s1600/contact-gr.png) no-repeat 98% 50%;

font-family: GTMR, tahoma;

color: #293949;

margin: 4px;

width: 67%;

text-align: right;

padding: 6px 35px 6px 0;

border: 1px solid #ddd;

border-radius: 3px;

}

.subspabox:focus{

border: 1px solid #33B5E5;opacity: 0.8;

color: #33B5E5;

background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLddwhFl_SRS4PxN1fNwNAIBVKDnno_K3aQ8iBywFO0ojjBcNDQI14WVEkkTIPpHQr0skFWcia9u4de7pyHJ0_I92Lhw-rnrCbOrX8Yqv2m2qG9h59T4g4wA0la9_PNCSSljAPncSpeFg/s1600/contact.png) no-repeat 98% 50%;

}

يمكنك تغيير لون الخلفية بتغيير كود اللون الحالي F8F8F8 باللون الذي تريد 

كما تستطيع تغيير ايقونة الكاتب بايقونة اخرى.

بعد ذلك ننتقل الى اضافة اكواد ال HTML و لهذا سوف نبحث عن الكود التالي:<data:post.body/>  في الغالب يتكرر الكود اكثر من مرة كما انه غالبا يكون الكود الثاني هو المطلوب لكن في بعض القوالب يكون اخر لدى عليك التجريب حتى يظهر الاضافة في القالب المهم سوف تضيف كود ال CSS تحت الكود الذي وجدته سابقا:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='postauthor'>

<img height='100' rel='author' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie5QZM-IhhSJdofRNUFyz8sQEMADMmMNvCysR7gFprbxq8RkbHo8DSFz3RH7vQmaL0v5bseg7rqWu2d2mjfubJd5UJ4oXOEcrVplfImC8SX21K_fnZwcjQHB7SvxWVXSDhIil2xACVSTk/s1600/art-awesome-hd-wallpaper.jpg' width='100'/>

<h4>

                              الكاتب :

                              <a href='https://plus.google.com/u/0/107424676261864067288/'>

اسم  الكاتب

</a>

</h4>

<p>

وصف الكاتب 

</p>

<div id='social_postauthor'>

<ul>

<li class='txt'>

<span>

                                    تابعني :

                                  </span>

</li>

<li class='fb'>

<a href='https://www.facebook.com/said.kharbouche73'>

                                    fb

                                  </a>

</li>

<li class='tw'>

<a href='#'>

                                    tw

                                  </a>

</li>

<li class='gl'>

<a href='https://plus.google.com/u/0/107424676261864067288'>

                                    gl

                                  </a>

</li>

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogspot/YsXez&apos;, &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>

</ul>

</div>

</div>

</b:if>

 ناتي الان الى التعديل على هذا الكود اولا عليك تغيير كل ما باللون البرتقالي الى معلوماتك الخاصة بك و هي الاسم و الوصف و روابط الشبكات الاجتماعية و رابط الفيدبانر اما الاكواد المعلمة بالاحمر فهي المسؤولة عن عدم رؤية هذه الاضافة الا في صفحة التدوينة في حالة اردت ضهور الصندوق في الرئيسية تحت كل تدوينة فما عليك سوى حذف الكود الاحمر . بهذا نكون حصلنا على صندوق تعريف الكاتب مميز و انيق.