الجمعة، 6 نوفمبر، 2009

هاك و اضافة "اقرأ المزيد" و عرض المصغرات لمدونات بلوجر Blogger

قراءة للموضوع



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

طبعاً هناك العديد و الكثير من المدونين يتساءلون عن طريقة تلقائية لعرض مقتطفات تدويناتهم بشكل تلقائي على الصفحة الرئيسية و تحتها مباشرة رابط "تابع القراءة" أو "اقرأ المزيد" لمتابعة التدوينة كاملة. و لهم نقدم هذه الإضافة المفيدة التي تحسن مظهر المدونة و تجعلها صديقة لمحركات البحث . و تجدر الإشارة أن النسخة المقدمة هنا (و هي نفسها المقدمة في بعض المواقع كـ ـvietwebguide.com ) تمكنك من الحصول على محاذات ميامنة للمصغرات كما هو موضح في الصورة التالية :


(اضغط على الصورة لتكبر بشكل واضح )



--» قبل تحرير القالب يجب حفظ نسخة احتياطية منه لاستعادتها عند الضرورة.

1 - الخطوة الأولى: من باب او قائمة " التخطيط" نختار "تحرير Html" و نوسع القالب عبر وضع علامة صح في المربع الصغير أعلى صندوق التحرير و نبحث عن

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




<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 450;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://sites.google.com/site/simoxisite/Home/read-moreotomatis.js' type='text/javascript'/>


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

<head>



ومباشرة بعدها إي تحتها نضع الكود الموجود أعلاه . ( طبعا هذا للتوضيح يعني إما ( head / ) الثانية او ( head ) الاولى ) في صفحة HTML .

» شرح الألوان:
- الأحمر:  لتعديل طول مقتطف التدوينة التي لا تضم صورا.
- الأزرق : لطول مقتطف التدوينات التي بها صور.
- الأخضر: لتعديل أبعاد المصغرات ( الصور الصغيرة التي تبدو في الرئيسية ).
- البرتقالي: هو رابط ملف الجافاسكريبت يمكن إعادة رفعه و تحرير رابطه.

2 - الخطوة الثانية : نعمل بحث يعني ( Ctrl+F ) عن الكود التالي :
<data:post.body/>


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


<p><b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> تابع القراءة ....</a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>


لجعل الصورة إلى جهة اليسار استبدل right ب left في الكود أعلاه .
و أخيرا احفظ القالب و مبروك عليك اضافة ( اقراء المزيد ) !




أتمني من الله العلي القدير أن الدرس سيفيدكم ويرشدكم عن ضالتكم التي تبحثون عليها ، والى اللقاء في موضوع آخر ،،
استفساراتكم وتعليقاتكم مرحبا بها ،،،

المصدر مدونة ذؤيب

48 التعليقات:

كنوز يقول...

جزاك الله خير جاري تطبيقة /
الله يوفقك ويشرح لك صدرك

كنوز يقول...

.. الحمدلله طلعت معاي ولكن المقصو بـ مقتطف التدوينة التي لا تضم صوراً ( 500 ) هل 500 حرف في التدوينة ؟
أم 500 كلمة ! أم أنها لا تعني حروف التدوينة ؟

ومشكووووووووووووووووووور

كنوز يقول...

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


وجزيت خيراً

خالد محمد (ابوخلود) يقول...

الاخ / كنوز اهلا وسهلا
يعني انا ما فهمت سؤالكم ممكن تعطيني عنوان مدونتك علشان اشوفها كيف صارت بعد التعديل ؟

خالد محمد (ابوخلود) يقول...

اما بخصوص سؤال حول الاشتراك لتفعيل خدمة مجموعة البريدية . ان شاء الله اليوم سوف تجد طريقة شرح الاشتراك في خدمة feedburner في مدونتناهذه بطريقة كاملة وبدون اي صعوبات لكي تقوم بتفعيل الخدمة البريدية ( ليصلك جديد المدونة ) واي سؤال او اي استفسار نحن مستعدين في اي خدمة او اي اضافة ،،
اطيب الامنيات
خالد محمد

كنوز يقول...

http://c0mp0.blogspot.com/ هذا رابط المدونة وهي لم تزل جديدة وليس بها أي مواضيع ^_^

أما بالنسبة للتنسيق فرجع زي ماكان ولا يوجد به مشاكل الآن ،،
المشكلة الآن أنني قمت بتغير الأرقام
summary_noimg = 500;
summary_img = 450;
الـ 500 إلى 60 و 450 إلى 55
وبرضوا الموضوع يطلع كامل في الصفحة الرئيسية واقرأ المزيد تحتها ..

وبالنسبة إلى تفعيل الخدمة أتمنى توافينا بها الله يجزاك خير
لأنها عندي غير مضبوطة ( مضبوطة شكلاً في المدونة وليس إشتراكاً )
وجزاك الله عنا ألف خير

خالد محمد (ابوخلود) يقول...

