انشاء بوستات متمددة

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

الخطوات :

1- خذ نسخة احتياطية من القالب تحسبا لاى ظروف download full template واحفظها على الهارد .

2- اذهب الى صندوق الاكواد dashboard > template > layout > editHtml ثم اضغط على المربع Expand Widget Templates الموجود مباشرة فوق صندوق الاكواد لكى تتمدد وتراها بالشكل الحقيقى .

3- ابحث عن </head> , ثم اضف قطعة الاكواد التالية "جافا سكريبت" فى السطر السابق لها
كود الجافا سكريبت من هـــــنــــا

4- ابحث فى القالب عن includable id='post' , ثم احدث التغيرات الموجوده فى هذه الصفحة الملونة باللون الاحمر . او قم بنسخ القطعة كاملة ولصقها فى المكان الملائم بالتحديد وبدقة , تعامل بحذر .
ملحوظة : فى هذا الملف ستجد جملتى Summary only... و Read More... يمكنك ان تبدلها بالرموز التى تناسبك , انا ابدلتهم بـ ( اخفاء ) و ( اقرأ المزيد ) .

5- اذهب الى خيارات المدونة setting ثم formatting "تهيئة" , ستجد صندوق نصى بعنوان "Post template" ( او مايقابله باللغة العربية لو كانت مدونتك معربة ) , انسخ فيه تلك القطعة الملونة باللون الاحمر كاااملة , ثم احفظ .

هنا بداية البوست
<span id="fullpost">
هنا بقية البوست
</span>

6- الان عند انشاء بوست جديد انتقل الى وضع الـ editHtml , ستجده بهذا الشكل

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

اكتب انت بداية البوست فى المكان المحدد , وبقية البوست المختفى فى المكان المحدد ايضا .

