تجريب

Eslam Talaat

ايسف كل العالم

السلام عليكم ورحمة الله تعالى وبركاته ،اليوم سوف نقوم بإضافة أزرار "تابعني" بشكل جديد ،حيث سوف تسمح لزوار مدونتك بمتابعتك من خلال المفضلات الإجتماعية :تويتر،فيسبوك،خلاصات ...هذه الإضافة عبارة على "سلة" تحتوى على هذه الأزرار وتقوم بالقفز من السلة عند النقر عليها ,و تعود الأزرار داخل السلة بطريقة جميلة عند النقر مرة ثانية ويمكنك أيضا التحكم في موضع هذه الأداة حسب تنسيق مدونتك.

1.انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHtml, ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي :لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء.

]]></b:skin>

2.ثم قم بلصق قبله هذا الكود :

.stack {
position: fixed;
bottom: -5px; right: 940px; }
.stack > img { position: relative;
cursor: pointer;
padding-top: 28px;
z-index: 2;
}
.stack ul { list-style: none;
position:absolute;
top: 5px;
cursor: pointer; z-index: 1;
}
.stack ul li { position: absolute;
}
.stack ul li img { border: 0;
}
.stack ul li span { display: none;
}
.stack .openStack li span { font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
display:block;
height: 0px;
position:absolute;
top: 17px;
right:60px;line-height: 14px;border: 0;background-color:transparent;padding: 0px 0px;
border-radius: 10px;-webkit-border-radius: 0px;
-moz-border-radius: 0px;color: #4F3939;text-align: center;
text-shadow: #000 1px 1px 1px;opacity: .85;filter: alpha(opacity = 85);
}/* IE Fixes */.stack { _position: absolute; }.stack ul { _z-index:-1; _top:-15px; }.stack ul li { *right:5px; }

يمكنك تبديل القياسات ذات اللون الأحمر لإختيار موضع الأداة في مدونتك .

3.انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascriptولآن الصق الكود التالي :
(لا تضع للأداة أي عنوان)

<div class="stack">
<img alt="stack" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/stack.png" ilo-full-src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/stack.png" /><ul id="stack">

<li><a href="http://www.facebook.com/pages/mdwnt-abw-ayad/129817460386636"><span></span><img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyS1oYnAYcdJ8ZV29exharTNBCnrapSbIkcPr_igJv6L_y-8AA5GL8W7Hr2URnqjNGc-Dn7c0UdvS3aqyFSeYLlqvcFkz7etJaBV5OVn-wc2IcAJoBfxBFaSMtkV2trevMTXLVBRtOSxI/s320/facebook.png" ilo-full-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyS1oYnAYcdJ8ZV29exharTNBCnrapSbIkcPr_igJv6L_y-8AA5GL8W7Hr2URnqjNGc-Dn7c0UdvS3aqyFSeYLlqvcFkz7etJaBV5OVn-wc2IcAJoBfxBFaSMtkV2trevMTXLVBRtOSxI/s320/facebook.png" /></a></li>

<li><a href="http://feeds.feedburner.com/feedburner/simo"><span></span><img alt="RSS" src="http://www.trables.com/social_images/rss.png" ilo-full-src="http://www.trables.com/social_images/rss.png" /></a></li>

<li><a href="http://www.youtube.com/simochardo"><span></span><img alt="youtube" src="https://easyjet.custhelp.com/euf/assets/images/youtube.png" ilo-full-src="https://easyjet.custhelp.com/euf/assets/images/youtube.png" /></a></li>

<li><a href="http://twitter.com/abuiyad007"><span></span><img alt="technorati" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmez_podC2N4TNbj0ciwK5e-8C3PBtrYFSBPC-Um4fWR7NaAYmvDtmjjvHgDcm7PIOhlA5LLOU3l17oqoTlaKdM9w06QwDOe4SY5a7WOZzAy2hG00__hVasq-utikKTbKC7M4n55tziiA/s320/twitter.png" ilo-full-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmez_podC2N4TNbj0ciwK5e-8C3PBtrYFSBPC-Um4fWR7NaAYmvDtmjjvHgDcm7PIOhlA5LLOU3l17oqoTlaKdM9w06QwDOe4SY5a7WOZzAy2hG00__hVasq-utikKTbKC7M4n55tziiA/s320/twitter.png" /></a></li>

