29‏/09‏/2014

أهلا وسهلا أعزائي المتابعين والزوار ، أظن أن إضافات بلوجر لا تنتهي كثيرة هي، ومع اضافة في منتهى الأهمية أيضا تبقى إختيارية لوضعها ولكن أغلب المدونين حتى أصحاب المواقع الكبيرة من الأجانب إلى العر ،يضعون اضافة تعريف الكاتب أو نبذة عنه .. اسفل الموضوع .. تتميز إضافتنا بتنسيق جميل متكونة من صورة للكاتب و النشرة البريدية زائد أزرار المواقع الإجتماعية بتأثير جميل
شرح طريقة التركيب
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(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;
}
2. ابحث عن <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>
حسام مدون مغربي الجنسية &#1644; مصمم ومبرمج قوالب بلوجر حر ..  مهوس ألعاب ذو عدة مدونات &#1644; لكن مع كثرة العمل قررت الإقتصار على مدونة واحدة وهي مدونة عرب ويب التي تأسست بتاريخ 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(&apos;http://feeds.feedburner.com/ar1web/TFDh;, &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>
* غير كل ما لونهبالبرتقالي بما يناسب
* لتغيير الصورة فهي محددة باللون الأخضر
أهلا وسهلا أعزائي المتابعين والزوار ، أظن أن إضافات بلوجر لا تنتهي كثيرة هي، ومع اضافة في منتهى الأهمية أيضا تبقى إختيارية لوضعها ولكن أغلب المدونين حتى أصحاب المواقع الكبيرة من الأجانب إلى العر ،يضعون اضافة تعريف الكاتب أو نبذة عنه .. اسفل الموضوع .. تتميز إضافتنا بتنسيق جميل متكونة من صورة للكاتب و النشرة البريدية زائد أزرار المواقع الإجتماعية بتأثير جميل
شرح طريقة التركيب
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(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;
}
2. ابحث عن <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>
حسام مدون مغربي الجنسية &#1644; مصمم ومبرمج قوالب بلوجر حر ..  مهوس ألعاب ذو عدة مدونات &#1644; لكن مع كثرة العمل قررت الإقتصار على مدونة واحدة وهي مدونة عرب ويب التي تأسست بتاريخ 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(&apos;http://feeds.feedburner.com/ar1web/TFDh;, &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>
* غير كل ما لونهبالبرتقالي بما يناسب
* لتغيير الصورة فهي محددة باللون الأخضر
31 Blogger تعليقات
Disqus
31 التعليقات
المشرف
avatar

رائع ي صديقي انتظرني بشكل جديد لعرض معلومات عن الكاتب

المشرف
avatar

تشكر ، بالتوفيق لك :)

المشرف
avatar

نريد درس لإضافة الإبتساماتي في التعليقق مثل التي عندك

المشرف
avatar

الإضافة تتطلب معرف كبيرة بمكان وضع الكود
واضح أنك لم تعرف كيف تأخذها ;) كما أخذت البقية والشعار أيضا // أبدع لنفسك شيئ مغاير لأن الأخذ لن ينفعك

المشرف
avatar

أخي حسام ممكن تغير لي شكل التعليقات في مدونتي ؟
أريد خذف الكود الأول كامل ومن ثم تركيب واحد من جديد ويكون جيد
فيالانتظار أخي

المشرف
avatar

تفضل هذا موضوع : http://www.ar1web.com/2014/09/blog-post_6.html

به شكل التعليقات رائع مع شرح طريقة التركيب

المشرف
avatar

هههه لو عرف ما قصر ، Marouan Adbib شخص محتال جداً . .

المشرف
avatar

السلام عليكم ورحمتة الله وبركاته معليش يا أخي الاضافة لا تظهر عندي ارجو منك الحل رابط المدونة www.drabdel3zim.ga أخيك عبد العظيم

المشرف
avatar

عليكم السلام هل وضعت الأكواد !! لم أجدها في القالب

المشرف
avatar

السلام عليكم ورحمتة الله وبركة اخي حسام اريد منك طلب واحد ممكن تقولي كيفية عمل صفحة مثل هذة
http://im85.gulfup.com/ARhv3t.png
اريد ازالة السليدرشو او ............. فقط في صفحة معينة لا في كل الصفحات وشكر

المشرف
avatar

اهلا
تفضل تدوينة ستجد بها الطريقة : http://www.ar1web.com/2014/08/blog-post_18.html

المشرف
avatar

السلام عليكم ممكن كود اللوان الفلات الي موجود في مدونتك ارجو الرد ؟

المشرف
avatar

اين الرد اخي ؟

المشرف
avatar
Abdrahim Fouade 2/10/2015
delete

اخي ممكن كود الاضافة الخاصة بك

المشرف
avatar
اسامة عبد الرضا 2/10/2015
delete

تم افتتاح مدونة ويب نايت ===للقوالب والاضافات الحصرية
والقوالب المدفوعة ادخل الان وشوف القوالب الرائعة
http://web3-night.blogspot.com/

المشرف
avatar
marocbladinet 2/16/2015
delete

تشكر ، بالتوفيق لك :)

www.blem2015.blogspot.com

المشرف
avatar
aana yaman 2/18/2015
delete

اخي انظر كيف كانت النتيجة و كيف الحل

لا اعني بذلك اسمك بل ان الشكل لا ياتي معي كايقونة

المشرف
avatar

رابط مدونتك؟

المشرف
avatar

كيف نستطيع تركيبها لمدونة فيها اكثر من كاتب ؟ ! نكرر الكود ؟ :)

المشرف
avatar

انا مش عارف اضيفة ممكن حل

المشرف
avatar

في أي مرحة وجدت المشكل؟

المشرف
avatar

قمت بالبحث عن هذا الكود <[[ اكتر مره وكل مرهيقولي not found

المشرف
avatar

ارجو الرد سريعا ع هذه المشكله

المشرف
avatar

ابحث عن skin وستجده مجموع أي بجانبه سهم إضغط عليه ثم أعد البحث <b:skin/><[[ وسيوجهك إليه

المشرف
avatar

< class='post-footer'> لم اجدها في قالبي علي مدونتي ماذا افعل

المشرف
avatar

إبحث عن هذا
<div class='sharepost'>

المشرف
avatar

أخى حسام عند اضافة الكزد الثانى يجب أن تضع الكود أسفل هذا

المشرف
avatar
المشرف
avatar

أضف الاضافة أسفل هذا

المشرف
avatar

شكرا لك اخي

تقدم الكثير

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة