اضافة تعريف الكاتب اسفل الموضوع في مدونتك

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

<التركيب>

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

@font-face { font-family: 'JF-Flat-regular'; src: url('https://alinaeliq-cssfile.googlecode.com/svn/trunk/jfflatfont/JF-Flat-regular.eot'); src: url('https://alinaeliq-cssfile.googlecode.com/svn/trunk/jfflatfont/JF-Flat-regular.eot?') format('embedded-opentype'), url('https://alinaeliq-cssfile.googlecode.com/svn/trunk/jfflatfont/JF-Flat-regular.woff') format('woff'), url('https://alinaeliq-cssfile.googlecode.com/svn/trunk/jfflatfont/JF-Flat-regular.ttf') format('truetype');}  .postauthor { background: #f8f8f8; border: 1px solid #3598DB; padding: 10px; overflow: hidden; margin: 4px 0px -7px 0px; } .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 JF-Flat-regular; color: #3D5272; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX0gG1O5ayULeOhiMO8ya4N3zkIahsr-GSMQPtCO_QJwzvB6YLM5BPhJuoxMuPj3O-sSneGbYcawBRZVQZp-iIiofJESMLPitoobj5illzkTiM8QBqrWO01EWd_8oi7OA3yDdBXq4rKYUw/s1600/user.png) no-repeat 84% 50%; padding: 0 125px 0; } .postauthor a { color: #5DA86C; font-size: 14px; padding-right: 2px; } .postauthor p { font: normal 13px JF-Flat-regular; color: #34495e; line-height: 2em; text-shadow: 0 1px 0 #fff; } /*----------social postauthor------------*/ #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 JF-Flat-regular; 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/AVvXsEhI52qbDQnybjNQhfJPeCOKS1NCr7DT-a7vG2XCtKklaGnUUl-K29kJ_cDhVrIarggrSHdbhubPAUp-cnQJAfs_riTJHrpOrLQ04-3iCPDSgaWQHFhEnyZ_oHUc8_wb_XoCFVvbyj6vnxM/s1600/fb.png) no-repeat 50% center; background-color: #003366; } #social_postauthor .tw { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3UKFwgGTko9CQTKV4C-n4c2qo4JzfQx59lGhj2kKppIP9qzlJj7vRwe9fM3Wz5HeO6AUqca84o-JabFRlZ2QeSib7FYDzoCr0CX7zp5UctvGs-rhG2ImNg1ZAAPs9D6rDwfSBtZ9lALQ/s1600/tw.png) no-repeat 50% center; background-color: #0ba6f7; } #social_postauthor .gl { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUZtREhAGphqYqA1k9doBi1Xr-xHLJ9wqZ2ljxnyC5EtORDtJtmaKlSoExIjQdDqIBib-_HGpdwtKNto_ieBh8DSShwtf7CA8RpJ_-ErCHrvEOlVXxuatFtCkSAAvIUy1PXaaCMwsiZ8s/s1600/g.png) no-repeat 50% center; background-color: #dc311b; }  .subspabox { background: #f8f8f8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE1vCLN5m0L-nh0C9kBwdEzpkSo7WCz1KGfxjmnfwy4mTXhFBrHtyoFmtclKQOygI46lnqerN_d5eTlagGQE1B9PI3ikO5yyK5lObp35m4Qfs50tbjZ-5NAa12rjs7wzZvalxnvA-6f54/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; }

4.ابحث عن : <div class='post-footer'> او <div class='post-footer-line post-footer-line-1'>
5.ضع الكود التالى اسفله مباشرة

<div class='postauthor'><img height='80' rel='author' src='https://lh5.googleusercontent.com/--fw4zy0VAcg/AAAAAAAAAAI/AAAAAAAABXU/mBEnA8G6JEI/s120-c/photo.jpg' width='80'/><h4>الكاتب :   <a href='ضع رابط مدونتك' target='_blank'><data:post.author/></a></h4><p>معلوماتك </p><div class='rw-js-container'/> <div id='social_postauthor'><ul><li class='txt'><span>تواصل معي : </span></li><li class='fb'><a href='#' rel='nofollow' target='_blank'>fb </a></li><li class='tw'><a href='#' rel='nofollow' target='_blank'>tw </a></li><li class='gl'><a href='#' rel='nofollow' target='_blank'>gl </a></li><form action='http://feeds.feedburner.com/ar1web/TFDh' id='subspa' method='post' onsubmit='window.open('http://feeds.feedburner.com/ar1web/TFDh;, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input class='subspabox' onblur='if (this.value == "") {this.value = "توصل بجديد المدونة عبر الإشتراك ببريدك الإلكتروني...";}' onfocus='if (this.value == "توصل بجديد المدونة عبر الإشتراك ببريدك الإلكتروني...") {this.value = "";}' type='text' value='توصل بجديد المدونة عبر الإشتراك ببريدك الإلكتروني...'/></form></ul></div></div>

مبروك عليك الاضافه