<li><a href="http://delicious.com/chardo007"><span></span><img alt="delicious" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW12yF_NmWGeayikxq28HPjpxjYMxJxj5TGiZRibhFWwsOXINRziSxJFpQuvBTRSGau20SuYjR0y9NC6p0bjxVw-X8_HCA7KrYKNmVrhCPwtwag-readIktd87TrkwS1iSFDIFoyBca7w/s320/delicious.png" ilo-full-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW12yF_NmWGeayikxq28HPjpxjYMxJxj5TGiZRibhFWwsOXINRziSxJFpQuvBTRSGau20SuYjR0y9NC6p0bjxVw-X8_HCA7KrYKNmVrhCPwtwag-readIktd87TrkwS1iSFDIFoyBca7w/s320/delicious.png" /></a></li></ul></div>

<script src="https://sites.google.com/site/mohamedabuiyad/button/jquery.min.js" type="text/javascript"></script><script src="https://sites.google.com/site/mohamedabuiyad/button/fisheye-iutil.min.js" type="text/javascript"></script>

<span ><a href="http://www.monte-escalier-prix.org/" target="_blank"></a></span>

لا تقم بتبديل صورة السلة التي تتمثل بالروابط ذات اللون الأزرق فإن بدلت الروابط لن يظهر لك شىء مكان الأداة

لا تنسى تبديل الروابط ذات اللون الأحمر بالروابط الخاصة بك .

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

المصدر : مدونة ابو اياد

تابع القراءة

Eslam Talaat

احمد علاء

]]></b:skin>

2.ثم قم بلصق قبله هذا الكود :

.stack {
position: fixed;
bottom: -5px; right: 940px; }
.stack > img { position: relative;
cursor: pointer;
padding-top: 28px;
z-index: 2;
}
.stack ul { list-style: none;
position:absolute;
top: 5px;
cursor: pointer; z-index: 1;
}
.stack ul li { position: absolute;
}
.stack ul li img { border: 0;
}
.stack ul li span { display: none;
}
.stack .openStack li span { font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
display:block;
height: 0px;
position:absolute;
top: 17px;
right:60px;line-height: 14px;border: 0;background-color:transparent;padding: 0px 0px;
border-radius: 10px;-webkit-border-radius: 0px;
-moz-border-radius: 0px;color: #4F3939;text-align: center;
text-shadow: #000 1px 1px 1px;opacity: .85;filter: alpha(opacity = 85);
}/* IE Fixes */.stack { _position: absolute; }.stack ul { _z-index:-1; _top:-15px; }.stack ul li { *right:5px; }

<div class="stack">
<img alt="stack" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/stack.png" ilo-full-src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/stack.png" /><ul id="stack">

<li><a href="http://www.facebook.com/pages/mdwnt-abw-ayad/129817460386636"><span></span><img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyS1oYnAYcdJ8ZV29exharTNBCnrapSbIkcPr_igJv6L_y-8AA5GL8W7Hr2URnqjNGc-Dn7c0UdvS3aqyFSeYLlqvcFkz7etJaBV5OVn-wc2IcAJoBfxBFaSMtkV2trevMTXLVBRtOSxI/s320/facebook.png" ilo-full-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyS1oYnAYcdJ8ZV29exharTNBCnrapSbIkcPr_igJv6L_y-8AA5GL8W7Hr2URnqjNGc-Dn7c0UdvS3aqyFSeYLlqvcFkz7etJaBV5OVn-wc2IcAJoBfxBFaSMtkV2trevMTXLVBRtOSxI/s320/facebook.png" /></a></li>

<li><a href="http://feeds.feedburner.com/feedburner/simo"><span></span><img alt="RSS" src="http://www.trables.com/social_images/rss.png" ilo-full-src="http://www.trables.com/social_images/rss.png" /></a></li>

<li><a href="http://www.youtube.com/simochardo"><span></span><img alt="youtube" src="https://easyjet.custhelp.com/euf/assets/images/youtube.png" ilo-full-src="https://easyjet.custhelp.com/euf/assets/images/youtube.png" /></a></li>

<li><a href="http://twitter.com/abuiyad007"><span></span><img alt="technorati" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmez_podC2N4TNbj0ciwK5e-8C3PBtrYFSBPC-Um4fWR7NaAYmvDtmjjvHgDcm7PIOhlA5LLOU3l17oqoTlaKdM9w06QwDOe4SY5a7WOZzAy2hG00__hVasq-utikKTbKC7M4n55tziiA/s320/twitter.png" ilo-full-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmez_podC2N4TNbj0ciwK5e-8C3PBtrYFSBPC-Um4fWR7NaAYmvDtmjjvHgDcm7PIOhlA5LLOU3l17oqoTlaKdM9w06QwDOe4SY5a7WOZzAy2hG00__hVasq-utikKTbKC7M4n55tziiA/s320/twitter.png" /></a></li>

