‏إظهار الرسائل ذات التسميات دروس بلوجر. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات دروس بلوجر. إظهار كافة الرسائل

السبت، 19 يونيو 2010

الإضافة الرسمية من بلوجر .. بلوجر تضيف خاصية "Share Me " شارك التدوينة

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












وتضع علامة صح بجوار " Show Share Buttons "
وتستطيع تحريك مكان الزر وذلك بوضعه أعلى أو أسفل كما بالصورة















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


<div class='post-footer'>

أو

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

أو

<div class='post-footer-line post-footer-line-2'>

أو

<div class='post-footer-line post-footer-line-3'>

أو

<data:post.body/>
ثم أضف بعده " أسفله " مباشرة هذا الكود
 <div style='clear: both;'/>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
7. وإذا أردت إظهار الزر بعد عنوان الرسالة ابحث عن هذا الكود
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
ثم أضف  هذا الكود بعده مباشرة
<div style='clear: both;'/>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
8. احفظ القالب  .. تم بحمد الله .. أخوكم باسم ..

الاثنين، 14 يونيو 2010

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

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

1. ادخل الى لوحة التحكم ثم التصميم ثم تحرير ال HTML وقم بتوسيع القالب .
2. لا تنسى بأخذ نسخة احتياطية من القالب الخاص بك .
3. ابحث عن هذا الكود </head>
ثم أضف قبله " فوقه " مباشرة هذا الكود
<style type='text/css'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {color:#333333;}

.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}

</b:if>

</style>

والآن قم بحفظ القالب ..
تم بحمد الله .. أخوكم : باسم

الخميس، 10 يونيو 2010

إضافة " إقرأ المزيد " مع المصغرات للبلوجر مع مجموعة رائعة لصور " إقرأ المزيد "

إضافة " إقرأ المزيد " مع المصغرات  للبلوجر مع مجموعة رائعة لصور " إقرأ المزيد " . زواري الكرام ما وضعت هذا الموضوع لكي أوضح هذه الخاصية لان كثيرا منا يعرف الطريقة وقد شرحها الكثير والكثير من أساتذتنا في علم البلوجر ومنهم الأستاذ ذؤيب . الذي تعلمت منه الكثير والكثير . ولكني وضعت الموضوع لكي أسرد لكم بعض أشكال كلمة إقرأ المزيد " Read More " .
مبدئيا لمن لم يضف خاصية إقرأ المزيد عنده لابد من إضافتها باتباع الآتي
1. الدخول الى لوحة التحكم ثم الى التخطيط ثم الى تحرير ال HTML ثم قم بتوسيع القالب .
2. لا تنسى أخذ نسخة أحتياطية من القالب أولا .
3. أبحث عن كلمة </head> ثم أضف هذا الكود قبلها " فوقها " مباشرة .
<script type='text/javascript'>var thumbnail_mode = "no-float" ;

summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
ثم بعد ذلك ابحث عن <data:post.body/> وقم باستبدالها بهذا الكود
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'><img src='http://i37.tinypic.com/351icqx.jpg'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
 وقم بتغيير http://i37.tinypic.com/351icqx.jpg برابط الصورة التي تختارها أنت
