المشاركات

عرض المشاركات من مارس, 2013

تعرف على أنظمة التعليقات وإختيار نظام يتناسب مع مدونتك

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

أقوى إضافة إشتراك لمتابعين بلوجر

صورة
إضافة قوية جداً تجمع اشهر صناديق وازرار المتابعة على بلوجر سواء الخاصة بالمواقع الإجتماعية Social Network أو البريد Email أو خدمات الإشتراك الخاصة ببلوجر وبالتفصيل تحتوي الإضافة كل من صندوق الإشتراك بصفحات جوجل بلس Google Plus وزر إحترافي للإعجاب بصفحة الفيس بوك Facebook وزر المتابعة على تويتر Twitter Follow Button وآداة الإشتراك عبر البريد Email Subscription   وآداة الإشتراك في  اليوتيوب Youtube Subscript وأخيرا آداة المتابعة الخاصة ببلوجر كل هذا في اداة واحده أنيقة والتركيب غاية في السهولة فقط إضافة كود الإضافة في آداة HTML/JavaScript وهذه صورة لمعاينة شكل الإضافة كود الإضافة                         googlplusid " data-width=" 300 " data-height="69" data-theme="light">                fbpageurl " width="250" show_faces="false" stream="false" header="true">                 twitteid " class="twitter-follow-button" data-show-count="true">Follow @ twitteid               ...

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

صورة
قد يستغرب البعض عنوان الموضوع ويظن انني سأحول المدونة لكشك (محل) حاجه ساقعة  ربما يحدث ذلك ^_^ لكن ليس في الوقت الحالي , لكن مع قرائتك للموضوع ستفهم ما صلة العنوان ببلوجر وكيف سيكون الموضوع في صميم التدوين لكن أول شئ , قم بفتح زجاجة بيبسي و كوكاكولا , وإستعد لجولة في عالم من الفشل والنجاح , شركة بيبسي Pepsi وشركة كوكاكولا Coca cola هما الشركتان الأبرز في عالم المشروبات الغازية وهناك عشرات الشركات الأخرى لكن حتى تلك الشركات عندما يرغب أحد بشراء منتجاتها يقول أعطني بيبسي أو كوكاكولا   هل تعرف السبب ؟ ببساطه السبب هو أن تلك الشركات فرضت سيطرتها على سوق المياه الغازية فأصبح أى منافس لا مجال له سوى أن يباع منتجه تحت إسميهما وفرض السيطرة ليس بالجوده فقط فهناك من الشركات المغمورة في هذا المجال ما تضاهي جودتها جودة هاتين الشركتين ومع ذلك لا يذكرون في سوق المنافسه كيف نجحتا في فرض إسميهما ؟ بالنسبة لشركة كوكاكولا ببساطه كانت  الاولى في مجالها عندما إنطلقت صناعة المشروبات الغازية في العالم كانت كوكاكولا من أول تلك الشركات التي دخلت تلك الصناعة وإشتهرت نظرا لقلة المنافسه في البداية وب...

إضافة الإشتراك في قناة اليوتيوب بتنسيق جديد

صورة
الكثير إن لم يكن كل المدونون يملكون قناة على موقع اليوتيوب Youtube وطبعا هناك آداة شهيرة مقدمة من اليوتيوب نفسه للإشتراك بالقنوات Youtube channel Subscribe Widget وكنوع من التجديد قمت بعمل بعض التنسيقات على الآداة لتصبح بشكل افضل وأكثر تنسيقا للتناسب مع القوالب ويمكن بسهولة تغيير لون الآداة ليتناسب مع لون قالب مدونتك وهذا مثال للمعاينة قمت بتنسيقة بلون يتناسب مع قالب مدونتي وفي نفس الوقت هو يتكون من الوان محايده فيناسب عموم القوالب لكن سنوضح كيف تجعل اللون مناسب لقالبك تماما وطبعا لا تنسى الإشتراك بقناتنا ^_^ الكود cnmutv style="overflow: hidden; height: 72px ; width: 260 px; background: #fff;background: -moz-linear-gradient(top, #F0EFEF ,#fff);background: -webkit-linear-gradient(top, #F0EFEF ,#fff); box-shadow: 0 1px 2px #999;-moz-box-shadow: 0 1px 2px #999;-webkit-box-shadow: 0 1px 2px #999; padding:1px; border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px; border:3px dotted #000 ;" scrolling="no" frameborder="0">  قم بإستبدال cnm...