<li><a href="http://delicious.com/chardo007"><span></span><img alt="delicious" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW12yF_NmWGeayikxq28HPjpxjYMxJxj5TGiZRibhFWwsOXINRziSxJFpQuvBTRSGau20SuYjR0y9NC6p0bjxVw-X8_HCA7KrYKNmVrhCPwtwag-readIktd87TrkwS1iSFDIFoyBca7w/s320/delicious.png" ilo-full-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW12yF_NmWGeayikxq28HPjpxjYMxJxj5TGiZRibhFWwsOXINRziSxJFpQuvBTRSGau20SuYjR0y9NC6p0bjxVw-X8_HCA7KrYKNmVrhCPwtwag-readIktd87TrkwS1iSFDIFoyBca7w/s320/delicious.png" /></a></li></ul></div>

<script src="https://sites.google.com/site/mohamedabuiyad/button/jquery.min.js" type="text/javascript"></script><script src="https://sites.google.com/site/mohamedabuiyad/button/fisheye-iutil.min.js" type="text/javascript"></script>

<span ><a href="http://www.monte-escalier-prix.org/" target="_blank"></a></span>

لا تقم بتبديل صورة السلة التي تتمثل بالروابط ذات اللون الأزرق فإن بدلت الروابط لن يظهر لك شىء مكان الأداة

لا تنسى تبديل الروابط ذات اللون الأحمر بالروابط الخاصة بك .

المصدر : مدونة ابو اياد

تابع القراءة

Eslam Talaat

اسلام طلعت جميل عبداللطيف

]]></b:skin>

2.ثم قم بلصق قبله هذا الكود :

.stack {
position: fixed;
bottom: -5px; right: 940px; }
.stack > img { position: relative;
cursor: pointer;
padding-top: 28px;
z-index: 2;
}
.stack ul { list-style: none;
position:absolute;
top: 5px;
cursor: pointer; z-index: 1;
}
.stack ul li { position: absolute;
}
.stack ul li img { border: 0;
}
.stack ul li span { display: none;
}
.stack .openStack li span { font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
display:block;
height: 0px;
position:absolute;
top: 17px;
right:60px;line-height: 14px;border: 0;background-color:transparent;padding: 0px 0px;
border-radius: 10px;-webkit-border-radius: 0px;
-moz-border-radius: 0px;color: #4F3939;text-align: center;
text-shadow: #000 1px 1px 1px;opacity: .85;filter: alpha(opacity = 85);
}/* IE Fixes */.stack { _position: absolute; }.stack ul { _z-index:-1; _top:-15px; }.stack ul li { *right:5px; }

<div class="stack">
<img alt="stack" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/stack.png" ilo-full-src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/stack.png" /><ul id="stack">

<li><a href="http://www.facebook.com/pages/mdwnt-abw-ayad/129817460386636"><span></span><img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyS1oYnAYcdJ8ZV29exharTNBCnrapSbIkcPr_igJv6L_y-8AA5GL8W7Hr2URnqjNGc-Dn7c0UdvS3aqyFSeYLlqvcFkz7etJaBV5OVn-wc2IcAJoBfxBFaSMtkV2trevMTXLVBRtOSxI/s320/facebook.png" ilo-full-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyS1oYnAYcdJ8ZV29exharTNBCnrapSbIkcPr_igJv6L_y-8AA5GL8W7Hr2URnqjNGc-Dn7c0UdvS3aqyFSeYLlqvcFkz7etJaBV5OVn-wc2IcAJoBfxBFaSMtkV2trevMTXLVBRtOSxI/s320/facebook.png" /></a></li>

<li><a href="http://feeds.feedburner.com/feedburner/simo"><span></span><img alt="RSS" src="http://www.trables.com/social_images/rss.png" ilo-full-src="http://www.trables.com/social_images/rss.png" /></a></li>

<li><a href="http://www.youtube.com/simochardo"><span></span><img alt="youtube" src="https://easyjet.custhelp.com/euf/assets/images/youtube.png" ilo-full-src="https://easyjet.custhelp.com/euf/assets/images/youtube.png" /></a></li>

<li><a href="http://twitter.com/abuiyad007"><span></span><img alt="technorati" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmez_podC2N4TNbj0ciwK5e-8C3PBtrYFSBPC-Um4fWR7NaAYmvDtmjjvHgDcm7PIOhlA5LLOU3l17oqoTlaKdM9w06QwDOe4SY5a7WOZzAy2hG00__hVasq-utikKTbKC7M4n55tziiA/s320/twitter.png" ilo-full-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmez_podC2N4TNbj0ciwK5e-8C3PBtrYFSBPC-Um4fWR7NaAYmvDtmjjvHgDcm7PIOhlA5LLOU3l17oqoTlaKdM9w06QwDOe4SY5a7WOZzAy2hG00__hVasq-utikKTbKC7M4n55tziiA/s320/twitter.png" /></a></li>