7- اخبرنى بالنتيجة (:

8- ملحوظة مهمة جدا : يجب ان تعرف ان كود span يستخدم فى التحكم بلون وحجم الخط عند استعمالك لوضع compose , وحيث ان هذا الكود يحتاج الى غلق بهذا الشكل /span فستجد ان اكواد الغلق الخاصة بالخط ستتعارض مع كود " التمدد " الذى اضفناه فى الخطوة رقم 5 , لذلك يجب عليك ان تتعامل مع الوضع editHtml بحرفية اكثر , بحيث تكون اقسام البوست divisions داخل كودى span و /span . بهذا الشكل .


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

© © © © ©

اكتب ايميلك هنا

اسئلة الضيوف

هذه التدوينة مخصصة للاسئلة بخصوص البلوجرز , او حول الـ css او الـ html او الـ xml , او اى اسئله اخرى ليس لها علاقة باى موضوع من المواضيع المشروحة , ضع سؤالك فى التعليقات على هذه التدوينة , وسيتم الاجابة عليه فى اقرب فرصة مدعومة بالصور لو لزم الامر . اما اذا كان استفسارك يخص اى موضوع مشروح بالفعل , فرجاءا ترك السؤال فى تعليق فى الموضوع المحدد , ورجاء اخر استخدم لينك خاص بك اثناء التعليق , سواء ايميل او مدونة او موقع لسهولة الاتصال , وابتعد عن " غير معرف " او مجرد اسم بلا عنوان ,ورجاء اخير الاعلام بالنتيجة بعد كل اجابة , وشكرا لتعاون الجميع .

سيتم ادراج كل الاسئلة واجاباتها هنا فى البوست للمزيد من التسهيل والايضاح ولكى يستفيد منها الجميع .

__________________________________

At 01 أبريل, 2008 05:04 م ابو بدر said...


اخي العزيز وائل
السلام عليكم
لدي إستفسار ارجو ان تجيبني عليه وهو أن مدونتي تظهر عليها علامة التعديل التي على شكل مفتاح برغي سواء تم الدخول عليها عن طريق المعرف الخاص بي أو حتى بدون المعرف بمعني لو انك انت الآن دخلت عليها سوف ترى هذه العلامة وقد وضحتها لك بالصور في الرابط المرفق ..
ماأفعل لأجعل هذه العلامة لا تظهر لكل الزوار والمشاهدين يبدو انني عملت حاجة غلط فضلا إذا كنت تعرف الحل فلا تبخل علي..
أخوك أبو بدر
وهذا رابط الصورة..
http://almasken.googlepages.com/jpg


________________


ابو بدر :
وعليكم السلام ورحمة الله

بسيطة ,هاتدخل لصفحة عناصر المدونة
متبعا هذا المسار او ما يقابله باللغة العربية لو كانت مدونتك معربة


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

. واحفظ


على فكرة ده " قلم رصاص " مش " مفتاح برغى " بالمناسبة (:

__________________


At 01 أبريل, 2008 05:16 م المدير العام said...

الأخ وائل..
السلام عليكم و رحمة الله و بركاته..
لا اخفي عنك انني وصلت عن طريق الصدفة الى مدونتك الاكثر من رائعة عن طريق عمليات البحث على جوجل.. و تعلمت كثيرا من مدونتك الى ان اتممت بناء مدونتي engineer-it.blogspot.com حتى ان وصلت للشكل الذي هي عليه الآن.
سؤالي لك لو سمحت :
اريد ان افصل بين التدوينات بصورة تتكرر بين كل تدوينة و اخرى اسوة بهذه المدونة keesfeshar.blogspot.com و ذلك باستخدام القالب العادي الذي استخدمه في مدونتي الآن بدون اضافة قالب جديد فما هو الحل برايك؟؟
كما انني اود ان اضيف فواصل بين الويدجيت الموجودة في السايد بار فهل من طريقة لذلك.؟؟
كما ارجو اخيرا أن تعلمني برايك الشخصي بمدونتي للاستفادة من خبرتك في هذا المجال و كيف السبيل الى زيادة عدد زوار المدونة فأنا اعاني شحا ً في الترافيك.. و لك جزيل الشكر و الامتنان

________________



المدير العام :

وعليكم السلام ورحمة الله وبركاته (:

الفصل بين التدوينات :

فى صندوق الاكواد الخاص بك

ابحث عن القطعة التى تحتوى على اكواد " التدوينة " واسمها

.post {

من ضمن الاوسمة التى توجد بتلك القطعة وسم البوردر " border " بهذا الشكل

border-bottom: 3px solid #f7e8d8;

طبعا كل القيم اللى موجوده هنا كمثال فقط , يمكنك تغييرها , والوسم ده هايقوم بانشاء " خط " سمكه 3 بيكسل بين كل تدوينة والاخرى , ممكن تستعمل صورة بيدل " الخط " لو عايز . بس الكود هايتغير وهايبقا بالشكل ده :

border-bottom: url(لينك الصورة هنا);

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

.post {

اما اذا كانت القطعة كلها مش موجوده
اعملها بنفسك

.post {
padding: 0;
border-bottom: 3px solid #f7e8d8;
}

________________


اما مسالة الفواصل بين الويدجات فالاسهل تعمل " خط " اسفل اكواد كل ويدجيت على حده , ادخل اى ودجيت واعمله " تحرير " مثلا , وانزل تحت اكتب :

<br> ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ <br>

هاتلاقيه عمل خط

________________


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



اتمنى اكون افتدتك :)

---------------------

At 14 أبريل, 2008 04:23 م أحمد علي said...

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


------------------

أحمد على :

بخصوص الترجمة الى لغات اخرى غير الانجليزية :
يمكنك استعمال الكود التالى :

<form action="http://www.google.com/translate" >

<script language="JavaScript">
<!--
document.write ("<input name=u value="+location.href+" type=hidden>")
// -->
</script>

<input name="hl" value="en" type="hidden">

<input name="ie" value="UTF8" type="hidden">

<input name="langpair" value="" type="hidden">

<input name="langpair" value="enfr" title="French" src= "http://photos1.blogger.com/img/43/1633/320/13539949_e76af75976.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair" value="ende" title="German" src= "http://photos1.blogger.com/img/43/1633/320/13539933_041ca1eda2.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair" value="enit" title="Italian" src= "http://photos1.blogger.com/img/43/1633/320/13539953_0384ccecf9.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair" value="enpt" title="Portuguese" src= "http://photos1.blogger.com/img/43/1633/320/13539966_0d09b410b5.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair" value="enes" title="Spanish" src= "http://photos1.blogger.com/img/43/1633/320/13539946_2fabed0dbf.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair" value="enja" title="Japanese" src= "http://photos1.blogger.com/img/43/1633/320/13539955_925e6683c8.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair" value="enko" title="Korean" src= "http://photos1.blogger.com/img/43/1633/320/13539958_3c3b482c95.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair" value="enzh-CN" title="Chinese Simplified" src= "http://photos1.blogger.com/img/43/1633/320/14324441_5ca5ce3423.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">

<input name="langpair2" value="enar" title="Arabic" src= "http://photos1.blogger.com/blogger/3709/485/1600/arabic-flag.gif" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30" />
</form>

هاتنشأ اداه من النوع Html/Java script وتنسخ فيها الكود وتحفظ .

او بطريقة اسهل انك تدخل الصفحة دى هــــنـــا , وتنشأ قطعة جاهزة من جوجل فى مدونتك بانك تدوس على زرار Get widget .

اكتب ايميلك هنا

انشاء قائمة روابط منزلقة

كيفية انشاء قائمة روابط منزلقة :

سهلة جدا , اذهب واصنع اداه add a page element من صفحة عناصر مدونتك , واختار html/java script " هتمل جافا سكريبت " ثم انسخ فيها هذا الكود بعد ان تخصصه حسب احتياجك وحسب الروابط الخاصة بك

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

<form>
<select onChange="location=this.options[this.selectedIndex].value;">
<option value="http://www.msn.com/">MSN.com</option>
<option value="http://www.google.com/">google.com</option>
</select>
</form>

او هذا الكود اذا اردت ان تفتح الروابط فى نافذه جديده :

<form>
<select onChange="PopUpName=window.open('','PopUpName');PopUpName.location=this.options[this.selectedIndex].value;">
<option value="http://www.msn.com/">MSN.com</option>
<option value="http://www.google.com/">google.com</option>
</select>
</form>


مثال للشكل الاول :

MSN.com google.com

------------------------

الشكل الثانى : الروابط ستفتح عند الضغط على زرار " اذهب " فى نفس النافذة , كما فى المثال

<form>
<select name="menu">
<option value="http://www.msn.com/">MSN.com</option>
<option value="http://www.google.com/">google.com</option>
</select>
<input type="button" onClick="location=this.form.menu.options[this.form.menu.selectedIndex].value;" value="GO">
</form>

او هذا الكود اذا اردت ان تفتح الروابط فى نافذة جديده :

<form>
<select name="menu">
<option value="http://www.msn.com/">MSN.com</option>
<option value="http://www.google.com/">google.com</option>
</select>
<input type="button" onClick="PopUpName=window.open('','PopUpName');PopUpName.location=this.form.menu.options[this.form.menu.selectedIndex].value;" value="GO">
</form>

مثال للشكل الثانى:

MSN.com google.com

--------------------

تخصيص الروابط :

فى الامثلة السابقة يوجد رابطين فقط لموقعى msn و google , لاحظ ان اسماء المواقع باللون الاحمر بينما رابط المواقع باللون الازرق , اذا اردت ان تضيف عددا اكبر كل ماعليك انك تكرر تلك السطور , مثال

<form>
<select name="menu">
<option value="رابط اللينك الاول">اسم اللينك الاول</option>
<option value="رابط اللينك الثانى">اسم اللينك الثانى</option>
<option value="رابط اللينك الثالث">اسم اللينك الثالث</option>
<option value="رابط اللينك الرابع">اسم اللينك الرابع</option>
<option value="رابط اللينك الخامس">اسم اللينك الخامس</option>
</select>
<input type="button" onClick="PopUpName=window.open('','PopUpName');PopUpName.location=this.form.menu.options[this.form.menu.selectedIndex].value;" value="GO">
</form>

اكتب ايميلك هنا

قطعة لتقييم تدويناتك

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

اذهب الى صندوق اكواد مدونتك عن طريق هذا المسار
dashboard > template > layout > edit html
فوق صندوق الاكواد مباشرة ستجد مربعى صغير اسمه Expand Widget Templates , علم عليه " اضغط عليه بالماوس " كى تتمدد اكواد القطع وتراها بصورتها الكاملة
الان ابحث فى صندوق الاكواد ( يمكنك البحث عن طريق crtl + f ) , ابحث عن

<data:post.body/>

تحت هذا السطر الموجود به تلك القطعة مباشرة , اضف تلك القطعة الاخرى :

<script language='JavaScript'>var OutbrainPermaLink='<data:post.url/>';var OB_demoMode = false;var OB_Script = true;</script><script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>

واخيرا اضغط preview لترى النتيجة , ثم احفظ عملك , وادعيلى .

اكتب ايميلك هنا

ماهى افضل تدويناتك ؟

ملحوظة : تم التحديث والتعديل


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

للبدء فى انشاءها ابدأ معايا :

- اذهب الى هذا الموقع the AideRSS homepage
- فى الصندوق اكتب اسم مدونتك بالشكل التالى

http://yourblog.blogspot.com/rss.xml

( استبدل كلمة yourblog باسم مدونتك )ثم اضغط analyse .
- انتظر حتى يتم التعرف على مدونتك وترتيب التدوينات حسب الاشهر , ستظهر لك ضفحة بهذا الشكل


- اضغط على كلمة Sharing and Widgets الموضحة فى الصورة
- فى الصفحة التالية سيظهر لك الكود بالجهة اليمنى , وشكل القطعة التى ستظهر بعد استخدام الكود فى الجهة اليسرى
- خذ الكود وضعه فى اداه html/java script فى مدونتك عن طريق " اضافة عنصر " add a page element من صفحة عناصر مدونتك , ثم احفظ .

تحديث :

واضح ان شكل الموقع اتغير شوية عن اللى فى الصورة

اللى موجود حاليا ابسط بكتير


انك تدخل على اللينك التالى


Top Posts Widget

وتختار Get Widget الخاصة بBLOGGERبلوجر

وتكتب اسم مدونتك او اى مدونة او موقع فى الخانة
Specify your website address

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

تاخده وتتعامل معاه طبيعى زى اللى فات

لذا وجب التنبيه

اكتب ايميلك هنا

افضل المعلقين فى مدونتك

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

- الخانة الاولى ضع بها عنوان القطعة
- الخانة الثانية ضع بها رابط المدونة كما فى المثال
- الخانة الثالثة ضع بها اسمك الذى يظهر فى التعليقات الخاصة بك لكى يتم عدم ادراجه فى التقييم
- بعد ملأ الخانات اضغط customaize ثم add to blog ليتم انشاء القطعة .

اكتب ايميلك هنا

احمى مدونتك من السرقة

حينما يرى الزائر - صاحبنا الحرامى - تدوينتك الساحرة , فان اول شئ يتبادر الى ذهنه بعد ان يسيل على فمه اللعاب من فرط سحر مدونتك هو ضغطة بسيطة بالفأرة " كليكة يمين " ثم اختيار select all ثم copy , ثم يذهب متخفيا الى موقعه او مدونته ويعمل - هذا المجرم - past , هكذا بكل سهولة حتى بدون ذكر اسمك او عنوانك او حتى مقاس جزمتك .

حسنا ايها السارق لن تسطيع سرقتنا بعد الان , هل تسمع ؟هل مجرد الـ copy والـ past هو افضل ما لديك ايها الشنقيط ؟
اذا لم تكن قادر على كتابة مواضيع مفيدة فلتذهب الى الجحيم تبا لشركة " تى اى داتا " التى جعلت المتسولون ببضع جنيهات زهيدة يمتلكون انترنت فى هذا الزمن السخيف

لقدا اخذتنى الجلالة , حسنا , كفى سبابا ونرجع للموضوع , كيف نمنع هؤلاء المتسولين ومرتزقة الانترنت من العبث بمدوناتنا وسرقة " ترهاتنا " الخاصه ؟ ترهاتنا التى خرجت من بين خلايا امخاخنا , ترهاتنا تلك التى سهرنا طويلا نعدها كى تصبح " ترهات " مفيدة بشكل او باخر , سؤال وجيه
ربما لان الاجابة بسيطة وليس سوى كود واحد فقط اتيت به اليوم , لذلك - وسامحونى - فانا احتاج ان املا الصفحة ببعض الهراء و " أمط " الموضوع بقدر ما استطيع و " ألط " - بضم اللام - ايضا , حتى لا تصبح تدويناتى فارغة المنظر بخلاف المحتوى .

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

ondragstart="return false" onselectstart="return false"

بهذة القطعة الساحرة تستطيع ان تمنع هؤلاء "الشناقيط" من العبث بأوبشن copy و past مرة اخرى .

كيف تستخدم الكود ؟:
اثناء تحرير التدوين , انقل الى الوضع Edit Html كما فى الصورة , الصق هذه القطعة فى المكان المناسب داخل كود <div> ,لمزيد من التفاصيل حول كيفية التعامل مع الوضع Edit Html اذهب الى هذا الموضوع " كيف تكتب باحتراف ؟ "
بهذه الطريقة لن يستطيع الزائر عمل select بالفارة على الـ divisions التى دعمتها انت بهذا الكود , ومن ثم لن يستطيع عمل copy .حاول كده انك تعمل select على التدوينة دى او تنسخ الكلام ......... مش هاتقدر , ماتقدااااارش على راى محمد صبحى




اضغط على الصورة لتراها بالحجم الحقيقى




مثال :
فى وضع الـ Edit Html

<div align="right" dir="rtl" ondragstart="return false" onselectstart="return false">

اكتب هنا تدوينتك

</div>

تتميز تلك الطريقة بانك تستطيع منع سرقة تدوينة واحدة , او قطعة نصية معينة, بل سطر واحد فقط لو اردت , بخلاف الطرق الاخرى التى تجعل تجعل المدونة بالكامل غير قابلة للنسخ , لو الطرق التى تمنع خاصية الـ right click للفأرة . وكلها طريق قديمة لم اشأ ان اذكرها هنا .

على اى حال هناك طرق ايضا للتحايل على تلك الحماية , وهناك " شناقيط " محترفون للاسف يعرفون من اين تؤكل الكتف , ومن اين تسرق المدونات , لكن على الاقل هى طريقة مثالية للحماية ضد " الشناقيط " المبتدئين , وتذكر تلك المقولة

" وظيفة القفل ليست الغلق , وانما ابقاء الرجل الأمين أمينا لاطول فترة ممكنة "

واخيرا , سلمنا الله واياكم من شر الشناقيط

اكتب ايميلك هنا