إضافة الفوتوشوب أونلاين من موقع Pixlr

صورة
كنا إستعرضنا في موضوع سابق عن تصميم البنرات للمدونات وكان التصميم عبر خدمة في مدونتي وهي الفوتوشوب أونلاين  Photo Editor Blogger Widget وقد طلب بعض متابعينا الكرام هذه الإضافة وها هي متاحة للجميع والإضافة بسيطه هي عرض موقع Pixlr Photo Editing عبر نموذج Iframe من يريد معاينة الإضافة من هنــــا وهذا هو الكود قم بوضعه داخل مشاركة او داخل صفحة ثابته لكن مع تحويل صندوق الرسائل من وضع تأليف الى وضع HTML أو يمكن إضافتها كرابط عادي http://pixlr.com/editor وهذه معاينة أخرى لكن بحجم أصغر وعموما الإضافة تتكيف مع حجم الصفحة التي توضع بها 

متصفح جوجل كروم Google Chrome مع إضافات تهم المدونين

صورة
سبق وعرضنا متصفح فايرفوكس وإضافات له والآن جاء دور جوجل كروم Google Chrome ومحبيه وسنستعرض مجموعة من إضافاته التي تهم المدونين Google Chrome Extension for Bloggers طبعا جوجل كروم  هو متصفح صعد بقوة في العامين الماضيين ومعه صك التميز من العملاق جوجل أصبح له آلاف الإضافات المتنوعة وما سنضعه هو جزء صغير من مكتبة إضافاته لكن أولا نقوم بتحميل البرنامج تحميل جوجل كروم   Download Google Chrome الإضافات Color Picker إضافة تساعد في إختيار الألوان وتحديد أى جزء في الصفحة وإظهار كود اللون الخاص به تركيب الإضافة goo.gl URL Shortener إضافة لإختصار الروابط ضغطة زر فقط ويتم إختصار رابط الصفحة التي تتواجد بها تركيب الإضافة   Fireshot وهي إضافة متخصصة في تصوير الشاشة وهي مشهرة لدى مستخدمي فايرفوكس وهذه نسختها لكروم الإضافة حقاً ممتازة في تصوير وتحرير الصور وتمكنك من الكتابة على الصور والقص وإضافة تاثيرات وشروحات  تركيب الإضافة SEO Status Pagerank/Alexa Toolbar إضافة تظهر ترتيب اليكسا وبيج رانك  تركيب الإضافة     Web Developer إضافة تحتوي على عدد كبير من الأوامر والادوات التي تساعد مطوري الموا...

القالب الشهير Revolution Lifestyle

صورة
قالب  Revolution Lifestyle Blogger Template أحد أشهر القوالب على الإطلاق وهناك عدة قوالب تحمل إسم Revolution كلها مصممه من قالب واحد والإختلاف بينها في الألوان واشياء بسيطه ونسخة Lifestyle من أجمل تلك النسخ معايــنة   تحميــل مميزات القالب  القالب صديق لمحركات البحث  القالب خفيف وأنيق  تم إضافة ميتا تاج للقالب إبحث عن كلمة تعديل في اول القالب لتعديلها  يحتوي القالب على إضافة إعلانية في الهيدر بمساحة 468x60 يحتوي على قائمتين علويتين يمكنك البحث عن كلمة تعديل أيضا في القالب للتعديل عليهما  لكن قم بالتأشير على كود توسيع العناصر حتى تستطيع إيجادهما يحتوي في الأعلى على شريط متحرك بآخر موضوعات مدونتك  إبحث عن  هذا الجزء في القالب http:// cnmu .blogspot.com/feeds/posts/default وإستبدل cnmu بمدونتك السايد بار معدل وبه جزء مقسم   تم تعديل الكثير من الصور في القالب وتحويلها الى تدرجات لونية وهذا يجعله أسرع وفي نفس الوقت  يسهل تغيير لونه وهو من أهم مميزات هذا القالب أنه بتغيير الألوان في القالب تحصل على شكل جديد ولا يرهق في تغيير صورة ما شابه فقط الألوان ويصبح لديك نسخة جديدة  فضلا مراجعة شر...