<li><a href="http://delicious.com/chardo007"><span></span><img alt="delicious" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW12yF_NmWGeayikxq28HPjpxjYMxJxj5TGiZRibhFWwsOXINRziSxJFpQuvBTRSGau20SuYjR0y9NC6p0bjxVw-X8_HCA7KrYKNmVrhCPwtwag-readIktd87TrkwS1iSFDIFoyBca7w/s320/delicious.png" ilo-full-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW12yF_NmWGeayikxq28HPjpxjYMxJxj5TGiZRibhFWwsOXINRziSxJFpQuvBTRSGau20SuYjR0y9NC6p0bjxVw-X8_HCA7KrYKNmVrhCPwtwag-readIktd87TrkwS1iSFDIFoyBca7w/s320/delicious.png" /></a></li></ul></div>

<script src="https://sites.google.com/site/mohamedabuiyad/button/jquery.min.js" type="text/javascript"></script><script src="https://sites.google.com/site/mohamedabuiyad/button/fisheye-iutil.min.js" type="text/javascript"></script>

<span ><a href="http://www.monte-escalier-prix.org/" target="_blank"></a></span>

لا تقم بتبديل صورة السلة التي تتمثل بالروابط ذات اللون الأزرق فإن بدلت الروابط لن يظهر لك شىء مكان الأداة

لا تنسى تبديل الروابط ذات اللون الأحمر بالروابط الخاصة بك .

المصدر : مدونة ابو اياد

تابع القراءة

Eslam Talaat

إضافة أزرار تابعني تقفز من داخل السلة لمدونات بلوجر

]]></b:skin>

2.ثم قم بلصق قبله هذا الكود :

.stack {
position: fixed;
bottom: -5px; right: 940px; }
.stack > img { position: relative;
cursor: pointer;
padding-top: 28px;
z-index: 2;
}
.stack ul { list-style: none;
position:absolute;
top: 5px;
cursor: pointer; z-index: 1;
}
.stack ul li { position: absolute;
}
.stack ul li img { border: 0;
}
.stack ul li span { display: none;
}
.stack .openStack li span { font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
display:block;
height: 0px;
position:absolute;
top: 17px;
right:60px;line-height: 14px;border: 0;background-color:transparent;padding: 0px 0px;
border-radius: 10px;-webkit-border-radius: 0px;
-moz-border-radius: 0px;color: #4F3939;text-align: center;
text-shadow: #000 1px 1px 1px;opacity: .85;filter: alpha(opacity = 85);
}/* IE Fixes */.stack { _position: absolute; }.stack ul { _z-index:-1; _top:-15px; }.stack ul li { *right:5px; }

<div class="stack">
<img alt="stack" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/stack.png" ilo-full-src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/stack.png" /><ul id="stack">

<li><a href="http://www.facebook.com/pages/mdwnt-abw-ayad/129817460386636"><span></span><img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyS1oYnAYcdJ8ZV29exharTNBCnrapSbIkcPr_igJv6L_y-8AA5GL8W7Hr2URnqjNGc-Dn7c0UdvS3aqyFSeYLlqvcFkz7etJaBV5OVn-wc2IcAJoBfxBFaSMtkV2trevMTXLVBRtOSxI/s320/facebook.png" ilo-full-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyS1oYnAYcdJ8ZV29exharTNBCnrapSbIkcPr_igJv6L_y-8AA5GL8W7Hr2URnqjNGc-Dn7c0UdvS3aqyFSeYLlqvcFkz7etJaBV5OVn-wc2IcAJoBfxBFaSMtkV2trevMTXLVBRtOSxI/s320/facebook.png" /></a></li>

<li><a href="http://feeds.feedburner.com/feedburner/simo"><span></span><img alt="RSS" src="http://www.trables.com/social_images/rss.png" ilo-full-src="http://www.trables.com/social_images/rss.png" /></a></li>

<li><a href="http://www.youtube.com/simochardo"><span></span><img alt="youtube" src="https://easyjet.custhelp.com/euf/assets/images/youtube.png" ilo-full-src="https://easyjet.custhelp.com/euf/assets/images/youtube.png" /></a></li>

