صندوق تعليقات فيس بوك علي بلوجر

بسم الله و الحمد لله و الصلاة و السلام على رسول الله محمد الأمين.
السلام عليكم و رحمة الله.

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

مميزات الإضافة:

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

تعليقات فيسبوك كما تبدو على المدونة

الخطوة الأولى: إنشاء تطبيق خاص على الفيسبوك

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

كما وضح من خلال الصورة ستدخل رابط مدونتك و رابط اسم النطاق الذي عليه مدونتك، مثلا blogspot.com لمدونات بلوجر التي لا تستعمل اسم نطاق خاص. كذلك ستكون قد نسخت معرف التطبيق الموضح في الصورة لانك ستحتاجه فيما بعد.

الخطوة الثانية: إضافة الأكواد اللازمة إلى قالب المدونة

من لوح تحكم مدونتك توجه إلى صفحة "التصميم" ثم "تحرير HTML" و قبل أي تعديل رجاء احفظ نسخة احتياطية من قالب مدونتك على جهازك ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
ابحث عن <html ثم بعده مباشرة أضف الكود الآتي :

xmlns:fb='http://www.facebook.com/2008/fbml'

و سيصبح إذن الكود بهذا الشكل :

<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

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

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
    FB.init({xfbml: true, appId: معرف التطبيق });
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/ar_AR/all.js'
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

بعد ذلك ابحث عن </head> ثم قبله مباشرة ألصق الكود الآتي:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta   expr:content='data:blog.pageTitle' property='og:title'/>
<meta   expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta   expr:content='data:blog.title' property='og:title'/>
<meta   expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta   content='عنوان المدونة' property='og:site_name'/>
<meta   content='http://google.com/help/hc/images/logos/blogger_logo.gif'   property='og:image'/>
<meta content='معرف التطبيق ID'   property='fb:app_id'/>
<meta content='معرف حسابك على فيسبوك ID'   property='fb:admins'/>
<meta content='article'   property='og:type'/>

هذا الكود خاص ب Open Graph protocol وهو يتيح لفيسبوك التعامل مع موقعك أو مدونتك كما لو كان صفحة كما صفحات فيسبوك... طبعا لا تنس تغيير ما أشير إليه بالألوان كما يلي:
عنوان المدونة : عنوان مدونتك أو أي اسم تحب أن يظهر على فيسبوك عندما يعجب أحدهم بإحدى تدويناتك.
الرابط البرتقالي : استبدله برابط صورة لشعار مدونتك.
معرف التطبيق ID : طبعا هو نفسه المعرف الذي نسخته في الخطوة الأولى.
معرف حسابك على فيسبوك ID : هو مجموعة أرقام يمثل حسابك على فيسبوك لمعرفته يمكنك زيارة هذا الموضوع. فبحسابك هذا ستكون مدير التعليقات Admin.

ثم ابحث عن <data:post.body/> و بعده مباشرة ألصق الكود الموالي مع تعديل ما لون:
560 استبدلها بالعرض المناسب الذي تريد أن يبدو عليه صندوق تعليقات فيسبوك، و هذا هو الكود الذي يتولى إظهار صندوق التعليقات، فيمكنك إدراجه في أمكنة أخرى غير الذي ذكر بما يناسب مدونتك.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div><script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
<fb:comments width='560' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' migrated='1'/>
</div>
</b:if>

ملاحظة: لمن يملكون قوالب داكنة أو سوداء اللون يمكنه استعمال صندوق تعليقات فيسبوك باللون الأسود و لفعل ذلك نضيف colorscheme='dark' مباشرة بعد <fb:comments في الكود السابق.

و أخيرا اضغط زر الحفظ و هنيئا لك.

ربط مدونات بلوجر باسم نطاق ( دومين ) من جودادي

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

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

الخطوة الأولى: الإعداد التلقائي لاسم النطاق على جودادي