طريقة عمل محتوى مخفي

صورة
خدعة ظريفة لعمل محتوى مخفي أو بالتحديد محتوى قابل للإظهار والإخفاء Hide and show وتفيد هذه الطريقة في المدونات التي تكون مواضيعها طويلة فيمكن إستخدامها لإخفاء جزء من الموضوع أو للمدونات التي تكتب القصص او المحتويات التشويقية كأن تكتب قصة وعند الوصول لجزء معين تخفيه أو تخفي صورة أى شئ إستخدمها كما تحب ولكن لا تستخدمها فيما يغضب الله مثال للمعاينة ولتطبيق الطريقة قم بكتابة موضوعك بالطريقة العادية وبعد الإنتهاء حول صندوق المواضيع من وضع التأليف الى وضع HTML طبيعي انت تريد جزء ظاهر وجزء مخفي لذا قبل الجزء الذي تريده مخفياً قم بوضع الكود التالي وعند نهاية الجزء الذي تريد إخفائه ضع الكود التالي كل ما هو موجود بين الكودين سيكون خفيا بقي امر واحد وهو وضع زر الإظهار والإخفاء قم بإضافة الكود التالي قبل الكود الاول إن أردت الزر في الأعلى أو بعد الكود الثاني إن أردت الزر في الأسفل أكمل الموضوع [ إظهار ] [ إخفاء ] ويمكنك تعديل الجزء الاحمر بكتابة اى جملة تعجبك لمن أراد تعديل الزر واعطائه مظهر خاص يضيف الكود التالي فوق الوسم ]]> #cnmuhide { background: #f1f1f1 ; border: 1px solid #bbb ; border-r...

تركيب وتنسيق الخطوط لمدونات بلوجر

صورة
الخطوط تعتبر لمسة جمالية للمدونات وأحيانا تكون ضرورة في بعض المدونات خصوصا التي يتم إستخدام الكتابات فيها بشكل كبير لكن غالبية الوافدين الجدد على بلوجر يجدون صعوبة في إيجاد وتركيب الخطوط وفي هذا الموضوع سنشرح كيفة إضافة الخطوط وكيفية تنسيقها وضبطها في المدونات كل ما نحتاجه بعض التركيز معاينة حية للخطوط  قد تأخذ المعاينة بعض الوقت حتى تظهر الخطوط وهي معلومه يجب ان نعرفها وهي ان الخطوط المضافة يتم تحميلها كملفات مفرده لذا لا تقوم بتركيب أكثر من خط حتى لا تثقل مدونتك , يجب ان نعلم ان كل خط يتكون من جزئين أساسيين الجزء الأول هو ملف الخط وهو عبارة عن كود به رابط يحوي ملفات الخط وهذا ستتم إضافته تحت الوسم الجزء الثاني وهو الوسم الخاص بتفعيل الخط وهذا ما سنستخدمه في القالب ليظهر الخط وسنتعرف اكثر في الموضوع حول طريقة الإستخدام  أول شئ تفعله هو إختيار كود الخط الذي يعجبك وركبه تحت الوسم Amiri الكود وسم الخط font-family: 'Amiri'; Droid Arabic Kufi الكود وسم الخط font-family: 'Droid Arabic Kufi'; Droid Arabic Naskh الكود وسم الخط font-family: 'Droid Arabic Naskh'; Lateef ...

فلاشات لعرض أكواد الألوان