<li><a href="http://twitter.com/abuiyad007"><span></span><img alt="technorati" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmez_podC2N4TNbj0ciwK5e-8C3PBtrYFSBPC-Um4fWR7NaAYmvDtmjjvHgDcm7PIOhlA5LLOU3l17oqoTlaKdM9w06QwDOe4SY5a7WOZzAy2hG00__hVasq-utikKTbKC7M4n55tziiA/s320/twitter.png" ilo-full-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmez_podC2N4TNbj0ciwK5e-8C3PBtrYFSBPC-Um4fWR7NaAYmvDtmjjvHgDcm7PIOhlA5LLOU3l17oqoTlaKdM9w06QwDOe4SY5a7WOZzAy2hG00__hVasq-utikKTbKC7M4n55tziiA/s320/twitter.png" /></a></li>

<li><a href="http://delicious.com/chardo007"><span></span><img alt="delicious" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW12yF_NmWGeayikxq28HPjpxjYMxJxj5TGiZRibhFWwsOXINRziSxJFpQuvBTRSGau20SuYjR0y9NC6p0bjxVw-X8_HCA7KrYKNmVrhCPwtwag-readIktd87TrkwS1iSFDIFoyBca7w/s320/delicious.png" ilo-full-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW12yF_NmWGeayikxq28HPjpxjYMxJxj5TGiZRibhFWwsOXINRziSxJFpQuvBTRSGau20SuYjR0y9NC6p0bjxVw-X8_HCA7KrYKNmVrhCPwtwag-readIktd87TrkwS1iSFDIFoyBca7w/s320/delicious.png" /></a></li></ul></div>

<script src="https://sites.google.com/site/mohamedabuiyad/button/jquery.min.js" type="text/javascript"></script><script src="https://sites.google.com/site/mohamedabuiyad/button/fisheye-iutil.min.js" type="text/javascript"></script>

<span ><a href="http://www.monte-escalier-prix.org/" target="_blank"></a></span>

لا تقم بتبديل صورة السلة التي تتمثل بالروابط ذات اللون الأزرق فإن بدلت الروابط لن يظهر لك شىء مكان الأداة

لا تنسى تبديل الروابط ذات اللون الأحمر بالروابط الخاصة بك .

المصدر : مدونة ابو اياد

تابع القراءة

Eslam Talaat

إضافة صورة الكاتب تحت عنوان موضوعه على مدونات بلوجر

السلام عليكم ورحمة الله تعالى وبركاته ،هناك بعض المدونات التي لها أكثر من مؤلف أو كاتب بها وهذا ما يجعل المدونة أكثر طرحا للمواضيع لذلك سوف نقوم في هذا الدرس بتعلم كيفية إضافة صورة الكاتب تحت عنوان الموضوع الذي قام بكتابته ،مما يسهل على الزائر بمعرفة صاحب المقال وعدم الخلط بين المؤلفين ،وكذلك تجعل المدونة أكثر تنسيقا وسهلة إذا كنت تتابع مقالات كاتب معين ،والصورة أسفله مثال على ذلك ،حيث أنني قمت بوضع صور عشوائية فقط للتوضيح .

الآن نتوجه لتطبيق الإضافة على مدونتك
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.

<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3><font size="0"><a href=" http://www.pergola-aluminium.org/"></a></font>
</b:if>

ثم قم بلصق الكود التالي تحته مع إدخال إسم الكاتب ورابط الصورة الخاصة به

<b:if cond='data:post.author == "إسم الكاتب الأول"'>
<span class="author"><img src="رابط صورة الكاتب الأول"/></span>
</b:if>
<b:if cond='data:post.author == " إسم الكاتب الثاني"'>
<span class="author"><img src="رابط صورة الكاتب الثاني"/></span>
</b:if>
<b:if cond='data:post.author == " إسم الكاتب الثالث"'>
<span class="author"><img src="رابط صورة الكاتب الثالث"/></span>
</b:if>

ملاحظة : يمكنك زيادة عدد مؤلفي المدونة كما تريد وذلك بإضافة هذا الكود وإعادته في عدد المرات المراد زيادرها تحت الكود السابق.

<b:if cond='data:post.author == " إسم الكاتب "'>
<span class="author"><img src="رابط صورة الكاتب "/></span>
</b:if>

ملاحظة هامة : يجب أن يكون إسم الكاتب نفسه الإسم الموجود في لائحة مؤلفين المدونة والذي يمثل إسم تعريف المدون.

الآن قم بالبحث عن الكود التالي :

]]</b:skin>

ثم قم بلصق الكود التالي قبله :

.author img{
padding: 0;
float: left;
border: none;
margin: 0 10px 10px 0;
}

