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

لا شك أن التعليقات في المدونات من أكثر الطرق فعالية لتقريب المتابع و الزائر لك و لموقعك .

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

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

ثم التوجه نحو تعديل قالبك بالنقر على "قالب" ثم "تحرير html" .

إبحث عن 

<div class='comments' id='comments'>

(للبحث إضغط على CTRL+F)

سيكون مكرر مرتين , توجه نحو الأولى ثم أضف تحتها مباشرة هذا الكود :

  <div class='comakauttafb-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Add Comments via Facebook'>  
 <img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUZZRl2TYCACTOCrV6wxREDBGuYprC8NvWaWAgthhLGZMyKAQzIJXvDHI3YG9IcKiPiwqfvlJM90qI1zSb_XAjGlTP_NdGgSuezZtmYY8-PnMJmHTlrATPyrbpNw_rwt8MTBgs_7RksSY/s1600/FACEBOOK.png'/><fb:comments-count expr:href='data:post.url'/> التعليقات</div>  
 <div class='comakauttafb-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Add Comments via Blogger'>  
 <img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN1paMkf-YpKnodlltWHzJDhezQ69KAJogF7P-q7Jfkch7skgMnvWvSOB4FmDYksrSR9CtYUKXL2tMbb7epmUnZpFJGVJBmNI27oUokmoGcK3aPd5sMhdC0j8b3-Si6kL0rPdhecYNf8U/s1600/BLOGGER.png'/> <data:post.numComments/> التعليقات</div>  
 <div class='clear'/>  
 </div>  
 <div class='comakauttafb-page' id='fb-comments-page'>  
 <b:if cond='data:blog.pageType == "item"'><div id='fb-root'/>  
 <fb:comments color='dark' expr:href='data:post.url' num_posts='10' width='680'/></b:if></div>  
 <div class='comments comakauttafb-page' id='blogger-comments-page'>  
 <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='additions.blogger' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(".comakauttafb-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comakauttafb-page").hide();$(selectTab + "-page").show();}</script><style type='text/css'>.comakauttafb-page, .comakauttafb-tab {-moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; border-right:5px solid #ccc; border-top:3px solid #ccc; border-bottom:3px solid #ccc; border-right:5px solid #ccc}.comakauttafb-page {background:transparent;);margin-top:8px;}#blogger-comments-page {padding:0px 5px;display:none;}.comakauttafb-tab {text-shadow:0px 1px 1px #fff;color:#000;float:right;padding:5px;margin-right:5px;cursor:pointer;background:transparent;);-o-transition:.5sease-out;-moz-transition:.5s ease-out;-webkit-transition:.5s ease-out}.comakauttafb-tab-icon {height:16px;width:16px;margin-right:5px;}.comakauttafb-tab:hover {background:rgba(219,219,219,.8);}.inactive-select-tab {background:rgba(255,255,255,.4);}.inactive-select-tab, .comakauttafb-tab:hover {box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px #000;-moz-box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px #000;-webkit-box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px #000}</style>  

إن كنت تريد التعديل على عرض الإضافة لتتناسب مع عرض صفحتك , إبحث عن : width='680' و غير 680 بالعرض الذي تريده 

إضغط على "حفظ" , و شاهد الإضافة أسفل كل موضوع

إضافة أداة أخر التعليقات مع صور المعلقين

بسم الله الرحمن الرحيم

اليوم نتطرق الى اضافة جميلة ومفيدة وهي عرض اخر التعليقات بالمدونة

حتى تساعدك لمعرفة الردود وسرعة الرد والتفاعل داخل المدونة

ومن ناحية اخرى تعطى المدونة شكل ومظهر جمالي

يجذب الانتباه للمدونة 

وهذه صورة توضيحية لاخر التعليقات داخل مدونة مصطبة الحبايب

صورة توضيحية

وبعد ان رأينا شكل التعليقات ندخل على كتابة الكود

   الذهاب إلى Blogger> تخطيط

     اختر إضافة أداة

 Html/javascript

ونضع بداخلها الكود التالي

 <style type="text/css">   ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}   .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}   .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}   .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}   .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}   .w2b_recent_comments li span{margin-top:4px;color: #606060;display: block;font-size: 15px; line-height: 1.4;} </style> <script type="text/javascript"> //<![CDATA[   // Recent Comments Settings   var numComments = 5, showAvatar = true, avatarSize = 50, roundAvatar = true, characters = 40, showMorelink = false, moreLinktext = "More &#187;", defaultAvatar = "http://www.h-online.com/imgs/43/7/8/4/4/3/9/anonymous_or_80-f288c17fbe12ecd1.png", hideCredits = true; //]]> </script> <script type="text/javascript" src="https://abuiyad.googlecode.com/svn/recent%20comments.js"></script> <script type="text/javascript" src="http://yasserelaraby86.blogspot.com.eg/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=4"></script>  



تقوم بتغيير الرابط

http://yasserelaraby86.blogspot.com.eg

برابط مدونتك حتى تعمل داخل مدونتك

وتمتع بالاضافة الجديدة

تحياتي

ياسر العربي

طرق زيادة عدد التعليقات في المدونات والمواقع

السلام عليكم ورحمة الله وبركاته                                    

موضوعنا اليوم هو واضح وضوح الشمس هو عن طرق زيادة عدد التعليقات في مدونتك 

في هده التدوينة سوف ادلكم على طرق فعالة و مفيدة في سبيل الحصول على تعليقات و تفاعل اكبر في مدونتك او موقعك 

خاصة ادا كنت تعاني من نقص في التعليق و التفاعل في مدونتك واصبحت تشعر ان مواضيعك غير مفيدة و مملة 

فانت ربما تتعب في تحضير التدوينات لاكن لا ترى من يهتم بها او حتى يشكرك عليها

• اليكا الان احدت الطرق المتبعة و التي انصح بها 

• كتابة مواضيع دات محتوى قيم وسهلة القراءة

طبعا ان هدا هو الاساس فادا كتبت مواضيع دات محتوى قيم وسهلة القراءة فسوف ترى على اقل قليل من الشكر في التعليقات بصفتك افتهم خاصة في المحتوى الناقص او النادر الدي لا تجده عند غيرك اي يحب عليك التميز من بين كل الناس

• تسهيل عملية التعليق

تسهيل عملية التعليق ضروري لان الزائر عادة لا يحب العمليات المعقدة في اضافة تعليق او ما شبه دلك
 فعلى سبيل المثال اجعل في تعيقاتك حتى المجهولين يستطيعون التعليق او حتى يعلق بالاسم مستعار او شيء من هدا 

• تفاعل مع التعليقات خصوصا الاسئلة و الاستفسارات

تفاعل مع التعليقات خصوصا الاسئلة و الاستفسارات يجعل منك صديقا الاول في لزوارك مما يعزز التقة بينك وبينه خاصة ادا اجبته عن سؤال او طلب 

نصيحة لك لا تترك اي سؤال بدون ان تجاوب عليه لكسب زوار اصدقاء لك

• اطلب من اصدقاء لك 

طبعا ادا كنت في ازمة قلة التعليقات فلمادا لا تطلب من اصدقاء التعليق 

• الاخيرا و هو اترك عبارة او صورة صغيرة في اخر كل تدوينة تدعو فيها الزوار لتعليق

لعل هده الطرقة الاكتر استعمالا في وقتنا الحاضر و الاكتر فعالية فنجد تقريبا جميع المواقع و المدونات تستعمل عبارات قصير او حتى صور صغيرة تدعوك لمشاركة رايك وهده الطريقة الاكتر فعالية انصح بها 

وفي النهاية امل انني اكن قد افدتك يا زائري الكريم ولا تنسى حتى انت لتترك بصمتك بتعليق :)

تحياتي

إضافة شاحنة صفحة الفيسبوك إلى المدونه

السلام عليكم ورحمة الله وبركاته

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

وتهدف هده الاضافة طبعا لزيادة عدد معجبين صفحتك على الفيسبوك

كما انها تزيد مدونتك جمالا

نبدء بدون اطالة

طريقة اضافة الاداة 

1. اذهب الى 
2.  لوحة التحكم
3.  التخطيط
4.  إضافة أداة
5. Html/javascript
6. <!--http://yasserelaraby86.blogspot.com.eg/--> <div style="position: fixed; z-index: 65535; left: 0px; bottom: -3px; width:100%;"> <marquee><a href="https://www.facebook.com/مصطبة-الحبايب-629699190515118" target="blank"> <abbr title="Follow us at Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8FDUP7D9g75H0pQR3g0E_qd0Hj4G-8KEUGFiYGZ6vfiCX8kTlwCgFvJ5zgnICdzV8H_c3wojbOmMvz1XQlfJ-XyJNkp42Kl5iUTo0xdTunV1n2R7Fv2b4-ql3bbKvygleA1vtrzEtUqLK/s69/I1.png"/> </abbr> </a> </marquee> </div>
7. 
   
8. مع استبدال 

مصطبة-الحبايب-629699190515118/https://www.facebook.com
برابط صفحتك