صورة
الالوان جزء أصيل وهام في تعديل القوالب والإضافات وهناك عدة طرق للحصول عليها ما بين إضافات للمتصفحات او مواقع وحتى المواقع تستخدم عدة طرق لتضيف اكاود الألوان بها ومن أسهل وأخف الطرق عن طريق ملفات فلاش جاهزه ولقد وجدت ملفين أحجامهم صغيره وفي نفس الوقت فعالين جدا في تحصيل أكواد الألوان Flash Files for color code ColorPicker.swf الملفات مرفوعة بروابط دائمة بإذن الله ويمكنك إختيار الفلاش الذي يعجبك وتضيفه لموقعك أو مدونتك في موضوع أو صفحة ثابته الفلاش الأول الكود pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="https://sites.google.com/site/cmudawin/flash/color.swf" type="application/x-shockwave-flash" width="450"> الفلاش الثاني الكود  pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="https://sites.google.com/site/cmudawin/flash/color-picker.swf" type="application/x-shockwave-flash" width="500">

أضف محول أكواد بلوجر الى مدونتك

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

نافذة إعلانية متعددة الإستخدامات

صورة
إضافة رائعة عبارة عن نافذة عائمة يمكن ان تستخدمها لأكثر من هدف يمكن أن تستخدمها كأداة إشتراك في المواقع الإجتماعية او تضع بها كود إعلاني او صور او كرسالة ترحيبية يمكن أن تخصصها كما تريد  مثال للمعاينة  طبعا مثال المعاينة وضعت به صورة وادوات لذا فهو غير منسق بالشكل المطلوب لكن فقط أردت ان اظهر به ما يمكن وضعه في الإضافة وأنت يمكنك تنسيقة بالشكل الذي تريد وهذا كود الإضافة قم بوضعه في آداة HTML/JavaScript X إغلاق X fburl "target="_blank"> fburl " width="220" show_faces="false" stream="false" header="true"> وهذا توضيح لبعض الأكواد  بين الكودين الموجودين باللون الأخضر يمكنك أن تضع ما تريد من أكواد لعرضها سواء صور او إعلانات  أو ادوات وأنا وضعت بها إضافة الإشتراك بصفحة الفيس بوك لكي يستفيد من الآداة من لا يجيد التنسيق او الإضافة قم بإستبدال fburl برابط صفحتك على الفيس بوك الرقم 300 هو بعد النافذة من يسار الشاشة والرقم متكرر مرتين ويجب تغيره في المرتين الرقم 120 هو إبتعاد النافذة من الأعلى وهو أيضا مكرر مرتين أما هذه الأل...

تنسيق شكل عناوين بلوجر

صورة
عناوين بلوجر إضافات أساسية في صندوق كتابة المواضيع ولكن كثير من المدونين لا يستخدمونها ولم يفكر حتى في تجربتها أو قد يكون جربها لكن لم يرى نتيجة مرضية والسبب انها ليست منسقة ويجب تنسيقها يدوياً لذا سنقوم بعمل تنسيقات مميزة عليها وعندما تعتاد على  إستخدامها ستشعر بالفرق في شكل وجودة مواضيعك وسنذكر في البداية معلومات بسيطة كتعريف بتلك العناوين الوسوم الخاصة بالعناوين h2 وهو العنوان الرئيسي h3 وهو العنوان الفرعي واغلب قوالب بلوجر يتم إستخدام هذا العنوان في تنسيق عنوان التدوينات h4 وهو العنوان الثانوي سنقوم بعمل تعديل على إثنين من تلك العناوين لان الثالث خاص بشكل عنوان التدوينة فلا نريد إفساده وعند كتابة موضوع وتحديد جزء ثم إختيار العنوان ستجد الشكل أصبح أفضل وهذا مثال لمدونتي عنوان فرعي عنوان ثانوي ما رأيك هل اعجبك ^_^ لا تقلق ستحصل على شكل عنوان يتناسب مع مدونتك  والطريقة سهلة أدخل الى تحرير قالبك وخذ نسخة إحتياطية تفاديا لأى خطأ ثم قم بتوسيع عناصر الستايل بالضغط على سهم التوسيع واذهب للوسم ]]> وضع الكود التالي فوقه  .post h2 { background: #0085FA ;background: -moz-linear-gradient...