يمكنك التعديل على الأبعاد 0 0px 10px 10px لإجاد المكان المناسب لتموضع صورة الكاتب في المدونة,ويمكنك كذلك وضع صورة الكاتب على اليمين وذلك بإستبدال الكلمة left بالكلمة right
قم بحفظ القالب
أتمني أن تكونوا قد إستفدتم من هذا الإضافة الجديدة ،في إنتظار آرائكم وإستفساراتكم

المصدر : مدونة ابو اياد

تابع القراءة

Eslam Talaat

كيفية إستبدال كلمة " إرسال تعليق" بصورة على مدونات بلوجر

السلام عليكم ورحمة الله تعالى وبركاته في هذه الفقرة ،سوف نتعلم كيفية إستبدال كلمة " إرسال تعليق " بصورة أو بكلمة أخرى أو هما معا وتوجد هذه الكلمة فوق مستطيل التعليقات للمدونة ،فهناك بعض المدونات يجعل موضع نموذج التعليق عبارة عن نافذة منبثقة مما يجعل كلمة " إرسال تعليق " غير مرئية للزائر في بعض الأحيان .
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F).

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

وإبحث عن هذا الكود أيضا :

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

والآن ما عليك سوى إستبدال ما لون بالأحمر في الكودين معا بما تريد :

إستبدال " إرسال تعليق " بنص مثلا : أضف تعليقك،أضف رد،أضف إستفسار...

إستبدال " إرسال تعليق " بصورة :

<img src="https://sites.google.com/site/lightbox007/photo/addcommentblogger.png" title="أضف تعليق" alt="أضف تعليق"/><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>

إستبدال " إرسال تعليق " بصورة ونص معا

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMyvvODZPVjXgwdyxOLclFagW2D-fQZ1-Ej5fFKzXSAlR_nI3Rne8Ff0nJsaVWFVQA5JA6HOAMjiN9g-r_RJjedt4uGJPcGyUJ1AXih2uqE1TQx9NR6k51rw8KGNh7KTsWO0PhAwF4y0s/s320/comments_new.jpeg' alt='Commentaires' title="Commentaires" />أضف تعليقك

يمكنك إستبدال الرابط الأخضر برابط الصورة التي تريد .
وهذا مثال للصورة التي توجد مكان كلمة "إرسال تعليق " في مدونة ابو اياد

والآن قم بحفظ القالب وتوجه لمعاينة النتيجة فوق مسيطيل التعليقات

المصدر : مدونة ابو اياد

تابع القراءة

Eslam Talaat

إظهار أو إخفاء أداة على الصفحة الرئيسية أو على صفحة محددة على بلوجر

مرحبا بكم إخواني الكرام ،عادة جميع الأدوات التي يتم إدراجها في المدونة تظهر على الصفحة الرئيسية وكذلك على جميع صفحات المدونة ،لكن في بعض الأوقات نرغب في إظهار بعض هذه الأدوات فقط على الصفحة الرئيسية أو فقط على جميع التدوينات بإستثناء الصفحة الرئيسية أو فقط على صفحة معينة يمكنك إختيارها ،هذه العملية ليست بالمستحيلة بل هي بسيطة جدا،عليكم سوى تحديد إسمالأداة المراد إظهارها أو إخفاؤها ثم بعد ذلك يتم إإضافة بعض الأكواد حسب العملية المراد القيام بها ،بدون إطالة أعزائي الكرام .

نتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).

تذكير:لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء.

<b:widget id='HTML

والآن نحتاج إلى القليل من التركيز حيث يجب عليك تحديد أو تعليم الأداة المراد تعديلها (إظهارها أو إخفاؤها)،وهذا المثال يوضح كيفية
البحث عن هذا الكود :

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

والآن مباشرة بعد تحديد إسم الأداة كما هو موضح باللون ا لأحمر ،ولإظهارها فقط على" الصفحة الرئيسية" ،قم بإضافة الكودين باللون الأحمر.كما هو موضح في الكود التالي:

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

ولإضافة هذه الأداة في جميع صفحات المواضيع فقط ،قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي :

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

ولإضافة هذه الأداة فقط على صفحة محددة ،قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي :

<b:widget id='HTML3' locked='false' title='إسم الإضافة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == " أدخل رابط الصفحة المحددة "'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

ولإضافة هذه الأداة فقط على صفحات التسمية ،قم بإضافة الكود باللون الأحمر كما هو موضح في الكود التالي مع تحديد إسم التسمية :

<b:widget id='HTML3' locked='false' title='إسم الإضافة ' type='HTML'>
<b:includable id='main'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.name == "التسمية"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</b:if>
</b:includable>
</b:widget>

ولإضافة هذه الأداة في كل الصفحات بإستثناء الصفحة الرئيسية ،قم بإضافة الكودين باللونالأحمر كما هو موضح في الكود التالي :

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