مع تحياتي

تعديل لون التظليل CSS3

بسم الله الرحمن الرحيم

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

CSS3 Styled Text Selections

نشوف صوره توضح الفكره

ملاحظة قبل كل شيء أخذ نسخه احتياطية من القالب

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

قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F). 

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

]]></b:skin>

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

p::selection 

{
    background: red;
    color: white;
}

p::-moz-selection
{
    background: red;
    color: white;
}

p::-webkit-selection
{
    background: red;
    color: white;
}

ملاحظة مهمه البعض يسأل هل الالوان اقدر اغيرها الجواب طبعا نعم 

الكلمه التي بالون الاحمر تمثل لون التظليل الذي تريده يمكنك استبدال الون

 بكود اللون المناسب مثلا  44444# 

اما الون الازرق يمثل لون النص او الكتابه بعد التظليل يمكنك

 تغيره بالون المناسب ايضا

في الاخير يجب ان يكون بنفس النسق الموجود بالكود

تم التعديل ومبروك الاضافة عليك.. شكرا للمتابعة

اضافة الزر 1+ لجوجل على مدونة بلوجر

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

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

قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).

</body>

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

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

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

<data:post.body/>

ثم قم بلصق الكود التالي بعده ،ليكون الزر أسفل التدوينة ،أو قبله ليكون الزر تحت عنوان التدوينة .

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<g:plusone expr:href='data:post.url' size='tall'/>
</b:if>

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

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

اجعل مدونتك اسرع في التصفح من الهاتف النقال

من المشاكل التي يواجهها المدون على منصة blogspot- هي عدم وجود اضافة او قالب خاص بمتصفحي المدونة بواسطة الهاتف النقال ، وكما تعلمون فأن عدد مستخدمي الانترنت في ازدياد وتضاعف مستمر
 
  وبسبب التطور الهائل في شبكات الهواتف المحمولة وتقنيات 3G's فعدد المستخدمين قد تضاعف بشكل كبير حيث بلغ عدد من يستخدمون الانترنت بواسطة الجوال عام 2009 ما يقارب 74 مليون شخص بشكل متواصل ، وهذه صورة توضيحية لما هو متوقع في السنوات القادمة فقط داخل الولايات المتحدة  من الموقع نفسه  .

حتى يتحفنا بلوجر بأحد الحلول لهذه المشكلة ، اقتبست من مدونة bloggertricks  كود يعمل على تسريع تصفح المدونة حتى لا تفقد زوارك من الهواتف المحمولة وهم ينتظرون تحميل صفحة مدونتك ، ولتركيب الكود اتبع هذه الخطوات :


1- من لوحة التحكم اضغط على تصميم – تحرير html – اضغط على تنزيل قالب – وبعد اكتمال التنزيل اضغط على توسيع فوالب عناصرواجهة المستخدم :
2- ابحث عن :

  <b:include data='blog' name='all-head-content'/>

3- اضف الكود التالي بعدها/تحتها مباشرة 

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

<b:if cond='data:blog.isMobile'>

<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>

<b:else/>

<meta content='width=1100' name='viewport'/>

</b:if>

4 - احفظ قالب مدونتك ، وتمتع بهذه الاضافة المفيدة

أضافة كود تابعني عبر الشبكات الاجتماعية لمدونات البلوجر

بسم الله الرحمن الرحيم

