إضافة أزرار صدى Google Buzz في مدونات بلوجر

نستهل موضوعنا اليوم في شرح كيفية إضافة زر 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>

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

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

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

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

<b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if>

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

<!--  http://www.pergola-aluminium.org/  adsense in post mod. START --><b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if> </b:if><!--  http://www.pergola-aluminium.org  adsense in post mod. END -->

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

<data:post.body/>

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

<!-- http://www.pergola-aluminium.org adsense in post mod. START -->
<b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.includeAd'> <data:adEnd/> <font size="0"><a href="http://www.nuancier-peinture.org">nuancier peinture</a></font><data:adCode/> <data:adStart/> </b:if> </b:if>
<!--  http://www.pergola-aluminium.org  adsense in post mod. END -->

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

<data:post.body/>

ثم إستبدله بالكود التالي :

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

<div expr:id='"aim1" + data:post.id'></div>
<div style="clear:both; margin:10px 0">

ضع كود أدسنس هنا،بعد تحويله

</div>
<div expr:id='"aim2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script><font size="0"><a href=" http://www.pergola-aluminium.org ">monte escalier</a></font>

</b:if>

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

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

فلقد قمت بزيادة تعديل بسيط على الكود و ذلك لمن يريد اظهار اعلانات جوجل ادسنس في جانب نص الموضوع ،سواء على اليمين،وسط،اواليسار كما هو ظاهر في الصورة .

وللقيام بهذا التعديل قم بتبديل الكلمة ذات اللون الأخضر clear:both باحد الكلمات التالية:
float:left : لعرض الاعلان في يسار الموضوع
float:right : لعرض الاعلان في يمين الموضوع
float:center : لعرض الاعلان في وسط الموضوع

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

<!-- adsense -->

كيفية نشر مواضيع المدونات والمواقع تلقائياً على تويتر و فيسبوك في آن واحد

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

http://feeds.feedburner.com/feedburner/simo

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

توجه الى موقع تويترفيد Twitterfeed وقم بالتسجيل ثم قم باتباع التعليمات الموضحة في الصور.المرحلة الاولى :

المرحلة الثانية :

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

• في البداية قم باختيار خدمة تويتر Twitter وسوف نقوم باختيار خدمة فيسبوك فيما بعد ...

المرحلة الثالثة : سوف تظهر لك صفحة تطلب منك ادخال حسابك على تويتر وذلك بالضغط على المستطيل الأزرق ,او اذا كنت داخلا مسبقا الى حسابك اضغط على السهم عند القائمة المنسدلة Twitter account .وسوف يظهر اسم حسابك على تويتر, ثم قم باختياره.
ثم بعدها قم بالضغط على كلمة" create Service" أسفل الصفحة لتفعيل الخدمة.المرحلة الرابعة : بعدها سوف تظهر لك صفحة مثل التي ظهرت لك في المرحلة الثانية،والتي سوف نختار فيها هذه المرة "خدمة الفيسبوك" ,وباتباع نفس الطريقة التي قمنا بها بتفعيل خدمة تويتر.المرحلة الخامسة : نقوم بالضغط على مستطيل الفيسبوك او باختيار اسم حسابك من خلال القائمة المنسدلة" Facebook Account"

واذا كانت لديك صفحة علي الفيسبوك قم باختيارها من القائمة المنسدلة Facebook pages . ثم بعدها قم بالضغط على كلمة" create Service" أسفل الصفحة لتفعيل الخدمة, وعندها سوف تظهر لك صفحة تبين لك الخدمات التي تم تفعيلها(Tiwitter+Facebook) ،بعدها اضغط على كلمة "All Done" اسفل الصفحة للانتهاء
و في الاخير اضغط على زر go to dashboard وسوف تظهر لك هذه الصفحة التي تبين لك تفعيل الخدمتين Twitter +faceook

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

طريقة نشرمدونات بلوجرعلى محرك البحث جوجل

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


1.قم بالدخول إلى موقع google tools webmaster وذلك بنفس البريد الالكتروني وكلمة السر التي تدخل بها موقع بلوجر (ليس شرطا) 

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

<head>

ثم قم بحفظ القالب

4.الآن يمكنك الضغط على الزر Verify وسوف يقوم بالتحقق في الحال.إذا تمت عملية التحقق بنجاح سوف تظهر لك هذه الرسالة . 
5.عند انتهاء عملية التحقق سوف يتم التوجه الى الصفحة الرئيسية والتي من خلالها سوف نقوم بالضغط على الكلمة Submit Sitemap . 

6.قم بالضغط على كلمة Submit a sitmap ,وقم بإدخال هذا الرابط في المستطيل كما هو موضح في الصورة . 

atom.xml?redirect=false&start-index=1&max-results=100 

ملاحظة : إدا كان عدد تدويناتك أكبر من 100 قم بتبديل هذا الرقم ذا اللون لازرق بقيمة 500 

بعد ذلك سوف تظهر لك هذه الصفحة ،وكما تلاحظ تحت كلمة Sitmap يوجد رمز ساعة وذلك يعني أن جوجل مازالت تقوم بتحليل مدونتك 

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

أتمنى أن أكون قد وفقت فيو شرح هذه العملية المهمة في نشر روابط المدونة على محرك البحث جوجل . 

إحصائيات مدونتك على أكبر محركات البحث

مرحبا بكم اخواني الكرام ،اليوم جلبت لكم موقع رائع جدا لأصحاب المدونات و المواقع ،حيث تتمثل أهمية هذا الموقع في إمكانية معرفة وتتبع إنتشار المدونة في أهم محركات البحث ،مثل ،google,yahoo,bing وكذلك في مجموعة من مواقع المفضلات الاجتماعية مثل ,digg,delicious,technorati حيث يقدم لكم إحصائيات يومية عن موقعكم ويمكنكم معاينتها كذلك ،للدخول للموقع إضغط هنا .

للإشتراك فالأمر بسيط عليك فقط ادخال رابط مدونتك في المستطيل كما توضح الصورة والضغط على زر push 2 check


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

اتمنى ين تكون قداستفدت من هذا الموضوع فلا تبخل علينا بتعليقاتك واستفساراتك في ينتظار تشجيعاتكم

قائمة أفقية ثابتة لمدونات بلوجر

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

معاينة الإضافة 

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


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

الخطوات: 

أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F اذا كنت تستخدم متصفح جديد مثل كرومي او موزيلا ونبحث عن :  </head> 

ونقوم بإلصاق هذا الكود قبله .

<link href='https://abuiyad.googlecode.com/svn/Ayoub-Etmaiti-menu-fixed-abu-i.css' rel='stylesheet'/>

<script src='http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]jquery-1.3.2.js' type='text/javascript'/>

 <script type='text/javascript'>

            $(function() {

                $(window).scroll(function(){

                    var scrollTop = $(window).scrollTop();

                    if(scrollTop != 0)

                        $(&#39;#nav&#39;).stop().animate({&#39;opacity&#39;:&#39;0.2&#39;},400);

                    else   

                        $(&#39;#nav&#39;).stop().animate({&#39;opacity&#39;:&#39;1&#39;},400);

                });

               

                $(&#39;#nav&#39;).hover(

                    function (e) {

                        var scrollTop = $(window).scrollTop();

                        if(scrollTop != 0){

                            $(&#39;#nav&#39;).stop().animate({&#39;opacity&#39;:&#39;1&#39;},400);

                        }

                    },

                    function (e) {

                        var scrollTop = $(window).scrollTop();

                        if(scrollTop != 0){

                            $(&#39;#nav&#39;).stop().animate({&#39;opacity&#39;:&#39;0.2&#39;},400);

                        }

                    }

                );

            });

        </script>

وبعد هذا سنقوم بالبحث على </body> بنفس الطريقة التي استخدمناها سابقا ونقوم بإلصاق الكود التالي قبله أيضا مع تعديل ما يناسب:

<div id='nav'>

<ul>

<li><a class='top' href='#'><span/></a></li>

<li><a class='bottom' href='#bottom'><span/></a></li>

<li><a href='الرابط-1'><span>عنوان الرابط 1</span></a></li>

<li><a href='الرابط-2'><span>عنوان الرابط 2</span></a></li>

<li><a href='الرابط-3'><span>عنوان الرابط 3</span></a></li>

<li><a href='الرابط-4'><span>عنوان الرابط 4</span></a></li>

<li><a href='الرابط-5'><span>عنوان الرابط 5</span></a></li>

<li class='search1'>

<form action='/search' id='search1' method='get'>

        <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;ابحث في المدونة...&quot;;}' onfocus='if (this.value == &quot;ابحث في المدونة...&quot;) {this.value = &quot;&quot;}' type='text' value='ابحث في المدونة...'/>

        <input id='searchbutton' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFjQWpVDzSJN3OnoTTuZW38kOcXmPO0Lu_sSvlBOBm6eB1l5D15P3l9LalwxYtH_P6vT1NirQTxpVrajNvy11IFgrsi9M_U38I6iGfBM3enNJ-HyKooXVr8W4Qe1l_1A2yCvVzxpfHEncE/s1600/search-ico-ayoub-etmaiti.png' type='image'/>

    </form>

   

</li>

</ul>

</div> 

<div id='top'/>

<div class='desc'/>

<div id='bottom'/>

<div class='scroll'/>

نقوم بتغير الكلمات :
الرابط-1 ، 2 ، 3 ، 4  و  5   بروابطنا التي نريد ان يتم التوجيه اليها بعد الظغط على الزر ، ونغير العناوين : عنوان الرابط 1
، 2 ، 3 ، 4 و 5  بالكلمة التي ستظهر على زر

 مثال:

<li><a href='ayoub-etmaiti.blogspot.com'><span>أيوب التمايتي</span></a></li>

إضافة الصور المنبثقة Jquery Lightbox التلقائية

السلام عليكم ورحمة الله تعالى وبركاته ، مرحبا بكم أحباءنا الكرام في تدوينة جديدة بعد هذا الغياب عن تقديم كل ما هو جديد في عالم التدوين ،تلقيت عدة رسائل تسألني عن طريقة تركيب خاصية الصور المنبثقة Jquery Lightbox والآن أتيت لكم بالجديد ،فكثير منكم من قام بتطبيق العديد من المحاولات لهذه الإضافة في مدونته لكن بدون فائدة وما يزيد الطين بلة هو يجب تعديل كودHTML  لكل صورة علي حدة ووضع الجملة rel="lightbox" title="Your image Caption"  بعد الوسم" a>" الذي يخص الصورة ،أما الآن مع الخاصية الجديدة التي أتيت لكم بها  تقوم بتفعيل الصور المنبثقة لجميع الصور التي تحتوي عليها المدونة بصفة تلقائية ولا داعي لإضافة أي شيء على كود الصورة ,ولمعاينة هذه الإضافة قم بالضغط على الصورة أسفله .

والآن بعد أن قمت بمعاينة الإضافة سوف نتوجه إلى التطبيق على المدونة ما عليك سوى البحث عن الوسم :

</body>

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<style type='text/css'>
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
    </style>
<script src='http://lightboxabuiyad.googlecode.com/svn/jquery.lightbox-0.4.js' type='text/javascript'/>
<link href='http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
$(function() {
$(&#39;a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)&#39;).lightBox();
});
</script><font size="0"><a href=" http://www.pergola-aluminium.org/ "></a></font>

هل ترون كم الأمر بسيط ،ومبروك عليكم جميعا مع متمنياتي لكم بمتابعة ممتعة  .