‏إظهار الرسائل ذات التسميات اضافات. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات اضافات. إظهار كافة الرسائل

الأربعاء، 22 فيفري 2012

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



 كيفية وضع إعلانات أدسنس داخل محتوى المدونة :

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

انسخ الكود بعد التحويل ،ثم اذهب إلى لوحة تحكم بلوجر ثم قالب ثم تحرير HTML ،ثم ضع علامة على توسيع القالب .
ابحث عن الكود التالي بإستخدام (ctrl+f)
<data:post.body/> 

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

ملحوظة هامة جداً :


 أحياناً يكون هناك أكثر من كود بنفس الوسم التالي
 <data:post.body/>  

ومن خلال خبرتي في قوالب بلوجر قد يظهر من 2-4 مرات أو أزيد فماذا تفعل ؟! ،اختار الكود الثاني ثم ضع كود أدسنس قبله مباشرةَ .

وضع إعلانات أدسنس في آخر كل موضوع 
                                                     
نفس الخطوات السابقة من إنشاء وحدة إعلانية جديدة ،وتحويل كود إعلانات أدسنس بإستخدام أداة محول أكواد أدسنس ،ثم ضع الكود أدسنس المحول بعد الكود التالي مباشرةً .
<data:post.body/> 
وليس قبله .

وضع إعلانات أدسنس في وسط كل موضوع 
                                                 
نفعل مثلماً فعلنا سابقاً  ولكن حدد كود
<data:post.body/> 
في قالبك ثم ضع بدل منه الكود التالي :

<div expr:id='"aim1" + data:post.id'></div>
<div style="clear:both; margin:10px 0">
<!-- AdSense Parsed code -->
</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>



ملحوظة هامة :

قم بإستبدال AdSense Parsed code بكود أدسنس المحول
ثم بعد كتابة أي موضوع جديد وتريد وضع إعلان أدسنس في أي مكان في الموضوع ،فقط ضع الكود التالي في المكان الذي تريد ظهور إعلانات جوجل به

هذا الكود السابق ليس كود HTML ولكنه عبارة عن أمر مباشر للقالب لوضع إعلان أدسنس في هذا المكان ،ويكون وضع هذا الكود في محرر HTML للرسالة .

محول أكواد أدسنس



الآن يمكنك وضع إعلانات أدسنس في أي مكان تريده في مدونتك ،حيث مع هذه الأداة الرائعة يمكنك القيام بالتالي :
1- وضع إعلانات أدسنس في أول الموضوع
2- وضع إعلانات أدسنس منتصف الموضوع
3- وضع إعلانات أدسنس في آخر الموضوع

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

طريقة تحويل أكواد أدسنس بأداة Blogger Code Converter :

1- انسخ كود الإعلان الذي حصلت عليه من أدسنس ثم قم بلصقه في الصندوق الذي بالأسفل .
ملحوظة :عليك مسح أولاً الكلام الموجود في الصندوق .
2- انقر على زر "convert" ،وبعد ذلك سيظهر لك الكود بصيغة xml
3- الآن بإمكانك نسخ الكود ووضعه في أي مكان تريده في مدونتك .
لمزيد من التفاصيل حول وضع الإعلانات في داخل المواضيع اذهب إلى هذا الموضوع .











مدونات بلوجر





احصل على كوبون Google AdWords بقيمة75$ مجاناً


الآن يمكنك إشهار موقعك عن طريق Google AdWords واحصل على آلاف الزوار .

Google AdWords :
طبعاً هو أقوى برنامج إعلاني للمنتجات على الإنترنت لأنه مقدم من شركة جوجل .
خطوات الحصول على الكوبون :




ثم قم بالتسجيل :


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

الثلاثاء، 21 فيفري 2012

شرح إضافة ترقيم الصفحات لمدونات بلوجر


شرح إضافة ترقيم الصفحات لمدونات بلوجر



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

 * لا تنسى أخذ نسخة احتياطية من قالب .
* قم بالدخول الى لوحة التحكم ثم تحرير ال html ثم قم بتوسيع القالب .
* قم بالبحث عن هذا الكود


]]></b:skin>

* ثم أضف قبله هذا الكود

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
}