الاخت / كنوز
طبعا انا فتحت مدونتك وارايت اضافة اقراء المزيد عليها فهي تمام يعني مايظهر الموضوع بشكل كامل في الصفحة الرئيسية . يظهر مقتطف من الموضوع وتحتة اقراء المزيد لكن لو كان الموضوع اصلاً قصير ممكن يظهر بالكامل . واما بالنسبة لي الوسامات فبعضها ظهر بشكل ممتاز والبعض الآخر شوية كبير ومشوش بامكانك التغيير في الارقام التي في الكود الي باللون الاخضر يعني بارتفاع وعرض الصورة اي الوسام ( thumb -hiegh = 100 + thumb width = 120 ) مش التي باللون الاحمر والازرق هولاء خاصة مختصين بطول اسطر الكتابة في حالة عدم وجود صور وطول الاسطر في حالة وجود صور .

كنوز يقول...

تشرفت بزيارتك لمدونتي المتواضعة ^_^
أما بالنسبة بأن الموضوع لم يظهر بالكلمل فهذا غريب ! ولكن الحمدلله ..
أما لا حظت أخي أن تنسيق الموضوع اختلف عما كان عليه؟
أقصد أن اللون والحجم للموضوع في الصفحة الرئيسية تغير عن الموضوع الأصلي
هذه هي المشكلة تغير تنسيق الموضوع في الصفحة الرئيسية ؟ لماذا ؟

خالد محمد (ابوخلود) يقول...

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

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

كنوز يقول...

رعاك المولى ( تقريباً الإشتراك ضبط معاي /
بانتظار درسك لتصحيح إن كان هناك أخطاء أم لا ..

وفقك المولى وزادك علماً وبصيرة

Pride Spirit... يقول...

يعطيك العافية اخوي

بس عندي مشكله..

انه بحثت عن data بس ما لقيت الا title>data:blog

بس مافيه غيره..

هل تتوقع ان هذا من القالب نفسه؟؟

خالد محمد (ابوخلود) يقول...

اخي العزيز pride spirit :
حياك الله
اذا كنت من مستخدمين مدونات بلوجر لازم كود :
data:post .body . بس اقولك حاجة احيانا تنسخ وتلصق في مربع البحث كل الكود فلا يظهر شي عن الكود ولكن حاول مثلا ان تضع كلمة data ثم ابحث سوف يبحث لك عن كل كلمة داتا بس ركز سوف تجد الكود . والكود الذي وضعته انت في التعليق هو كود يختص بالعنوان مو المحتوى .
او انك لم تقم بعمل علامة صح في مربع توسيع قوالب عناصر المستخدم ثم ابحث لتجد الكود كامل كما هو في الشرح

Pride Spirit... يقول...

لا يمكن توزيع القالب الخاص بك لأنه غير منسق بشكل جيد. الرجاء التأكد من إغلاق كافة عناصر XML بشكل صحيح.
رسالة خطأ XML: The element type "a" must be terminated by the matching end-tag "".

طلعت لي هذي الرسالة؟!!

مع اني طبقت الموضوع بالضبط...كيف الحل ؟

abdelrahman ayman يقول...

لقد طبقت الموضوع بالضبط ولكن ظهرت هذه الرساله
لا يمكن توزيع القالب الخاص بك لأنه غير منسق بشكل جيد. الرجاء التأكد من إغلاق كافة عناصر XML بشكل صحيح.
رسالة خطأ XML: The element type "a" must be terminated by the matching end-tag "".

خالد محمد (ابوخلود) يقول...

الاخوة / Pride spirit + abdelrahman ayman
شكرا لكم على تنبيهي للخطاء الذي حصل في الكود الثاني ولولاكم لتم الخطاء على ما هو عليه ، ولكن الان تم تصحيح الخطاء في الكود الثاني وجربته انا في مدونة اخرى خاصة للتجربة .
الان اتبعوا الخطوات كل شي على مايرام ومبرووك عليكم الاضافة ،،،،

abdelrahman ayman يقول...

انا مش عارف ازاى اعبر لك عن شكرى الحمد لله الطريقه نفعت والكود اشتغل اتمنى ان تقوم بعمل تبادل روابط معى
عنوان مدونتى
http://el3bor.blogspot.com/

abdelrahman ayman يقول...

اشكرك مره اخرى على زياره مدونتى المتواضعه اتمنى ان نصبح اصدقاء

مي عباس يقول...

شكرا لك على هذا الموضوع القيم..

ولكنني اتبعت الخطوات وبالفعل ظهرت عبارة "تابع القراءة" ولكن المقال كامل .. وكنت أريد أن تكون مقدمة فقط ثم تابع القراءة

yehya يقول...

شرح روعه اخى
http://earns-blog.blogspot.com/

Forex, Forex trading, Forex market,Best and New Paid to Click Sites PTC, Earn from SMS, Pictures/Photo, Survey, Social Networking, Opening Emails, Sign up, referrals and many,download,Forex ,Books for ,Beginners,Forex ,Into Arabic,جارة العملات في الفوركس,Forex FAQ,Forex Market Books,HOW TO EARN, THROUGH BLOGS,gmaes,Forex Blog new forex news,Forex Blog | Forex | Forex News | Forex Updates | Forex


http://earns-blog.blogspot.com/

Tears يقول...

عندى نفس مشكلة مى

مدير الموقع يقول...

مشكور

kumonah يقول...

جزاك الله خيرا يا أخي الكريم
لكن عندي الموضوع يطلع كامل
وأنا أريد كم سطر بس اللي يطلع
فماذا أفعل؟
http://kumonah.blogspot.com/
وشكرا

( الـراااقـي ) يقول...

تعذر علينا حفظ القالب
يرجى تصحيح الخطأ التالي، ثم إرسال القالب مرةً أخرى.
لا يمكن توزيع القالب الخاص بك لأنه غير منسق بشكل جيد. الرجاء التأكد من إغلاق كافة عناصر XML بشكل صحيح.
رسالة خطأ XML: The markup in the document preceding the root element must be well-formed

Technology Monitor يقول...

تمت بالفعل
جزاك الله خيرا

العربى يقول...

تمت بالفعل
جزاك الله خيرا

نبـرآس .. يقول...

جزيت خيراً أخي !
لكن الخطوة الثانية سويت بحث وماطلع لي الكود !!

ممكن مساعدة ؟
ممتنة مقدماً ~

MOUFLIH Hasna يقول...

السلام عليكم و رحمة الله و بركاته
لدي نفس مشكلة "كمونة"
وشكرا

ĄZ◊◊Z يقول...

شكراً

نتشرف بزيارتكم لناعبر الرابط:

http://Alselver.blogspot.com

hadj ahmed khaled يقول...

السلام عليكم
مشكور أخي الكريم ، لقد نجحت معي 100000% .

mooon يقول...

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

http://mazikamoon.blogspot.com/

جودى الاروبه يقول...

شكرا لك كثير والموضوع ظبت معى لكن الصفحات(اقصد الصفحات التى فى مقدمة المدونه بجوار الصفحه الرئيسيه مثل (ديكور فيديو وافكار للترتيب) عندما اضغط اقرا المذيد لايفتح ولكن مواضيع المدونه بتفتح عادى مدونتى هى
http://kgjody.blogspot.com/

غير معرف يقول...

http://www.102advanced.blogspot.com

jood يقول...

ثاااانكس جدا ع التوووضيح

الله يسعدك يارب

والله كنت ماني عارفه شسوي

عنفوووان انثى .. يقول...

الله يجزاااك الجنه ويبارك بعمرك وفرحك يارب

TONNT يقول...

THANKS

http://articles-easy.blogspot.com

Mâyâ - Dlόόl يقول...

لم اجد الكود الثاني بقالبي .. مالذي افعله ؟

staronline يقول...

روعة الشرح وطبقته فى مدونتى
www.kessaswaebar.blogspot.com

محمد طارق يقول...

راااااااااائع

noor يقول...

شكرا على الدرس
الخطوة الاولى تمت لكن الخطوة الثانية لم تتم لم اجد الكود الثاني data:post body هل هذا الكود موجود في كل القوالب ؟
او هل يمكن له غير تسمية او عرض بغير طريقة؟

yasser يقول...

مدونتي علي بلوجر

مدونة حول العالم

http://hawelelalam100.blogspot.com/

الذوق الرفيع يقول...

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

mohssine يقول...

السلام عليكم أنا عندي مشكلة واحدة لم أجد لها حل هي أن لون المقتطف بالأسود و الخلفية المدوتنة كذلك بالأسود و أريد تغيير لون المقتطف إذا أمكن ذلك

أسامة مصطفى يقول...

شكراااااااااا على مجهوداتك
http://dar-osama.blogspot.com/

Bnt Jaber Blog يقول...

اشكرك على الشرح لكن هذه الطريقة صعبة فانا لا افهمها هل هناك طريقة اسهل لوضع الهاك باستخدام ( اضافة اداة) ثم اختيار ( HTML/JavaScript) من القائمة وشكرا

خالد محمد (ابوخلود) يقول...

فيه طريقة اخرى بسيطة جدا من خلال صندوق تحرير الرسائل اي في الشريط تنسيق صندوق تحرير الرسائل اسمها ( ادراج رابط انتقال ) بجوار خاصية تحميل ( ادراج فيديو ) من جهة اليسار مباشرة .كيفية عملها هي ان تكتب المقال كامل ثم تحدد بمؤشر الماوس مكان تريد اضافة خاصية ( اقراء المزيد ) ثم تنقر على هذه الخاصية ( ادراج رابط انتقال ) فتتفعل مباشرة معك اي يظهر سطر على شكل ( ............ ) وفي كل مرة تكتب مقال تعمل نفس العملية .

Bnt Jaber Blog يقول...

راائع جدا شكرا لك على شرح الطريقة الثانية :)

mixsato يقول...

مكساتو اسلاميات ابحاث برامج العاب افلام اخبار محمول كمبيوتر انترنت
http://mixsato.blogspot.com/
http://mixsato.blogspot.com/
http://mixsato.blogspot.com/
http://mixsato.blogspot.com/

ro0ody يقول...

أخي في الله
ممكن تحط فديو تشرح كيف لاني مافهمت
مع اني حاولت
وجزاك الله خير