إن كنت قد اقتنيت اسم نطاقك من جودادي فاذهب إلى صفحة الإعداد التلقائي.
إذا كنت لم تحجز اسم نطاق بعد فيمكنك حجز واحد بقرابة 16 دولار لمدة سنتين * من Godaddy
(*) رابط إحالة
بعد ولوجك إلى الصفحة سجل دخولك عبر إدخال اسم المستخدم و كلمة السر، بعدها ستنتقل إلى صفحة تظهر النموذج الموضح بالصورة أسفله:

أدخل اسم النطاق (دومين) مدونتك مثلا (www.example.com) ثم اضغط زر التأكيد (Confirm) بعدئذ ستنتقل إلى صفحة جديدة تخبرك أن إعدادات ال DNS قد عدلت. كما هو مبين في الصورة الآتية:

بعد إن أنهينا الشق المتعلق بجودادي ننتقل إلى تعديل الإعدادات على بلوجر.

الخطوة الثانية: تحيين إعدادات اسم النطاق في بلوجر
الآن بعد إنهاء الشق المتعلق بإعداد اسم النطاق، توجه إلى لوحة تحكم مدونتك على بلوجر ثم في صفحة الإعدادات (إعدادات / نشر في لوحة التحكم القديمة) تضغط رابط إضافة نطاق مخصص الموجود مباشرة تحت حقل عنوان المدونة.

ثم بعد توسيع الإطار تضغط "تبديل إلى الإعدادات المتقدمة" وفي الحقل الفارغ أكتب اسم نطاق مدونتك الجديد بهذا الشكل www.example.com، و ستجد أن توجيه النطاق الفرعي القديم إلى اسم النطاق الجديد مفعل افتراضيا (1). ثم تضغط زر الحفظ كما بالصورة:

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

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

Mashable Style Social Subscription Widget

Mashable Style Social Subscription Widget for Blogger/Blogspot

Mashable Style Social Subscription Widget is cool widget for blogger. As the Title say’s this widget is from Mashable.com. I seen in most WordPress blogs are using this widget. I am giving this widget with a great options to customize this widget for Blogger. Actually I get ready this widget 2 weeks ago. but I hold this widget because of Google+ Badge. Google+ Badge is not realizable and it’s width is Fixed to 300px wide. Now they added the customization of width and Height. and also Google+ Badge is coming in two Color schemes.(Dark and Light).

Features:

Adjustable Width.
Only Selected Social Network to Show.
7 Styles of Email Subscribe Buttons.
Included 16 Social Button Icons.
Background Color Customization.

How to Install Mashable Style Social Subscription Widget on Blogger?

As usual i given a Widget generate form. I work hard and build the Widget form so it very easy to Add this widget for you.

Go to the Widget Generator by clicking the below Button.
Provide Require widget title and Valid blog URL.
Fill Width of the Widget. I recommend 300px or More. But must not Less then 100px. Because Google+ badge least width is 100px.
To show the Google Badge you need to Fill the Google Page ID. you can get the G+ Page ID form it’s URL.
My Google+ Page URL is https://plus.google.com/105370464976454684137
My Google+ Page ID is 105370464976454684137
Like so, to Get the Feedburner ID
My Feedbuner URL is http://feeds.feedburner.com/way2blogging
My Feedbuner ID is way2blogging
I am given 16 Other Social Network buttons in the widget. so Just Select a Network and Fill the URL finally Click the Add Button.
You can also Sort them by dragging.
Finally Click the Generate Button and Enjoy

Static Follow By Email Pop Out Widget

Static follow by Email Widget is a New Widget for Blogger/Blogspot. This is Actually a WordPress Plugin. Now it is available for Blogger Blogs. This Widget is Jquery Based widget with Nice and smooth Popout effect. You will get more email subscribers with this widget and Very easy to Install in your Blog.

How to Install Pop out Follow by Email Widget?