نظرا للتقدم السريع  للشبكات  الاجتماعية، والاهتمام المتزايد من الناس في مواقع الشبكات الاجتماعية فهي تعتبر ولادة للكثير من الزوار للمواقع والمدونات مما يساعد موقعك التقدم في المحركات البحث وزيادة عدد الزوار ويعتبر كمية من زوار الشبكات الأجتماعية مدمنين لها وبواسطة هذه الأداة التي سوف أعرضها لكم تساعدك في نشر مواضيعك ومدونتك في الشبكات الأكثر شهرة وطبعا ( الفيسبوك ..تويتر..قوقل بلس)

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

وكذلك بشكل جديد 

أين أضيف الأداة الشبكات الأجتماعية؟؟

  

يمكنك أضافتها في الصفحة الرئيسية للمدونة وذلك بوضعها في القائمة الجانبية أو في رأس الصفحة 

بحيث تجعلها مناسبة لمدونتك ويشاهدها زوارك 

مثال (صورة للأداة)

كيف يمكنني أضافة الكود؟؟

الشرح 

فيما يلي الخطوات لمستخدمي البلوجر

     الذهاب إلى Blogger> تخطيط
     اختر إضافة أداة
     اختر HTML / جافا سكريبت
     لصق التعليمات البرمجية التالية في داخله، (أي الكود التالي )

<style>
/*--------أداة تابعني ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:right;
background:transparent url(http://mybloggertricks.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;   
-moz-transition: ease-in 0.2s all;   
-o-transition: ease-in 0.2s all;   
-ms-transition: ease-in 0.2s all;   
transition: ease-in 0.2s all;
cursor:pointer;

}

.touchme a.googleplus {
background-position: 0px -58px;

}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}

.touchme a.twitter {
background-position: 0px -290px;

}
.touchme a.twitter:hover {
background-position: 0px -232px;

}
.touchme a.facebook {
background-position: 0px -406px;

}
.touchme a.facebook:hover {
background-position: 0px -348px;

}

.touchme a.rss {
background-position: 0px -174px;

}
.touchme a.rss:hover {
background-position: 0px -116px;

}

</style>

<div class='touchme'>

<!--RSS-->
<a class='rss' href="ضع رابط rss الخاص بمدونتك" rel='external nofollow' target='_blank'></a>

<!--Google Plus--> 
<a class='googleplus' href="ضع هنا رابط صفحة مدونتك في قوقل بلس" rel='external nofollow' target='_blank'></a>

<!--Facebook-->
<a class='facebook' href="ضع هنا رابط صفحة مدونتك في الفيسبوك" rel='external nofollow' target='_blank'></a>

<!-- Twitter -->
<a class='twitter' href="ضع هنا رابط صفحة مدونتك في تويتر" rel='external nofollow' target='_blank' ></a>

</div>

مع أستبدال النصوص المشار لها بلون الأحمر بروابط مدونتك في الشبكات الأجتماعية

                                           وأخيرا أعمل حفظ للأداة و شوف النتيجة

كيفية أضافة نمط أو خلفية للأكواد في المواضيع للمدونة

السلام عليكم ورحمة الله وبركاته

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

 بحيث يمكن تمييزها وكذلك أضافة الميزة الأحترافية للمدونة

الشرح :-

1- لوحة التحكم

2- تصميم

3- تحريرhtml

4- أعمل توسيع للقالب

لاتنسى أخذ نسخة للقالب كالعاده

أبحث عن الكود التالي

]]></b:skin>

وأضف قبله مباشرة 

الكود التالي

.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimt84ZE6D6ls7hrYqK7PT4UUl08o7Y9VAU7sUse-I4dCKtrEH_qRqB07J8kOrzPZxwObk_xaK45wMRcENozSoOyFXtlL8rAcipo-VNRXSpYRRlLFSgYU3S3f4_QhQcxxFEchsWZwZ3wcA/s1600/comma-side-orange1.gif) ; background-position:; background-repeat:repeat-y; margin: 0 10px; padding:10px 30px 10px 20px; font-size: 0.6em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 5px;
}

وأخيرا 

أعمل حفظ للقالب و شاهد النتيجة

مع تحياتي