ولإضافة هذه الأداة في كل الصفحات بإستثناء صفحات المواضيع ،قم بإضافة الكودين باللونالأحمر كما هو موضح في الكود التالي :

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

ولإضافة هذه الأداة في الصفحات الثابتة فقط ،قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي :

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

ولإضافة هذه الأداة في كل الصفحات بإستثناء الصفحات الثابتة فقط ،قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي :

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

ولإضافة هذه الأداة في كل الصفحات لكاتب معين ،قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي مع إدخال إسم الكاتب :

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:post.author == "إسم الكاتب "'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

يمكنكم الإستفادة من هذه الحيل خصوصا عند إضافة إعلانات جوجل أدسنس google Adsense حيث يكون عادة عدد الإعلانات في الصفحة الرئيسية مغاير لعدد الإعلانات في صفحات المدونة.

تابع القراءة

Eslam Talaat

إضافة نوافذ المفضلات الإجتماية الجانبية لمدونات بلوجر

السلام عليكم ورحمة الله تعالى وبركاته سوف نتطرق في هذه التدوينة إلى كيفية إضافة الأزرار الجانبية للمواقع الإجتماعية : الفيسبوك ،جوجل بلس ، تويتر ،والبريد RSS ,وهي عبارة عن إضافة واحدة تحتوي على 4 إضافات في آن واحد حيث أنها تتميز في كونها لا تأخذ حيزا كبيرا في تنسيق المدونة .
والآن أترككم مع كيفية تطبيق هذه الإضافة على مدونكم .

قم بالبحث عن الكود التالي :

]]></b:skin>

ثم قم بلصق هذا الكود قبله :

img,a{border:0}#on{visibility:visible}#off{visibility:hidden}#facebook_div{width:196px;height:340px;overflow:hidden}#twitter_div{width:246px;height:353px;overflow:hidden}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px}#knfeedburner_div{width:300px;height:97px;overflow:hidden;margin-top:5px;margin-left:-4px}#kakinetwork_div{width:300px;height:97px;overflow:hidden}#facebook_right{z-index:10005;border:2px solid#3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px}#facebook_right img{position:absolute;top:-2px;left:-35px}#facebook_right iframe{border:0px solid#3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px}#twitter_right{z-index:10004;border:2px solid#6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px}#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0}#google_plus_right{z-index:10003;background-color:#F2F2F2;border:2px solid#006ec9;border-top:2px solid#0056a0;border-bottom:2px solid#0056a0;border-right:2px solid#0056a0;border-left:hidden;width:152px;height:97px;position:fixed;right:-154px}#google_plus_right_img{position:absolute;top:-2px;left:-33px;border:0}#feedburner_right{z-index:10003;background-color:#fefefe;border:2px solid#5b5b5b;border-top:2px solid#5b5b5b;border-bottom:2px solid#5b5b5b;border-right:2px solid#5b5b5b;border-left:hidden;width:300px;height:97px;position:fixed;right:-303px}#feedburner_right_img{position:absolute;top:-2px;left:-33px;border:0}#kakinetwork_right{z-index:10003;border:2px solid#303030;background-color:#fff;width:300px;height:97px;position:fixed}#kakinetwork_right img{position:absolute;top:-2px;left:-101px}#facebook_left{z-index:10005;border:2px solid#3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px}#facebook_left img{position:absolute;top:-2px;right:-35px}#facebook_left iframe{border:0px solid#3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px}#twitter_left{z-index:10004;border:2px solid#6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0}#google_plus_left{z-index:10003;background-color:#006ec9;border:2px solid#006ec9;border-top:2px solid#0056a0;border-bottom:2px solid#0056a0;border-left:2px solid#0056a0;border-right:hidden;width:152px;height:97px;position:fixed;left:-154px}#google_plus_left_img{position:absolute;top:-2px;right:-33px;border:0}#feedburner_left{z-index:10003;background-color:#fefefe;border:2px solid#5b5b5b;border-top:2px solid#5b5b5b;border-bottom:2px solid#5b5b5b;border-left:2px solid#5b5b5b;border-right:hidden;width:300px;height:97px;position:fixed;left:-303px}#feedburner_left_img{position:absolute;top:-2px;right:-33px;border:0}#kakinetwork_left{z-index:10003;border:2px solid#303030;background-color:#fff;width:300px;height:97px;position:fixed}#kakinetwork_left img{position:absolute;top:-2px;right:-101px}.box-title1{border:1px solid#ddd;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:5px 5px 5px#CCCCCC;-moz-box-shadow:5px 5px 5px#CCCCCC;box-shadow:5px 5px 5px#CCCCCC;padding:10px;margin:10px 0}.enteryouremail{background:#fff!important;border:1px solid#d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:165px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0px}.submitbutton{background:#F2F2F2;border:1px solid#F66303;-webkit-box-shadow:3px 3px 3px#666;box-shadow:3px 3px 3px#666;font:bold 12px Arial,sans-serif;color:#000000;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;-webkit-border-radius:5px;border-radius:5px;cursor:pointer}

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript
ولآن الصق الكود التالي :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });</script><div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-yPEI3h0C0D1kHf7fy0QcLqrpGBqgmftEnq8AKl-wJK-jxD1AaBikx4cz0CPbOtf3DIR7itVc0Xt24WFJuwt9dgDip0WihV52MilQqEa5UHH_lN2v3CW4OTGsBzkfeSjO1OfcQQw0JyBL/s1600/facebook-icon.png" alt=""/><iframe src="//www.facebook.com/plugins/likebox.php? href=http%3A%2F%2Fwww.facebook.com%2Fabuiyad007&width=200&height=346&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true"></iframe></div></div></div><div id="on"><div id="twitter_right" style="top: 35%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg14MJNEuHUc5sYx8Dr2C5MgoLqSOruIa3Atf2E7iBqBVNX3zUbOup1I5n7wiFX01ODugKz8ssAK4OScEaTrGHdBfmYU0KzbHIp_vdeLsk4zVRq0Pt3p0oEo15oriXVqTIJBafoiW6vLk5q/s1600/twitter-icon.png"/> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }})

