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

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

</head>

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

<script language='javascript'>
function toggle() {
var ele = document.getElementById(&quot;toggleText&quot;);
var text = document.getElementById(&quot;displayText&quot;);
if(ele.style.display == &quot;block&quot;) {
ele.style.display = &quot;none&quot;;
text.innerHTML = &quot;<img alt='إظهار التعليقات' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiom3M4F0mxqDXRD0PihT2bzKtRVzt69ct5_fP6SAcNdcivQau7bNNR7YxWwd3Grp8BO8ijX_n4Jg0Yu1o06Iy9SEoPM1iPxR-sm4Rak0fGzdAnVFjTuZQW-N7y8K2YN3UF0ogD_Fl2e_s/s1600/cooltext470930301.png' title='إظهار التعليقات'/>&quot;;
}
else {
ele.style.display = &quot;block&quot;;
text.innerHTML = &quot;<img alt='إخفاء التعليقات' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKudbDjRw8uoED-TsZOS6gSpf_iX7H-2Ws0EkxLMu3dQaXktFDvQ2jre35Bv4U4Ds9CTDMi3vhy5WKCM4WQrkdtMrZc7HxUf5dOrJgHJohooMOj5NXqHzcqpelFGkokNsGo7A423l0d2c/s1600/cooltext470930319.png' title='إخفاء التعليقات'/>&quot;;
}
}
</script>

حيث يمثل الرابط ذا اللون الأزرق صورة الزر "إظهار التعليقات" و الرابط ذا اللون  الأحمر صورة الزر" إخفاء التعليقات "

والآن نقوم بالبحث عن هذا الكود :

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

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

<a href='javascript:toggle();' id='displayText'><img alt='إظهار التعليقات' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZxQwdu1p_-PUFbNQMVNjqy2XpvGa8KXtoaHaqEFe3JApUzQ_-ERAHHKGTORTznO79f2zic_0lWlySF-F6goXhWL0Et1WAnKiRGdkCpfLA_h_VxH8U3UFRKemERlNRqN2CVvWfUMYhNbU/s1600/cooltext470930250.png' title='إظهار التعليقات'/></a>
<div id='toggleText' style='display: none;'>

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

<b:include data='comment' name='commentDeleteIcon'/>

 </span>

</dd>

</b:loop>

</dl>

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

</div>

وأخيرا قم بحفظ القالب،وتوجه للمعاينة

ولأي إستفسار ،الموجوا وضع تعليقاتكم للإجابة عليها في أقرب وقت ممكن.

Résuméabuiyad

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

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

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

<data:commentPostedByMsg/>

ثم ضع مباشرة تحته هذا الكود :

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=11111111&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0 ,scrollbars=yes,width=450,height=450&quot;); return false;'>
<img src='http://hitskin.com/themes/14/77/83/i_reply.jpg'/></a></span>

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

ولأي إستفسار المرجو ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجل

Résuméabuiyad

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

معاينة

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/AVvXsEh8qGxKbhaiTeknXYlqvvboiudF5MeC4F3B8bKeK-aZL3gCvLzOkeMC931AxczEdqKcp_dRGRok56DxycaMqmSxMkhs1gKojwE0A31f70chmp16R3k-P5xuWwLVG91IearHI8-vyyNoPIw/s320/facebook.png" ilo-full-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8qGxKbhaiTeknXYlqvvboiudF5MeC4F3B8bKeK-aZL3gCvLzOkeMC931AxczEdqKcp_dRGRok56DxycaMqmSxMkhs1gKojwE0A31f70chmp16R3k-P5xuWwLVG91IearHI8-vyyNoPIw/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/AVvXsEhKqN0suejp61vyadQ9uIIxjIiwSN5qLs0VA64X-PDrgdaj8T1Rejt1LWDH0y5QJquT4qSQzLFYOoIadbfOKrwlrzvG-jhvUmcr-mHDn1Yu31bUZ9CSbM9YFMZuIphnSVaah2Oz-yOahjo/s320/twitter.png" ilo-full-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKqN0suejp61vyadQ9uIIxjIiwSN5qLs0VA64X-PDrgdaj8T1Rejt1LWDH0y5QJquT4qSQzLFYOoIadbfOKrwlrzvG-jhvUmcr-mHDn1Yu31bUZ9CSbM9YFMZuIphnSVaah2Oz-yOahjo/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/AVvXsEjuP6vvDGFLBBwWIrUevUDfO5zPy-PVsK-QvtULCPz_njpKSBQ6ZUuih1LlJziINpAPqNBxIjmcPbu3bM-p8PR_MsL1-HVqXZbuT-eJ3dKiQn6GSZJHLn5DydxeA13mhBbEqF6J3hALij8/s320/delicious.png" ilo-full-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuP6vvDGFLBBwWIrUevUDfO5zPy-PVsK-QvtULCPz_njpKSBQ6ZUuih1LlJziINpAPqNBxIjmcPbu3bM-p8PR_MsL1-HVqXZbuT-eJ3dKiQn6GSZJHLn5DydxeA13mhBbEqF6J3hALij8/s320/delicious.png" /></a></li></ul></div>