واليك مجموعة من روابط الصور وبجوارها شكل الصور .. كل ما عليك هو تغيير رابط الصورة ووضعه مكان رابط الصورة السابق باللون الأحمر 
http://i643.photobucket.com/albums/uu153/nirav07/black-1.gif
http://i643.photobucket.com/albums/uu153/nirav07/black.png
http://i643.photobucket.com/albums/uu153/nirav07/black1.gif
http://i643.photobucket.com/albums/uu153/nirav07/blue-dark.gif
http://i643.photobucket.com/albums/uu153/nirav07/blue-1.gif
http://i643.photobucket.com/albums/uu153/nirav07/blue.png
http://i643.photobucket.com/albums/uu153/nirav07/blue1.gif
http://i643.photobucket.com/albums/uu153/nirav07/bluish.png
http://i643.photobucket.com/albums/uu153/nirav07/brown.gif
http://i643.photobucket.com/albums/uu153/nirav07/dark-bluish.png
http://i643.photobucket.com/albums/uu153/nirav07/dark-grey.gif
http://i643.photobucket.com/albums/uu153/nirav07/dark-orange.gif
http://i643.photobucket.com/albums/uu153/nirav07/dark-purple.gif
http://i643.photobucket.com/albums/uu153/nirav07/green.png
http://i643.photobucket.com/albums/uu153/nirav07/green1.gif
http://i643.photobucket.com/albums/uu153/nirav07/greenish.png
http://i643.photobucket.com/albums/uu153/nirav07/grey-1.gif
http://i643.photobucket.com/albums/uu153/nirav07/grey.png
http://i643.photobucket.com/albums/uu153/nirav07/grey1.gif
http://i643.photobucket.com/albums/uu153/nirav07/light-blue.png
http://i643.photobucket.com/albums/uu153/nirav07/light-orange.gif
http://i643.photobucket.com/albums/uu153/nirav07/orange.png
http://i643.photobucket.com/albums/uu153/nirav07/original.gif
http://i643.photobucket.com/albums/uu153/nirav07/pink.png
http://i643.photobucket.com/albums/uu153/nirav07/purple-1.gif
http://i643.photobucket.com/albums/uu153/nirav07/purple.png
http://i643.photobucket.com/albums/uu153/nirav07/purple1.gif
http://i643.photobucket.com/albums/uu153/nirav07/red-dark.gif
http://i643.photobucket.com/albums/uu153/nirav07/red-1.gif
http://i643.photobucket.com/albums/uu153/nirav07/red.png
http://i643.photobucket.com/albums/uu153/nirav07/red1.gif
واليك مجموعة من صور إقرأ المزيد في ملف مضغوط . كل ما عليك هو رفع الصورة ووضعه مكان رابط الصورة السابق باللون الأحمر .
حمل من هنا
http://www.box.net/shared/ug0kgvd0uq

تم بحمد الله .. أخوكم باسم

الأربعاء، 19 مايو 2010

خطوات اشهار المدونات

خطوات مهمة وسهلة لاشهار مدونة بلوجر : هذا هو الدرس الاول في سلسل سنبدا بها لاشهار مدونة بلوجر على وجه الخصوص وفيها ايضا شرح للتعامل مع كل اقسام الاعدادات في مدونة بلوجر .
اذهب الى اعدادات ثم الاساسي :
1ــ اسم النموذج (title): قم باختيار عنوان قصير ومعبر عن محتوى المدونة .

2ــ الوصف(description ): : وهي العبارة التي توجز محتويات مدونة بلوجر. احرص على كتابة عبارة مفيدة وتحتوي على الكلمات المفتاحية لمدونتك .
3 ــ هل تريد اضافة مدونتك الالكترونية الى قوائمنا (add your blog to our listings): : طبعا الاجابة يجب ان تكون نعم .
4ــ هل تريد السماح لمحركات البحث بالعثور على مدونتك (Let search engines find your blog): : الجواب ايضا نعم .
5 ــ اظهار" تحرير سريع" على مدونتك الالكترونية( Show Quich editing on your blog ): : اختر الجواب لا , فلا احد يستعمل هذا الخيار .
6ــ اظهار روابط ارسال رسالة الكترونية (show Email post links): : اختر الجواب لا .
7ــ محتوى البالغين (Adult content): : اعتقد انك تعلم الجواب مسبقا وهو بالتاكيد لا .

خيارات التنسيق :
1ــ الحد الاقصى لما سيتم عرضة (show at most) : حدد عدد الرسائل التي تود ظهورها في الصفحة الرئيسية لمدونة بلوجر .طبعا يمكنك استخدام خاصية اقرا المزيد لاظهار المقالات بشكل غير مزعج للزوار .. 5 مقالات في الصفحة هو عدد ملائم من وجهة نظري
2ــ تنسيق راس الصفحة اضافة الى تنسيق فهرس الارشيف(Date header formate): : اختر نموذجا بسيطا وقصيرا مثل 25.4.2010

3ــ اللغة(language): اذا كانت مدونتك باللغة العربية فيجب ان تعدل هذا الخيار الى اللغة العربية لان هذا سيؤثر على طريقة ظهور الكتابة من اليمين الى اليسار

4ــ اظهار حقول الروابط(show link field): اختر الجواب نعم .


خيارات التعليقات :

