أهلا وسهلا أعزائي المتابعين والزوار ، أظن أن إضافات بلوجر لا تنتهي كثيرة هي :) ، ومع اضافة في منتهى الأهمية أيضا تبقى إختيارية لوضعها ولكن أغلب المدونين حتى أصحاب المواقع الكبيرة من الأجانب إلى العرب ، يظعون اضافة تعريف الكاتب أو نبذة عنه .. اسفل الموضوع .. تتميز إضافتنا بتنسيق جميل متكونة من صورة للكاتب و النشرة البريدية زائد أزرار المواقع الإجتماعية بتأثير جميل ، ويمكنك المعاينة بالنزول قليلا في هاته الصفحة وشاهد الإضافة
* عندما ستضيف الأكواد ستحصل على خط مثل الذي تشاهده الأن مرفق مع الأكواد
* عندما ستضيف الأكواد ستحصل على خط مثل الذي تشاهده الأن مرفق مع الأكواد
شرح طريقة التركيب
1 . نتوجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن <b:skin/><[[
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjofeR0O1HxwKGMHbYGGLglrLzYue52FtvB-PN3jbpZQyL7Xj-JqhFg_vnuEGbuZUx2teV8QZJvkkXSn6XSplxgRUPymMpPkmDSbScoRrW6quG5k42tjs6gsDfqgTmEloR7iEQnqe7tPDiy/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaEnkhsNgsFsAsjBX1sZhgiUksGy3pbr8xqZFZeZDMD_S8Dyc7gM2UWFdalX4UrpuVUspu8sDQR8UhnP76MjI8LFNiPgrF618-hjR3mGvZtyFvur1FjTiZdFoG9jTy6L2iysO_3NZGTS4/s1600/fb.png) no-repeat 50% center;
background-color: #003366;
}
#social_postauthor .tw {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYKwRR-p89TTK6wR57EdghQ0By6sjExSYwCnJyf_SZPegcfLWmXy-OSpfLhHp_EIoQu5XDOo2hdupccNBRMHlN_Szn71lVj5Z64GNJFgGYu1NKcgJkAZRslRZp5SVbvhg6aHSdq198vrM/s1600/tw.png) no-repeat 50% center;
background-color: #0ba6f7;
}
#social_postauthor .gl {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkkkkvPyHdUbgZtiu5n2iHTZjdoCYd-1b9hL3kY9tG-hVFR6zmMq0FDyx0TvLXi4_3fcFVrQP4lsuqV8ArFQW1ncRxQ8lUv30_4mwgFzFom6DJG1rPajofsQnaenpC91kqN-fXRPiNQnk/s1600/g.png) no-repeat 50% center;
background-color: #dc311b;
}
.subspabox {
background: #f8f8f8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8jRiZvy0CNkuLbgZSZ_z5dIboIonXd1kqgGuhpnKWGgfs6YEWHtTZDr-j52bikyvbZNw2uzCglBbAa6FEpaaMZrE3bUSSJAHoFTOQPFQvxBnOJ2e31d299ldFW1Zyt-C-Oi3y7uDF850/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'>
* قد تجد الكود متكرر 4 مرات أو أقل الكود الأخير هو المقصود
5. ضع الكود التالي أسفله
<div class='postauthor'>
<img height='80' rel='author' src='http://im77.gulfup.com/YkII2b.jpg' width='80'/>
<h4>
الكاتب :
<a href='http://www.ar1web.com' target='_blank'>
<data:post.author/>
</a>
</h4>
<p>
حسام مدون مغربي الجنسية ٬ مصمم ومبرمج قوالب بلوجر حر .. مهوس ألعاب ذو عدة مدونات ٬ لكن مع كثرة العمل قررت الإقتصار على مدونة واحدة وهي مدونة عرب ويب التي تأسست بتاريخ 2014/04/01 تم تغيير المحتوى لما يحبه المدون ولكي أساعد كل شخص ولو بشيئ بسيط أحب الجميع ولا أكره أحد .
</p>
<div class='rw-js-container'/>
<div id='social_postauthor'>
<ul>
<li class='txt'>
<span>
تواصل معي :
</span>
</li>
<li class='fb'>
<a href='https://www.facebook.com/ihussam.hm.1' rel='nofollow' target='_blank'>
fb
</a>
</li>
<li class='tw'>
<a href='#' rel='nofollow' target='_blank'>
tw
</a>
</li>
<li class='gl'>
<a href='https://plus.google.com/u/0/+iHussam' 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>
6.غير كل ما لونه بالأصفر بما يناسب
7. لتغيير الصورة فهي محددة باللون الأخضر
محمد أعدو
مدون و مصمم محترف . أهتم خاصة بمجال تصميم المواقع و الواجهات . درسة البرمجة بمدرسة الإعلاميات العربية بوجدة .
المدونة: مدونة دروسنا