.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}
 يمكنك تخصيص شكل الكود السابق بما يناسب لون مدونتك كما يلي :
أكواد ال CSS



شكل الإضافة على الطبيعة :



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

</body>
* ثم قم بإضافة هذا الكود قبل الكود السابق مباشر

&lt;script type='text/javascript'&gt;
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
&lt;/script&gt;
&lt;script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'&gt;&lt;/script&gt;

ثم اضغط حفظ . ثم قم مشاهدة القالب .

شرح تمييز تعليق الكاتب عن بقية التعليقات في مدونات بلوجر

شرح تمييز تعليق الكاتب عن بقية التعليقات في مدونات بلوجر


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

]]></b:skin>

* ثم أضف قبله أو فوقه هذا الكود :


/***** Author Box ********************/

.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}

.author-box p {
margin: 0;
padding: 0;
}

.author-box img {
background: #FFFFFF;
float: right;
margin: 0 0 10px 10px;padding: 4px;
border: 1px solid #E6E6E6;
}

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

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

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

<b:if cond='data:comment.adminClass == data:post.adminClass'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
الآن قم بحفظ القالب..

السبت، 18 فيفري 2012

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


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

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


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

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



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


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

من لوح تحكم مدونتك توجه إلى صفحة "التصميم"  ثم "تحرير HTML" و قبل أي تعديل رجاء احفظ نسخة احتياطية من قالب مدونتك على جهازك ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
ابحث عن
 <html
 ثم بعده مباشرة أضف الكود الآتي :
xmlns:fb='http://www.facebook.com/2008/fbml' 

الآن ابحث عن <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 
في الكود السابق.

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



الجمعة، 17 فيفري 2012

إضافة 3 أعمدة في الفوتر لمدونات بلوجر Blogger

 إضافة 3 أعمدة في الفوتر لمدونات بلوجر Blogger




 ادخل الى لوحة تحكم مدونتك ثم الى التصميم ثم تحرير ال html ثم قم بتوسيع القالب .

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

</body>

ثم أضف هذا الكود بعده مباشرة
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
ثم ابحث عن

 ]]></b:skin>

 ثم أضف هذا الكود قبل الكود السابق مباشرة


/* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#dde9f3;
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;

}

#lowerbar-wrapper {
     border:1px solid #DEDEDE;
       background:#fff;
       float: right;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word; 
       overflow: hidden;
}

       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}

.lowerbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: right;
       color:#0084ce;
        text-transform:uppercase;
      font: bold 13px Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}

.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}

ثم بعد ذلك قم بحفظ القالب وادخل الى عناصر الصفحة ..

إضافة الزر 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+ كذلك على الصفحة الرئيسية ما عليك سوى حذف السطر الأول والأخير من الكود السابق



الخميس، 16 فيفري 2012

استبدال عبارة "قراءة المزيد" بصورة أكثر تعبيرا في مدونتك


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

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



لفعل ذلك اتبع التالي:
1- قم برفع الصورة (التي تريد وضعها) إلى أي موقع من مواقع الرفع.

2 - ادخل الى مدونتك عن طريق الرابط التالي:
http://blogger.com

3- اضغط على رابط "تصميم" أو "design" بجانب مدونتك
4- ستفتح لك صفحة التصميم ، اضغط على "تحرير html"
5- ابسط اكواد القالب عن طريق وضع علامة صح في المربع "توسيع عناصر قوالب واجهة المستخدم" كما بالصورة:



6- الان ابحث عن الجزء التالي (اضغط crtl+F للبحث) :
<data:post.jumpText/>
واستبدله بالكود التالي:
<img alt='اقرأ المزيد' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWkKjBTdh_Feu8XCuHS7IDOajASzJoaM7VIt4tAHJIX-FMHkiuMcB877_2sK9bix9BDOUufD2TKiuaCFtfPI8hcsy7Yhmc_x70SdQN87sVpGxq3yW7PnFxiIQ7llYDX8G0hpcNfVvlue4/s1600/read+more.png' style='border:0px;'/>
وقم بتغيير الجزء الملون من الكود برابط الصورة التي تريدها
7- اعمل "حفظ القالب"

Twitter Delicious Facebook Digg Stumbleupon Favorites More