.render().setUser('Abuiyad007').start();</script></div></div></div><div id="on"><div id="google_plus_right" style="top: 52%;"><div id="google_plus_div"><img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDAj5eVBQLAGxa7TCQKCqDY4TNRHpSj2iPFo9qOOPi_Fr8bibClBj-DogEJBCLZdoNHnISSRmxhVQ0wQFOxTOXSvtL5D-0iCU8Os2cSw4G_xAFKoFfuLpdte-HekKIx2X9PERfBTnF3Skx/s1600/google-plus-icon.png"/><div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone></div></div></div><div id="on"><div id="feedburner_right" style=" top: 69%;"><div id="knfeedburner_div"><center><h4 style="color:#F66303;">سجل إميلك وتوصل بمواضيعنا :</h4><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open ('http://feedburner.google.com/fb/a/mailverify?uri=feedburner/simo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="" onblur="if (this.value == '') {this.value = 'أدخل إميلك هنا ...';}" onfocus="if (this.value == 'أدخل إميلك هنا ...') {this.value = '';}" type="text"/><input value="feedburner/simo" name="uri" type="hidden"/><input value="أرسل" class="submitbutton" type="submit"/></form></center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjucHOyTdc9CFfZ8zoFNgPOPBRKo9_J9Z4mDbcWL6SRN3S9Fh8U78rcKWqs9HILXb0nXKkLg1MgVDtQZ3StZiHZ94Dh5wmtBb36SYPiMkS6HveAsEqjBUjZmsm-WjiC_r_1TgwfxAxj2yU/s1600/rssfeed.png"/></div></div></div></div>

إستبدل ما لون باللون البرتقالي بحسابك علي الفيسبوك
إستبدل ما لون باللون الأزرق بحسابك على التويتر
إستبدل ما لون باللون الاحمر بحسابك علي الفيدبيرنر

المصدر : مدونة ابو اياد

تابع القراءة

تجريب

ايسف كل العالم

احمد علاء

اسلام طلعت جميل عبداللطيف

إضافة أزرار تابعني تقفز من داخل السلة لمدونات بلوجر

إضافة صورة الكاتب تحت عنوان موضوعه على مدونات بلوجر

كيفية إستبدال كلمة " إرسال تعليق" بصورة على مدونات بلوجر

إظهار أو إخفاء أداة على الصفحة الرئيسية أو على صفحة محددة على بلوجر

إضافة نوافذ المفضلات الإجتماية الجانبية لمدونات بلوجر

المشاركات الشائعة

تبادل إعلانى نصى

انــت الـزائـر رقــــم

التبادل الإعلاني

أقسام المدونة

عـــــــدد المتــواجــدين

تبادل اعلانى صورى

تابعنا عبر الفيس بوك

كن من أفضل متابعينا

Pages

اذا اعجبك الموضوع فتفضل بقرأت افضل المواضيع بالمدونه

إنضم الى اسرة مدونة Kalam Bokra

التدوينات الاكثر مشاهده وزيارة

الكلمات الدلالية

أرشيف المدونة

أقسام المدونة