As this widget based on jQuery plugin, First you need to have a jQuery Plugin in your Blog template.
This Step is Required, If your Blog already have this plugin then Ignore this Step.
If your Blog Don’t have this Plugin, Install the jQuery Plugin.
Add the below line of code before </head> tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Installing Widget:-

In this Second Step, I am giving two ways to install this widget. Both will give the Same Effect.

By Adding Widget Code to Template.
Using Widget Generator.

By Adding Widget Code to Template

This will converts Follow By Email Official Blogger Widget to a Pop out follow by Email Widget.

First Add Follow By Email Official Blogger Widget to Your Page Elements Layout.

Add the Below Section Of code before closing </head> tag.

<style type="text/css">
/*<![CDATA[*/
    .FollowByEmail {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}
    .followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
    .w2bfollowButton {background: #464646;color: #CCC;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}
    .w2bfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9VPJ6VoZWr8zfpKypOqF_U8EeWDb_s3oOHKI68TwDyiBZRfvXFJMEBquK8FY1af6FrG-2VHtTcEVSsfoZBKpgD_qpAlZV0cWbHVOk85xYba8wGhAJrnKkH0d7BeMHmDZ9H5xdRy2-20RX/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
    .w2bfollowButton:hover,.followActive {color: #fff !important;}
    .w2bfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
    .followactive {background-color: #333;}
    .follow-by-email-inner {padding: 15px;}
    .FollowByEmail h2 {padding: 15px 15px 0;font-size: 18px;margin: 0 0 10px;font-weight: normal;}
    .follow-by-email-inner p {margin: 0 0 10px;}
    .follow-by-email-inner .follow-by-email-address {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}
    .follow-by-email-inner form {text-align: center;}
    .follow-by-email-inner td{display: inline-block;width:100%;text-align:center;}
    .follow-by-email-inner .follow-by-email-address:focus {color: #000;border-color: #000;}
    .follow-by-email-inner .follow-by-email-submit {cursor: pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}
    .follow-by-email-submit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}
    .follow-by-email-submit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}
    .w2bFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
    .w2bFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
    .w2bFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2b(".FollowByEmail");followBox.prepend("<a class=\"w2bfollowButton\" href=\"#\"><span>Follow</span></a>");w2b("<p></p>",{class:"w2bFollowFooter",html:"<a href=\"http://feedburner.google.com\" target=\"_blank\">Delivered by FeedBurner</a>"}).appendTo(followBox.find(".follow-by-email-inner"));followBox.find("td:last").removeAttr("width");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".w2bfollowButton").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").animate({bottom:followHeight},{duration:200,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").animate({bottom:"0"},{duration:400,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>

Save the Template!

Using Widget Generator

Click this below Button .
Widget Generator
Must Fill the Feedburner ID.
Ex:-
My Feedbuner URL is http://feeds.feedburner.com/way2blogging
My Feedbuner ID is way2blogging
Customize the Settings as you need.
Add the Widget to Your Blog and Enjoy!

Any Feature Request or Suggestions are welcome. Feel free to share this widget and leave your comments.

وضع إعلانين جوجل أدسنس تحت العنوان

كيفية عمل إعلانين جنبا إلى جنب تحت التدوينة الأولى

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

<b:include data='post' name='postQuickEdit'/>

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

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:post.isFirstPost'>
<span class='FL'>
ضع هنا كود الإعلان الأول بعد تحويله
</span>
<span class='FR'>
ضع هنا كود الإعلان الثاني بعد تحويله
</span>
<div class='spacer'/>

</b:if></b:if>

وأخيرا قم بحفظ القالب

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

<data:post.body/>

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

<b:if cond='data:blog.pageType != "index"'>
<b:if cond='data:post.isFirstPost'>
<span class='FL'>
ضع هنا كود الإعلان الأول بعد تحويله
</span>
<span class='FR'>
ضع هنا كود الإعلان الثاني بعد تحويله
</span>
<div class='spacer'/>
</b:if></b:if>

وأخيرا قم بحفظ القالب

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

bloggerstyl4u