أهلا وسهلا أعزائي المتابعين والزوار ، أظن أن إضافات بلوجر لا تنتهي كثيرة هي، ومع اضافة في منتهى الأهمية أيضا تبقى إختيارية لوضعها ولكن أغلب المدونين حتى أصحاب المواقع الكبيرة من الأجانب إلى العر ،يضعون اضافة تعريف الكاتب أو نبذة عنه .. اسفل الموضوع .. تتميز إضافتنا بتنسيق جميل متكونة من صورة للكاتب و النشرة البريدية زائد أزرار المواقع الإجتماعية بتأثير جميل
1. توجه لقالب >> تحرير ابحث بإستعمال CTRL+F عن <b:skin/><[[
2. ضع الكود التالي فوقه
@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/AVvXsEgCJJAg4qklP7I-Hr6j-kkA_bSQ2rEUd-dtgFGBZMfs2oQbee5YQC83MknihUEXSjbxv20tm5f8eOQ2ec1vboRnrMK7QfAi8-qeH-weUoKn5Xaei_wLRRe9tawU1J9-2k6TMfxENY8ubdbf/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/AVvXsEgtVHVcoVBtJzGtxRbwIkXFe8IH8d5Omp6Kb0NG_p4lVjUaWthw6LR912sEIDCaZP9UA09owC4_k6RrZJoOufDZwEkX7jniA15UfGPtx5TAZVI5yhWwXEbvyd3e_9fHOm2J9N-Vy2siMyo/s1600/fb.png) no-repeat 50% center;
background-color: #003366;
}
#social_postauthor .tw {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJUxMyS5aU20Vs0B871xV6iZBpz45rMYGTbS3nGoa25iqycOhSD_ibGXqbJvTPJiUX3CJbAFteJ-7OQmPw2oCQJrVPchlGKdOwchprQN7qkdlkrl1J4F1BI_oSBvk51iQyWm35M6GIYBY/s1600/tw.png) no-repeat 50% center;
background-color: #0ba6f7;
}
#social_postauthor .gl {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDY52ntz6JoPcMm3-U4M4J3a0fOTK8qQHyPc-rSyXaPL2TBIamNu1zEYDlu6R1J3RFVl8c5Wj9tl2JkRDdQ4ioRn0WLohvNygoJNOlRgLU_lUq-84FMOq4Smq9hmWKNZRXuDYQq4ZoL20/s1600/g.png) no-repeat 50% center;
background-color: #dc311b;
}
.subspabox {
background: #f8f8f8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji56A2GX2M_8prZOARhXPT_Oe7-gR4-CR_VVX2XikTkAoGZ2AlleLLQbZl7HZq8ANOUsJGPF5MKNWHKRho6zIyxnlWUsrNbx91PA45kdG0URGxowBQPeyyFAq_j7-D8WPmjZ4SZwo_lfE/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;
}
ابحث عن <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/' 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>
* غير كل ما لونهبالبرتقالي بما يناسب
* لتغيير الصورة فهي محددة باللون الأخضر
* لتغيير الصورة فهي محددة باللون الأخضر
http://www.ar1web.co/2014/09/author-box.html
ليست هناك تعليقات:
إرسال تعليق