<!-- end div .stack --><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://abu-iyad.blogspot.com/" target="_blank"></a></span>

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

Résuméabuiyad

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

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

قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).
تذكير:لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء.

</head>

ثم ضع الكود التالي فوقه :

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url(&#39;https://sites.google.com/site/lightbox007/photo/youlikethisarticle.png&#39;) no-repeat left bottom;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url(&#39;https://sites.google.com/site/lightbox007/photo/sharingblogger.png&#39;) no-repeat right bottom;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url(&#39;https://sites.google.com/site/lightbox007/photo/bookmark2.png%27&#39;) no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}

</style>

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

<data:post.body/>

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

<!--SexySharing abu-iyad--><b:if cond='data:blog.pageType == &quot;item&quot;'><div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'> <ul class='socials'>

<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='أضف رابط خلاصات الخاص بك هنا ' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>

<div class='sexy-link'> Distributed by <a href='http://abu-iyad.blogspot.com' title='أبو إياد'>Abu-Iyad</a>
</div></b:if>

أخيرا قم بحفظ القالب و إذهب للمعاينة.ولا تنسى أن تقوم بتبديل ما باللون الأحمر بعنوانك على Feed Burner
أنتظر تشجيعاتكم

Résuméabuiyad

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

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

]]></b:skin>

ثم ضع الكود التالي فوقه :