1ــ تعليقات (comments) : اختر اظهار لعرض تعليقات الزوار فهذا مهم لجذب الزوار وتفاعلهم مع مواضيعك .

2ــ من يمكنه التعليق (who can comment ) : يفضل اختيار اي شخص . لكن هذا الخيار بالطبع عائد اليك .

3ــ موضع نموذج التعليق(comment form placement): اختر تم تضمين الرسالة ادناه : اي ان صندوق التعليقات سيظهر اسفل كل رسالة في المدونة وهذا بالطبع افضل لان كثير كم الزوار لا يرغب بالانتقال لصفحة اخرى لكتابة تعليق او لمجرد قراءة تعليقات الاخرين .

4ــ روابط واردة(backlinks ): وهو يعني اظهار روابط الباك لينك العائدة لهذا المقال : اختر الجواب لا فلاحاجة لمشاركة الاخرين بمعلومات عن ترتيب صفحاتك في محركات البحث وعدد الروابط العائدة اليها وما شابه .

5ــ بريد اللكتروني للتنبيه الى تعليق ما (comment notification Email): : اكتب في الصندوق بريدك الالكتروني الذي تود ان يصلك عليه اخطار باضافة تعليق جديد . يمكنك كتابة اكثر من بريد الكتروني .


خيارات الارشفة :

1ــ تكرار الارشفة(Archive frequency) : اختر اسبوعيا حتى يكون عدد المقالات التي ستظهر في صفحتك مقبولا .

2ــ هل تريد تمكين صفحات الرسائل (Enable post page): اختر نعم حتى يتم عرض كل موضوع في صفحة منفصلة وبالتالي يطلع الزوار على عدد اكبرمن الاعلانات الموجودة .




السبت، 15 مايو 2010

شرح وضع فيديو لليوتيوب داخل المواضيع للبلوجر

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


     
                                                                                                  اضغط على الصورة لتكبيرها

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


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

الجمعة، 14 مايو 2010

شرح إخفاء الشريط العلوي navbar في مدونات بلوجر

إخفاء الشريط العلوي navbar في مدونات بلوجر

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

ادخل إلى حسابك على بلوجر .
اضغط في لوحة التحكم على "تخطيط" ثم على "تحرير html”.
انسخ الكود التالي مباشرة فوق الوسم body> والكود هو :


#b-navbar { height:0px; visibility:hidden }
body { position: relative; top: -32px; }
body.sidebar-right #center {
margin-right: -210px;




قم بحفظ التغييرات وسترى أن الشريط العلوي قد اختفى من مدونتك.

الثلاثاء، 11 مايو 2010

ضع إعلانات أدسنس بأسهل الطرق في مدونتك

الان وبكل بساطة يمكنك إضافة اعلانات Google AdSense من لوحة التحكم الخاصة في blogger وكذلك التحكم في اشكال وإحجام وأنواع الاعلان وكذلك التحكم في الوان الخلفية والنص وكل التفاصيل الصغيره منها والكبيرة .
نذهب الي لوحة التحكم الرئيسية بعدها الي إضافة اداه وبعدها AdSense

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

حول قائمة أقسام المدونة الى قائمة منسدلة

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

ثم تحرير HTML وهناك اول شيء عليك فعله حفظ نسخة من قالب مدونتك للاحتياط
ثم بعد حفظ القالب الاحتياطي كل اضغط او ضع علام صح على وثم ابحث عن الكود التالي:
<b:loop values='data:labels' var='label'>
هذا الكود هو جزء من الكود التالي:


<ul>

<b:loop values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url == data:label.url'>

<data:label.name/>

<b:else/>

<a expr:href='data:label.url'><data:label.name/></a>

</b:if>

(<data:label.count/>)

</li>

</b:loop>

</ul>


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


<br />



<select onchange='location=this.options[this.selectedIndex].value;'>

<option>Select a label</option>

<b:loop values='data:labels' var='label'>

<option expr:value='data:label.url'><data:label.name/>

(<data:label.count/>)

</option>

</b:loop>

</select>


هكذا مبروك عليك الاضافة الجديدة ولاكن قبل حفظ القالب عليك المعاينة اذا كان تفعلت هذه الاضافة اضغط حفظ القالب