اضافة تعريف الكاتب اسفل كل تدوينة بطريقة احترافية

الكاتب بتاريخ عدد التعليقات : 0


يوجد العديد من اشكال وضع تعريف الكاتب تحت كل تدوينة ولكن قد اخرت لكم الاحدث والافضل انشاء الله
فتستطيع وضع حسابك في كل من فيس بوك وجوجل وتويتر الان نأتي الى
  الطريقة√
1-نذهب الى لوحة التحكم القالب تحرير html 
2-نبحث عن الكود التالي b:skin/><[[ باستخدام ctrl+f
3-ونضع الكود التالي قبله (فوقه)
@font-face {
font-family: 'GESSTwoMediumRegular';
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot');
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot?') format('embedded-opentype'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.woff') format('woff'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.ttf') format('truetype');
}
.postauthor {
background: #f8f8f8;
border: 4px solid #4E9E6B;
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 'GESSTwoMediumRegular', tahoma;
color: #3D5272;
background: url(http://2.bp.blogspot.com/-OHcYNHmyqiY/UjO2el9FMSI/AAAAAAAABRA/qRCHS8k_YYk/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 11px 'GESSTwoMediumRegular';
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 'GESSTwoMediumRegular';
text-shadow: 0 1px 0 #fff;
padding: 4px 4px 4px 4px;
}
#social_postauthor .txt {
padding: 4px 0;
}
#social_postauthor .fb {
background: url(http://1.bp.blogspot.com/-TAJGG5Ms9D4/UfWXogICbCI/AAAAAAAAAmQ/Upuhv9y0nnM/s1600/fb.png) no-repeat 50% center;
background-color: #003366;
}
#social_postauthor .tw {
background: url(http://2.bp.blogspot.com/-Upn2CKa8jz4/UfWXo8SU2MI/AAAAAAAAAmU/_-ogegiJmkY/s1600/tw.png) no-repeat 50% center;
background-color: #0ba6f7;
}
#social_postauthor .gl {
background: url(http://2.bp.blogspot.com/-iZ2UMC49GFs/UfWXo_JR0UI/AAAAAAAAAmc/RQhjtJPCId8/s1600/g.png) no-repeat 50% center;
background-color: #dc311b;
}
.subspabox {
background: #f8f8f8 url(http://4.bp.blogspot.com/-iNt1NmiazTc/UhjgQHQ_3YI/AAAAAAAABBA/wa-VMs0PPMg/s1600/contact-gr.png) no-repeat 98% 50%;
font-family: 'GESSTwoMediumRegular';
color: #293949;
margin: 4px;
width: 62%;
text-align: right;
padding: 6px 35px 6px 0;
border: 1px solid #ddd;
border-radius: 3px;
float: left;
}
4-ابحث عن
 <div class='post-footer'>

اذا وجدته اكثر من مرة فالاخير هو المقصود

ضع الكود التالي تحته اسفله
 <div class='postauthor'>
<img height='80' rel='author' src='http://im77.gulfup.com/YkII2b.jpg' width='80'/><br />
<h4>
الكاتب :<br />
<a href='http://www.th3geekweb3.blogspot.com' target='_blank'><br />
<data:post.author/><br />
</a><br />
</h4>
<p>عمران مالك سوري الجنسية ٬ مصمم ومبرمج قوالب بلوجر حر ..  مهوس ألعاب ذو عدة مدونات ٬ لكن مع كثرة العمل قررت الإقتصار على مدونة واحدة وهي مدونة مهووسين الويب التي تأسست بتاريخ 2014/04/01 تم تغيير المحتوى لما يحبه المدون ولكي أساعد كل شخص ولو بشيئ بسيط  أحب الجميع ولا أكره أحد .<br />
</p>
<div class='rw-js-container'/>
<br />
<div id='social_postauthor'>
<ul>
<li class='txt'><br />
<span><br />
تواصل معي :<br />
</span><br />
</li>
<li class='fb'><br />
<a href='https://www.facebook.com' rel='nofollow' target='_blank'><br />
fb<br />
</a><br />
</li>
<li class='tw'><br />
<a href='#' rel='nofollow' target='_blank'><br />
tw<br />
</a><br />
</li>
<li class='gl'><br />
<a href='https://plus.google.com\' rel='nofollow' target='_blank'><br />
gl<br />
</a><br />
</li>
<form action='http://feeds.feedburner.com\' 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>

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

√المهمة انتهت√

0 تعليق على موضوع " اضافة تعريف الكاتب اسفل كل تدوينة بطريقة احترافية "

████ شروط التعليق ████
1- يجب على التعليق أن يكون بلا روابط إشهارية
2- أن يكون التعليق خاص بمحتوى التدوينة
3- لإضافة كود حوله أولاً بمحول الأكواد
4- لاستعمال خط عريض ضع الكود : <strong>النص هنا...</strong>
5- لاستعمال خط مائل ضع الكود : <em>النص هنا...</em>
6- لإضافة صورة ضعها بهذا الكود : <i rel="image"> ... رابط الصورة هنا ... </i>

الإبتسامات إخفاء