.post_share{float:left;border:1px solid #DDD;margin-right:10px; top:200px; padding-top:10px;position:fixed;background:#FFF;margin-left:-80px; padding-bottom:10px;} .post_share .wdt_button{clear:left;margin:0}

top:200px : تعني المسافة الفاصلة بين بداية الصفحة و الأداة,قم بتعديلها حسب مدونتك
ثم قم بالبحث عن الكود التالي : فإذا وجدت 2 من هذا الكود ،فالثاني هو المقصود

<data:post.body/>

ثم ضع الكود التالي فوقه :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='post_share'>
<div class='wdt_button'>
<center>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://sites.google.com/site/mohamedabuiyad/abu-iyad-social/button.js' type='text/javascript'> </script>
</center>
</div>
<div class='wdt_button'>
<center>

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' onClick='return buzzPopup(this, &apos;Buzz this&apos;)' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2FXov08uKTBj5lCja1fsmRBtCFRTqNe3Ttqko9RFEVfIWiCOb-LgIMnYOOxb4vptpdLxa9uvgsIcmRiycALlgnSdMOBM-L13ZLYGmk7_bjJyzj30GuLf7Q4aVvtZg9ZqLLK8h8VYKFds/s1600/g-buzz.png'/></a>
</center>
</div>
<div class='wdt_button'>
<center>
<script type='text/javascript'>
scoopeo_url=&quot;<data:post.url/>&quot;;
</script>
<script src='http://scoopeo.com/clicker/insert/large' type='text/javascript'/>
</center>
</div>
<div class='wdt_button'>
<center>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</center>
</div>
<div class='wdt_button'>
<center>
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>Email
</a>
</span>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
</center>
</div>
</div>

</b:if>

أخيرا قم بحفظ القالب و إذهب للمعاينة,فلا تنسى التعليق على هذا الموضوع,في إنتظار تشجيعاتكم

Résuméabuiyad

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

<data:post.body/>

ملاحظة :يظهر الزر باللغة العربية أو الإنجليزية حسب اللغة التي يستخدمها الزائر في حسابه على فايسبوك، فإن كانت صفحته الشخصية بالعربية ظهر الزرعلى شكل أعجبني

و إن كان بالإنجليزية ظهر الزرعلى شكل Like
ولإضافة الزر في آخر التدوينة ألصق الكود التالي بعدها و ليظهرفي أول التدوينة ألصقه قبلها.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/> </b:if>

tahoma : نوع الخط
light : يعني خفيف ، ويمكن تغييرها الى dark
450px العرض الذي ستأخذه الاضافة ويمكن تغييره حسب قالب مدونتك

Résuméabuiyad

السلام عليكم ورحمة الله تعالى وبركاته ،نستهل موضوعنا اليوم في شرح كيفية إضافة زر Google Buzz في مدونات بلوجر وما مدى أهميته و كيفية إستعمالة ,أولا نبدأ بتعريف الخدمة :
تتيح لك خدمة نبضات Google مشاركة آخر المعلومات والصور والروابط بل ومشاركة أي شيء آخر تريد مشاركته مع جهات اتصال Gmail، كما أنها طريقة سهلة لمتابعة أصدقائك أيضًا. عند النقر على الرابط نبضات Google في حساب Gmail، سترى مجموعة من مشاركات الأشخاص الذين تتابعهم، كما سيظهر مربع لنشر التحديثات.
ثانيا ،كيفية إضافة زر الى مدونة بلوجر ؟ :

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

<div class='post-header-line-1'>

والآن قم بإختيار أحد الأكواد التالية حسب رغبتك في نوعية الزر,ثم قم بإضافة أحد الأكواد بعده

فإن لم تجده قم بالبحث عن هذا الكود ،فإن وجدت منه إثنين فالتاني هو المقصود 

  <data:post.body/>

ثم قم بإضافة أحد الأكواد التالية  قبله
إذا كنت تريد مكان الزر أسفل التدوينة  قم بإضافة أحد الأكواد بعده
1- الزر + العداد مع إضهار  المشاركات في الأعلى :

<a title="نشر على نبضات Google" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-locale="ar"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

2 - الزر + العداد مع إضهار المشاركات في على الجانب :

<a title="نشر على نبضات Google" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-count" data-locale="ar"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

3-الزر فقط بالحجم العادي :

<a title="نشر على نبضات Google" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-button" data-locale="ar"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

4- الزر فقط بالحجم صغير :

<a title="نشر على نبضات Google" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-button" data-locale="ar"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

5-الزر عبارة على رابط :

<a title="نشر على نبضات Google" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="link" data-locale="ar"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

أخيرا قم بحفظ القالب و إذهب للمعاينة,فلا تنسى التعليق على هذا الموضوع,في إنتظار تشجيعاتكم

Résuméabuiyad

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

قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).تذكير:لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>

قم بوضع الكود التالي بعده ل لحصول على هذا الرمز :

<div style='float:left; margin-right:10px;'>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'>
</script>
</div>

ولإختيار الرمز الصغير قم بوضع هذا الكود التالي بدلا من الكود السابق:

<div style='float:left; margin-right:10px;'>
<script type="text/javascript">
tweetmeme_style = "compact";
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

يمكنك وضع الرمز في جانب التدوينات كما هو موضح في الصورة و ذلك بوضع أحد الكودين السابقين (حسب الرغبة) قبل الكود التالي :

<data:post.body/>

Résuméabuiyad

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

إذا وجدت 2 من هذا الكود فالثاني هو المقصود

<data:post.body/>

ثم قم بإستبداله بأحد هذه الأكواد:

<span class='noprint'><data:post.body/></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'><img src='http://jnnh.net/images/print.jpg'/></a>
</b:if>

<span class='noprint'><data:post.body/></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'><img src='http://hantoor.com/images/print.png'/></a>
</b:if>

<span class='noprint'><data:post.body/></span>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'><img src='http://www.alphastat.org/images/shared/printer.gif'/></a>
</b:if>

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

Résuméabuiyad