tag:blogger.com,1999:blog-15529519670154353442025-10-17T10:48:46.155+02:00موقع زون زول هو موقع تقني يبحث في تقديم شروحات لبلوجر وإضافات بلوجر والقوالب أيضاOneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.comBlogger44125tag:blogger.com,1999:blog-1552951967015435344.post-5813167212381925372021-01-15T21:43:00.006+02:002021-01-16T16:40:53.787+02:00<article class="onezol-article"> <p>من المشاكل التي تحبط الكثير من المدونين ، هي مشكلة تاخر ارشفة مواضيع بلوجر ، والتي تجعل المدونة لاتظهر في محرك البحث جوجل ، لذلك سأقدم لك في هذا المقال شرح كامل لمشاكل وحلول الأرشفة اليدوية والتلقائية ، وفي النهاية سأعلمك طريقة تمكنك من تسريع الارشفة وهي عبر التسجيل في موقع فيدبرنر Feed Burner .</p> <br /> <a><img alt="تسريع ارشفة مواضيع بلوجر المدونة لاتظهر في جوجل شرح فيدبرنر" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCacJVwjiafdNq4mSxoe2rqWr3TE4g9uB9dY88aiCykhhB0lJe-52iOIkPrcSERVnI2cF6jvkYm4y0YvhDH57FWwSQ7QiYYP6wtjYSE4O0TbyOZMfm-RlTp1tSSG8OrocQEM9j_pdr6BE/s16000-e90-rw/feed-burner.webp" title="تسريع ارشفة مواضيع بلوجر المدونة لاتظهر في جوجل شرح فيدبرنر" /></a> <br /> <h2>ارشفة مدونة بلوجر بطريقة صحيحة</h2> <br /> <p>ان ارشفة المدونة هي من اهم الخطوات بعد <a href="https://zonezol.blogspot.com/2020/12/how-to-create-blogger-blog-for-free.html" target="_blank">انشاء مدونة بلوجر</a> ، وهي الخطوة التي يتم فيها تعلم الطريقة الصحيحة لخوارزمية ارشفة جوجل وغيره من محركات البحث ، حيث تتم هذه العملية في العديد من الخطوات التي لابد لك كصاحب موقع ، او كاتب مقالات الكترونية ، بالاهتمام فيها وتعلم طرق تحسين ارشفة بلوجر .</p> <br /> <p>ولكن قبل كل ذلك دعونا نتعلم ماهي الأرشفة ؟ وما اهميتها في مدونة بلوجر ؟</p> <br /> <p><a href="https://ar.wikipedia.org/wiki/%D8%A3%D8%B1%D8%B4%D9%81%D8%A9_%D8%A7%D9%84%D9%88%D9%8A%D8%A8" rel="nofollow" target="_blank">الارشفة</a> أو الفهرسة : هي العملية التي تقوم عناكب البحث فيها بالدخول لموقعك وقراءة جميع الصفحات المرتبطة ، حيث تقوم بتخزينها ، ومن ثم تحدد هذه الروبوتات فيم اذا كان الموقع جديرا بان يظهر في محرك البحث ام لا .</p> <br /> <p>اي ان عناكب البحث هي المسؤولة عن ارشفة مواضيعك ، وبفهم طريقة عملها ستتمكن من التعامل معها ، واعلامها بما تريد اظهاره في محرك البحث ، وما تريد اخفائه ، وايضا اختيار كيفية وزمن ظهورالمدونة ونحوه .</p> <br /> <p>تكمن فائدة ارشفة المواقع الأساسية في اظهار صفحات موقعك في محرك البحث ، وبدونها لن تظهر مدونتك في جوجل ، وستظل غير مرئية الى ان تقوم انت باظهارها لتتمكن عناكب البحث فيم بعد من الزحف اليها ، ومن ثم فهرستها ، واظهارها في محركات البحث .</p> <br /> <p>وكلما تعلمت طرقا اكثر في تحسين الارشفة ، كان لذلك اثر ملحوظ في رفع ترتيب موقعك ضمن نتائج البحث ، لذلك احرص دائما على تعلم المزيد والمزيد من طرق تسريع الارشفة .</p> <br /> <h3>حل مشكلة المدونة لاتظهر في محرك البحث</h3> <br /> <p>لإظهار مدونتك في جوجل تأكد من ان موقعك مرئي لمحرك البحث ، من بلوجر توجه للاعدادات وتأكد بان خيار ( مرئية لمحركات البحث ) مفعل .</p> <br /> <a><img alt="تسريع ارشفة مواضيع بلوجر المدونة لاتظهر في جوجل شرح فيدبرنر" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvateUC0rMui0HqJopjjYRcwjh4rN9cB2j00Y3LkvfrtNn_dPEX5JB-Vpp-3xjhyphenhyphenISzSC1QTOjciNfhTXrQVL9JWX_RgZevrb0LioHAQk8DSKWcNuqsznE7VWg8nLzIhuii4rR386Dn0c/s16000-e90-rw/%25D9%2585%25D8%25B1%25D8%25A6%25D9%258A%25D8%25A9-%25D9%2584%25D9%2585%25D8%25AD%25D8%25B1%25D9%2583-%25D8%25A7%25D9%2584%25D8%25A8%25D8%25AD%25D8%25AB.webp" title="تسريع ارشفة مواضيع بلوجر المدونة لاتظهر في جوجل شرح فيدبرنر" /></a> <br /> <h3>حل مشكلة المقالات لاتظهر في محرك البحث</h3> <br /> <p>لن تظهر مقالاتك في محركات البحث تلقائيا ، وانما يجب عليك ارغام عناكب البحث على قرائتها ، ومن ثم اظهارها في جوجل أو بينج ونحوه .</p> <br /> <h4>ارشفة مدونة بلوجر في جوجل Google</h4> <br /> <p>تعتمد ارشفة جوجل على عناكب البحث ، ولحل هذه المشكلة يجب عليك <a href="https://zonezol.blogspot.com/2020/07/google-search-console.html" target="_blank">اثبات ملكية المدونة في جوجل</a> ومن ثم ارسال خريطة السايت ماب لموقعك ، حيث سيساعدك ذلك على ارشفة مواضيع بلوجر تلقائيا ، وايضا تاكد من عدم وجود اي اخطاء في <a href="https://zonezol.blogspot.com/2020/08/blogger-advice-robot-txt.html" target="_blank">ملف الروبوت txt</a> ، فعادة مايقوم هذا الملف بحظر الوصول الى بعض الصفحات .</p> <br /> <h4>ارشفة المقال في محرك البحث بينج Bing</h4> <br /> <p>لاظهار مقالاتك في محرك البحث بينج يجب عليك التسجيل في <a href="https://zonezol.blogspot.com/2020/07/bing-webmaster.html" target="_blank">مسؤول الويب بينج</a> ، ومن ثم ارسال خريطة الموقع الخاص بك ، وبنفس الطريقة لغيره من محركات البحث .</p> <br /> <h2>اسباب تأخر الارشفة</h2> <br /> <p>بعد تطبيقك لجميع الخطوات اعلاه ، قد تجد ان بعض المقالات التي قمت بكتابتها مازالات لم تظهر ضمن نتائج البحث ، وذلك يعود لعدة أسباب منها :</p> <br /> <ol> <li>ان عناكب البحث ترى ان مقالاتك ركيكة او منسوخة او عشوائية ، لذلك انصحك بتعلم <a href="https://zonezol.blogspot.com/2020/12/secrets-of-writing-an-article-on-blogger-comprehensive-guide.html" target="_blank">طريقة كتابة المقالات في بلوجر</a> ، والسبب في ذلك يعود على ان هنالك عوامل أساسية يجب عليك اتباعها في كتابة المقالات ، وستتجاهلك عناكب البحث مادمت مصرا على عدم اتباعها .</li> <br /> <li>ان يكون القالب الذي تستخدمه هو قالب بطيء وغير متجاوب مع مختلف الشاشات ، وهنا انصحك <a href="https://zonezol.blogspot.com/2020/09/seo-plus.html" target="_blank">بتحميل قالب سيو بلس</a> فهو قالب سريع ومتجاوب ايضا ، والسبب في ذلك يعود على الزمن المستغرق في الأرشفة ، حيث يحدد الروبوت الزمن الذي يحتاجه لقراءة المحتوى الخاص بك ، فإذا كان موقعك بطيئا ، فسيضيع الكثير من الوقت ، ولن يستطيع الروبوت فهرسة محتوى موقعك في الزمن المحدد له مسبقا ، وهذه الخطوة مهمة جدا في تسريع الأرشفة .</li> <br /> <li>عدم وجود أكواد الميتا تاج ضمن اكواد موقعك ، وهنا انصحك ب<a href="https://zonezol.blogspot.com/2020/07/meta-tags.html" target="_blank">تحميل وتركيب اكواد الميتا تاج</a> ، والسبب في ذلك يعود على تاخير زمن الفهرسة أيضا ، حيث تحتوي أكواد الميتا تاج على معلومات أساسية سيحتاجها روبوت البحث في فهم موقعك ، وبالتالي ستحصل على فهرسة أسرع واذكى بكثير .</li> <br /> <li>ان تكون مدونتك تفتقر لعوامل تحسين محركات البحث عموما ، وهنا انصحك بتعلم <a href="https://zonezol.blogspot.com/2020/12/blogger-seo-secrets-comprehensive-guide.html" target="_blank">سيو بلوجر</a> .</li> </ol> <br /> <h2>تسريع ارشفة مواضيع بلوجر</h2> <br /> <p>بعد تطبيقك لجميع ماتم ذكره من بداية المقال ، حان الوقت لخطوة اضافية ستسرع من عملية ارشفة مقالاتك بدرجة كبيرة جدا ، حيث غالبا مايتم فهرسة المقالات هنا فورا ، أي بنفس الساعة واليوم ، ولك ان تعلم انها لن تعمل بشكل جيد اذا لم تقم بتطبيق عوامل السيو التي ذكرناها من بداية المقال .</p> <br /> <h3>شرح موقع فيد برنر feedburner</h3> <br /> <p><a href="https://ar.wikipedia.org/wiki/%D9%81%D9%8A%D8%AF_%D8%A8%D8%B1%D9%86%D8%B1" rel="nofollow" target="_blank">فيد برنر</a> هو موقع تابع لشركة جوجل ، يتم فيه انشاء ملخصات للمواقع تحتوي على آخر المقالات المنشورة أو جميعها .</p> <br /> <p>يوجد نوعين للخلاصات التي يوفرها الموقع وهما rss و atom .</p> <br /> <ol> <li>تعتبر خلاصة rss هي الخلاصة الاكثر شهرة ومن خلالها يستطيع الزائر قراءة المقالات جميعها دفعة واحدة ، أي في صفحة واحدة ، مثال <a href="http://feeds.feedburner.com/zonezol" target="_blank">خلاصة زون زول</a> .</li> <br /> <li>خلاصة atom وهي مشابهة لما قبلها ولكن باختلاف ان المقالات هنا تظهر على شكل روابط متشابكة ، بمعنى انها تظهر جميع المقالات ولكن على شكل روابط وبالتالي ستكون مناسبة أكثر لعناكب البحث .</li> </ol> <br /> <h4>اهمية موقع فيد برنر feedburner</h4> <br /> <ol> <li>ان فيد برنر هو موقع موثوق من جوجل ، وباضافتك لخلاصة الفيد برنر ستزيد من ثقة موقعك ، ومن ثم ستزيد من احتمالية فهرسة مواضيع مدونتك بنسبة كبيرة .</li> <br /> <li>يوفر الموقع للزوار امكانية الاشتراك في الخلاصة ، وبالتالي امكانية ارسال اشعارات للعملاء عبر الايميل ، تنبه الى وصول مقالات جديدة قد كتبت في موقعك ، مما سيزيد من عدد زياراتك .</li> <br /> <li>ستحصل على كود التغذية او الخلاصة للموضوعات التى سوف يتم رفعها على المدونة ، وهو عبارة عن رابط الخلاصة .</li> <br /> <li>ستحصل أيضا على كود الاشتراك في القائمة البريدية والذي من خلاله سيشترك الزوار الجدد في خلاصتك .</li> <br /> <li>ستحصل على ارشفة فورية وقوية للموضوعات التى يتم نشرها .</li> <br /> <li>فيم بعد ان اردت انشاء تطبيق لموقعك ستحتاج الى خلاصة الفيدبرنر بشكل أساسي ، وستفيدك بشكل كبير .</li> <br /> <li>يقوم الموقع بإرسال اشعارات عبر البريد الالكتروني تلقائيا فور نشرك لاحدى المشاركات او التدوينات .</li> <br /> <li>وآخيرا سيساعدك هذا الموقع في تصدر نتائج البحث والظهور الأول لمقالاتك .</li> </ol> <br /> <h4>التسجيل في موقع فيد برنر Feed Burner </h4> <br /> <p>ان عملية التسجيل في موقع FeedBurner معقدة نوعا ما لذلك قمت بشرحها بالفيديو ، فاتمنى ان ينال الشرح على اعجابك :</p> <br /> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/cqHzhrV8sQA?rel=0" width="640" youtube-src-id="cqHzhrV8sQA"></iframe> <br /> <a href="https://feedburner.google.com/" rel="nofollow" target="_blank">للدخول الى موقع فيدبرنر </a> <br /> <a href="https://www.mediafire.com/file/ts3yzgtd9tcciwm/%25D8%25A7%25D9%2584%25D9%2582%25D8%25A7%25D8%25A6%25D9%2585%25D8%25A9_%25D8%25A7%25D9%2584%25D8%25A8%25D8%25B1%25D9%258A%25D8%25AF%25D9%258A%25D8%25A9.txt/file" rel="nofollow" target="_blank">لتحميل أكواد التسجيل في القائمة البريدية</a> <br /> <p>في النهاية ان تسريع ارشفة مواضيع بلوجر هي من أهم الخطوات التي ستزيد من فرصة اظهار مقالاتك في بحث جوجل ، وبالتالي سيوفر لك موقع فيد برنر اسرع حل لهذه المشكلة .</p> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com2tag:blogger.com,1999:blog-1552951967015435344.post-87378625540387471022020-12-31T17:26:00.013+02:002021-01-16T16:05:19.001+02:00<article class="onezol-article"> <p>اذا كنت تبحث عن طريقة انشاء صفحة اتصل بنا ، مميزة ، واحترافية ، وجاهزة للاستخدام في بلوجر ، فأنت في المكان الصحيح .</p> <br /> <p>قد يصعب عليك كمدون في بداية طريقه انشاء نموذج الاتصال بشكل احترافي ، ولكن لاتقلق ففي هذا المقال سأشرح لك كيفية تركيب نموذج اتصال جاهز للتحميل ولن يكلفك سوى بعض الدقائق ، فأرجو ان ينال على اعجابك .</p> <br /> <a><img alt="انشاء صفحة اتصل بنا في بلوجر احترافية و جاهزة للتحميل" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVqqTImnhoSizb1b491pX9Mmty4G-QD0HcC7RV9DyI_tWNCMXx2v4l9JSf9XNKAKyYYS_1Fkv99NZnx4EYGkNTYlxKadiJDyp6GdZuI72OmPKU-KZZK1B6Vkftxaqy331OkdpH90MFOvA/s16000-rw/contact-us-for-blogger.webp" title="انشاء صفحة اتصل بنا في بلوجر احترافية و جاهزة للتحميل" /></a> <br /> <h2>كيفية انشاء صفحة اتصل بنا على بلوجر</h2> <br /> <ol> <li>أولا : قم بالدخول إلى بلوجر ، وقم بإنشاء صفحة جديدة .</li> <li>ثانيا : قم بالتبديل الى عرض html، وقم ب<a href="https://www.mediafire.com/file/9f2xjr7kfgs2sw5/%25D8%25B5%25D9%2581%25D8%25AD%25D8%25A9_%25D9%2586%25D9%2585%25D9%2588%25D8%25B0%25D8%25AC_%25D8%25A7%25D9%2584%25D8%25A7%25D8%25AA%25D8%25B5%25D8%25A7%25D9%2584.txt/file" rel="nofollow" target="_blank">تحميل أكواد اتصل بنا</a> .</li> <li>ثالثا : قم بلصق الأكواد مع تغير الاسم ، والعنوان ، والخيارات .</li> <li>رابعا : قم بكتابة عنوان ID الخاص بمدونتك في المكان المخصص .</li> <br /> <a><img alt="عنوان الاي id دي للمدونة" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPT1hzr5IWHxpHOL1SfBZLZUEUt-tCE1kvtRYPdPWXsby0oc873HgMMEh_12Z0T9meDWin9ZJurxyTQFPwaKEdUwLEjpDD_tF69NU7CUxWYkGZpKGFhGQ9nRpDNVysyMrIUifiFMiGv8g/s16000-rw/id-blogger.webp" title="انشاء صفحة اتصل بنا في بلوجر احترافية و جاهزة للتحميل" /></a> <br /> <li>خامسا : قم بنشر الصفحة ، ومبروك عليك مقدما .</li> <br /> <a><img alt="صفحة نموذج اتصال جاهزة" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPxbbmqXqby1dAqtfAhUWHc8FljYAxO5YQTCAUiL5J1FicunGjJ7gDDH-pyfW4qXwpXWlpxDLDwoi0MeF6CwokvPyT9PvOI7-N1L-6ZIpCO067BOMSVaWn7cH2BxdfPSO_TTitnGdfltQ/s16000-rw/contact-us-blogger.webp" title="انشاء صفحة اتصل بنا في بلوجر احترافية و جاهزة للتحميل" /></a> <br /> </ol> <br /> <h2>طريقة انشاء نموذج الاتصال في بلوجر بالفيديو</h2> <br /> <iframe class="BLOG_video_class" allowfullscreen="" youtube-src-id="BJ4elKSnpOQ" width="640" height="360" src="https://www.youtube.com/embed/BJ4elKSnpOQ?rel=0"></iframe> <br /> <p>في النهاية هنالك الكثير من الصفحات المهمة ، والتي يجدر بك اضافتها الى مدونتك في بلوجر والتي من اهمها : <a href="https://zonezol.blogspot.com/2020/07/privacy-policy.html" target="_blank">صفحة سياسة الخصوصية ، وسياسة الاستخدام</a> ، وأيضا صفحة من نحن ، حيث ستساعدك بعض هذه الصفحات في قبول مدونتك في برنامج اعلانات ادسنس وهي صفحات السياسات ، والبعض الآخر سيزيد من مصداقية موقعك وهي من نحن واتصل بنا ، لذلك احرص دائما على تواجدهم سواء في القائمة العلوية او في ذيل المدونة .</p> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com0tag:blogger.com,1999:blog-1552951967015435344.post-63855682981289804992020-12-28T20:39:00.014+02:002021-01-16T16:05:10.714+02:00 <article class="onezol-article"> <p>هل تهمك فكرة قبول مدونتك في اعلانات ادسنس ؟</p> <br /> <p>ان انشاء صفحة سياسة الخصوصية ، واتفاقية الاستخدام ، هي من أولى الخطوات بعد <a href="https://zonezol.blogspot.com/2020/12/how-to-create-blogger-blog-for-free.html" target="_blank">انشاء مدونة بلوجر</a> ، كما انها من النماذج المهمة والتي يجب يعليك تركيبها ضمن قالب موقعك الالكتروني .</p> <br /> <p>ويعتبر وجود صفحة سياسة الاستخدام العادل ، من اهم شروط قبول المدونة في ادسنس ، لذلك سأقدم لكم اليوم طريقة تركيب وتحميل صفحة سياسة الخصوصية وسياسة الاستخدام جاهزة .</p> <br /> <a><img alt="طريقة إضافة صفحة سياسة الخصوصية وسياسة الاستخدام باحترافية إلى بلوجر" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuTdV_0rbl6AsY_hjQq2LX0YQqkeuA7P66ycjgJT6inX5zuHrTquF86eg8vwpVZ9V1kUBQOcZgnX6XTiAYA30K99UGW_PC5pKlwsFg7nnHoguUSD2XDUHHhZ9eb7MCDiVggZw40B1Au7U/s16000/usige-privacy-policy-for-blogger.webp" title="طريقة إضافة صفحة سياسة الخصوصية وسياسة الاستخدام باحترافية إلى بلوجر" /></a> <br /> <h2>ماهي صفحة سياسة الخصوصية Privacy Policy ؟</h2> <br /> <p>سياسة الخصوصية هي صفحة تحتوي على بعض المعلومات التي يستخدمها موقعك في عرض الإعلانات ، أي ان هنالك بعض البيانات التي يتم أخذها من الزوار والتي يستخدمها الطرف الثالث ( المعلن : أدسنس ) في اختيار الإعلان المناسب وعرضه للزائر ، وأيضا الملفات التي يقوم المتصفح بتخزينها ( الكوكيز ) وغيره ، والهدف منها هو حماية خصوصية الزائر وإعلامه بما يحدث أثناء تصفحه للموقع الخاص بك .</p> <br /> <p>ان عدم وجود هذه الصفحة في موقعك قد يعرضك لمخالفات ادسنس والتي سيعاقبك بها جوجل ، لذلك احرص دائما على اضافتها وأيضا اظهارها في أعلى مدونتك .</p> <br /> <h2>ماهي صفحة سياسة الاستخدام Usage Policy ؟</h2> <br /> <p>سياسة الاستخدام أو ( اتفاقية الاستخدام العادل ) هي صفحة تحتوي على الأشياء التي لايتحمل مسؤليتها صاحب الموقع ، أي عند تطبيق الزائر لأحد الشروحات أو تحميل بعض البرامج ، فإن صاحب الموقع يكون غير مسؤول عن أي مشاكل قد تحصل للزائر بسبب استخدامه أو فهمه الخاطئ .</p> <br /> <p>أيضا عدم وجود هذه الصفحة في موقعك قد يعرضك للمسائلات القانونية والمخالفات في عرض الإعلانات.</p> <br /> <h2>طريقة إنشاء صفحة سياسة الخصوصية واتفاقية الاستخدام في بلوجر</h2> <br /> <ol> <li>أولا قم بالدخول لبلوجر</li> <li>ثانيا قم بإنشاء صفحة جديدة</li> <li>ثالثا قم بالتبديل إلى تعديل html</li> <li>رابعا قم بلصق أكواد الصفحة</li> <li>خامسا قم بالتعديل على اسم المدونة والرابط أيضا</li> <li>سادسا قم بالتعديل على العنوان والخيارات كما ترغب</li> <li>سابعا قم بنشر الصفحة</li> </ol> <br /> <a href="https://www.mediafire.com/file/kiamdjz7hissr85/%25D8%25B5%25D9%2581%25D8%25AD%25D8%25A9_%25D8%25B3%25D9%258A%25D8%25A7%25D8%25B3%25D8%25A9_%25D8%25A7%25D9%2584%25D8%25AE%25D8%25B5%25D9%2588%25D8%25B5%25D9%258A%25D8%25A9_%25D8%25AC%25D8%25A7%25D9%2587%25D8%25B2%25D8%25A9.txt/file" rel="nofollow" target="_blank">تحميل صفحة سياسة الخصوصية جاهزة في بلوجر</a> <br /> <a href="https://www.mediafire.com/file/fv21ehbu32dvmej/%25D8%25B5%25D9%2581%25D8%25AD%25D8%25A9_%25D8%25B3%25D9%258A%25D8%25A7%25D8%25B3%25D8%25A9_%25D8%25A7%25D9%2584%25D8%25A7%25D8%25B3%25D8%25AA%25D8%25AE%25D8%25AF%25D8%25A7%25D9%2585_%25D8%25AC%25D8%25A7%25D9%2587%25D8%25B2%25D8%25A9.txt/file" rel="nofollow" target="_blank">تحميل صفحة اتفاقية الاستخدام جاهزة في بلوجر</a> <br /> <h2>كيفية تركيب صفحة سياسة الخصوصية وسياسة الاستخدام بالفيديو</h2> <br /> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/zsaKyzid8Nc?rel=0" width="640" youtube-src-id="zsaKyzid8Nc"></iframe> <br /> <p>وفي النهاية اذا قمت بتحميل صفحة سياسة الخصوصية ، وسياسة الاستخدام فستكون قد أتممت أحد أهم شروط قبول المدونة في جوجل أدسنس والتي من الممكن ان يرفض طلبك بسبب عدم تواجدها ، واذا كنت مهتما بإنشاء الصفحات الثابتة فأنصحك ب<a href="https://zonezol.blogspot.com/2020/08/contact-us.html" target="_blank">تحميل نموذج الاتصال </a> أيضا ، ودمتم بحفظ الله ورعايته .</p> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com1tag:blogger.com,1999:blog-1552951967015435344.post-89882509030502748952020-12-22T22:57:00.004+02:002021-01-16T16:05:01.957+02:00<style> .onezol-article span { color: #c30909 ; } </style> <article class="onezol-article"> <p>هل تعلم انه مازال بإمكانك في 2021 إنشاء مدونة بلوجر مجانية تماما ، أي انك لن تدفع أي مال ، وبالمقابل يمكنك الربح وجني الأموال من هذه المدونات الإلكترونية .</p> <br /> <p>ان أفضل طريقة لإنشاء مدونة بلوجر احترافية ، هو باستخدامها كهواية تستمتع بها ، مهما كان تخصصك ، أو مجالك ، فبامتلاكك موقع في بلوجر ، ستتمكن من مشاركة جميع أفكارك حول مجال معين ، وبناء قاعدة جماهرية ضخمة ، وهو ليس بالأمر البسيط .</p> <br /> <p>للمدونة الإلكترونية العديد من الفوائد التي تصب في صالحك ، على سبيل المثال : ان كنت مصمم أو مبرمج مواقع ، وأردت التقديم على احدى الوظائف ، فقد يُطلب منك عرض أفضل أعمالك في البرمجة ، ومن خلال الموقع ، سيتم ابراز وقياس مدى تأهلك وخبرتك لهذه الوظيفة ، وغيره الكثير .</p> <br /> <a><img alt="كيفية انشاء مدونة بلوجر مجانية بطريقة احترافية 2021" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqmMqTWsf4Mjrws4Sx7-RoKYTNdC8BfjijrHQqH6iz571pnYe7qdrPbEqjbEa2pwCQnHHHC5uLoxpaDmBkJh5hKizaeT1mPzLzXjukppmQlevX_yFC8J2FJVNCph_HLe8jl1-Y7Vb9V_A/s16000-e90-rw/how-to-create-blogger-blog-for-free.webp" title="كيفية انشاء مدونة بلوجر مجانية بطريقة احترافية 2021" /></a> <br /> <h2>مامعنى المدونة ؟</h2> <br /> <p>المدونة هي أحد انواع المواقع الإلكترونية التي يتم فيها نشر المواضيع المختلفة ، وتعريف المدونات هو : مجموعة من الصفحات المترابطة ببعضها تحت اسم معين يعبر عن عنوان الموقع ، وهي مشابهة لفكرة المنتديات .</p> <br /> <p>من المدونات المشهورة هي موقع الفيس بوك نفسه ، فلك ان تتخيل كمية المواقع المتواجدة في العصر الحالي ، والتي تندرج تحت اسم مدونة الكترونية .</p> <br /> <h2>كيفية انشاء مدونة خاصة بك ؟</h2> <br /> <p>يعرف هذا النوع من المواقع ، بالمدونة الشخصية ، ومعنى مدونة شخصية : أي تلك التي يكون فيها المسؤول عن الموقع هو شخص واحد فقط ، حيث يدير الموقع كاملا أي : يقوم بتصميم القالب ، ثم يكتب المقالات حسب مجاله وغيره من الأمور .</p> <br /> <p>ويوجد العديد من منصات انشاء المدونات ، منها المجاني والمدفوع ، حيث يقوم المبتدء غالبا بإنشاء مدونة الكترونية مجانية ، ثم بعد مرحلة معينة يقوم بالتبديل إلى شراء اسم نطاق مدفوع ( عنوان URL ) .</p> <br /> <h2>ماهي مدونات بلوجر blogger ؟</h2> <br /> <p>بلوجر هي منصة تدوين تابعة لشركة جوجل Google ، تتيح للمستخدمين خدمة إنشاء مواقع جاهزة للتدوين مجانا ، حيث تتم استضافة الموقع في احد سيرفرات جوجل المعروفة بـ( blogspot ) ، وعادة ماتسمى بمدونة جوجل ، ويمكنك بالقليل فقط من الخبرة البرمجية انشاء مدونة احترافية .</p> <br /> <p>مع تطور شركة جوجل ، اصبحت كيفية عمل مدونة بلوجر عملا في غاية السهولة والبساطة ، حيث أصبح بإمكانك انشاء مدونة بلوجر من الهاتف وفي وقت قياسي أيضا .</p> <br /> <h2>طريقة انشاء مدونة بلوجر مجانية </h2> <br /> <p>بما ان موقع بلوجر هو في الأساس تابع لشركة جوجل ، فلن تحتاج إلى انشاء حساب جديد ، وانما بإمكانك ربط المدونة ، بحساب الجيميل الخاص بك ، وبذلك ستتمكن من انشاء بلوجر جاهزة للتدوين .</p> <br /> <p>ان فكرة انشاء مدونات مجانية هي فكرة عبقرية في البداية ، ولكنها غير مجدية للمواقع الكبيرة والتي تكون عدد الزيارات فيها تتجاوز حاجز الـ10000 زيارة يومية ، لذلك غالبا مايقوم المستخدمين بالترقية الى الدومين المدفوع ( اسم النطاق ) ، ولكن من يعلم فحتى موقعنا <a href="https://zonezol.blogspot.com" target="_blank">زون زول</a> قد بدأ رحلته باستخدام مدونة مجانية في بلوجر .</p> <br /> <h3>خطوات انشاء مدونة على بلوجر بالصور</h3> <br /> <p>أولا قم بالدخول إلى موقع <a href="https://www.blogger.com" rel="nofollow" target="_blank">بلوجر</a> ، ثم قم بالضغط على تسجيل دخول مدونة بلوجر .</p> <br /> <a><img alt="صورة توضح تسجيل دخول مدونة بلوجر" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQCp9JVdO9n70Jp-KYQZkeJS7V3PNUzM3lw5rCsBMWGNk0EgLM8BHrCmZNcQ_1sY56w71hrck02Jlrd_diALm4ocxgcPugVESB-s_q2OC-IgVpua2Ynj5KD5l5-md3j-7FNPd5qBDZmZE/s16000-e90-rw/how-to-create-blogger-blog-for-free.webp" title="كيفية انشاء مدونة بلوجر مجانية بطريقة احترافية 2021" /></a> <br /> <p>ثانيا قم باختيار العنوان ، والذي سيظهر للزوار في محركات البحث .</p> <br /> <a><img alt="صورة توضح اختيار عنوان مدونة بلوجر ، اختيار اسم لمدونتك" border="0" data-original-height="484" data-original-width="536" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjzRVkt4EkHx2Vvm20odq7Z_GR2vcy1OCGa7ZVtbpAymroZgvdFee0BmgFXYHKlm76Kdkoa53dR6BBmwcapQ-LywRX8ledDx3PTuS1EyTJhyphenhyphenpMUGuStIEyZ_ovd7sB6RgEEU0WTYylU4A/s16000-e90-rw/how-to-create-blogger-blog-for-free.webp" title="كيفية انشاء مدونة بلوجر مجانية بطريقة احترافية 2021" /></a> <br /> <p>ثالثا قم باختيار اسم النطاق ( الدومين ) وهو عنوان URL جديد لموقعك .</p> <br /> <a><img alt="صورة توضح اختيار عنوان URL لمدونتك ( اسم النطاق )" border="0" data-original-height="484" data-original-width="536" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwBG5vTuNN9hkquF99glpxAqXDNkZ4fY6cAzJZ_31v9E35b63zjINBRH1mG4LCRjAn1cM7E50T4eKEE9xcZaPUA_zl4PMrYeNuk-qdGQ8Se2YKptTSD1K2lx9hvP5HYil0uZNSWPL38RA/s16000-e90-rw/how-to-create-blogger-blog-for-free.webp" title="كيفية انشاء مدونة بلوجر مجانية بطريقة احترافية 2021" /></a> <br /> <p>رابعا قم باختيار الاسم المعروض وهو اسم المؤلف .</p> <br /> <a><img alt="صورة توضح اختيار اسم العرض لمدونة بلوجر" border="0" data-original-height="484" data-original-width="536" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmQBwQra4PzhT3F6mMlaezylgUi3xx2fQi6HDvyNbzTPAsEytMLNAOVqHOONBZIO3WdkJNTiL3kQLMNPyw0RzoZlaHb1VoFxSwp2RIJuQ1L5WsA23de5U9Xdq_2ff1V-HaRLGfx16sRA/s16000-e90-rw/how-to-create-blogger-blog-for-free.webp" title="كيفية انشاء مدونة بلوجر مجانية بطريقة احترافية 2021" /></a> <br /> <h3>شرح انشاء مدونة بلوجر مجانية بطريقة احترافية بالفيديو</h3> <br /> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/544rMu8NWjQ?rel=0" width="640" youtube-src-id="544rMu8NWjQ"></iframe> <br /> <p>وبذلك انت الآن قادر على كتابة ونشر المشاركات الجديدة في موقعك ، وإظهارها لدى جميع محركات البحث ، واصبح بإمكان الزوار الدخول إلى موقعك من مختلف الدول والأجهزة .</p> <br /> <h2>لماذا لاتظهر مدونتك في محركات البحث ؟</h2> <br /> <p>لإظهار مدونتك ضمن نتائج البحث قم بالتوجه لبلوجر ثم الإعدادات وقم بتفعيل الخيار ( مرئية لمحركات البحث ، غالبا تكون مفعلة تلقائيا ) ، وبذلك ستظهر المدونة في محركات البحث .</p> <br /> <p>غالبا مايسأل البعض مدونتي لاتظهر في محركات البحث ، بالرغم من تفعيل خيار ( مرئية لمحركات البحث ) ؟ ولكن هنالك العديد من العوامل التي تؤثر في ظهور مدونتك على محركات البحث وأهمها التالي :</p> <br /> <p>من الطبيعي ان لاتظهر مدونتك بالبحث عنها في جوجل أو غيره من محركات البحث خاصة في أول 3 او 4 ايام ، لذلك لاتستعجل ، ففي النهاية ستظهر ضمن نتائج البحث ، ولاتتوقف هنا ، وابدأ رحلتك في الأمور الأكثر أهمية .</p> <br /> <p>من الممكن ان يكون الموقع ظاهرا في النتائج المتاخرة في جوجل ، لذلك قم بالبحث عنه باستخدام هذه الطريقة :</p> <br /> <p>site:<span>zonezol.blogspot.com</span></p> <br /> <h2>كيفية انشاء مدونة بلوجر احترافية</h2> <br /> <p>لإنشاء مدونة بلوجر احترافية يجب عليك دراسة 3 أشياء مهمة جدا .</p> <br /> <ol> <li>عنوان المدونة وتخصصها</li> <br /> <p>يجب ان يكون اسم الموقع فريدا ومعبرا عن المجال ، ولك ان تتخصص في الكثير من التخصصات ، ولكن يجب ان يكون المجال واحدا فقط .</p> <br /> <p>أي على سبيل المثال : مدونة <span>زون زول</span> ، مجالها التقنية وهو المجال العام ، التخصص : تصميم وبرمجة المواقع ، بتفصيل أكثر : تصميم وبرمجة مدونات بلوجر ، وهي من المدونات العربية على بلوجر .</p> <br /> <p>ليس المهم ان يكون التخصص منفردا ، ولكن من المهم ان تكتب عن تخصص واحد حتى تنتهي ، ثم الذي بعده وهكذا ، فحاول ان لاتكتب عن تخصص آخر الا بعد كتابتك لـ10 مقالات على الاقل عن التخصص الأول .</p> <br /> <li>تصميم القالب</li> <br /> <p>لامتلاك قالب احترافي يجب عليك دفع بعض المال لشراء القالب ، ولكن هنالك بعض القوالب المجانية التي تحمل الكثير من المميزات الاحترافية ، لذلك انصحك ب<a href="https://zonezol.blogspot.com/2020/09/seo-plus.html" target="_blank">تحميل وتركيب قالب سيو بلس v5 المجاني</a> .</p> <br /> <li>كتابة المقالات</li> <br /> <p>ان عملية كتابة المقال امر مرهق في البداية ، ولكنه مسلي وممتع في النهاية ، لذلك انصحك بتعلم <a href="https://zonezol.blogspot.com/2020/12/secrets-of-writing-an-article-on-blogger-comprehensive-guide.html" target="_blank">كيفية كتابة مقال احترافي من الصفر حتى الاحتراف</a> .</p> </ol> <br /> <h2>3 أفكار مدونات ناجحة</h2> <br /> <p>ان انشاء مدونة بلوجر احترافية هو امر في غاية الأهمية ، لذلك انصحك باختيار فكرة مدونة ناجحة جديدة ومميزة ، تستطيع من خلالها التفوق على منافسيك .</p> <br /> <ol> <li><span>المدونات التقنية</span> : وهي أحد انواع مدونات بلوجر المشهورة ، حيث تحصد يوميا الآف الزيارات ، والسر في ذلك يكمن في التحديثات اليومية التي تطرأ على التقنية الحديثة ، كما انه يمكنك تصدر النتائج وجني الأرباح بأكثر من طريقة .</li> <br /> <li><span>المدونات ذات الصفحة الواحدة</span> : في الحقيقة تكره بلوجر هذه الفكرة ، لسبب واحد وهو انها ليست كباقي المدونات التي تكثر فيها الصفحات المرتبطة ، ولكنها تحقق نجاحات باهرة فإن كانت لديك خبرة في لغات البرمجة ، فستتمكن بذلك من انشاء موقع للتحميل من اليوتيوب ، أو لتحويل صيغ الصور وما إلى ذلك ، وستحقق نتائج مبهرة .</li> <br /> <li><span>المدونات الحصرية</span> : في الحقيقة هي ليست نوعا للمدونات ، وانما هي استراتيجية يستعملها أصحاب المدونات لحصد الزيارات في وقت وجيز ، حيث تعتمد هذه الفكرة على استهداف المواضيع الجديدة والحصرية والكتابة عنها ، مثل : نتائج الثانوية العامة ، أو فايرس كورونا ، ولكن يجب ان تكتب عن المواضيع الحصرية في نفس تخصصك ، أي انه ان كانت مدونتك تتحدث عن الطعام ، فلا تكتب عن انقراض اخر وحيد قرن في العالم ، فانت بذلك ستحصل على الكثير من الزيارات السلبية ، والتي سيعاقبك عليها جوجل .</li> </ol> <br /> <p>وفي الختام احب ان انوه على ان خطوة انشاء مدونة بلوجر مجانية هي مجرد البداية وانما لاحتراف بلوجر وتحقيق الأرباح ، لابد لك من الاجتهاد ، ودراسة الموضوع بجدية .</p> <br /> <p>انضم الى <a href="https://bit.ly/355J04O" rel="nofollow" target="_blank">أصدقاء زون زول</a> ، وستحترف بلوجر بالعربي و بكل تأكيد .</p> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com0tag:blogger.com,1999:blog-1552951967015435344.post-34954758212376130422020-12-21T03:20:00.020+02:002021-01-16T16:04:47.336+02:00<article class="onezol-article"> <p>هل تجد صعوبة في إضافة الكلمات المفتاحية لمواضيعك في بلوجر ؟</p> <br /> <p>تكمن أسرار إضافة الكلمات المفتاحية في أربعة أسئلة أساسية ، وبالإجابة عليها ستتمكن من اختيار الكلمات الرئيسية لمدونتك بكل احترافية .</p> <br /> <a><img alt="أسرار إضافة الكلمات المفتاحية في بلوجر" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCWc6zoHrDaNcHZYEWIY244kknkqu8jHbE0AJsyXLOZa4Ht0s7QLhwM0Pebgyiv2TcMvdXyKvBgoWaVA33DbSx88IG8S4wPYxEk5nPAf7m0sIjKtgb2WK6ipbegMMa1fg2sciy0N6plgk/s16000-rw/secrets-of-keywords-in-blogger.webp" title="أسرار إضافة الكلمات المفتاحية في بلوجر" /></a> <br /> <h2>ماهي الكلمات المفتاحية keywords ؟</h2> <br /> <p>الكلمة المفتاحية keyword : هي الكلمة الدلالية ، التي يستطيع الباحث بها حصر النتائج التي تظهر في محرك البحث على موضوع معين .</p> <br /> <p>وتنقسم الكلمات المفتاحية في محركات البحث إلى قسمين رئيسين وهما :</p> <br /> <h3>الكلمات المفتاحية ذات الذيل القصير</h3> <br /> <p>وهي الكلمات الدلالية المكونة من كلمة إلى كلمتين مركبتين مثل : الكتابة ، كتابة مقال .</p> <br /> <h3>الكلمات المفتاحية ذات الذيل الطويل</h3> <br /> <p>وهي الكلمات الدلالية المكونة من 3 كلمات فأكثر ، مثل : كتابة مقال في بلوجر ، <a href="https://zonezol.blogspot.com/2020/12/secrets-of-writing-an-article-on-blogger-comprehensive-guide.html" target="_blank">أسرار كتابة مقال في بلوجر</a> .</p> <br /> <p>كما أن هنالك نوعين للكلمات المفتاحية في النص وهما : </p> <br /> <h3>الكلمة المفتاحية الرئيسية</h3> <br /> <p>وهي التي تكون المنافسة فيها قوية ، كما ان معدل البحث عنها يكون كبيرا .</p> <br /> <h3>الكلمات المفتاحية الفرعية</h3> <br /> <p>وهي تلك التي تكون مرتبطة بمعنى مرادف للكلمة المفتاحية الرئيسية ، ولكن تكون نسبة الطلب عليها قليلة جدا مقارنة بالكلمة الدلالية الرئيسية .</p> <br /> <h2>أهمية الكلمات المفتاحية في البحث</h2> <br /> <p>تكمن أهمية الكلمات المفتاحية الرئيسية ، في تحديد مستوى ارتباط النصوص المنشورة ، مع الكلمات الرئيسية في البحث ، أو ذات الصلة بالمواضيع المنشورة ، وبدرجة متفاوتة من الدقة .</p> <br /> <p>أي ان الكلمات المفتاحية في النص هي ليست العناوين فقط ، وانما تشمل جميع الصفحة من عناوين فرعية ، وفقرات ، وأيضا الصور .</p> <br /> <p>لذلك عند بحثك في جوجل عن موضوع معين ، قد تلاحظ ان النتائج الظاهرة ، ليست مرتبطة بشكل كامل مع النص الذي كتبته ، وذلك بسبب ان محرك البحث يستعمل العديد من العوامل في إظهار النتائج ، التي يكون من ضمنها إظهار الكلمات المفتاحية المرتبطة بعبارة البحث .</p> <br /> <p>من المهم أيضا معرفة ان الكلمات المفتاحية الصحيحة ، قد تزيد من فرصة العثور على المقال ، أو البحث ، ومن فرص وصوله لعدد أكبر ممن ينبغي ان يصل لهم لولا كتابتها .</p> <br /> <h2>أهمية الكلمات المفتاحية في بلوجر</h2> <br /> <p>ترتبط الكلمات المفتاحية في بلوجر ارتباطا وثيقا بالسيو seo وهو تحسين محركات البحث ومساعدة المواقع على الظهور في محرك البحث .</p> <br /> <p>لذلك يجب عليك كمدون معرفة طريقة اختيار الكلمات المفتاحية المناسبة ، ومن ثم تحليلها ، لترى ان كانت تصلح للكتابة عنها في الوقت الحالي ؟ ام لا .</p> <br /> <h2>كيفية اضافة الكلمات المفتاحية إلى مواضيع بلوجر Blogger KeyWords</h2> <br /> <p>تكمن أسرار إضافة الكلمات المفتاحية في 4 أسئلة أساسية ، وبالإجابة عليها ستتمكن من احتراف استخدام الكلمات المفتاحية بما يناسب احتياجاتك ، ليس ذلك فقط وانما ستزيد من احتمالية تصدر مقالك لنتائج البحث بنسبة كبيرة أيضا .</p> <br /> <h3>1: كيفية استخراج الكلمات المفتاحية ؟</h3> <br /> <p>من هنا تبدأ رحلة البحث عن الكلمة المفتاحية ، لذلك قم بفتح المفكرة وأدرج بها جميع الكلمات الدلالية التي تظهر لك اثناء البحث ، وأفضل طريقة استخراج للكلمات الرئيسية هي من محرك البحث جوجل نفسه ، ولكن كيف يتم ذلك ؟</p> <br /> <h4>الكلمات المفتاحية في جوجل</h4> <br /> <p>يوفر محرك البحث جوجل كلمات مفتاحية جاهزة ، وكل ماعليك فقط هو كتابة الكلمة المفتاحية ذات الذيل القصير وستتفاجئ بكمية كبيرة من الكلمات الدلالية الرئيسية ، والفرعية ، وأيضا ذات الذيل الطويل ، أي أنك قد لاتحتاج لأي موقع آخر في استخراج الكلمات المفتاحية .</p> <br /> <p>هنالك 3 مواضع مختلفة يمكنك البحث فيها عن الكلمة الرئيسية في جوجل وهي :</p> <br /> <ol> <li>التكملة التلقائية أثناء الكتابة</li> <br /> <p>عند كتابتك لأي كلمة في محرك البحث جوجل ، من المهم ان تنظر في النتائج المكملة لما تكتبه ، فأول النتائج التي تظهر هي الكلمات المفتاحية الأكثر تداولا في البحث .</p> <li>عمليات البحث المتعلقة بالموضوع</li> <br /> <p>تحتاج هذه النتائج الى تحليل وفلترة ، لذلك قم بتضمينها كنتائج ثانوية في المفكرة .</p> <li>عناوين النتائج الظاهرة في البحث</li> <br /> <p>غالبا مايتم تكرار كلمة معينة في جميع العناوين ، أو اغلبها ، وبمجرد النظر ستتمكن من تحديد الكلمة الرئيسية والتي غالبا ماتكون ذات ذيل قصير .</p> </ol> <br /> <h3>5 أسرار لاستخراج الكلمات المفتاحية من جوجل</h3> <br /> <ol> <li>ابحث بأكثر من طريقة ، فالكلمة الرئيسية الواحدة قد تحتوي على الكثير من التفرعات التي من الممكن ان ترفقها ، وبذلك سيصبح مقالك أكثر شمولية ، مما سيزيد من نسبة ظهوره باختلاف عبارة البحث .</li> <li>اذا كنت مدون جديد ، فستتمكن من تحديد منافسيك في المجال الذي ستكتب عنه ، وذلك فقط بالنظر لأول 5 نتائج في البحث .</li> <li>اذا كانت أولى النتائج التي تبحث عنها هي مواقع ضخمة مثل وكبيديا ، أو الشركات التجارية عموما ، مثل : جوجل بلاي أو مايكروسوفت ، فتجنب اختيار عناوين مشابهة لهم ، لأنك وبكل بساطة لن تتصدر النتائج ، وربما لن تظهر سوى في صفحات متاخرة من البحث .</li> <li>امعن النظر في الكلمات الدلالية ذات الذيل الطويل ، فهي اقرب كلمة مفتاحية من الممكن ان تستهدفها عند اختيارك للعنوان الرئيسي لموضوعك .</li> <li>اقرأ اول 3 مقالات تظهر لك في جوجل ، فمن خلال القراءة فقط ستتمكن من استخراج الكثير من الكلمات الدلالية .</li> </ol> <br /> <h3>2: كيفية اختيار الكلمات المفتاحية ؟</h3> <br /> <p>بعد استخراجك للكلمات الدلالية ، ستحتاج الى تصفية هذه الكلمات بما يناسب موضوعك ، وبصراحة هذه الخطوة معقدة نوعا ما ، وستحتاج إلى الإعتياد عليها لتحصل على أفضل الكلمات المفتاحية .</p> <br /> <p>ان طريقة اختيار الكلمات الرئيسية تعتمد بشكل كبير على عدة عوامل أساسية وهي :</p> <br /> <ol> <li>طول الكلمة المفتاحية</li> <br /> <p>قم باختيار أطول كلمة دلالية تكون شاملة لموضوعك ، لأنها من ستجلب لك أفضل الزوار وأفضل العملاء ، ويحدث ذلك بسبب استهدافك للمهتمين فقط بالجزء الذي ستكتب عنه .</p> <p>وأيضا هنالك سر آخر ولكنني سأتركه في نهاية المقال .</p> <li>قيمة الكلمة المفتاحية</li> <br /> <p>يتم تحديد القيمة المفتاحية باستخدام <a href="https://ads.google.com/aw/keywordplanner" rel="nofollow" target="_blank">مخطط الكلمات الرئيسية في جوجل ادسنس</a> ، حيث ستتمكن من تحديد سعر الكلمة المفتاحية لدى المعلنين ، مما سيجعلك تتأكد من مدى أهمية الكلمة الرئيسية وبالتالي الكتابة عنها .</p> <li>عدد الزيارات والنقرات</li> <br /> <p>يحدد مخطط الكلمات الرئيسية معدل الزيارات الشهرية للكلمة المفتاحية الواحدة ، وكنصيحة تجاهل الكلمات ذات الذيل القصير التي يكون معدل بحثها الشهري من 1-100 ، واكتب فقط عن تلك التي يكون معدل بحثها يبدأ من 100 فصاعدا .</p> <li>مدى صعوبة الكلمة المفتاحية</li> <br /> <p>كلما كان سعر النقرة الواحدة على الكلمة الرئيسية كبيرا ، كلما زادت صعوبة تصدرك لنتائج البحث في هذه الكلمة ، لذلك حاول قدر الامكان من تجنب الكتابة عن المواضيع الصعبة .</p> </ol> <br /> <p>شرح استخراج واختيار الكلمات المفتاحية بالفيديو</p> <br /> <iframe class="BLOG_video_class" allowfullscreen="" youtube-src-id="UA5mH1jvbWo" width="640" height="360" src="https://www.youtube.com/embed/UA5mH1jvbWo?rel=0"></iframe> <br /> <h3>3: كيفية وضع الكلمات المفتاحية في مواضيع بلوجر ؟</h3> <br /> <p>يتم توزيع الكلمات الدلالية في عدة مواضع في المقال ، ولك ان تختار جميعها ام تكتفي بجزء منها فقط :</p> <br /> <ol> <li>في العنوان الرئيسي H1 ، حيث يجب ان يحتوي على الكلمة الرئيسية المستهدفة وينصح ان تكون في بدايته ، وأيضا العناوين الفرعية H2 و H3 ، وأيضا في مقدمة المقال ويفضل في أول سطر ، وأيضا يفضّل توزيعها ضمن فقرات المقال .</li> <li>في عنوان الـURL الخاص بالمقالة نفسها .</li> <li>بداخل الصور في وصف الصورة الأساسي ، والوصف البديل (Alt ، Title) حيث ستحصل بذلك على زيارات من صور جوجل نفسها .</li> <li>في الـ Meta Description أو النص المقتطف ، أي وصف البحث للمقال ، وبكتابتك للكلمات الدلالية بالوصف ، فأنت بذلك تساعد عناكب محرك البحث من فهم جميع العناوين المتعلقة بمحتوى مقالك ، فلاتغفل هذه النقطة حتى وان كان أغلب الزوار لايقرأونها .</li> </ol> <br /> <h3>4: كيفية كتابة الكلمات المفتاحية ؟</h3> <br /> <p>كتابة الكلمات المفتاحية لابد ان تكون بذكاء ، حيث مع تطور التقنيات أصبح بإمكان محرك البحث معرفة التكرارات العشوائية للكلمة الدلالية ، وبالتالي سيقوم بتجاهل المقالة ككل .</p> <br /> <p>ان أفضل طريقة لكتابة الكلمات المفتاحية هي بكل بساطة ، تكون في توزيعك للكلمة المفتاحية الرئيسية بمعدل كلمة مفتاحية واحدة لكل 100 كلمة أو 150 ، وأيضا الكلمات الدلالية الفرعية بنفس المعدل ، أي لاتكثر منها بشكل مخل للمقال ، وفي نفس الوقت قم بذكرها في سياق الجمل بحبث بكون من الضروري ذلك .</p> <br /> <p>شرح كيفية اضافة الكلمات المفتاحية داخل مواضيع بلوجر بالفيديو</p> <br /> <iframe class="BLOG_video_class" allowfullscreen="" youtube-src-id="HjVFsufCQ4w" width="640" height="360" src="https://www.youtube.com/embed/HjVFsufCQ4w?rel=0"></iframe> <br /> <h2>10 أسرار لكتابة الكلمات المفتاحية في بلوجر بذكاء</h2> <br /> <ol> <li>هل تعلم انه بتصدرك للنتائج في كلمة مفتاحية ذات ذيل طويل ، ستزيد بذلك من فرصة تصدرك للنتائج في الكلمة الرئيسية ذات الذيل القصير .هل تعلم انه بتصدرك للنتائج في كلمة مفتاحية ذات ذيل طويل ، ستزيد بذلك من فرصة تصدرك للنتائج في الكلمة الرئيسية ذات الذيل القصير .</li> <li>ان تتصدر النتائج في كلمة مفتاحية فرعية ، أفضل من ان تظهر في آخر النتائج بسبب تركيزك على الكلمة الرئيسية ، لذلك اختر كلماتك المفتاحية بحكمة .</li> <li>اكتب عن الكلمات الدلالية ذات المدى الطويل اي تلك التي سيبحث بها الناس لمدة سنة على الأقل من الآن ، بذلك ستضمن فرصة ظهور عالية وأيضا ستزيد من مدة تصدرك للنتائج .</li> <li>قد يتغير سعر النقرة على الكلمة الرئيسية بين ليلة وضحاها ، لذلك لاتتمسك كثيرا بهذا الموضوع .</li> <li>هل تعلم انه بإرفاقك لفيديو أو صورة تحمل نفس عنوان مقالك ، انك ستزيد من فرصة ظهورك في النتائج الأولى من محرك البحث .</li> <li>استهدف كلمة رئيسية واحدة فقط في المقال ، لأن محرك البحث يتشدد في هذه الموضوع ، فلاتجعل مقالك عرضة للحذف بسبب التحدث عن موضوعين منفصلين .</li> <li>بعد كتابتك للعديد من المواضيع حول كلمة ذات ذيل طويل ، قم بالكتابة عن الكلمة الرئيسية فقط ، ومن ثم قم بربطها بجميع الكلمات الفرعية ، ستحقق بذلك أقصى استفادة من هذه الكلمة .</li> <li>قم بابتكار أفكار جديدة للكلمات ذات الذيل الطويل ، وقم بالترويج لهذه الفكرة ، ستحصد بذلك عدد مهوولا من الزيارات اليومية ، وستكون سببا في استهداف المدونين لكلمتك المفتاحية الجديدة .</li> <li>يهمل الكثير من المدونين فكرة الكتابة عن الكلمات الفرعية ، ولك ان تتصدر نتائج البحث بها في وقت وجيز للغاية ، وهو مايفعله أصحاب المدونات الجديدة لكي تتصدر مقالاتهم نتائج البحث .</li> <li>أسأل نفسك هذه الأسئلة في كل مرة تبحث فيها عن الكلمات المفتاحية :</li> </ol> <br /> <p style="color: #c30909;">كيفية استخراج الكلمات المفتاحية ؟</p> <br /> <p style="color: #c30909;">كيفية اختيار الكلمات المفتاحية ؟</p> <br /> <p style="color: #c30909;">كيفية وضع الكلمات المفتاحية ؟</p> <br /> <p style="color: #c30909;">كيفية كتابة الكلمات المفتاحية ؟</p> <br /> <p>اعتقد انك الآن قادر على الإجابة على هذه الأسئلة بكل سهولة .</p> <br /> <p>في الختام هل يمكنك تحديد الكلمة المفتاحية الرئيسية لهذا الموضوع ؟</p> <br /> <p>ان كانت الإجابة نعم ، قم بكتابتها في خانة التعليقات</p> <br /> <p>اقرأ أيضا</p> <br /> <a href="https://zonezol.blogspot.com/2020/12/blogger-seo-secrets-comprehensive-guide.html">أسرار تحسين محركات البحث في بلوجر دليل شامل</a> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com0tag:blogger.com,1999:blog-1552951967015435344.post-15595801594622305412020-12-20T03:20:00.031+02:002021-01-24T17:42:20.325+02:00<article class="onezol-article"> <p>هل تبحث عن طريقة تتصدر بها مقالاتك نتائج محركات البحث وتحلم باحتلال الترتيب الأول ؟</p> <p>مقال أسرار تحسين محركات البحث في بلوجر هو الدليل الشامل الثاني بعد <a href="https://zonezol.blogspot.com/2020/12/secrets-of-writing-an-article-on-blogger-comprehensive-guide.html" target="_blank">أسرار كتابة مقال في بلوجر</a>&nbsp;، وفي هذا الدليل سنتعلم سيو بلوجر ، وطرق تحسين ظهور المقالات ضمن نتائج البحث .</p> <br /> <p>هل تعلم ان العمل الحقيقي يبدأ بعد انتهائك من كتابة المقال ، أي انك ستبدأ بالعمل على تحسين ظهور المقال في محرك البحث ، ومن ثم جعله يتصدر نتائج البحث بطرق كثيرة جدا ، وبالفعل سأتطرق لها جميعها ، ولكن ان كنت مبتدئا ، فاحفظ هذه المقالة في اشارة مرجعية لأنك ستحتاج للعودة إليها مرة أخرى ، لاتستعجل وقم بتطبيق المعلومات التالية ولو بالتدريج .</p> <br /> <a><img alt="أسرار تحسين محركات البحث في بلوجر دليل شامل" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlLswXFEcfwDzi61Rk_72NRnsjAjwFtIPiZClxro3tWbVIasnInUnzV03NryQnMP_PIZftUQLmsm9rSq7gRnqp2m7VRllzI6gwIrJJpJwP1xxZR_8QvtFE_bUD3A4_AR1Cv7nLTxbXmKw/s16000-rw/all-seo-on-one-article.webp" title="أسرار تحسين محركات البحث في بلوجر دليل شامل" /></a> <br /> <h2>كيفية كتابة مقال يتصدر نتائج البحث</h2> <br /> <p>يعرف هذا العلم باسم السيو ( Search Engine Optimization ) ويختصر بـ Seo ، بكل بساطة يمكننا القول اننا وبتعلم مجال السيو ، سنفهم طريقة تفكير عناكب محركات البحث ، وبالتالي كيفية التعامل معها في تحسين ظهور مقالاتنا ضمن نتائج البحث ، بل وحتى طريقة التلاعب بها كيفما نريد .</p> <br /> <p>سيو هو أحد فروع التسويق الإلكتروني ، ويبحث السيو في تحسين ظهور المواقع في محركات البحث مثل جوجل ، بحيث تظهر صفحات موقع الويب ضمن النتائج الأولى في محرك البحث ، ولايقتصر على تصدرالمقالات للنتائج فقط ، وإنما هو شامل لجميع المدونة ومواقع الويب عموما .</p> <br /> <h2>من الأشخاص الذين يجب عليهم الاهتمام بطرق تحسين محركات البحث في بلوجر Seo ؟</h2> <br /> <p>لك ان تعلم ان مجال السيو هو مجال متفرع في أقسامه ، وسيأخذ منك وقتا طويلا في فهمه ، فإن لم تكن أحد الأشخاص الذين يخدمهم المجال ، فلاترهق نفسك بالإنغماس فيه ، واكتفي بتعلم الأساسيات فقط ، ويخدم السيو كل التخصصات التالية :</p> <br /> <ol> <li>أصحاب مواقع الويب ، أي المدونين والمصممين ، وأيضا مطوري مواقع الويب .</li> <li>كل من يعملون في مجال الكتابة والترجمة للمواقع الإلكترونية .</li> <li>كل من يعمل كمتخصص في السوشال ميديا (Social Media Specialist) .</li> <li>كل مهتم بمجال الديجتال ماركتينج ( digital marketing ) .</li> <li>كل شخص يسعى لتعلم وصقل مهارة جديدة .</li> </ol> <br /> <p>سنتناول الآن أهم الأفكار حول تحسين وتهيئة موقعنا ومقالاتنا لمحركات البحث ، وبالأخص محرك البحث جوجل Google .</p> <br /> <h2>كيفية كتابة مقال في بلوجر متوافق شروط السيو</h2> <br /> <p>تأتي عملية كتابة مقال متوافق مع محركات البحث كخطوة ثانية بعد كتابة المقال الأولية والتي يتم فيها سرد الأفكار ، فهي تلك العملية التي يتم فيها إجراء التعديلات الضرورية .</p> <br /> <p>ولكتابة مقال متوافق مع شروط وعوامل السيو seo من الواجب عليك معرفة جميع عوامل السيو التالية :</p> <br /> <h3>التحسين الداخلي لمحركات البحث Seo On Page</h3> <br /> <p>يعرف بالسيو الداخلي ، وهو كل العمليات التي نقوم بها بداخل صفحة الويب الواحدة ، ولنذكر أهم عناصر السيو الداخلي :</p> <br /> <h4>كيف اضيف كلماتي المفتاحية ؟</h4> <br /> <p>الكلمة المفتاحية هي تلك الكلمة التي يتم تكرارها في المقال الواحد بكثرة ، وتلعب <a href="https://zonezol.blogspot.com/2020/12/secrets-of-keywords-in-blogger.html" target="_blank">الكلمات المفتاحية</a> اهمية كبيرة في تصدّر مقالنا لنتائج محرك البحث ، لذلك لاتغفلها أبدا ، وليس فقط كتابة كلمة مفتاحية واحدة أو اثنتين كافية ليتصدر مقالنا النتائج الأولى ، وإنما يجب علينا توزيع الكلمات الدلالية على مقالنا كاملا وبذكاء ، كما في مخطط الكلمات المفتاحية ( الصورة التالية ) :</p> <br /> <a><img alt="مخطط الكلمات المفتاحية" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH_3A8WAXK_sJtMuwwGoMmt_WxgilcCk4_HkLX3dVeyijAJIxA3i8HuAoDJ2uLZ1c7x9FTJeDHnMR_DUU0KFXdcE_ouzYHrJgsWL31x8GECKHfTo0ggemLQb5fjNqYsxFHGWyf2bgDapU/s16000-rw/keywords-planner.webp" title="أسرار تحسين محركات البحث في بلوجر دليل شامل" /></a> <br /> <h4>أهمية جودة المحتوى في السيو الداخلي On Page</h4> <br /> <p>جودة المقال تجبر عناكب محركات البحث على رفع مقالك ليتصدر النتائج ، وتعتبر جودة المحتوى هي أهم عنصر في تحسين محركات البحث ، فكلما كان المحتوى فريدا ، متميزا ، زادت احتمالية ظهوره في أولى نتائج البحث ، وإليك بعض النصائح للحصول على أفضل جودة لمحتوى المقال :</p> <br /> <ol> <li>ابتعد عن نسخ مقالات مواقع الويب نهائيا ، وابدأ بكتابة المقالات بنفسك ، فإذا كنت تريد ان تنسخ محتوى غيرك فلاتدخل المجال من الأساس ، وابحث عن مجال آخر ، فعناكب محركات البحث ذكية بقدر يسمح لها من معرفة المحتوى المنسوخ ، كما ان الزوار يستطيعون التمييز أيضا .</li> <li>لايضر في البداية الأخذ ببعض أفكار الغير ولكن أضف عليها تجربتك الخاصة لتكوّن نكهة ورائحة جميلة تميّز بها مقالك .</li> <li>ابحث واقرأ وتعلم ، لاتستلم وحاول في كل مرة ابتكار أفكار جديدة .</li> <li>اشتر الخبرة من المتخصصين في المجال ، ليس بالمال فقط وإنما بتوجيه الأسئلة الصحيحة أيضا .</li> <li>اعتمد على مصادر موثوقة ، ودعك من مواقع نشر الخرافات والأساطير .</li> </ol> <br /> <a><img alt="أسرار الحصول على باك لينك احترافي" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizP8VwTbPD2xmTBetqKmXxBk5riaNlLlJA15PcSgSg4nL5mLP1_7RSyB7F4ZNnlQSzQSo7YOmDzJ42sZ2xWxgs1cCBjHMtRHEzHl8eamHFoTcCVYQXmxknTJPBkt6srlwBMJvIoth_HNs/s16000-rw/back-links.webp" title="أسرار تحسين محركات البحث في بلوجر دليل شامل" /></a> <br /> <h3>الطريقة الصحيحة لاستخدام الباك لينك Back Links</h3> ماهو الباك لينك ؟<br /> <p>الباك لينك Back Links ، هي الروابط التي تؤدي إلى موقع معين ، وتعتبر عملية كتابة الروابط ضمن المقالات ، أحد أهم طرق الظهور الأول في محركات البحث .</p> <br /> <p>ينقسم الباك لينك BackLinks إلى قسمين رئيسيين وهما : الروابط الداخلية والروابط الخارجية ، لذلك قم باستخدام هذه العوامل بطريقة صحيحة تخدم بها موقع الويب الخاص بك .</p> <br /> <h4>أهمية الروابط الداخلية ( Internal Links )</h4> <br /> <p>الروابط الداخلية هي تلك الروابط التي تؤدي إلى أحد المقالات أو الصفحات التي بداخل موقع الويب الخاص بك .</p> <br /> <p>يجب عليك الإهتمام بعملية الربط الداخلي لموقعك ، فباستخدام أحد انواع وطرق الربط الداخلي ستحصل على شبكة ترابط داخلي تجعل موقعك متماسكا كالصخرة ، وبذلك ستجبر عناكب محركات البحث من الدوران في موقعك ، وفهرسة جميع مقالاتك ، ولكن انتبه من الإكثار المفرط في استخدامها .</p> <br /> <h5 style="font-weight: bold;">طريقة الربط التسلسلي</h5> <br /> <p>يتم في هذا النوع ربط المقالة رقم 2 ب1 ، والمقال رقم 3 ب2 والمقال الأخير بالأول وهكذا إلى ان تصبح جميع المقالات تؤدي إلى بعضها البعض ، مما سيكسب موقعك سلسلة من الترابط الوثيق ، وهو ما أنصح به أصحاب مدونات بلوجر الجديدة .</p> <br /> <h5 style="font-weight: bold;">طريقة الربط التبادلي</h5> <br /> <p>وفي هذا النوع يتم ربط المقالات المتشابهة ببعضها البعض ، فإن كنت تكتب عن الربح من كتابة المقالات فستربط هذا المقال بطريقة كتابة المقالات لموقع ويب ، بحيث تجعل كلا المقالين يؤديان لبعضهما ، وهو أفضل أنواع الربط .</p> <br /> <h5 style="font-weight: bold;">طريقة الربط التصاعدي</h5> <br /> <p>يعتمد هذا النوع من الروابط الداخلية على ربط مجموعة من المقالات ذات عدد الزيارات القليل ، بمقالة واحدة ذات عدد زيارات كبير ، وبالتالي ستحصل على زيارات كثيرة ، وستحقق نسبة أرباح عالية ، ومن مقالة واحدة فقط .</p> <br /> <p>لاتنس ان في عملية ربط المقالات ، يلعب النص دورا كبيرا لدى عناكب محركات البحث ، فكلما كان نص الرابط المؤدي لمقالة داخلية هو نص يعبر عن محتوى المقال الداخلي كلما زادت قيمة الرابط الداخلي .</p> <br /> <p>استخدم القيمة Dofollow لتتمكن عناكب البحث من الوصول للمقالة المرتبطة ومن ثم أرشفتها .</p> <br /> <p>ستزيد الروابط الداخلية من مدة بقاء الزائر في موقعك ، وبالتالي الحصول على معدل ارتداد منخفض ، مما سيزيد ثقة محرك البحث في جودة الموقع الخاص بك .</p> <br /> <p>قم ب<a href="https://zonezol.blogspot.com/2020/12/Delete-broken-links.html" target="_blank">إزالة جميع الروابط المعطلة من موقعك الويب</a>&nbsp;، فهي تؤثر على ترتيب موقعك ضمن نتائج محرك البحث .</p> <br /> <h4>أهمية الروابط الخارجية ( External links )</h4> <br /> <p>الروابط الخارجية هي التي تكتبها انت بداخل المقال الخاص بك ، بحيث تؤدي إلى موقع آخر خارج موقع الويب الخاص بك .</p> <br /> <p>يتم استخدام الروابط الخارجية في وضع روابط ذات صلة بمحتوى المقال الخاص بك ، وكلما كانت الروابط الخارجية تؤدي إلى موقع موثوق ، كلما زادت ثقة محرك البحث في محتوى موقعك وبالتالي ستتصدر نتائج البحث ، والعكس صحيح فتأكد من مصداقية مواقع الويب التي تريد الإشارة إليها .</p> <br /> <p>استخدم الميزة Nofollow في الإشارة للروابط الخارجية ، لعدم إشغال محرك البحث في أرشفة المحتوى المتواجد خارج موقع الويب الخاص بك ، وبذلك ستحصل على سرعة أرشفة أفضل بالنسبة لمقالاتك .</p> <br /> <h3>التحسين الخارجي لمحركات البحث ( Off Page )</h3> <br /> <p>المقصود بالتحسين الخارجي هو جميع الروابط الخارجية التي تؤدي إلى موقعك ، أي ان هنالك فرق بسيط بين الروابط الخارجية التي تقوم انت بإرفاقها في مقالك ، وبين تلك التي يقوم المستخدمون الآخرون بكتابتها داخل مواقعهم ، والتي تشير إليك .</p> <br /> <p>ان الحصول على روابط خارجية تؤدي إلى موقعك الويب ، هو في الواقع أحد الطرق الغير شرعية في الحصول على زيارات ، وكسب ثقة محرك البحث ، وهذا الكلام هو من وجهة نظر جوجل نفسها .</p> <br /> <p>والدليل في ذلك ان بعض أصحاب المواقع يقومون بإنشاء مدونات صغيرة بهدف الترويج لمواقعهم ، ويسمون بأصحاب القبعات السوداء ( Black Hat ) ، حيث يحصلون بذلك على نقرات غير شرعية ، فلاتشغل بالك بهذه الأمور واكتفي بالطرق الشرعية فقط ، وهو ماسنذكره في مقالنا .</p> <br /> <p>على العموم فكرة الحصول على روابط خارجية من مواقع ويب كبيرة ، هو بغرض زيادة الزيارات ، مما سيحسن من ظهور موقعنا في محرك البحث ، ولكنه مجال خطير بعض الشيء فلاتسمح لنفسك بالإنخراط فيه دون علم .</p> <br /> <p>ومن وجهة نظري الشخصية ، لايوجد اي مانع من جعل المستخدمين يقومون بالترويج لمقالك ، ان كان المحتوى ذا جودة عالية ويخدم الزائر ، لذلك احصل على الروابط الخارجية ، ولكن لاتشتري الخدمة بمقابل مادي .</p> <br /> <h4>شرح الباك لينك بالفيديو</h4> <br /> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/ypEr6AxF9Bs?rel=0" width="640" youtube-src-id="ypEr6AxF9Bs"></iframe> <br /> <h4>أفضل طريقة للحصول على روابط خارجية موثوقة</h4> <br /> <p>يجب على كل مدون جديد سواء في بلوجر أو وردبريس ، ان يخصص جزءاً من وقته في مواقع التواصل الإجتماعي ، وذلك بهدف الحصول على قاعدة جماهيرية لموقعك الويب ، وبالتالي ستحصل على زيارات وعملاء لمدونتك ومقالاتك الحديثة باستمرار .</p> <br /> <h4>أهمية الترويج بمنشورات في وسائل التواصل الإجتماعي</h4> <br /> <a><img alt="أهمية الترويج بمنشورات في وسائل التواصل الاجتماعي" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilj6OmRJWfsicYzl7ERuxn6e-1tHU0XKPSr0kgAEoS_-W38lxsi8_giySvNd-kTUkhZFHAK3HfAv1bOLOvSrR3g0KxZK1eaOjugLjAGT2goprniyTpejLutP20GSzbSbJGEUus-9WNkN8/s16000-rw/Promotion+in+social+media.webp" title="أسرار تحسين محركات البحث في بلوجر دليل شامل" /></a> <br /> <p>تعمل عناكب محركات البحث على قياس أهمية صفحات الويب الخاصة بك ، بحساب درجة تفاعل المستخدمين على مواقع التواصل الإجتماعي ، أي بمعنى أوضح ، كلما قام أصدقائك بالتعليق وإعادة النشر للمنشورات الخاصة بك ، كلما أرسل ذلك اشارات ايجابية لمحركات البحث ، لتجعل منك هدفا تقترحه على من يهمهم المحتوى الخاص بك .</p> <br /> <h5 style="font-weight: bold;">Twitter</h5> <br /> <p>تعتبر منصة تويتر من أفضل الوسائل لتصدر نتائج البحث في زمن قياسي ان استخدمته باحترافية ، ومن الممكن ان تتصدر به عناوين الأخبار في جوجل ، ولك ان تبحث عن اي من عناوين الصحف ، ستجد ان تدوينة بسيطة في تويتر تصدرت نتائج البحث الإخباري قبل 5 أو ربما دقيقة واحدة فقط .</p> <br /> <h5 style="font-weight: bold;">Youtube</h5> <br /> <p>يتصدر اليوتيوب نتائج محرك بحث جوجل المتعلق بالفيديوهات ، لذلك ان كنت تملك قناة في اليوتيوب ، قم بالترويج لأحد مقالاتك في وصف الفيديو ، فكلما انتشر الفيديو ، ساعد بذلك مقالك على الظهور ، والحصول على عدد نقرات CTR .</p> <br /> <h5 style="font-weight: bold;">Facebook</h5> <br /> <p>ان كانت مدونتك علمية ، سواءا تتحدث عن التقنية أو التدوين بشكل عام ، فإن إنشاء صفحة على الفيس بوك ، سيجلب لك الكثير من الزيارات ، فبنشرك لصورة أو فيديو أو مقال بسيط، ستتمكن من تصدر نتائج البحث لفترة طويلة جدا ، ولكن في البداية تجنب الترويج لمدونتك بكثرة فأنت بذلك ستتسبب في <a href="https://zonezol.blogspot.com/2020/07/facebook-advice.html" target="_blank">حظر نشر رابط موقع الويب الخاص بك</a> .</p> <br /> <h5 style="font-weight: bold;">Instagram</h5> <br /> <p>من يخفى عليه عالم الموضة انستغرام ، بهذه الطريقة انت لن تتصدر نتائج البحث ولكن عوضا عن ذلك ستحصل على عدد زيارات خرافي في فترة وجيزة ، خاصة ان كانت مدونتك تتحدث عن الموضة والتصوير الفوتوغرافي أو كنت تملك متجرا إلكترونيا ، ولكن لاتقلق من تصدر النتائج فإليك الحل التالي .</p> <br /> <h5 style="font-weight: bold;">Pinterest</h5> <br /> <p>ان كنت تستخدم اسنتغرام فأنصحك باستخدام Pinterest أيضا ، فبنشرك لصورة احترافية واحدة من الممكن ان تتصدر بها نتائج البحث الخاصة بالصور ، وربما بحث جوجل العام ، لذلك ان كانت مدونتك تتحدث عن الموضة ، أو الأطعمة ، أو غيره من الأمور التي تلعب فيها الصور دورا مهما في إيصال الرسائل للزوار، فاجعل من Instagram و Pinterest أول خيارين لنشر صورك والترويج لمقالاتك .</p> <br /> <p>وغيره من وسائل التواصل الإجتماعي التي تصب في خدمة مجال موقع الويب الخاص بك .</p> <br /> <p>قم أيضا بحثّ الزوار للترويج لمقالاتك ، فهذه هي طريقة أصحاب القبعات البيضاء ( White Hat ) في الحصول على زيارات شرعية من محرك البحث .</p> <br /> <p>قم بتبادل الروابط مع مواقع الويب المتخصصة في نفس مجالك عن طريق تبادل كتابة المقالات معهم ، وبذلك ستحصل على زيارات ونقرات شرعية .</p> <br /> <h3>تقنية الرانك براين Rank Brain ودورها في تحسين محركات البحث</h3> <br /> <p>تقنية Rank Brain هي خاصة بتقييم عناكب محركات البحث لترتيب النتائج في محرك البحث ، حيث تعتمد استراتيجية الرانك براين على إبقاء الزائر لأطول مدة داخل موقعك الويب ، وأيضا عدد النقرات على رابط مقالك في محركات البحث ، وبذلك يتم دائما التبديل في ترتيب نتائج المقالات ضمن نتائج محركات البحث .</p> <br /> <p>ويتم في هذه العملية الإعتماد على المقايس الخاصة لكل مقال بحيث تكون المنافسة على الظهور الأول في محرك البحث .</p> <br /> <h4>زيادة مدة بقاء الزائر على موقعك الويب Session Duration</h4> <br /> <p>حاول بقدر الامكان إطالة الوقت الذي يقضيه الزائر في الموقع الخاص بك ، ويتم ذلك بأن تجعل المقال الخاص بك دليل شامل وبه معلومات كافية ، ويجب أيضا أن تحاول الكتابة بأسلوب يجذب القارئ ، بالإضافة إلى أنّ إدراج الصور والفيديوهات المساعدة يطيل من مدة بقاء الزائر ، ولك ان تضع في مقالاتك بعض الروابط للمقالات الداخلية المرتبطة بنفس موضوع مقالك ، فكلما طالت مدة بقاء الزائر في مقالك ، كان في ذلك اشارة جيدة لرفع ترتيب مقالك ضمن نتائج محرك البحث .</p> <br /> <h4>أهمية زيادة عدد النقرات CTR الشرعية</h4> <br /> <p>الحصول على عدد نقرات كبير ، هو مؤشر جيد لعناكب محركات البحث بأن هذا المقال يجاوب على الكثير من الأسئلة المتعلقة بموضوع البحث .</p> <br /> <p>عدد النقرات ، هو عدد الزيارات المكتسبة في محرك البحث فعند الحصول على عدد نقرات كافي من الزوار ، سيرتفع ترتيب المقال الخاص بك ليستطيع بعد ذلك ان يتصدر أول نتيجة بحث .</p> <br /> <p>تقوم عناكب البحث بالإعتماد على عدد النقرات ، ومدة بقاء الزائر في مقالة معينة ، في رفع مستوى مقالك لأقصى درجة ، فلا تيأس من المحاولة وأجري التجارب والتعديلات المطلوبة في كل فترة ، ويكفي تصدر مقالين من بين 10 مقالات لتصبح صاحب مدونة مشهورة .</p> <br /> <h3>الاهتمام بتحسين معدل الارتداد</h3> <br /> <p>معدل الارتداد هو من أكثر الأشياء التي تؤثر سلبا على أي موقع ويب ، بل وتمنعه من الظهور في نتائج البحث ، لأن عناكب محركات البحث هي التي تقوم بتحديد مدى مصداقية موقعك بناءاً على انخفاض معدل الارتداد .</p> <br /> <p>معدل الارتداد هو مقدار الفترة الزمنية التي قضاها الزائر في موقعك ، فكلما انخفض معدل الإرتداد كان ذلك سببا في تصدرك لنتائج البحث ، لذلك احرص دائما ان يكون معدل الإرتداد الخاص بك هو بين 0 - 20% كحد أقصى .</p> <br /> <h4>خطوات تحسين معدل الإرتداد</h4> <br /> <ol> <li>قم بتحسين أسلوب الكتابة الخاص بك ، ويتم ذلك عبر القراءة والممارسة .</li> <li>احرص على تعديل المقالات القديمة وقم بتحديثها باستمرار .</li> <li>استهدف الكلمات المفتاحية الخاصة بمجالك بدقة وبمصداقية .</li> <li>اعمل على تحسين سرعة الموقع الخص بك .</li> <li>قم ببناء القالب الخاص بك ليكون متوافقا مع الأجهزة النقالة ، أي الهواتف .</li> <li>يساعد انشاء <a href="https://zonezol.blogspot.com/2020/09/seoplus-redirect.html" target="_blank">صفحة اعادة توجيه الروابط</a> على تقليل معدل الارتداد .</li> </ol> <br /> <h3>ماهي علاقة الصور بتحسين محركات البحث</h3> <br /> <p>تكمن أهمية الصور في التعبير عن مقالك بصورة هادقة مثيرة تجذب الزائر وتجعله يطيل البقاء في موقعك ، وللصور دور كبير في تحسين محركات البحث ، فكما تعلم حتى الصور تتصدر نتائج البحث .</p> <br /> <p>ابتعد عن نسخ الصور المحمية بحقوق الطبع والنشر أو قم بالتعديل عليها قبل نشرها .</p> <br /> <p>قم باستخدام صور مضغوطة و<a href="https://zonezol.blogspot.com/2020/10/WebP.html" target="_blank">بصيغة Webp</a> فهي الأفضل والأسرع في مجال الإنترنت .</p> <br /> <p>استخدم صوراً تعبر عن محتوى المقال الخاص بك ، بحيث تكون جاذبة للزائر ومعبرة عن عناوين موضوعك .</p> <br /> <a href="https://zonezol.blogspot.com/2020/08/img.html" target="_blank">تعلم الطريقة الصحيحة في إضافة الصور لمدونة بلوجر</a> . <br /> <h3>ماهي علاقة الفيديوهات بتحسين محركات البحث</h3> <br /> <p>تساعد الفيديوهات على زيادة مدة بقاء الزائر في موقع الويب الخاص بك ، كما انها تتصدر نتائج البحث ، لذلك احرص على ارفاق بعض الفيديوهات ضمن مقالك ، ليتمكن الزائر من الحصول على أقصى درجة من الفائدة .</p> <br /> <p>قم بكتابة أحد المقالات ، ثم قم بإنشاء فيديو توضيحي لمحتوى المقال .</p> <br /> <a href="https://zonezol.blogspot.com/2020/10/youtube-videos.html" target="_blank">تعلم الطريقة الصحيحة لرفع الفيديوهات على بلوجر</a> . <br /> <p>قم بإنشاء فيديو ، ثم بعد ذلك قم بتغطية الجوانب الناقصة على شكل مقال وأرفق فيه الفيديو ، بحيث يكمل الفيديو الجزء الناقص من المقال ، والعكس صحيح .</p> <br /> <h3>لماذا اكتب عن تخصصي فقط ؟</h3> <br /> <p>يستطيع محرك البحث التفريق بين التخصصات والمجالات ، فإن كنت تكتب عن مجالات متعددة فسيفهم محرك البحث ذلك ، وسيتسبب ذلك في انهيار موقعك ، وحتى بالنسبة للزوار فسيفهمون انك تحاول التلاعب ، لذلك احرص دائما على الكتابة في تخصص معين ، وابتعد عن كتابة المقالات التي لاتمد لبعضها بأي صلة ، لأنك وبذلك سترهق نفسك ، وسترهق الزائرين بعدم وضوح مجال موقعك .</p> <br /> <p>على سبيل المثال : <a href="https://zonezol.blogspot.com" target="_blank">موقع زون زول</a> ، مجاله التقنية ، تخصصه تصميم وتطوير مواقع الويب ، ولك ان ترى كمية المقالات التي تندرج تحت هذا التخصص .</p> <br /> <p>فمجال الموقع لايمكن ان يتغير ، ولكن التخصص من الممكن ان يتطور ويتنوع ، ليصل إلى تصميم التطبيقات وتطويرها ...</p> <br /> <h3>اجعل موقعك متوافق مع الأجهزة المحمولة Mobile-First Index</h3> <br /> <p>محركات البحث في الهواتف هي نفسها التي على أجهزة الحاسب ، فإن كنت تستطيع تصدر نتائج البحث الخاصة بمستخدمي الهواتف ، فستتمكن من تصدر نتائج البحث الخاصة بمستخدمي الحواسب بفضل تقنية Mobile-First Index ، لذلك احرص على ان يكون تصميم الموقع الخاص بك متوافقا مع واجهة الهواتف النقالة .</p> <br /> <p>احرص دائما على ان يكون القالب الخاص بك مصمما ليتوافق مع الهواتف أولا ، وسبب ذلك باختصار هو ان عدد مستخدمي الهواتف في عصرنا الحالي ، يفوق عدد مستخدمي الأجهزة المكتبية بفارق 30% تقريبا .</p> <br /> <a href="https://search.google.com/test/mobile-friendly" rel="nofollow" target="_blank">لمعرفة ان كان موقعك متوافق مع الهاتف</a> .<br /> <h3>اعمل على تحسين سرعة موقع الويب الخاص بك</h3> <br /> <a><img alt="عدد مستخدمي الانترنت على مختلف الاجهزة" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizpW4Lh69HbW5hIEmKQ7pdojVVOwD9OnqowKFeOPFg8q2IEjAijulN24oGp8Yh70SIbzNIMxUqYSXhSekCGEeCN8Jw0Mggv97Bx1blUitBo5WPffanFZede0DwMwXjuPuBhQDIQRvT5ks/s16000-rw/internet-users.webp" title="أسرار تحسين محركات البحث في بلوجر دليل شامل" /></a> <br /> <p>سرعة الموقع الخاص بك هي أولى خطوات تحسين محركات البحث ، والتي من خلالها تستطيع عناكب محركات البحث الدخول لموقعك وأرشفة المقالات بسرعة وبجودة عالية .</p> <br /> <p>حسب الخبراء إذا كانت سرعة تحميل الصفحة في موقعك تتجاوز الثانيتين فقط ، سيعمل ذلك على تقليل عدد الزيارات الخاصة بموقعك بنسبة 40% ، ولك ان تتخيل كمية الخسائر التي ستتسبب بها ان كانت سرعة تحميل موقعك الويب أكثر من تلك المدة .</p> <br /> <h3>ماهي أفضل ادوات مجانية لتحسين السيو Seo ؟</h3> <br /> <p>أدوات تحسين محركات البحث : هي عبارة عن مجموعة من المواقع التي تمكنك من الحصول على الكثير من المعلومات المهمة ، والإحصائات الدقيقة ، وأيضا التقارير الخاصة بموقعك وبمنافسيك المحتملين ، والكثير من الخدمات التي تصب في صالح موقعك الويب ، وهذه قائمة بأهم هذه الأدوات :</p> <br /> <a href="https://search.google.com/search-console/about" rel="nofollow" target="_blank">Google Search Console</a> <br /> <p><a href="https://zonezol.blogspot.com/2020/07/google-search-console.html" target="_blank">أدوات مشرفي المواقع المقدمة من شركة جوجل نفسها</a> ، تتيح لك هذه الأداة الكثير من المعلومات حول أداء موقعك وأبرز المشاكل والحلول التي يمكنك إجرائها لتحسين ظهور موقعك ضمن نتائج محرك البحث الشهير جوجل Google .</p> <br /> <a href="https://www.bing.com/toolbox/webmaster" rel="nofollow" target="_blank">Bing Webmaster</a> <br /> <p><a href="https://zonezol.blogspot.com/2020/07/bing-webmaster.html" target="_blank">ادوات مشرفي المواقع الخاصة بمحرك البحث بينج Bing</a> ، هي أداة بسيطة تعمل مثل Google Search Console ، ولكن على محرك البحث بينج ، كما انها تتيح لك بعض الميزات الاضافية ، والتقارير الشاملة حول موقعك الويب .</p> <br /> <a href="https://analytics.google.com/analytics/web/" rel="nofollow" target="_blank">Google Analytics</a> <br /> <p>هي أداة تحليل الزيارات المقدمة من شركة جوجل Google ، هذه الأداة معجزة بكل ماتعنيه الكلمة فهي تقدم لك احصائات دقيقة للغاية حول حركة الزوار في موقعك الويب .</p> <br /> <a href="https://bitly.com/" rel="nofollow" target="_blank">Bitly</a> <br /> <p>هذه الأداة تعمل على اختصار الروابط الخاصة بك ، مع تحليل لعدد النقرات لكل رابط مختصر ، وباستخدامها ستحصل على رابط مختصر بسيط قصير للغاية .</p> <br /> <a href="https://ads.google.com/home/tools/keyword-planner" rel="nofollow" target="_blank">Google Keyword Planner</a> <br /> <p>أداة مجانية تابعة لشركة Google ، تتيح لك تحليل الكلمات المفتاحية بشكل تفصيلي ، بحسب الموقع الجغرافي ، وبحسب قيمة الكلمة المفتاحية في محرك البحث جوجل .</p> <br /> <a href="http://keywordshitter.com/" rel="nofollow" target="_blank">Keyword Shitter</a> <br /> <p>اداة مجانية رائعة لتوليد كلمات مفتاحية طويلة (Long Tail Keywords) .</p> <br /> <a href="https://soovle.com/" rel="nofollow" target="_blank">Soovle</a> <br /> <p>أداة مجانية لتويد الكلمات المفتاحية القصيرة ( Short Tail Keywords ) .</p> <br /> <a href="https://www.google.com/" rel="nofollow" target="_blank">Google جوجل</a> <br /> <p>أهم اداة مجانية يمكنك استخدامها لتحسين محركات البحث هي في الحقيقة محرك البحث Google نفسه ، حيث ستسطيع من خلاله الحصول على الكلمات المفتاحية القصيرة والطويلة ، وستتمكن من تحليل المنافسين في مجالك ، فباستخدامك لمحرك البحث جوجل في ايجاد الكلمات المفتاحية ، من الطبيعي ان تتصدر نتائج البحث في الكلمة المفتاحية التي تريد ، وبصراحة هذه المعلومة مهمة جدا لكل مبتدئ وخبير في مجال السيو ، فلك ان تحصل على الكثير من المعلومات فقط من خلال محرك البحث جوجل .</p> <br /> <a href="https://developers.google.com/speed/pagespeed/insights/" rel="nofollow" target="_blank">Google Page Speed Insights</a> <br /> <p>أداة مجانية مقدمة من شركة Google تهدف إلى قياس سرعة الموقع الخاص بك ، مع تحليل المشاكل الخاصة بسرعة موقعك الويب .</p> <br /> <a href="https://www.brokenlinkcheck.com/" rel="nofollow" target="_blank">Broken Link Check</a> <br /> <p>هذه الأداة المجانية مهمة جدا ، فهي تقوم بتحليل جميع <a href="https://zonezol.blogspot.com/2020/12/Delete-broken-links.html" target="_blank">الروابط المعطلة</a> المتواجدة في الموقع الخاص بك ، وبالتالي يمكنك إزالتها بكل سهولة .</p> <br /> <h2>3 نصائح لكتابة مقال احترافي يتوافق مع شروط السيو</h2> <br /> <p style="font-weight: bold;">ابتعد عن النوافذ المنبثقة popup</p> <br /> <p>اقصد بالنوافذ المنبثقة هي تلك التي تظهر في بداية دخول الزائر لموقعك ، فعناكب محركات البحث تكره هذه الميزة وستعاقب الموقع الخاص بك ، لذلك احرص قدر الإمكان على تجنبها ، إن اردت الحفاظ على زوار وعملاء مستمرين .</p> <br /> <p style="font-weight: bold;">لماذا تعتبر الأسئلة أفضل أنواع العناوين ؟</p> <br /> <p>قم بكتابة أحد العناوين كسؤال يكثر تكراره في مختلف مواقع الويب ، ثم قم بالإجابة على هذا السؤال في أول سطر بعد العنوان ، بتلك الطريقة من الممكن ان تتصدر نتائج البحث الخاصة بمحتوى السؤال .</p> <br /> <p style="font-weight: bold;">عناوين URL القصيرة هي الأفضل</p> <br /> <p>حسب دراسات كثيرة أجراها متخصصون في الـSEO تعتبر عناوين URL القصيرة ، هي الأسهل في الكتابة والأسرع في التذكر ، لذلك حاول قدر الإمكان من جعل عناوينك سهلة الحفظ ، مما سيسهل على الزائرين الرجوع إليها في أي وقت .</p> <br /> <h2>ماهي النتيجة رقم صفر Featured Snippet ؟</h2> <br /> <p>Featured Snippet أو النتيجة رقم صفر ، هي نتيجة البحث التي تظهر بشكل مكبّر والتي تكون أول نتيجة في محرك البحث ، لك ان تعلم ان عدد النقرات على النتيجة رقم صفر من الممكن ان يزيد بنسبة 65% ، وبصراحة جميع المهتمين في مجال السيو ، يحلمون بالوصول لهذه النتيجه في محركات البحث .</p> <br /> <p>وحسب دراسة قامت بها شركة Semsursh المتخصصة في السيو ، ان أكثر من 11% من نتائج البحث ، أصبحت تتوفر على ميزة Featured Snippet ، فهي باختصار تعتبر أعلى القمة في نتائج محرك البحث .</p> <br /> <p>ومن الجدير بالذكر أن أفضل طريقة يمكنك بها الوصول للنتيجة رقم صفر ، هي بتصدرك نتائج البحث على شكل سؤال معين ، تقوم بالإجابة عليه في أول سطر بعد العنوان .</p> <br /> <p>لذلك ركز على إضافة العديد من الاسئلة في مقالتك ، مع جواب مختصر لها في بداية السطر ، فبذلك ستزيد من نسبة حظك في الظهور كنتيجة تحمل الرقم صفر Zero .</p> <br /> <p>ولك ان تعلم انه بهذه الطريقة ستزيد من فرصة تصدرك لنتائج البحث الخاصة بالبحث الصوتي بنسبة 40% ، وذلك بحسب احصائيات شركة Backlinko الشهيرة .</p> <br /> <p>وقمت بذكر هذه الميزة في آخر المقال لعدة أسباب منها :</p> <br /> <ol> <li>انك لن تستطيع الوصول للنتيجة رقم 0 مالم تتصدر أحد أول 10 نتائج في ترتيب محركات البحث .</li> <li>غالبا يتم تقديم المواقع الكبيرة والمشهورة جدا ، فحتى لو كان مقالك مكتمل السياق والأركان ، من الممكن ان تقوم عناكب محركات البحث بتجاهله وفقط لأن موقعاً مشهوراً قام بالكتابة في نفس موضوع مقالك .</li> <li>لاتحاول التركيز على هذه النقطة فقط و<span style="color: #c30909;">تجاوز حدودك</span> ، فالحديث عن هذا الموضوع فقط لن يظهر لك النتيجة الكاملة ، بل عليك إجراء التجارب الخاصة بك أيضاً ، فقد تكتشف بعض المعلومات التي لم نقم بتغطيتها عن هذه النقطة الغامضة .</li> </ol> <br /> <h2>افضل 10 اسرار لتحسين محركات البحث في بلوجر</h2> <br /> <ol> <li>اعتمد على جوجل كمصدر أساسي في جلب الزيارات ، وأيضا في تعلم تحسين محركات البحث .</li> <li>قم بكتابة مقالات بأكثر من طريقة ، وبذلك ستتعلم التفريق بين أنواع المقالات التي تستطيع تصدر نتائج البحث بها .</li> <li>كتابة مقال واحد بجودة عالية أفضل من كتابة 50 مقال بجودة سيئة .</li> <li>كلما كان المحتوى أطول في عدد الأحرف ، كلما زادت احتمالية تصدره لنتائج محركات البحث ، ولا أقصد المبالغة ، وإنما الجودة .</li> <li>من طبيعة جوجل أن تعطي الأولوية للمحتوى الطويل لأن جوجل تريد إظهار النتائج المثالية لمستخدميها .</li> <li>اغتنم فرصتك ، فبمعرفتك بعوامل السيو الحالية ستكون قادر على اختيار المحتوى الذي يمكنك تصدر نتائج البحث من خلاله بمقال بسيط لايتجاوز الـ300 كلمة .</li> <li>واكب التحديثات الجديدة لجوجل ، فكما ان مصدرك هو جوجل كذلك التحديثات الجديدة ، كلما كنت أسرع في الاستجابة لها ، زادت فرصة وضع بصمتك الجديدة ضمن نتائج محركات البحث .</li> <li>كوّن فريق عمل سرّي ، وليكن مكونا من 2 أو 3 أصدقائك ، ممن لديهم الخبرة في مجال السيو seo ، وقم بتبادل الخبرات معهم فذلك سيزيد من سرعة حصولك على معلومات وأفكار جديدة باستمرار .</li> <li>كن متميزا ولاتتبع الاساليب التقليدية ، فقد تكتشف أساليب وطرق جديدة تسيطر بها على عناكب محركات البحث .</li> <li>خيركم من تعلم القرآن وعلمه ، قم بمشاركة خبرتك ومعلوماتك مع من يحتاجها ، فلاتبخل عليهم ، وبصراحة يقوم الخبراء غالباً بكتمان أسرار تحسين محركات البحث لأنفسهم ، فلاتكن مثلهم وانصح بها غيرك .</li> </ol> <br /> <p>في النهاية كما ان هنالك أسرار لايجوز الإفصاح عنها ، حاول قدر الإمكان من التفريق بين مايجوز نشره ، وما يجب عدم ذكره ، فلاتختر أحد النوعين وإنما اعمل بكليهما .</p> <br /> <p>بصراحة قمت بكتابة هذا المقال في العديد من الجلسات والأيام ، فقط ليصلك في أبسط وأوضح صورة ممكنة ، فلاتبخل علينا بكلمة طيبة ، وشاركه مع أصدقائك .</p> <br /> <p>اجعل <span style="color: #c30909;">تجاوز حدودك</span> شعارا لك في الأيام القادمة ، وستسيطر بذلك على هذه الروبوتات الصغيرة ، التي تظن انه بإمكانها السيطرة علينا نحن البشر .</p> <br /> <p>كتبت هذه المقالة تحت شعار <span style="color: #c30909;">تجاوز حدودك </span>.</p> <br /> <p>رحلة كتابة مقال سيو بلوجر أسرار تحسين محركات البحث في بلوجر دليل شامل بالفيديو</p> <br /> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/_zyacr9k7Hc?rel=0" width="640" youtube-src-id="_zyacr9k7Hc"></iframe> <br /> <p>اقرا أيضا <a href="https://zonezol.blogspot.com/2021/01/archive-blogger-feedburner.html" target="_blank">طريقة ارشفة المواضيع في بلوجر مع سر في نهاية المقال يمكنك من تسريع الارشفة</a></p> <br /> <p>المصادر</p> <br /> <a href="https://www.alrab7on.com/seo-guide" rel="nofollow" target="_blank">Alrab7on</a> <br /> <a href="https://mosawi9.com/seo" rel="nofollow" target="_blank">Mosawi9</a> <br /> <a href="https://ar.wikipedia.org/wiki/%D8%AA%D8%AD%D8%B3%D9%8A%D9%86_%D9%85%D8%AD%D8%B1%D9%83%D8%A7%D8%AA_%D8%A7%D9%84%D8%A8%D8%AD%D8%AB" rel="nofollow" target="_blank">Wikipedia</a> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com2tag:blogger.com,1999:blog-1552951967015435344.post-4210038234785662322020-12-20T03:07:00.024+02:002021-01-24T17:38:24.775+02:00<article class="onezol-article"> <p>هل انت مدوّن جديد في بلوجر وتريد تعلم كتابة مقال في بلوجر من الصفر ؟</p> <p>هل تكتب مقالات بكثرة ولكن لاتظهر مقالاتك في محركات البحث ؟</p> <br /> <p>مقال أسرار كتابة مقال في بلوجر ، هو دليل شامل بكل ماتعنيه الكلمة ، فبقرائتك لهذا المقال ستتمكن من تعلم الطريقة الصحيحة لكيفية كتابة مقال حصري من الصفر حتى الاحتراف ، وستبدأ مقالاتك في الظهور في محركات البحث وربما ستتصدر النتائج وبدون معرفتك بالسيو seo ، ليس ذلك فقط وإنما خلاصة كاملة لتجربتي الخاصة في كتابة المقالات على منصة بلوجر والتدوين عموما .</p> <br /> <p>كتابة المقالات في بلوجر هي عملية تتطلب الكثير من الوقت والمجهود في البداية ، ولكن المدوّن المحترف هو فقط من يتجاوز جميع الصعاب ، ويشقّ طريقه نحو القمة ، لذلك دعونا نبدأ معاً من الصفر ، لنتعلم كيف نكتب مقال للمدونة ، وسنصل بإذن الله إلى القمة .</p> <br /> <a><img alt="أسرار كتابة مقال في بلوجر دليل شامل" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzzt5wPFD8RMH5kotBqkRXc3mzw9VIh78_NGqPvil_cF8aakAujBUVCpqQ7vnE2Z57J_ni31jc4h_w9UCt_7hY8kP-HyE91K4jpuIBA7dRl-zesuXVY6fivzI39fhQ6FHT-FalLcph8kw/s16000-rw/secrets-of-writing-an-article-on-blogger-comprehensive-guide.webp" title="أسرار كتابة مقال في بلوجر دليل شامل" /></a> <br /> <h2>كيفية كتابة مقال في بلوجر من الصفر حتى الاحتراف</h2> <br /> <p>مدونة بلوجر Blogger : هي منصة تدوين تابعة لشركة جوجل Google ، تهدف إلى اتاحة خدمة إنشاء المدونات المجانية ، بحيث يكون من السهل على المدونين عدم الإنشغال بالجوانب البرمجية والتركيز على كتابة التدوينات الإلكترونية ، في مختلف المجالات .</p> <br /> <p>قبل كتابتك لأي تدوينة في مختلف مواقع الويب ، من المهم ان تكون لديك خبرة ولو قليلة في التالي :</p> <br /> <h3>قواعد كتابة المقالات في مواقع الويب بشكل عام</h3> <br /> <p>كتابة المقال امر معقّد في البداية ولكنه ممتع ومثير في النهاية ، لذلك يلجئ الكثير من الناس إلى الالتحاق بالدورات والكورسات التدريبية لتعلم كيفية كتابة المقالات ، وبالرّغم من ان الحديث عن قواعد كتابة المقالات قد يحرفنا عن الهدف الرئيسي للمقال ، ولكن كان لابد من التذكير ولو ببعضها .</p> <br /> <h4>ماهو المقال ؟</h4> <br /> <p>المقال هو مجموعة من العناوين ، والنصوص ، والصور ، والفيديوهات الهادفة ، والتي تكون مرتبة ومنسّقة في مجموعة من الأسطر .</p> <br /> <p>فمن التعريف يتّضح ان لكل مقال هدف رئيسي يجب اتمامه بأفضل صورة ممكنة ، وليس أطول صورة كما نرى في حشو الكلمات من بعض المدوّنين .</p> <br /> <h4>ماهي مكونات المقال ؟</h4> <br /> <p>العنوان ، المقدمة ، المحتوى أو منتصف الموضوع ، الخاتمة .</p> <br /> <p>وبسقوط المقدمة أو الخاتمة ، فلن يهتم محرك البحث بذلك كثيرا ، ولكنّ مقالك سيصبح ركيكا لدى زوار المدوّنة ، فأحسن استخدامهم .</p> <br /> <h4>ماهي أنواع المقالات ؟</h4> <br /> <p>يوجد الكثير من أنواع المقالات مثل : مقالات صحفية ، علمية ، أكاديمية ، قصيرة ، طويلة ، جدلية ، قصص ، روايات ، إلكترونية ، مقالات حصرية ...</p> <br /> <p>ولكل نوع من أنواع المقالات طريقة سرد ينفرد بها عن الآخر ، ولكن يبقى أساس البناء هو المكون الأساسي لجميع أنواع المقالات .</p> <br /> <h3>ماهي أهم القواعد اللغوية في كتابة تدوينة لموقع ويب ؟</h3> <br /> <ol> <li>ان تكون لك معرفة مسبقة في قواعد اللغة العربية ، من رسم الحروف ، و الكلمات ، والحركات ، وعلامات التنوين ، والترقيم ، والإعراب ...</li> <br /> <li>لاتقع في الكثير من الأخطاء الإملائية ، فعناكب البحث تدقق في تفاصيل رسم الكلمات ، وحتى لو ظهر مقالك في محرك البحث ، فلن يستطيع المنافسة ضمن نتائج البحث .</li> <br /> <li>ابتعد عن الأساليب المبهمة ، من سجع ومجاز ونحوه ، فمحركات البحث تحب الكلمات البسيطة .</li> <br /> <li>استخدم لغة بسيطة يفهمها الكبير والصغير ، فحتى لو كنت مدرس لغة عربية ، فعليك الابتعاد عن المرادفات الصعبة ، والقوية ، واكتفي بتلك السهلة ، والمفهومة ، أي التي يتحدث بها عامة الناس .</li> <br /> <li>لاتكتب بلكنتك العامية ، فلن يفهم ، لا الزائر ولا محركات البحث ، عن ماذا تتحدث !!! .</li> <br /> <li>اكتب باللغة العربية الفصحى ، أي تلك التي تتحدث بها قنوات التلفاز ، مثل الجزيرة ، والعربية ، وبالأخص سبيستون ، ومن هنا أوجّه تحيتي لقناة سبيستون ، لأنها لعبت دور المعلم اللغوي الصحيح للملايين من شباب المستقبل .</li> </ol> <br /> <h3>تعلم واجهة بلوجر الجديدة في تحرير المشاركات</h3> <br /> <p>يوفر محرّر مشاركات بلوجر بيئة عمل تحتوي على الكثير من الأدوات المهمة لكتابة التدوينات ، حيث تمكنك من التعديل على التدوينات بكل احترافية ، لذلك يجب عليك انت تفهم جيدا طريقة استعمال محرر المشاركات بما يناسب احتياجات موضوعك ، ولك ان تواكب التحديثات المستمرة على مدونة بلوجر .</p> <br /> <p>تعلم واجهة بلوجر الجديدة في تحرير المشاركات بالفيديو</p> <br /> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/1rki7koeXYg?rel=0" width="640" youtube-src-id="1rki7koeXYg"></iframe> <br /> <a href="https://zonezol.blogspot.com/2020/08/blogger-advice-robot-txt.html" target="_blank">كيف يمكنك إضافة ملفات الروبوت تكست أخطاء يتجاهلها أغلب المدونين في بلوجر Robot.txt</a> <br /> <a href="https://zonezol.blogspot.com/2020/10/WebP.html" target="_blank">جميع طرق تحويل الصور إلى WebP واستخدامها في بلوجر شرح كامل</a> <br /> <a href="https://zonezol.blogspot.com/2020/12/how-to-create-blogger-blog-for-free.html" target="_blank">كيفية انشاء مدونة بلوجر مجانية بطريقة احترافية للمبتدئين 2021</a> <br /> <h3>خطوات كتابة مقال حصري في بلوجر من الصفر</h3> <br /> <p>يلجئ الكثير من المدونين في البداية إلى سرقة ، وإعادة صياغة المقالات ، ولك ان تعلم ان عناكب البحث ذكية بالقدر الكافي لمعرفتها وكشفها عن المحتوى المكرر ، لذلك ابعد هذه الفكرة عنك ، وابدأ بتعلم الخطوات الصحيحة في كتابة مقال حصري ، يعبر عن ما تملكه من أفكار استثنائية وجديدة تضيء بها أعين القرّاء .</p> <br /> <p>كيف تكتب موضوع في بلوجر بالفيديو</p> <br /> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/K7XnGme1YaM?rel=0" width="640" youtube-src-id="K7XnGme1YaM"></iframe> <br /> <h4>كيف تكتب عنوان المقالة باحترافية ؟</h4> <br /> <p>عدد أحرف العنوان الظاهر في محرك البحث هو 65 حرف فقط ، ومابقي من أحرف يتم استبدالها بـ... ، لذلك احرص على ان تكون بداية العنوان معبرة عن مجمل المقال ، وجاذبة للزوار .</p> <br /> <h4>أفكار لكتابة مقدمة مقال في بلوجر باحترافية</h4> <br /> <p>يختلف الزوار عن بعضهم ، فالبعض يريد الوصول لمعلومة معينة على وجه الخصوص وسيتجاهل المقدمة ، أما البعض الآخر وهو من يقرأ لأجل المتعة ، أو لزيادة الحصيلة العلمية ، فإن لم تجذبه المقدمة فسيضيع مجهودك هباءا منثورا ، لذلك احرص على ان تحتوي المقدمة على أسئلة يتم تكرارها بكثرة ، وأجب عنها لاحقا ، أو قم بتلخيص بعض العناوين الفرعية للمقال في عدة أسطر بسيطة .</p> <br /> <h4>نصائح في كتابة محتوى على بلوجر</h4> <br /> <ul> <li>قم بتقسيم المقال الخاص بك إلى عناوين فرعية ، وأسفل كل عنوان فرعي يمكنك الدخول في تفاصيل أكثر عن طريق العناوين الثانوية .</li> <br /> <li>مثلا ان كان العنوان يتحدث عن طريقة كتابة مقال لموقع ويب ، فستكون العناوين الفرعية هي تعريف ومكونات المقال ، طرق الربح من المقالات ، مواقع بيع المقالات ، منصات كتابة المقالات وهكذا .</li> <br /> <li>ابتعد عن التنسيقات غير الضرورية فهي تضر مقالتك ، وذلك بزيادة حجم أكواد الصفحة .</li> </ul> <br /> <h4>طريقة كتابة خاتمة في بلوجر</h4> <br /> <p>اكتب ملخصا لجميع الأفكار التي قمت بذكرها ، ستساعد بذلك القارئ على ربط الأفكار ببعضها البعض ، قم أيضا بربط بعض المقالات ذات الصلة بموضوعك ، سيساعد ذلك في مواصلة الزائر لقراءة المواضيع الأخرى المرتبطة بمحتوى المقال .</p> <br /> <h3>كتابة مقال يظهر في محركات البحث</h3> <br /> <p>لإظهار مقالك ضمن نتائج محرك البحث لابد لك من إرساله بلغة مفهومة ، تستطيع من خلالها عناكب البحث قراءة المقال ، ومن ثم فهم محتوى المقال ، وفي النهاية إظهاره في محرك البحث ، وسأوضح لك كيف تتم هذه العملية في النقطة التالية .</p> <br /> <h4>التسجيل في أدوات مشرفي محركات البحث</h4> <br /> <p>يوجد العديد من محركات البحث التي ستحتاج إلى التسجيل بها ، ومن أهمها أدوات مشرفي المواقع الخاصة بجوجل <a href="https://zonezol.blogspot.com/2020/07/google-search-console.html" target="_blank">Google Search Console</a> ، وأيضا الخاصة ببينج <a href="https://zonezol.blogspot.com/2020/07/bing-webmaster.html" target="_blank">Bing Webmaster</a> ، وياندكس وغيرها .</p> <br /> <h4>إرسال المقال لعناكب محركات البحث</h4> <br /> <p>في هذه الخطوة ستقوم بإرسال رابط واحد يحتوي على جميع الروابط الخاصة بمقالاتك ، وبالتالي ستزحف عناكب البحث إليها جميعا ، ومن ثم ستؤرشفها وتظهرها ضمن نتائج البحث ، لذلك تأكد من ارسالك لخريطة الـSitemap لكل أداة من أدوات مشرفي المواقع .</p> <br /> <h4>كيف سيظهر المقال ضمن نتائج محرك البحث ؟</h4> <br /> <p>بعد إرسالك لخريطة الموقع ، كل ماعليك هو إنتظار النتائج ريثما تقوم عناكب البحث من الدخول للتدوينة ، ومن ثم قراءتها وفهمها ، وفي النهاية ستظهرها ضمن نتائج محرك البحث .</p> <br /> <h2>10 أسرار لكتابة مقال في بلوجر</h2> <br /> <ol> <li>اجعل من الجودة شعارا لك قبل كل شيء ، فلك ان تكتب 300 كلمة بجودة عالية ، أفضل من ان تكتب 2000 كلمة بجودة سيئة .</li> <li>في البداية ان كانت مدونتك جديدة ، فغالبا لن تحصل على زيارات في أول 5 أشهر وبعد ذلك ستبدأ الزيارات تنهال عليك من كل حدب وصوب ، لذلك ركز على شيء واحد ، وهو كيفية كتابة مقال متوافق مع شروط السيو seo ، وادرس الموضوع جيدا .</li> <li>لاتهمل مواضيعك القديمة وقم بتجديدها باستمرار ، وباتباعك للجودة العالية فسيكون من السهل والممتع لك تعديل المقالات القديمة .</li> <li>اكتب في مجالك فقط ، وابتعد عن كل المواضيع التي تكون خارج تخصصك ، فإن كان أغلب زوارك أذكياء ، فعناكب البحث عبقرية .</li> <li>قم بعمل سلسلة تدوينات لعنوان رئيسي كبير ، وقم بتقسيمها لعدة مقالات بعناوين أصغر ، ومن ثم قم بربطها ببعضها البعض على شكل دروس .</li> <li>إقرأ جيدا قبل ان تكتب ، فحتى ان كانت لديك خبرة مسبقة عن الموضوع ، فلن تضر قرائتك لمقالين أو ثلاثة حول موضوعك ، وبالعكس قد تنتبه لنقطة ، لربما كان من الممكن ان تغفلها لولا قراءة المقالات .</li> <li>كل كاتب جيد بداخله قارء ومستمع محترف ، استخدم أمثال وحكم مشهورة وأدخلها كإقتباسات نصية داخل مقالاتك .</li> <li>قم بجمع مجموعة من الأسئلة المتكررة وأجب عنها في شكل فقرات .</li> <li>قم بالترويج لموضوعاتك في مواقع التواصل الإجتماعي ، ستكسب بذلك قاعدة جماهيرية لمدونتك .</li> <li>قم بإتاحة الفرصة لزوارك بالاشتراك في خدمات ارسال الاشعارات والرسائل الخاصة بالمقالات الجديدة و المنشورة في مدونتك ، سواء عن طريق <a href="https://zonezol.blogspot.com/2020/08/blogger-Mailing-list.html" target="_blank">القائمة البريدية لبلوجر</a> ، أو عن طريق الايميل ، أو عبر <a href="https://zonezol.blogspot.com/2020/08/foxpush-onesignal.html" target="_blank">إشعارات المتصفح</a> .</li> </ol> <br /> <h2>كيفية كتابة مقال احترافي بلغة Html في بلوجر Blogger بالفيديو</h2> <br /> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/8mmPHgeMaHI?rel=0" width="640" youtube-src-id="8mmPHgeMaHI"></iframe> <br /> <p>وبذلك نكون انتهينا من الجزء الأول وهو كيفية كتابة مقال في بلوجر ، وهي الخطوة الأسهل في كتابة المقال .</p> <br /> <p>رحلة كتابة المقال الجزء الأول</p> <iframe class="BLOG_video_class" allowfullscreen="" youtube-src-id="DZnj2occrWM" width="640" height="360" src="https://www.youtube.com/embed/DZnj2occrWM?rel=0"></iframe> <br /> <p>انتقل للجزء الثاني <a href="https://zonezol.blogspot.com/2020/12/blogger-seo-secrets-comprehensive-guide.html" target="_blank">أسرار تحسين محركات البحث في بلوجر دليل شامل</a></p> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com2tag:blogger.com,1999:blog-1552951967015435344.post-82398999142802126412020-12-07T17:54:00.009+02:002021-01-16T16:03:56.400+02:00<article class="onezol-article"> <h1>أهمية إزالة الروابط المعطلة من مواقع الانترنت وطريقة حذفها بالكامل</h1> <br /> <p>من أهم الأمور التي تؤثر بشكل سلبي على صحة ومصداقية موقعك سواء لدى محركات البحث أو زوار مدونتك هي كثرة الروابط المعطلة والمحذوفة التي بداخل موقعك الالكتروني</p> <br /> <p>وتعتبر عملية ازالة الروابط المعطلة بشكل دوري عملية هامة جدا لتحسين السيو وتحسين ارشفة موقعك حيث يجب على كل من يعمل في مجال الانترنت والمواقع أن يتقنها ويفهمها جيدا</p> <br /> <p>يندرج تحت اسم الروابط المعطلة الكثير من الأمور التي ستساعدنا على فهم طريقة وآلية ازالة الروابط المعطلة بشكل كامل ولكن قبل ذلك دعونا نتعرف أولا على التالي</p> <br /> <a><img alt="أهمية إزالة الروابط المعطلة من مواقع الانترنت وطريقة حذفها بالكامل" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiH6YC1whXgKCh3T9KZUOjqWHkNsyf7J-NrmSY8W0_uziiapifh62oXZUZkFqv3KR9Uw2-Dbm-nwRB4uymOakXddploOXIOfcb69F4lDgh93XWQCwegQB2-SOq8Tpqj_h-fPVYjR17tT8/s16000-rw/broken-links.webp" title="أهمية إزالة الروابط المعطلة من مواقع الانترنت وطريقة حذفها بالكامل" /></a> <br /> <h2>ماهي الروابط المعطلة وكيف ستؤثر على موقعنا ؟</h2> <br /> <p>الروابط المعطلة أو المحذوفة ( Broken links ) هي الروابط التي تكون موجودة ضمن مواضيعك أو صفحات مدونتك أو حتى بمحركات البحث والتي لاتعمل عند الضغط عليها</p> <p>وعندما يقوم الزائر بالدخول تكون الصفحة غير موجودة مما يسبب في ظهور رسالة الخطأ (404) أي هذه الصفحة غير موجودة وبذلك سيتأثر موقعك من ناحية سيقل ترتيب وظهور موقعك على محرك البحث ومن ناحية أخرى ستحصل على تجربة زائر سلبية وكل ذلك يحدث عند الدخول إلى الرابط الذي يتواجد به الخطأ</p> <br /> <p>كما ويوجد العديد من الأنواع الخاصة بالروابط المعطلة والتي يمكننا تلخيصها في التالي</p> <br /> <h3>أهمية إزالة الروابط المعطلة من جميع محركات البحث</h3> <br /> <p>تحدث هذه المشكلة غالبا عند حذفك لإحدى المقالات التي تكون ظاهرة في محركات البحث وكلما تصدر الرابط المعطل النتائج كانت العواقب وخيمة لصحابها المسكين</p> <p>تعمل عناكب البحث على تنظيف محرك البحث من الروابط المعطلة تلقائيا وبدون أي تدخل يدوي منك حيث يتم حذف حوالي 3روابط معطلة مرة كل 6 أشهر مما سيساعدك قليلا في التخلص من الروابط المعطلة</p> <p>ولكن أثناء هذه الفترة سيكون الرابط المعطل ظاهرا للزوار وسيؤثر بشكل كبير على ظهور مدونتك في محركات البحث في المرات القادمة</p> <p>ولذلك أنصحك في هذه الحالة بعدم الإعتماد على عناكب البحث وحذف الروابط المعطلة يدويا ليس فقط لدى جوجل وانما لجميع محركات البحث</p> <br /> <p>ويمكنك ذلك عن طريق أدوات مشرفي المواقع الخاصة بكل محرك بحث كل على حدة</p> <p>صحيح ان هذه العملية تتطلب الكثير من الوقت ولكن سيتحسن ترتيب موقعك لدى محرك البحث</p> <br /> <h3>أهمية إزالة الروابط المعطلة من داخل التدوينة</h3> <br /> <p>لك ان تعلم ان الروابط داخل التدوينات تنقسم لروابط داخلية وخارجية</p> <p>وعندما تقوم بتغيير أو حذف إحدى روابط هذه المقالات ستتأثر جميع التدوينات المرتبطة بالمقالة المحذوفة أي بحذفك لمقالة واحدة جميع الزوار الذين يتصفحون احدى التدوينات المرتبطة سيشتكون وسيغضبون من تصرفك وبصراحة قد تفقد الكثير من العملاء وكل ذلك بسبب رابط معطل واحد فقط</p> <p>ولك ان تتخيل زيادة معدل الإرتداد ( قلة الوقت المنقضي للزائر داخل موقعك) حيث سيؤدي ذلك إلى تقليل الثقة بين قيمة صفحتك وبين عناكب البحث وهذه إحدى عوامل السيو التي يغفلها الكثير</p> <p>وبنفس الطريقة للروابط الخارجية المعطلة ولكن بنسبة ضرر أقل</p> <h2>كيف يمكنك إزالة الروابط المعطلة من موقعك بشكل كامل</h2> <br /> <p>الآن انا مطمئن ان الأغلبية يريدون التخلص من هذه الروابط المزعجة وتخطي حجم الضرر الكبير الذي قد يقع عبئا علينا بدون ان ندركه بسابق انذار</p> <p>احب ان اطمئنكم ان هنالك الكثير من الأدوات والمواقع التي ستساعدنا أولا في العثور على هذه الروابط المعطلة وثانيا معرفة مصدرها وسيصبح كل ماعلينا القيام به هو حذفها إما عن طريق أدوات مشرفي المواقع أو من داخل التدوينة نفسها وسنعمل على ثلاث خطوات رئيسية</p> <br /> <h3>الخطوة الأولى : طريقة العثور على روابطنا المعطلة والمحذوفة</h3> <br /> <p>أحد أفضل المواقع المتخصصة في البحث عن جميع الروابط المعطلة و المحذوفة والتي تظهر بها بعض الأخطاء مثل 404 أو 401 هو موقع <a href="https://www.brokenlinkcheck.com/" rel="nofollow" target="_blank">Broken Link Check</a> سيساعدك هذا الموقع في إجراء فحص كامل لموقعك ومن المؤكد انه سيأخذ وقتا طويلا في البحث اذا كان يتواجد بموقعك الكثير من الروابط المعطلة ولكن بعد ذلك ستتمكن إصلاح جميع الروابط المعطلة بسهولة أكبر</p> <p>إليك بعض العلومات التي ستساعدك على قراءة التقرير بعد إجراء الفحص</p> <ol style="text-align: right;"> <li>url المقصود به رابط المقالة أو التدوينة التي بموقعك والتي يتواجد بداخلها الرابط المعطل</li> <li>src المقصود به رابط المصدر للصفحه والذى يحتوى على الرابط المعطوب وعند الضغط عليه سينقلك لمصدر الصفحة التي يتواجد بها الخطأ</li> <li>404 صفحة الخطأ او نوع الخطأ الذى يظهر عند الضغط على الرابط المعطل</li> </ol> <br /> <h3>الخطوة الثانية : حذف الروابط المعطلة من جميع محركات البحث</h3> <br /> <p>ستحتاج في هذه الخطوة للدخول لجميع أدوات مشرفي المواقع التي سبق لك تسجيل موقعك بها وعلى رأسهم <a href="https://zonezol.blogspot.com/2020/07/google-search-console.html" target="_blank">Google Search Console</a> حيث يعتبر الأكثر طلبا في البحث لذلك وبعد دخولك لأدوات مشرفي المواقع الخاصة بـGoogle قم بالتوجه لاختيار حذف الروابط المعطلة ومن هناك ستقوم بإرسال طلب لإزالة جميع روابطك المعطلة</p> <p>للملاحظة ستتمكن من استرجاع الرابط المعطل خلال مدة أقصاها 6 أشهر وبعد انقضاء هذه المدة سيختفي الرابط للأبد</p> <p>بنفس الطريقة قم بحذف الرابط المعطل من <a href="https://zonezol.blogspot.com/2020/07/bing-webmaster.html" target="_blank">Bing WebMaster</a> وغيره من محركات البحث العالمية</p> <p>تذكر ان هذه الخطوة ستحتاجها فقط بالنسبة للروابط المأرشفة والتي تظهر في محركات البحث</p> <p>تختلف آلية الحذف لكل أداة حيث من الممكن ان يحذف الرابط مباشرة بعد إرسالك لطلب حذف الرابط المعطل ومن الممكن أيضا ان يأخذ بعض الوقت</p> <br /> <h3>الخطوة الثالثة : إصلاح الروابط المعطلة من داخل التدوينة</h3> <br /> <p>إذا كنت من مستخدمي منصة بلوجر أو ورد بريس ستحتاج إلى الدخول لكل تدوينة بها رابط معطل ولك ان تعلم ان الرابط المعطل قد يتواجد بداخل <a href="https://zonezol.blogspot.com/2020/08/img.html" target="_blank">الصور</a> أو النصوص أو <a href="https://zonezol.blogspot.com/2020/10/youtube-videos.html" target="_blank">الفيديوهات</a> لذلك بعد الدخول لإحدى التدوينات قم بالتبديل إلى وضع عرض html ثم قم إما بحذف أو استبدال جميع الروابط المعطلة والتي ستظهر في تقرير الفحص الخاص بك</p> <p>بعد الإنتهاء قم بالرجوع للتقرير ثم قم بالتعديل على المقالة الثانية والثالثة الى ان تنتهي من التعديل على جميع المقالات التي يتواجد بها روابط معطلة</p> <br /> <h3>شرح إزالة جميع الروابط المعطلة من مدونة بلوجر بالفيديو</h3> <br /> <iframe class="BLOG_video_class" allowfullscreen="" youtube-src-id="n5UQGVBJux0" width="640" height="360" src="https://www.youtube.com/embed/n5UQGVBJux0?rel=0"></iframe> <br /> <p>للتوجه لموقع <a href="https://www.brokenlinkcheck.com/" rel="nofollow" target="_blank">Broken Link Check</a></p> <br /> <p>في الختام لاتنس ترك تعليق بأسفل المقال</p> <br /> <p>إقرأ أيضا</p> <br /> <a href="https://zonezol.blogspot.com/2020/08/blogger-advice-robot-txt.html">الطريقة الصحيحة لإضافة ملفات الروبوت ببلوجر Robot.txt</a> <br /> <a href="https://zonezol.blogspot.com/2020/07/meta-tags.html">إضافة أكواد الميتا تاج بطريقة إحترافية لإشهار مدونتك على بلوجر meta tag keyword</a> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com1tag:blogger.com,1999:blog-1552951967015435344.post-81040304685714292192020-12-04T16:58:00.009+02:002021-01-16T16:03:34.529+02:00<article class="onezol-article"> <h1>شرح طريقة اضافة زر أداة الواتساب لمدونة بلوجر بسهولة تامة WhatsApp plugin مجانا</h1> <br /> <p>اذا كنت تملك متجر الكتروني وأردت التواصل مع عملائك مباشرة ومن مختلف الدول فأول تطبيق سيساعدك على الاتصال مع زبائنك مباشرة هو تطبيق الواتس اب</p> <br /> <p>يعتبر الواتساب أحد اشهر تطبيقات التواصل الإجتماعي التي تمكننا من الدردشة والاتصال مع مختلف أنواع الجنسيات والأعمار حيث يتميز بسهولة وسرعة استخدامه</p> <br /> <p>اليوم سنتحدث عن طريقة بسيطة يمكنك من خلالها اضافة أيقونة اتصال الواتس اب وادراجها في موقعك الالكتروني سواءا كنت تستخدم الورد بريس ام بلوجر </p> <br /> <h2>كيفية اضافة أيقونة زر اتصال الواتس اب لموقعك WhatsApp</h2> <br /> <a><img alt="شرح طريقة اضافة زر أداة الواتساب لمدونة بلوجر بسهولة تامة Whats App plugin" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisodoweyrc4pUTs9t7Z9hiZuGc7R0U5VIIg54st5ah6Xk1eji4fqYDKKuNZAQogV8kFYSeNgkxT0cFjjzUTuosOvCU2UhG37OWLLtWKdzk90evVZ4I09yDBJL-MqyvWCPjjl0FekjD6r8/s16000-rw/whatsapp.webp" title="شرح طريقة اضافة زر أداة الواتساب لمدونة بلوجر بسهولة تامة Whats App plugin" /></a> <br /> <h3>اضافة زر الواتساب عن طريق أشهر مواقع الإضافات</h3> <br /> <p>يوجد الكثير من المواقع التي توفر أحدث وأفضل إضافات المواقع منها المدفوع والمجاني تماما</p> <br /> <p>وأحد أشهر هذه المواقع هو بالطبع <a href="https://elfsight.com/" target="_blank" rel="nofollow">Elfsight</a></p> <br /> <p>يتميز هذا الموقع بامكانية التحكم الكامل بالإضافة أي لن تحتاج لكتابة أي أكواد وانما ستختار الإضافة التي تناسبك وستقوم بالتعديل على الأجزاء التي تناسب احتياجاتك ومن ثم نسخ الأكواد ولصقها في موقعك مباشرة</p> <br /> <p>ولإضافة زر اتصال الواتساب قم بالدخول للموقع واختر اضافة الواتس اب من الشريط العلوي ومن ثم قم بالتعديل على مايناسبك من اسم الموقع ورقم الهاتف ثم في النهاية قم بالضغط على Save </p> <br /> <p>سيتم تحويلك لصفحة التسجيل بالموقع قم بالتسجيل واخيرا ستظهر لك أكواد الإضافة قم بنسخها ولصقها في جذر الموقع الخاص بك</p> <br /> <p><span style="color: #c30909; font-weight: bold;">ملاحظة</span>: هذه الطريقة مجانية تماما ولكن ستحتاج فيما بعد الى اشتراك شهري في الموقع عند تجاوز عدد الزيارات اليومية الحد المسموح به وهو 1000 زيارة يومية</p> <br /> <h3>اضافة اداة واتس اب عن طريق أكواد script جاهزة</h3> <br /> <p>باستخدامك لهذه الطريقة لن تحتاج الى اي اشتراك او تفعيل وانما <a href="https://www.mediafire.com/file/plfaitq8rl10fsv/زر+الواتس+اب.txt/file" target="_blank" rel="nofollow">هذه الأكواد</a> مجانية وصالحة لمدى الحياة</p> <br /> <p>كل ماعليك هو تحميل <a href="https://www.mediafire.com/file/plfaitq8rl10fsv/زر+الواتس+اب.txt/file" target="_blank" rel="nofollow">هذه الأكواد</a> ثم التعديل على رقم الهاتف واسم الشخص وأيضا الرسالة الترحيبية وأخيرا مكان ظهور الأداة اما اقصى اليمين right او أقصى اليسار left </p> <br /> <p>بعد ذلك قم بنسخ الأكواد كاملة والصقها في جذر مدونتك أو موقعك الالكتروني</p> <br /> <h2>لمشاهدة شرح اضافة زر اتصال واتساب الى مدونتك في بلوجر بالفيديو</h2> <br /> <iframe class="BLOG_video_class" allowfullscreen="" youtube-src-id="0hpftrQmJNY" width="640" height="360" src="https://www.youtube.com/embed/0hpftrQmJNY?rel=0"></iframe> <br /> <p>في الختام لاتنس ترك تعليقك أسفل المقال</p> <br /> <p>إقرأ أيضا</p> <br> <a href="https://zonezol.blogspot.com/2020/12/divide-pages.html">كيفية تقسيم الموضوع في بلوجر الى عدة صفحات أو تبويبات 2021 شرح كامل</a> <br /> <a href="https://zonezol.blogspot.com/2020/11/css-scroll-bar.html">تعلم تصميم شريط التمرير وإضافته الى بلوجر بسهولة وبأكواد Css فقط Scroll Bar</a> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com1tag:blogger.com,1999:blog-1552951967015435344.post-45088418464016127922020-12-03T15:05:00.011+02:002021-01-16T16:03:26.714+02:00<style> .onezol-button{ border: none; font-size: 17px; font-weight: normal; border-radius: 1px; width: 42px; height: 42px; text-align: center; line-height: 42px; text-decoration: none; background: #c30909; color: #fff !important; margin: 0 10px; display: inline-block; } .onezol-button-two{ border: none; font-size: 17px; font-weight: normal; border-radius: 50%; width: 42px; height: 42px; text-align: center; line-height: 42px; text-decoration: none; background: #c30909; color: #fff !important; display: inline-block; } .onezol-button:hover , .onezol-button-two:hover { background: #d81414; } </style> <article class="onezol-article"> <h1>كيفية تقسيم الموضوع في بلوجر الى عدة صفحات أو تبويبات 2021 شرح كامل</h1> <br /> <p>هل تبحث عن طريقة ممتعة ومسلية للزائر يمكنه من خلالها التنقل داخل نفس المقالة؟</p> <p>هل تريد الحصول على فرصة زيادة أرباح المدونة وأيضا زيادة وقت مشاهدة الصفحات وبطرق موافقة لسياسات أدسنس ؟</p> <br /> <p>تعتبر طرق تقسيم المقالات في بلوجر الى عدة صفحات من الطرق الرائجة في الآونة الأخيرة والتي كثر طلبها</p> <p>وفي الحقيقة يوجد أكثر من طريقة يمكنك من خلالها تقسيم مقالك الواحد الى عدة مقالات فهنالك طريقة تعمل بأزرار التالي والسابق ويوجد طريقة الترقيم وغيره من الطرق التي تختلف حسب الحاجة إليها</p> <br /> <p>سأشارك معك اليوم طريقة يمكنك من خلالها تقسيم الموضوع الواحد الى عدة مواضيع مع الاحتفاظ برابط المقالة نفسه</p> <p>حيث لن يتغير رابط المقالة بالانتقال الى الجزء الثاني والثالث مما يضمن لك عدم ظهور أي مشكلة في أدوات مشرفي المواقع أو جوجل أدسنس</p> <br /> <a><img alt="كيفية تقسيم الموضوع في بلوجر الى عدة صفحات أو تبويبات 2021 شرح كامل" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNuJE4a9gepu18H_lLwLvz9NTJA7qQQYbdF4Ld0qVac7L_k9fbWh_MCKDOIKZPmgF8NS5RnL3hpgCE0RtvpkAlZMeWt-gdENm0qPUowRvRXPenJYaKqxmkMbfnjcxbNQ3hBp7jGBEAMF8/s16000-rw/divide+pages.webp" title="كيفية تقسيم الموضوع في بلوجر الى عدة صفحات أو تبويبات 2021 شرح كامل" /></a> <br /> <h2>فكرة تقسيم الموضوع الى صفحات في بلوجر</h2> <br /> <p>فكرة هذه الاضافة بكل بساطة هو وضع بعض أزرار الانتقال أسفل المقال حيث تعمل هذه الأزرار على إخفاء واظهار أٌقسام المقال وعند النقر عليها لن يحتاج الزائر الى إعادة تحميل الصفحة للانتقال الى الجزء الثاني وانما سينتقل مباشرة حيث يتم تحميل الصفحة مرة واحدة فقط عند الدخول للمقالة نفسها</p> <br /> <h2>طريقة تركيب اضافة تقسيم المواضيع في بلوجر</h2> <br /> <p>قبل تركيب اضافة تقسيم المقالات في بلوجر ستحتاج الى معرفة جزئين أساسيين في الاضافة وهما</p> <ol> <li>الجزء الأول من الأكواد يحتوي على أقسام المقال حيث ستضع المقال الأول بداخل الكود الأول ونفس الشيئ المقال الثاني في الكود الثاني وهكذا</li> <li>ولك ان تعلم انه بنسخ ولصق أكواد المقال او زر الانتقال ستتمكن من التحكم في عدد أقسام المقال المراد عرضها للزائر</li> </ol> <p>والآن لتركيب الاضافة قم أولا بتحميل الأكواد حسب الأشكال التي تناسبك</p> <br /> <a class="onezol-button" href="https://www.mediafire.com/file/u1m8z08wf3c4awr/تقسيم+الموضوع+123.txt/file" rel="nofollow" target="_blank">1</a> <a class="onezol-button-two" href="https://www.mediafire.com/file/7349gxizppjf97w/تقسيم+الموضوع+دوائر.txt/file" rel="nofollow" target="_blank">2</a> <br /> <ul> <li>ثانيا كل ماعليك هو فتح مشاركة جديدة في بلوجر ولصق الأكواد بعد التحويل الى وضع عرض html</li> <li>ثالثا قم بكتابة مقالتك الأولى في القسم الأول والثانية في القسم الثاني وهكذا</li> <li>رابعا أنت الان جاهز لنشر مقالتك المقسمة الى عدة صفحات في مدونتك</li> </ul> <br /> <h3>شرح تقسيم المواضيع الى عدة صفحات بالفيديو</h3> <br /> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/hk560Rkb7qc?rel=0" width="640" youtube-src-id="hk560Rkb7qc"></iframe> <br /> <p><span style="color: #c30909; font-weight: bold;">ملاحظة مهمة :</span> يتم وضع الاعلانات أسفل أو أعلى أزرار الانتقال وتكون هنالك بعض الفراغات بين الأزرار وبين أكواد الإعلانات لضمان عدم حدوث بعض المشاكل في جوجل أدسنس</p> <br /> <p>وفي الختام لاتنس ترك تعليق يليق بك</p> <br /> <a href="https://zonezol.blogspot.com/2020/11/css-scroll-bar.html">تعلم تصميم شريط التمرير وإضافته الى بلوجر بسهولة وبأكواد Css فقط Scroll Bar</a> <br /> <a href="https://zonezol.blogspot.com/2020/12/css-button-generator.html">أفضل 5 مواقع لإنشاء وتصميم أزرار Css جاهزة وبدون أي خبرة في لغات البرمجة</a> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com0tag:blogger.com,1999:blog-1552951967015435344.post-85600168016751047552020-12-02T13:59:00.008+02:002021-01-16T16:03:17.911+02:00<article class="onezol-article"> <p>إذا كنت تبحث عن أزرار ويب خفيفة و سلسة و مرنة وسهلة الصنع فأنت في المكان الصحيح وإن كنت تريد صنع أزرار ويب مناسبة لموقعك ولا تمتلك الخبرة الكافية في البرمجة لصناعتها بنفسك فأنت أيضا في المكان الصحيح</p> <br /> <p>في هذه التدوينة أشاركك أفضل وأشهر 5 مواقع محترمة يمكنك من خلالها تصميم أزرار الويب وبتقنية CSS الشهيرة والرائعة وبدون أن تكون متعمقا في لغات البرمجة حيث لا تحتاج هذه المواقع لخبرة المبرمج لتستطيع صناعة بعض أزرار الويب الجميلة</p> <br /> <p>بداية وقبل ان نتعمق في ذكر المواقع إذا أردت يمكنك تعلم <a href="https://zonezol.blogspot.com/2020/11/button-design.html" target="_blank">إنشاء و تصميم أزرار الويب من الصفر</a> مع فهم بعض أساسيات البرمجة حيث سيساعدك ذلك على فهم أساسيات لغة css</p> <br /> <a><img alt="أفضل 5 مواقع لإنشاء وتصميم أزرار Css جاهزة وبدون أي خبرة في لغات البرمجة" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuaNaJNEQoMHnCszkKrrSoBLgEhBk8xlRyqDxGZ3GwAQDw8MOWJNjFZtYYyowhKd4ZQcxCgH-OFicebkGNlG5CdDTFjJQec25zB2OdLQMrru6R2U5ZKk1H02It4oEcFnT6xm9QoXQjjls/s16000-rw/top-5-button-generator.webp" title="أفضل 5 مواقع لإنشاء وتصميم أزرار Css جاهزة وبدون أي خبرة في لغات البرمجة" /></a> <br /> <h2>1: موقع css button gen</h2> <br /> <a><img alt="أفضل 5 مواقع لإنشاء وتصميم أزرار Css جاهزة وبدون أي خبرة في لغات البرمجة" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4RVt6dszqQZ7HNDI0lnMimc3mGl4QM9RRZ4cyPMBFKX8YXXDj3XCtTYiZv0rKFGkEPc1SwWrXbIBsHjF2uaFH5ljErXbbZyf8SfEImiyVe20UrYymmjS5nlgyXs_wZjZPTL7-sewjEB4/s16000-rw/1.webp" title="أفضل 5 مواقع لإنشاء وتصميم أزرار Css جاهزة وبدون أي خبرة في لغات البرمجة" /></a> <br /> <p>أما الآن لنبدأ بذكر أسهل وأبسط هذه المواقع وهو الموقع المعروف ب&nbsp;<a href="http://cssbuttongen.com/" rel="nofollow" target="_blank">css button gen</a>&nbsp;يتميز هذا الموقع الشهير بامتلاكه أحد أبسط الواجهات التفاعلية حيث لن تحتاج لكتابة أي من الأكواد البرمجية أو الأرقام وبدلا من ذلك كل ماعليك هو النقر على مايناسبك من اختيارات يعرضها لك وفي النهاية ستتمكن من حفظ زر الويب الخاص بك على شكل أكواد برمجية جاهزة لنقلها إلى مدونتك</p> <p>أنصحك باستخدام هذا الموقع إذا لم تكن لديك أي خبرة في لغات البرمجة</p> <br /> <h2>2: موقع dextronet</h2> <br /> <a><img alt="أفضل 5 مواقع لإنشاء وتصميم أزرار Css جاهزة وبدون أي خبرة في لغات البرمجة" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYS09J7n4FRJhScySHVt2nR0ks2ngN3Bmtx-ApdwughduQAYwm7_Q8RwcjRPKSjPs1dzUMsjk983321aVGAkm4njmGoMYAlYZ9ggO7e-LhlqTr3OFC9FdWWPFEZb7IS0Uq7OHmfUFECaE/s16000-rw/2.webp" title="أفضل 5 مواقع لإنشاء وتصميم أزرار Css جاهزة وبدون أي خبرة في لغات البرمجة" /></a> <br /> <p>ثانيا لدينا موقع <a href="http://www.dextronet.com/css-buttons-generator/" rel="nofollow" target="_blank">dextronet</a>&nbsp;مايميز هذا الموقع بكل صراحة هو التغطية على جميع الأكواد البرمجية الصعبة وترك لنا بعض الأشياء الأساسية فقط مثل اللون والنص والحجم حيث يعتبر ثاني أسهل مواقعنا لهذا اليوم فهو يوفر لنا الكثير من الوقت والجهد مايجعلنا نتمكن من صناعة زر الويب الخاص بنا بسرعة واحترافية فائقتين</p> <br /> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/RFNTJmJdlRc?rel=0" width="640" youtube-src-id="RFNTJmJdlRc"></iframe> <br /> <p>أما الآن لنرتقي إلى مستوى آخر ولنتحدث عن أفضل المواقع التي يمكننا استخدامها كمصممين والتي قد توفر علينا الكثير من العناء والجهد في كتابة الاكواد البرمجية </p> <br /> <h2>3: موقع cssportal</h2> <br /> <a><img alt="أفضل 5 مواقع لإنشاء وتصميم أزرار Css جاهزة وبدون أي خبرة في لغات البرمجة" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOVkw_-y0M8Rz3Dx1gIbW7Ix2JzbhFrR8j5TQpXWc0RSC-5ZGnmBrTfucywJ5l1kCw6QoaZIpKXdGYAu3J-bkH9rHMYovXKc_oQwr9dqZb-bz0ejB7XwzPkwHF553Gpqd9gGWltSJFUO4/s16000-rw/3.webp" title="أفضل 5 مواقع لإنشاء وتصميم أزرار Css جاهزة وبدون أي خبرة في لغات البرمجة" /></a> <br /> <p>ثالثا موقع <a href="https://www.cssportal.com/css3-button-generator/" rel="nofollow" target="_blank">cssportal</a>&nbsp;بصراحة اعتبر هذا الموقع هو الأفضل بسبب بسيط ووجيه وهو قلة حجم أكواد css حيث يحتوي على أهم الأكواد التي تضفي التأثيرات على زر الويب ويترك مادون ذلك من أكواد غير ضرورية مما يحسن من تجربة المستخدم حيث كما تعلم ان حجم الأكواد يلعب دورا مهما في سرعة الموقع مما يجعل هذا الموقع في الصدارة حيث سيضمن لنا انشاء زر ويب احترافي مع الاحتفاظ بسرعة الموقع العالية</p> <br /> <h2>4: موقع webdesign assistant</h2> <br /> <a><img alt="أفضل 5 مواقع لإنشاء وتصميم أزرار Css جاهزة وبدون أي خبرة في لغات البرمجة" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuM3ZcDs03H3wI7FUboQWajP0k0oT5DPOqC4rEM95NF1Mjy3HVWdJnhxYjFLJzqVgatnPxdgy-MWoTjqlBTEXVPgk8Q6BUgfvXIFWT2l5_AMp7sQ7russuC8LCxT2QZkrZ65_EbVsmOXE/s16000-rw/4.webp" title="أفضل 5 مواقع لإنشاء وتصميم أزرار Css جاهزة وبدون أي خبرة في لغات البرمجة" /></a> <br /> <p>رابعا موقع <a href="https://webdesign-assistant.com/button-editor/css-button-generator.php" rel="nofollow" target="_blank">webdesign assistant</a> يتميز هذا الموقع بواجهة جيدة الى حد كبير حيث تكون الواجهة مرتبة ومن السهل أيضا الوصول الى العناصر بالترتيب مما يحسن من تجربة المستخدم كما ويعمل بالنظام الليلي مما يعطي أريحية النظر في ساعات متاخرة من الليل ويمكنك بعد التعديل على زر الويب الاختيار اما نسخ أكواد css بمفردها و اكواد html بمفردها أو الاثنين معا وهو خيار جيد يسهل علينا العمل على الموقع بكل احترافية</p> <br /> <h2>5: موقع css button generator</h2> <br /> <a><img alt="أفضل 5 مواقع لإنشاء وتصميم أزرار Css جاهزة وبدون أي خبرة في لغات البرمجة" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj05exJc9jLxSQZ2vCmkmHO4go_wJjB0BXns3-7oQ3RSaI3MFO-jObM5sX75D93CNFiTd1V2gXL1IOhB39EgrEdOLE4J4DaOGn3l4zbAhvdq2-FB7qQwlsDvGCaSMXEFLHHdmKQsxx8DOc/s16000-rw/5.webp" title="أفضل 5 مواقع لإنشاء وتصميم أزرار Css جاهزة وبدون أي خبرة في لغات البرمجة" /></a> <br /> <p>اخيرا وليس آخرا موقع <a href="https://www.cssbuttongenerator.com/" rel="nofollow" target="_blank">css button generator</a> مما يميز هذا الموقع هو التصاميم الجاهزة التي يوفرها حيث لن تحتاج الى الكثير من الوقت لتحصل على زر ويب احترافي فكل ماعليك هو اختيار احد هذه التصاميم الجاهزة والتعديل عليها بما يناسب احتياجاتك لتحصل في النهاية على زر ويب احترافي بمجهود يكاد لايذكر</p> <br /> <p>وبالمناسبة قمت في الآونة الاخيرة بكتابة تدوينة تحتوي على <a href="https://zonezol.blogspot.com/2020/11/button-top-10.html" target="_blank">أفضل 10 أزرار css جاهزة يمكنك تحميلها مجانا</a> والاستمتاع بحرية تجربتها ونقلها إلى موقعك</p> <br /> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/eNPgq6YYRg8?rel=0" width="640" youtube-src-id="eNPgq6YYRg8"></iframe> <br /> <h2> 6: موقع css3 generator</h2> <br /> <a><img alt="أفضل 5 مواقع لإنشاء وتصميم أزرار Css جاهزة وبدون أي خبرة في لغات البرمجة" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdn2MGHdp3XTiiTT0q04PQXwwd9topWEallbzGb8ls32xz3tJr_fO1D3i_CGULvyYPmTeAobse3ok89heGbjNK4h6mRcTfwbIFgB7-2ZnFLf_g0jq8Qcff-QT_uy-WQvtw7Y1vUiy6JFw/s16000-rw/6.webp" title="أفضل 5 مواقع لإنشاء وتصميم أزرار Css جاهزة وبدون أي خبرة في لغات البرمجة" /></a> <br /> <p>أيضا إذا أردت تعلم بعض خواص تقنية css يمكنك الاعتماد على موقع <a href="http://css3generator.com/" rel="nofollow" target="_blank">css3 generator</a> الذي يوفر تأثيرات وخواص جميلة يمكنك تجربتها في الموقع ومن ثم نقلها إلى أكواد زر الويب الخاص بك فبذلك تكون جمعت بين تعلم بعض خواص Css وأيضا ساعدت في تصميم زر الويب الخاص بك</p> <br /> <p>وفي الختام اتمنى منك ترك تعليق يليق بك أسفل التدوينة</p> </article> OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com1tag:blogger.com,1999:blog-1552951967015435344.post-21387445377104408142020-11-29T23:52:00.084+02:002021-01-16T16:03:10.026+02:00<style> .onezol-article pre { width: auto; overflow: auto; border: 4px solid #c30909; text-align: center; display: block; height: auto; background: #520000; } .onezol-button-one{ display: inline-block; width: 200px; height: 60px; text-align: center; background: #ffffff; border: 2px solid #c30909; border-radius: 40px; text-decoration: none; position: relative; top: 18px; } .onezol-button-one:hover{ color: transparent; transition: 0.5s; } .onezol-button-one-circl{ width: 50px; height: 50px; border-radius: 50%; background: #c30909; position: absolute; display: block; top: 3px; left: 3px; transition: 0.5s; } .onezol-button-one:hover .onezol-button-one-circl{ left: 143px; transition: 0.5s; } .onezol-button-one-title{ position: absolute; color: #c30909; font-size: 24px; font-weight: bold; line-height: 55px; transition: 0.3s; right: 30px; } .onezol-button-one:hover .onezol-button-one-title{ color: transparent; transition: 0.3s; } .onezol-button-one-title-hover{ position: absolute; color: transparent; right: 80px; font-size: 24px; font-weight: bold; line-height: 55px; transition: 0.3s; } .onezol-button-one:hover .onezol-button-one-title-hover{ transition: 0.3s; color: #c30909; } .btn-slide-red-blue { text-decoration: none; background: #8a0202; border: 2px solid black; transition: 0.5s; height: 50px; width: 200px; border-radius: 50px; display: inline-block; position: relative; top: 23px; } .btn-slide-red-blue:hover { background: rgb(30, 81, 248) ; transition-delay: 0.5; } .circle-red-blue { background: linear-gradient(to right,rgb(30, 81, 248),#dd0000); color: #ffffff; height: 40px; width: 40px; border-radius: 50%; transition: 0.5s; position: absolute ; display: block ; left: 5px; top: 2.5px; } .btn-slide-red-blue:hover .circle-red-blue { left: 155px; background: linear-gradient(to left,rgb(30, 81, 248),#dd0000); } .title-red-blue { color: rgb(30, 81, 248); display: inline-block; line-height:50px; font-size: 18px; font-weight: bold; transition: 0.3s; position: absolute; right:20px; bottom: 0px; } .btn-slide-red-blue:hover .title-red-blue { right:10px; opacity: 0; transition:0.3s; } .title-hover-red-blue { opacity: 0; color: #dd0000; display: inline-block; font-size: 18px; font-weight: bold; position: absolute; transition:0.3s; line-height: 50px; bottom: 0px; left:20px; } .btn-slide-red-blue:hover .title-hover-red-blue { opacity: 1; left:40px; transition:0.3s; } .btn-slide-red { text-decoration: none; background: #dd0000; border: 2px solid black; transition: 0.5s; height: 50px; width: 200px; border-radius: 50px; display: inline-block; position: relative; top: 23px; } .btn-slide-red:hover { background: rgb(0, 0, 0) ; transition-delay: 0.5; } .circle-red { background: linear-gradient(to right,black,#dd0000); color: #ffffff; height: 40px; width: 40px; border-radius: 50%; transition: 0.5s; position: absolute ; display: block ; left: 5px; top: 2.5px; } .btn-slide-red:hover .circle-red { left: 155px; background: linear-gradient(to left,black,#dd0000); } .title-red { color: black; display: inline-block; line-height:50px; font-size: 18px; font-weight: bold; transition: 0.3s; position: absolute; right:20px; bottom: 0px; } .btn-slide-red:hover .title-red { right: 10px; opacity: 0; transition:0.3s; } .title-hover-red { opacity: 0; color: #dd0000; display: inline-block; font-size: 18px; font-weight: bold; position: absolute; transition:0.3s; line-height: 50px; bottom: 0px; left:20px; } .btn-slide-red:hover .title-hover-red { opacity: 1; left:40px; transition:0.3s; } .btn-slide-red-on { text-decoration: none; background: #8a0202; border: 2px solid #dd0000; transition: 0.5s; height: 50px; width: 200px; border-radius: 50px; display: inline-block; position: relative; top: 23px; margin-bottom: 33px; } .btn-slide-red-on:hover { background: #dd0000 ; transition-delay: 0.5; } .circle-red-on { background: linear-gradient(to right,#8a0202,#dd0000); color: #ffffff; height: 40px; width: 40px; border-radius: 50%; transition: 0.5s; position: absolute ; display: block ; left: 5px; top: 2.5px; } .btn-slide-red-on:hover .circle-red-on { left: 155px; background: linear-gradient(to left,#8a0202,#dd0000); } .title-red-on { color: #dd0000; display: inline-block; line-height:50px; font-size: 18px; font-weight: bold; transition: 0.3s; position: absolute; right:20px; bottom: 0px; } .btn-slide-red-on:hover .title-red-on { right: 10px; opacity: 0; transition:0.3s; } .title-hover-red-on { opacity: 0; color: #8a0202; display: inline-block; font-size: 18px; font-weight: bold; position: absolute; transition:0.3s; line-height: 50px; bottom: 0px; left:20px; } .btn-slide-red-on:hover .title-hover-red-on { opacity: 1; left:40px; transition:0.3s; } .neonzolred { position: relative; display: inline-block ; padding: 15px 30px ; color: #e10505!important ; text-transform: uppercase ; text-decoration: none ; font-size: 24px; overflow: hidden; transition: 0.2s; bottom: 12px; } .neonzolred:hover { color:#8a0303!important ; background:#e10505 ; box-shadow: 0 0 10px #e10505 , 0 0 40px #e10505 , 0 0 80px #e10505 ; transition-delay: 1s; } .neonzol1red , .neonzol2red , .neonzol3red , .neonzol4red { position: absolute; display: block; } .neonzol1red:nth-child(1) { top: 0 ; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg,transparent,#e10505); } .neonzolred:hover .neonzol1red:nth-child(1){ left: 100%; transition: 1s; } .neonzol2red:nth-child(2) { top: -100% ; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg,transparent,#e10505); } .neonzolred:hover .neonzol2red:nth-child(2){ top: 100%; transition: 1s; transition-delay: 0.25s; } .neonzol3red:nth-child(3) { bottom: 0 ; right: -100%; width: 100%; height: 2px; background: linear-gradient(270deg,transparent,#e10505); } .neonzolred:hover .neonzol3red:nth-child(3){ right: 100%; transition: 1s; transition-delay: 0.5s; } .neonzol4red:nth-child(4) { bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg,transparent,#e10505); } .neonzolred:hover .neonzol4red:nth-child(4){ bottom: 100%; transition: 1s; transition-delay: 0.75s; } .neonzol { position: relative; display: inline-block ; padding: 15px 30px ; color: #2196f3!important ; text-transform: uppercase ; text-decoration: none ; font-size: 24px; overflow: hidden; transition: 0.2s; bottom: 12px; } .neonzol:hover { color:#255784!important ; background: #2196f3 ; box-shadow: 0 0 10px #2196f3 , 0 0 40px #2196f3 , 0 0 80px #2196f3 ; transition-delay: 1s; } .neonzol1 , .neonzol2 , .neonzol3 , .neonzol4 { position: absolute; display: block; } .neonzol1:nth-child(1) { top: 0 ; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg,transparent,#2196f3); } .neonzol:hover .neonzol1:nth-child(1){ left: 100%; transition: 1s; } .neonzol2:nth-child(2) { top: -100% ; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg,transparent,#2196f3); } .neonzol:hover .neonzol2:nth-child(2){ top: 100%; transition: 1s; transition-delay: 0.25s; } .neonzol3:nth-child(3) { bottom: 0 ; right: -100%; width: 100%; height: 2px; background: linear-gradient(270deg,transparent,#2196f3); } .neonzol:hover .neonzol3:nth-child(3){ right: 100%; transition: 1s; transition-delay: 0.5s; } .neonzol4:nth-child(4) { bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg,transparent,#2196f3); } .neonzol:hover .neonzol4:nth-child(4){ bottom: 100%; transition: 1s; transition-delay: 0.75s; } .zol-glowin { position: relative; width: 200px; height: 60px; text-align: center; line-height: 60px; color: #fff !important; font-size: 24px; font-family: sans-serif; text-transform: uppercase; text-decoration: none; box-sizing: border-box; background: linear-gradient(90deg, #03a9f4, #f441a4, #ffeb3b, #03a9f4); background-size: 400%; border-radius: 30px; z-index: 1; display: inline-block; margin: 20px; } .zol-glowin:hover { animation: animate 8s linear infinite; } @keyframes animate { 0% { background-position: 0%; } 100% { background-position: 400%; } } .zol-glowin:before { content: 'اضغط للتحميل'; position: absolute; top: -5px; bottom: -5px; right: -5px; left: -5px; background: linear-gradient(90deg, #03a9f4, #f441a4, #ffeb3b, #03a9f4); background-size: 400%; filter: blur(20px); border-radius: 40px; opacity: 0; transition: 0.5s; z-index: -1; } .zol-glowin:hover:before { filter: blur(20px); opacity: 1; animation: animate 8s linear infinite; } .button-zol { position: relative; padding: 20px 50px; display: block; width: 200px; text-decoration: none; text-transform: uppercase; overflow: hidden; display: inline-block; text-align: center; margin: 20px 0 15px 0; } .name-zol { position: relative; z-index: 1; font-size: 20px; color: #fff; left: 7px; font-weight: bold; } .liquid-zol { position: absolute; width: 200px; height: 200px; top: -80px; left: 0; background: #4973ff; box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5); transition: 0.5s; } .button-zol:hover .liquid-zol { top: -120px; } .liquid-zol:before, .liquid-zol:after { content: ' '; position: absolute; width: 200%; height: 200%; top: 0px; left: 50%; transform: translate(-50%,-75%); } .liquid-zol:before { border-radius: 45%; background: rgba(20, 20, 20,1); animation: animatezol 5s linear infinite; } .liquid-zol:after { border-radius: 40%; background: rgba(20, 20, 20,0.5); animation: animatezol 10s linear infinite; } @keyframes animatezol { 0%{ transform: translate(-50%,-75%) rotate(0deg); } 100%{ transform: translate(-50%,-75%) rotate(360deg); } } .shiny-zol { position: relative; padding: 25px 50px; text-decoration: none; font-size: 24px; font-weight: bold; color: #fff !important; display: inline-block; text-transform: uppercase; overflow: hidden; background: rgba(179, 179, 179, 0.37); box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); top: 10px; } .shiny-zol:before { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; text-align: center; background: rgba(255,255,255,0.1); } .shiny-zol:after { position: absolute; content: ''; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent); transition:0.5s; transition-delay: 0.5; } .shiny-zol:hover:after { left: 100%; } .shiny1,.shiny2,.shiny3,.shiny4 { position: absolute; display: block; transition: 0.5s ease; } .shiny1:nth-child(1) { top: 0; left: 0; width: 0; height: 1px; background: #fff; } .shiny-zol:hover .shiny1:nth-child(1) { width: 100%; transform: translateX(100%); } .shiny3:nth-child(3) { bottom: 0; right: 0; width: 0; height: 1px; background: #fff; } .shiny-zol:hover .shiny3:nth-child(3) { width: 100%; transform: translateX(-100%); } .shiny2:nth-child(2) { top: 0; left: 0; width: 1px; height: 0; background: #fff; } .shiny-zol:hover .shiny2:nth-child(2) { height: 100%; transform: translateY(100%); } .shiny4:nth-child(4) { bottom: 0; right: 0; width: 1px; height: 0; background: #fff; } .shiny-zol:hover .shiny4:nth-child(4) { height: 100%; transform: translateY(-100%); } .shiny-zol-black { position: relative; padding: 25px 50px; text-decoration: none; font-size: 24px; font-weight: bold; color: #fff !important; text-transform: uppercase; overflow: hidden; background: #2c2c2c; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); display: inline-block; } .shiny-zol-black:before { content: ''; position: absolute; text-align: center; top: 0; left: 0; width: 50%; height: 100%; background: rgba(255, 255, 255, 0.1); } .shiny-zol-black:after { position: absolute; content: ''; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent); transition:0.5s; transition-delay: 0.5; } .shiny-zol-black:hover:after { left: 100%; } .shiny1,.shiny2,.shiny3,.shiny4 { position: absolute; display: block; transition: 0.5s ease; } .shiny1:nth-child(1) { top: 0; left: 0; width: 0; height: 1px; background: #fff; } .shiny-zol-black:hover .shiny1:nth-child(1) { width: 100%; transform: translateX(100%); } .shiny3:nth-child(3) { bottom: 0; right: 0; width: 0; height: 1px; background: #fff; } .shiny-zol-black:hover .shiny3:nth-child(3) { width: 100%; transform: translateX(-100%); } .shiny2:nth-child(2) { top: 0; left: 0; width: 1px; height: 0; background: #fff; } .shiny-zol-black:hover .shiny2:nth-child(2) { height: 100%; transform: translateY(100%); } .shiny4:nth-child(4) { bottom: 0; right: 0; width: 1px; height: 0; background: #fff; } .shiny-zol-black:hover .shiny4:nth-child(4) { height: 100%; transform: translateY(-100%); } .button-zol-six { position: relative; top: 35px; left: 95px; width: 200px; height: 70px; transform: translate(-50%,-50%); padding: 15px 30px; text-transform: uppercase; text-decoration: none; color: #fff !important; font-size: 24px; font-weight: bold; display: inline-block; margin: 20px; } .button-zol-six:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #03a9f4; z-index: -1; transition: transform 0.5s; transform-origin: bottom right; transform: scale(0); } .button-zol-six:hover:before { transition: transform 0.5s; transform-origin: top left; transform: scale(1); } .button-zol-six:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; border: 2px solid rgba(163, 163, 163, 0.904); box-sizing: border-box; z-index: -1; transition: transform 0.5s; transform-origin: top left; transform: scale(1); } .button-zol-six:hover:after { transition: transform 0.5s; transform-origin: bottom right; transform: scale(0); } .onezol-align{ border-bottom: 2px solid #c30909; height: 100px; } .wrapper{ position: relative; display: inline-block; width: fit-content; height:auto; margin: 40px; } .wrapper a{ width:200px; height:70px; background: linear-gradient(to left top, #2c5cc3 50%, #1c47a3 50%); border-style: none; color:#fff; font-size: 23px; letter-spacing: 3px; font-weight: 600; outline: none; cursor: pointer; position: relative; padding: 0px; overflow: hidden; transition: all .5s; box-shadow: 0px 1px 2px rgba(0,0,0,.2); display: inline-block; text-align: center; line-height: 70px; } .wrapper span{ position: absolute; display: block; } .wrapper span:nth-child(1){ height: 3px; width:200px; top:0px; left:-200px; background: linear-gradient(to right, rgba(0,0,0,0), #c30909); border-top-right-radius: 1px; border-bottom-right-radius: 1px; animation: span1 2s linear infinite; animation-delay: 1s; } @keyframes span1{ 0%{ left:-200px } 100%{ left:200px; } } .wrapper span:nth-child(2){ height: 70px; width: 3px; top:-70px; right:0px; background: linear-gradient(to bottom, rgba(0,0,0,0), #c30909); border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; animation: span2 2s linear infinite; animation-delay: 2s; } @keyframes span2{ 0%{ top:-70px; } 100%{ top:70px; } } .wrapper span:nth-child(3){ height:3px; width:200px; right:-200px; bottom: 0px; background: linear-gradient(to left, rgba(0,0,0,0), #c30909); border-top-left-radius: 1px; border-bottom-left-radius: 1px; animation: span3 2s linear infinite; animation-delay: 3s; } @keyframes span3{ 0%{ right:-200px; } 100%{ right: 200px; } } .wrapper span:nth-child(4){ height:70px; width:3px; bottom:-70px; left:0px; background: linear-gradient(to top, rgba(0,0,0,0), #c30909); border-top-right-radius: 1px; border-top-left-radius: 1px; animation: span4 2s linear infinite; animation-delay: 4s; } @keyframes span4{ 0%{ bottom: -70px; } 100%{ bottom:70px; } } .wrapper a:hover{ transition: all .5s; transform: rotate(-3deg) scale(1.1); box-shadow: 0px 3px 5px rgba(0,0,0,.4); } .wrapper a:hover .wrapper span{ animation-play-state: paused; } .animated-word { letter-spacing: 0.4em; font-weight: 600; font-size: 20px; text-align: center; color: #ffffff !important; cursor: pointer; max-width: 400px; outline: 3px solid; outline-color: #091ac3; transition: all 600ms cubic-bezier(0.2, 0, 0, 0.8); display: inline-block; position: relative; margin: 50px; outline-offset: 15px; } .animated-word:hover { color: #091ac3 !important; outline-color: rgba(71, 126, 232, 0); outline-offset: 150px; } .button-nine { min-width: 300px; min-height: 60px; font-family: 'Nunito', sans-serif; font-size: 22px; text-transform: uppercase; letter-spacing: 1.3px; font-weight: 700; color: #313133 !important; background: #4FD1C5; background: linear-gradient(90deg, rgba(129,230,217,1) 0%, rgba(79,209,197,1) 100%); border: none; border-radius: 1000px; box-shadow: 12px 12px 24px rgba(79,209,197,.64); transition: all 0.3s ease-in-out 0s; cursor: pointer; outline: none; position: relative; padding: 10px; display: inline-block; margin: 130px; } .button-nine::before { content: ''; border-radius: 1000px; min-width: calc(300px + 25px); min-height: calc(60px + 25px); border: 6px solid #00FFCB; box-shadow: 0 0 60px rgba(0,255,203,.64); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all .3s ease-in-out 0s; } .button-nine:hover, .button-nine:focus { color: #313133; transform: translateY(-6px); } .button-nine:hover::before, .button-nine:focus::before { opacity: 1; } .button-nine::after { content: ''; width: 30px; height: 30px; border-radius: 100%; border: 6px solid #00FFCB; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: ring 1.5s infinite; } .button-nine:hover::after, .button-nine:focus::after { animation: none; display: none; } @keyframes ring { 0% { width: 30px; height: 30px; opacity: 1; } 100% { width: 300px; height: 300px; opacity: 0; } } .btn-second { border-radius: 3em; border-color: #1abc9c; color: #fff !important; background-image: -webkit-linear-gradient(left, rgba(26, 188, 156, 0.6), rgba(26, 188, 156, 0.6) 5%, #1abc9c 5%, #1abc9c 10%, rgba(26, 188, 156, 0.6) 10%, rgba(26, 188, 156, 0.6) 15%, #1abc9c 15%, #1abc9c 20%, rgba(26, 188, 156, 0.6) 20%, rgba(26, 188, 156, 0.6) 25%, #1abc9c 25%, #1abc9c 30%, rgba(26, 188, 156, 0.6) 30%, rgba(26, 188, 156, 0.6) 35%, #1abc9c 35%, #1abc9c 40%, rgba(26, 188, 156, 0.6) 40%, rgba(26, 188, 156, 0.6) 45%, #1abc9c 45%, #1abc9c 50%, rgba(26, 188, 156, 0.6) 50%, rgba(26, 188, 156, 0.6) 55%, #1abc9c 55%, #1abc9c 60%, rgba(26, 188, 156, 0.6) 60%, rgba(26, 188, 156, 0.6) 65%, #1abc9c 65%, #1abc9c 70%, rgba(26, 188, 156, 0.6) 70%, rgba(26, 188, 156, 0.6) 75%, #1abc9c 75%, #1abc9c 80%, rgba(26, 188, 156, 0.6) 80%, rgba(26, 188, 156, 0.6) 85%, #1abc9c 85%, #1abc9c 90%, rgba(26, 188, 156, 0.6) 90%, rgba(26, 188, 156, 0.6) 95%, #1abc9c 95%, #1abc9c 100%); background-image: linear-gradient(to right, rgba(26, 188, 156, 0.6), rgba(26, 188, 156, 0.6) 5%, #1abc9c 5%, #1abc9c 10%, rgba(26, 188, 156, 0.6) 10%, rgba(26, 188, 156, 0.6) 15%, #1abc9c 15%, #1abc9c 20%, rgba(26, 188, 156, 0.6) 20%, rgba(26, 188, 156, 0.6) 25%, #1abc9c 25%, #1abc9c 30%, rgba(26, 188, 156, 0.6) 30%, rgba(26, 188, 156, 0.6) 35%, #1abc9c 35%, #1abc9c 40%, rgba(26, 188, 156, 0.6) 40%, rgba(26, 188, 156, 0.6) 45%, #1abc9c 45%, #1abc9c 50%, rgba(26, 188, 156, 0.6) 50%, rgba(26, 188, 156, 0.6) 55%, #1abc9c 55%, #1abc9c 60%, rgba(26, 188, 156, 0.6) 60%, rgba(26, 188, 156, 0.6) 65%, #1abc9c 65%, #1abc9c 70%, rgba(26, 188, 156, 0.6) 70%, rgba(26, 188, 156, 0.6) 75%, #1abc9c 75%, #1abc9c 80%, rgba(26, 188, 156, 0.6) 80%, rgba(26, 188, 156, 0.6) 85%, #1abc9c 85%, #1abc9c 90%, rgba(26, 188, 156, 0.6) 90%, rgba(26, 188, 156, 0.6) 95%, #1abc9c 95%, #1abc9c 100%); background-position: 0 0; background-size: 100%; -webkit-transition: background 300ms ease-in-out; transition: background 300ms ease-in-out; display: inline-block; position: relative; width: 200px; height: 60px; margin: 40px; text-align: center; font-size: 20px; font-weight: bold; line-height: 60px; } .btn-second:hover { background-position: 100px; } </style> <article class="onezol-article"> <p>من الأشياء التي تتميز بها المواقع هي التصميم فكلما كان تصميم الموقع أكثر سرعة وسهولة وأريحية للعين كلما حاز على تجارب مستخدمين أفضل وأصبح من السهل للزائر الوصول إلى أهم المعلومات أولا ثم التي تليها وهكذا </p> <br /> <p>في هذا المقال سنتحدث عن نقطة من نقاط التصميم المهمة والتي يجب على كل صاحب موقع الاهتمام بها وهي تصميم وشكل أزرار الويب مثل التحميل والمعاينة والمشاركة ونحوه</p> <br /> <p>على سبيل المثال عند دخولك لموقع فايل أبلود لتحميل برنامج معين ستقوم مباشرة بالضغط على الزر الأخضر دون النظهر الى غيره من أزرار التحميل فلماذا تقوم بالضغط على هذا الزر بالتحديد مع وجود الكثير من الأزرار غيره</p> <br /> <p>بالنسبة لموقع شهير مثل فايل أبلود أو مركز الخليج أو غيره من المواقع الشهيرة فلقد حفظ عقلك لون زر التحميل وبلا تفكير مسبق منك ستقوم بالضغط عليه حتى وبدون قراءة الكلام المكتوب حوله أو بداخله</p> <br /> <p>لهذا السبب وفي هذا المقال سأشارك معكم أشكال وأنواع لمختلف الأزرار الجميلة والتي تحمل مجموعة من الأفكار المميزة وبنفس الوقت تعمل جميعها بأكواد خفيفة هي Css و Html فقط فأرجو ان ينال المجهود على رضاكم</p> <br /> <a><img alt="أفضل 10 أزرار css جاهزة للتحميل مجانا أزرار الويب Html بأكواد خفيفة للمعاينة والمشاركة" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7upPaWSyifIDqiRk5JHUh-bSiQMwr5YtGEPEE3LeVL3hXQGX3XnfJamsSl9ITRlDK7vuX-gzaqLUgrUgJskRkrma9ivLwPCZjg29S2wxN7NnjcD_910j5uBSooPpjhVd47R4kmvFpB1Y/s16000-rw/top-10-button-css.webp" title="أفضل 10 أزرار css جاهزة للتحميل مجانا أزرار الويب Html بأكواد خفيفة للمعاينة والمشاركة" /></a> <br /> <p>كما ان جميع أزرار الويب في هذا المقال هي أزرار مجانية ويمكنك تحميلها فقط بالضغط على مايعجبك منها</p> <br /> <h2>1: أزرار الويب css و html متحركة ومتجاوبة</h2> <br /> <pre><div class="onezol-align"><a class="btn-slide-red-blue" href="https://www.mediafire.com/file/c92di4bv6eaqr3g/%25D8%25B2%25D8%25B1__%25D9%2585%25D8%25AA%25D8%25AD%25D8%25B1%25D9%2583_%25D8%25A7%25D8%25AD%25D9%2585%25D8%25B1_%25D9%2588%25D8%25A7%25D8%25B2%25D8%25B1%25D9%2582.txt/file" rel="nofollow" target="_blank"><span class="circle-red-blue"></span><span class="title-red-blue">لتحميل الأكواد</span><span class="title-hover-red-blue">اضغط هنا</span></a></div><div class="onezol-align"><a class="btn-slide-red" href="https://www.mediafire.com/file/g9mbb09ygcx54bf/%25D8%25B2%25D8%25B1_%25D9%2585%25D8%25AA%25D8%25AD%25D8%25B1%25D9%2583_%25D8%25A7%25D8%25AD%25D9%2585%25D8%25B1_%25D9%2588%25D8%25A7%25D8%25B3%25D9%2588%25D8%25AF.txt/file" rel="nofollow" target="_blank"><span class="circle-red"></span><span class="title-red">لتحميل الأكواد</span><span class="title-hover-red">اضغط هنا</span></a></div><a class="btn-slide-red-on" href="https://www.mediafire.com/file/fi8m6u1r5cxomox/%25D8%25B2%25D8%25B1_%25D9%2585%25D8%25AA%25D8%25AD%25D8%25B1%25D9%2583_%25D8%25A7%25D8%25AD%25D9%2585%25D8%25B1.txt/file" rel="nofollow" target="_blank"><span class="circle-red-on"></span><span class="title-red-on">لتحميل الأكواد</span><span class="title-hover-red-on">اضغط هنا</span></a> </pre> <br /> <p>كما يمكنك تعلم طريقة انشاء أزرار css احترافية ومن الصفر فقط بقرائتك لهذا المقال </p> <a href="https://zonezol.blogspot.com/2020/11/button-design.html" rel="nofollow" target="_blank">تصميم أزرار الويب Css و Html لمدونتك من الصفر شرح مفصل اصنع ازرارك بنفسك والآن</a> <br /> <h2>2: أزرار للمواقع css و html تحمل تأثيرات للنيون</h2> <br /> <pre><div class="onezol-align"> <a class="neonzolred" href="https://www.mediafire.com/file/zhxgbt1rp87hib0/%25D8%25B2%25D8%25B1_%25D8%25A7%25D9%2584%25D9%2586%25D9%258A%25D9%2588%25D9%2586_%25D8%25A3%25D8%25AD%25D9%2585%25D8%25B1.txt/file" rel="nofollow" target="_blank"><span class="neonzol1red"></span><span class="neonzol2red"></span><span class="neonzol3red"></span><span class="neonzol4red"></span>انقر للتحميل</a></div> <a class="neonzol" href="https://www.mediafire.com/file/x1ddwf6ke4fmaun/%25D8%25B2%25D8%25B1_%25D8%25A7%25D9%2584%25D9%2586%25D9%258A%25D9%2588%25D9%2586_%25D8%25A3%25D8%25B2%25D8%25B1%25D9%2582.txt/file" rel="nofollow" target="_blank"><span class="neonzol1"></span><span class="neonzol2"></span><span class="neonzol3"></span><span class="neonzol4"></span>انقر للتحميل</a> </pre> <br /> <h2>3: زر بلوجر css و html يحمل تأثير مشابه لقوس المطر</h2> <br /> <pre><a class="zol-glowin" href="https://www.mediafire.com/file/ey30ygqg96t8m30/%25D8%25B2%25D8%25B1_%25D8%25AA%25D8%25AD%25D9%2585%25D9%258A%25D9%2584_%25D9%2582%25D9%2588%25D8%25B3_%25D8%25A7%25D9%2584%25D9%2585%25D8%25B7%25D8%25B1_%25D9%2586%25D9%258A%25D9%2588%25D9%2586.txt/file" rel="nofollow" target="_blank">اضغط للتحميل</a> </pre> <br /> <h2>4: زر ورد بريس html و css يحمل تأثير التموج</h2> <br /> <pre><a class="button-zol" href="https://www.mediafire.com/file/ai2rb9ysz9pydkj/%25D8%25A7%25D8%25B2%25D8%25B1%25D8%25A7%25D8%25B1_%25D8%25A7%25D9%2584%25D8%25AA%25D8%25B9%25D8%25A8%25D8%25A6%25D8%25A9_%25D8%25B2%25D9%2588%25D9%2586_%25D8%25B2%25D9%2588%25D9%2584.txt/file" rel="nofollow" target="_blank"><span class="name-zol">انقر للتحميل</span><div class="liquid-zol"></div></a> </pre> <br /> <h2>5: أزرار للتحميل والمعاينة css و html بتأثير الزجاج الشفاف</h2> <br /> <pre><a class="shiny-zol" href="https://www.mediafire.com/file/x4c62a2xq9fhp47/%25D8%25B2%25D8%25B1_%25D8%25A7%25D9%2584%25D8%25B2%25D8%25AC%25D8%25A7%25D8%25AC_%25D8%25A7%25D9%2584%25D8%25B4%25D9%2581%25D8%25A7%25D9%2581.txt/file" rel="nofollow" target="_blank"><span class="shiny1"></span><span class="shiny2"></span><span class="shiny3"></span><span class="shiny4"></span>التحميل</a> <a class="shiny-zol-black" href="https://www.mediafire.com/file/dsmczblgbia35wz/%25D8%25B2%25D8%25B1_%25D8%25A7%25D9%2584%25D8%25B2%25D8%25AC%25D8%25A7%25D8%25AC_%25D8%25A7%25D9%2584%25D8%25B4%25D9%2581%25D8%25A7%25D9%2581_%25D8%25A7%25D8%25B3%25D9%2588%25D8%25AF.txt/file" rel="nofollow" target="_blank"><span class="shiny1"></span><span class="shiny2"></span><span class="shiny3"></span><span class="shiny4"></span>التحميل</a> </pre> <br /> <h2>6: زر للتحميل والمشاركة css و html بتأثير الصندوق المتكرر</h2> <br /> <pre><a class="button-zol-six" href="https://www.mediafire.com/file/4os9ykuhhaxuiib/زر+الصندوق+المتكرر.txt/file" rel="nofollow" target="_blank">انقر للتحميل</a> </pre> <br /> <h2>7: زر css و html متجاوب مع جميع المواقع</h2> <br /> <pre><div class="wrapper"><a href="https://www.mediafire.com/file/5m2etpjg7z6lz3a/زر+رقم+7.txt/file" rel="nofollow" target="_blank">OneZol<span></span><span></span><span></span><span></span></a></div> </pre> <br /> <h2>8: زر ويب يعمل في جميع المواقع</h2> <br /> <pre><a class="animated-word" href="https://www.mediafire.com/file/lvjxi0p5n7xoanq/زر+رقم8.txt/file" rel="nofollow" target="_blank">ONEZOL</a> </pre> <br /> <h2>9: زر مواقع css بسيط للتحميل والمشاركة</h2> <br /> <pre><a class="button-nine" href="https://www.mediafire.com/file/e07unxn3l70qax7/زر+رقم9.txt/file" rel="nofollow" target="_blank">OneZol</a> </pre> <br /> <h2>10: زر الانترنت css و html بتأثير متحرك</h2> <br /> <pre><a class="btn-second" href="https://www.mediafire.com/file/ci9qn6ggie7fhgg/الزر+العاشر.txt/file" rel="nofollow" target="_blank">ZoneZol</a> </pre> <br /> <p>إذا واجهتك أي مشكلة في تركيب الأزرار على بلوجر أنصحك بمشاهدة هذا الشرح البسيط</p> <br /> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/WV94LbQuirU?rel=0" width="640" youtube-src-id="WV94LbQuirU"></iframe> <br /> <p>في الختام لاتنس ترك تعليقك أسفل المقال</p> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com4tag:blogger.com,1999:blog-1552951967015435344.post-8014167680640973212020-11-26T18:49:00.009+02:002021-01-16T16:03:02.320+02:00<style> .onezol-article pre{ margin: 10px; text-align: left; direction: ltr; font-size: 16px; text-align: left; width: auto; overflow: auto; border: 2px solid #c30909; } </style> <article class="onezol-article"> <p>من الأشياء المهمة في تصميم المواقع والتي نادرا مانجدها في المدونات العربية خاصة ألا وهي التصميم على شريط التمرير للمتصفح</p> <p>سنتعلم في هذا المقال طريقة بسيطة يمكننا من خلالها التعديل واضافة بعض التأثيرات الجمالية على شريط التمرير</p> <p>ولكن قبل كل ذلك يجب ان نعرف ماهو شريط التمرير وكيف ولماذا سنقوم بالتعديل عليه؟</p> <a><img alt="تعلم إنشاء وتصميم شريط التمرير بسهولة وبأكواد Css فقط Scroll Bar" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpltgf9UEKpmfxHN9-L86CM7Ll-DV50UnWoOtnn0kKfHPIZCd2G05PUNxQgW5kRU9JgX3gn2XzgglqLycmbrEX41sIpdzBRtW0ZsRdjYYmHoRtPuj8QBwVDfjkTPjvRl3UguF91X8FrWM/s0-rw/1.webp" /></a> <br /> <a href="https://zonezol.blogspot.com/2020/11/button-design.html" target="_blank">تصميم أزرار الويب Css و Html لمدونتك من الصفر شرح مفصل اصنع ازرارك بنفسك والآن</a> <br> <h2>ماهو شريط التمرير ScrollBar</h2> <br /> <p>شريط التمرير هو عنصر واجهة مستخدم يمكن من خلاله تمرير النص المستمر أو الصور أو أي محتوى آخر في اتجاه محدد مسبقا على شاشة الكمبيوتر أو نافذة حتى يمكن عرض المحتوى بالكامل أو جزء منه</p> <p>حسنا شريط التمرير من خلاله يمكننا التنقل داخل أي صفحة على الويب سواء للنزول والصعود أو التنقل من جهة اليمين واليسار</p> <p>حيث يظهر في الأجهزة المكتبية والمحمولة في يمين المتصفح ومن الممكن ان يظهر أيضا في يسار المتصفح</p> <br /> <p style="font-weight: bold;">هل سيظهر تصميمي لشريط التمرير على أجهزة الهواتف النقالة؟</p> <br /> <p>يوجد أكثر من نوع لشريط التمرير في الهواتف وسيكون ظاهرا بالنسبة للمتصفح بشكل افتراضي ولكن يمكنك التعديل على مادون ذلك اي النوافذ المبثقة والمربعات واجزاء المواقع وغيره</p> <p>ولكن وبالرغم من ذلك مازال من المستحسن التعديل على شكل شريط التمرير الأفتراضي للمتصفح على الأجهزة المكتبية والمحمولة</p> <p>حيث سيكون من الملائم ان يظهر تصميم الموقع الخاص بك بشكل جيد الى ممتاز بالنسبة لمن يمتلك ميزة عرض الشريط</p> <p>فكلما كان تصميم الموقع متكاملا كلما أصبح أجمل في طريقة عرضه</p> <h2>طريقة التعديل والتصميم على شريط التمرير Scroll Bar</h2> <p>من الجيد ان تكون لك معرفة مسبقة بلغات تصميم المواقع لتستطيع باستخدامها اضافة التأثيرات والألوان التي تناسب احتياجاتك ولكن ليس من الضروري ان تتقنها للبدء بتصميم احترافي</p> <p>لأنه وكما تعلم يوجد العديد من المواقع التي توفر تصاميما جاهزة يمكنك اختيار مايناسبك منها ونقله إلى موقعك</p> <p>ولكن الغرض الأساسي من انشاء هذه المقالة هو تعلم طريقة كتابة جزء الأكواد الأساسية والتعديل والتصميم على شريط التمرير بأنفسنا وبدون الاستعانة بأي من هذه المواقع</p> <br /> <h3>الخطوة الأولى : كتابة أكواد Css الأساسية</h3> <br /> <p>لن تحتاج الى اضافة اي من أكواد Html فشريط التمرير معرف مسبقا لدى المتصفح ولاتحتاج الى انشاء اي عنصر جديد</p> <p>كما ويوجد العديد من الأجزاء الخاصة بشريط التمرير والتي يمكننا تحديدها باستخدام Css لنضفي اليها التأثيرات التي نرغب بها ولنذكرها جميعها</p> <pre><code style="color: #0dcc27;">::-webkit-scrollbar{}</code> <span>هذا الكود سنستطيع من خلاله التعديل على الجزء الخارجي من شريط التمرير</span> <code style="color: #0dcc27;">::-webkit-scrollbar-button{}</code> <span>يقصد بهذا الكود الأزرار التي تظهر في بداية ونهاية شريط التمرير</span> <code style="color: #0dcc27;">::-webkit-scrollbar-thumb{}</code> <span>نستطيع من خلال هذا الكود التعديل على المؤشر المتحرك بداخل شريط التمرير</span> <code style="color: #0dcc27;">::-webkit-scrollbar-track{}</code> <span>هذا الكود خاص بمسار شريط التمرير أي المساحة التي يمكن للمؤشر التحرك بها</span> <span>باقي العناصر ليست مهمة للغاية ولكن سأذكرها من باب الفائدة</span> <code style="color: #0dcc27;">::-webkit-scrollbar-track-piece{}</code> <span>هي الطبقة العلوية من شريط التمرير التي لا يغطيها عنصر التمرير القابل للسحب (الإبهام)</span> <code style="color: #0dcc27;">::-webkit-scrollbar-corner{}</code> <span>هذا الكود خاص بالتعديل على الزاوية السفلية حيث قد يلتقي شريطا التمرير فيكون مثل الفاصل بين نقطتي الالتقاء</span> <code style="color: #0dcc27;">::-webkit-resizer{}</code> <span>يعالج مقبض تغيير الحجم القابل للسحب الذي يظهر أعلى ركن شريط التمرير في الزاوية السفلية لبعض العناصر</span> </pre> <p>وهذه جميع الأكواد التي يمكنك من خلالها التعديل على شريط التمرير</p> <br /> <h3>الخطوة الثانية : التعديل على أكواد شريط التمرير</h3> <br /> <p>الآن وبعد ان انتهينا من ذكر النقاط الأساسية التي سنبدأ بها التصميم على شريط التمرير يمكننا البدء في كتابة أكواد Css خاصتنا</p> <p>يوجد شرح بالفيديو في نهاية المقال يمكنك الاعتماد عليه في كتابة الأوامر والعناصر التي يمكننا اضافتها إلى الأكواد الأساسية</p> <p>وبصراحة يوجد العديد من أكواد Css التي يمكننا استخدامها لإضافة التأثيرات الخاصة بنا وسأذكر منها مايكفي لتعديل العناصر الأساسية فقط فإذا أردت يمكنك تعلم لغة Css من الصفر في أقل من يوم واحد</p> <pre><code style="color: #0d70cc;">background:</code> <span>هذه الميزة تقوم بالتغير على لون الغلاف أي ستتحكم بالألوان باستخدامها</span> <code style="color: #0d70cc;">border-radius:</code> <span>هذه الميزة ايضا ستحتاج إليها للتحكم في انحناء الأطراف الخارجية لشريط التمرير</span> <code style="color: #0d70cc;">display:</code> <span>سنستخدم هذه في اظهار أو اخفاء العناصر التي لانحتاجها</span> <code style="color: #0d70cc;">width:</code> <span>سنتحكم بها بالعرض</span> <code style="color: #0d70cc;">height:</code> <span>سنتحكم بها بالطول</span> </pre> <p>الآن وبعد ان ذكرنا الأجزاء والخصائص الأساسية يمكننا الانتقال إلى عرض مثال بسيط للأكواد التي سيبدو عليها تصميمنا</p> <pre><code style="color: #0dcc27;">::-webkit-scrollbar{</code> <code style="color: #0d70cc;">background: transparent;</code> <code style="color: #0d70cc;">width: 10px;</code> <code style="color: #0dcc27;">}</code> <code style="color: #0dcc27;">::-webkit-scrollbar-thumb{</code> <code style="color: #0d70cc;">background: #c30909;</code> <code style="color: #0d70cc;">border-radius: 10px;</code> <code style="color: #0d70cc;">height: 100px;</code> <code style="color: #0dcc27;">}</code> </pre> <p>وسيكون شكل شريط التمرير Scroll Bar ظاهرا كالتالي</p> <br> <a><img alt="تعلم تصميم شريط التمرير وإضافته الى بلوجر بسهولة وبأكواد Css فقط Scroll Bar" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie3a95eVT-ARQtvTyE36XmL51BKxUzOQIuMCSBxWeRbKpc2GYCcQk3r7EtWqIa0rAkC_QbKxtZu9XlBt_kayEkRDSk9d_lK9n2DZPeuwkF_CYoSG5hC1zx-Y85klzbmX87SeTh0osnRPw/s0-rw/Screensh213ot_1.webp"/></a> <br /> <h3>الخطوة الثالثة : اضافة الخصائص الجديدة الى جذر الموقع</h3> <br /> <p>الآن سنقوم بنسخ جميع الأكواد السابقة ولصقها في جذر الموقع الخاص بنا ويوجد شرح بالفيديو لطريقة كتابة الأكواد والتعديل عليها ثم إضافتها إلى بلوجر</p> <br /> <iframe class="BLOG_video_class" allowfullscreen="" youtube-src-id="nvZ1d32dlvA" width="640" height="360" src="https://www.youtube.com/embed/nvZ1d32dlvA?rel=0"></iframe> <br> <p>كما يمكنك <a href="https://www.mediafire.com/file/o3uimo3l6uwm63b/scroll+bar+onezol.txt/file" rel="nofollow" target="_blank">تحميل ملف الشرح</a> ليسهل عليك المتابعة والتعديل</p> <br /> <p>وفي الختام اتمنى ان يكون هذا المقال قد افادكم ولو بالقليل من المعلومات</p> <p>لاتنس ترك تعليقك بالأسفل</p> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com0tag:blogger.com,1999:blog-1552951967015435344.post-17584148931965729612020-11-20T18:31:00.014+02:002021-01-16T16:02:54.506+02:00<style> .onezol-article pre{ text-align: left; direction: ltr; border: 2px solid #c30909; font-size: 16px; overflow: auto; width: auto; } .button-m{ width: 260px; height: 70px; text-align: center; text-decoration: none; background: rgba(0, 0, 0, 0); color: #c30909!important; font-size: 30px; font-weight: bold; line-height: 60px; border: 2px solid #c30909; border-radius: 10px; transition: 0.5s; display: inline-block; } .button-m:hover { background: #c30909; color: #ffffff!important; transition: 0.5s; } .button-s{ width: 260px; height: 70px; text-align: center; text-decoration: none; font-size: 30px; font-weight: bold; line-height: 70px; border-radius: 10px; transition: 0.5s; display: inline-block; margin: 20px 0; position: relative; } .button-s:hover { background: rgb(16, 142, 151); color: #e2e2e2!important; transition: 0.5s; } .button-s:before{ content: 'للتحميل'; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgb(9 172 96); color: #ffffff!important; border-radius: 10px; opacity: 1; transition: 0.5s; } .button-s:hover:before{ opacity: 0; transition: 0.5s; filter: blur(40px); } .button-g{ width: 260px; height: 70px; text-align: center; text-decoration: none; font-size: 30px; font-weight: bold; line-height: 70px; border-radius: 10px; transition: 0.5s; color: #e2e1e1!important; background: rgb(106, 28, 179); display: inline-block; position: relative; } .button-g:hover { transition: 0.5s; } .button-g:before{ content: 'للتحميل'; position: absolute; top: 0; right: 40px; left: 0; bottom: 0; background: black; border-radius: 10px 0 0 10px; transition: 0.5s; } .button-g:hover:before{ right: 220px; transition: 0.5s; color: transparent!important; } .button-des{ text-align: center; } </style> <article class="onezol-article"> <p> عزيزي القارئ هل تريد تعلم تصميم زر جميل للمعاينة ويحمل بعض التأثيرات البسيطة عند الضغط عليه؟ </p> <p> اذا كانت الاجابة نعم فقد حان الوقت لتبهر أصدقائك ومن هم حولك بكتابة أكواد css و html بسيطة يمكنك من خلالها عرض زر ويب جميل ويحمل بعض التاثيرات والألوان والأهم من ذلك انه ستكون انت من يقوم بتصميم وكتابة أكواد زر الويب وليس نحن نعم انت </p> <a><img alt="تصميم أزرار الويب Css و Html لمدونتك من الصفر شرح مفصل اصنع ازرارك بنفسك والآن" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4QpqRxWgfePBieJchyphenhyphensI0450h39ZswcyxZMNC6Yo2_sHsGPrbBM0Jy0AWq4okz1KwJrXHkHx3fkdoDaeIDlLtkrXPo-n_4_gjqNVGB06iQ4exb9nZd3ZWM5qejRgc7f6gd_vY0jYIFq8/s16000-rw/2.webp" title="تصميم أزرار الويب Css و Html لمدونتك من الصفر شرح مفصل اصنع ازرارك بنفسك والآن" /></a> <br> <p> اذا نظرت اثناء تنقلك في مواقع الويب قد ترا ان اشهر المواقع واغلبها يقومون باستخدام أشكال وتصاميم بسيطة جدا للأزرار وقد لاتحمل الكثير من تأثيرات css وانما يقومون بتصميم وفقط الأزرار البسيطة التي تحتاجها كمستحدم للتمييز بين أجزاء الموقع </p> <p> <strong>للملاحظة</strong> يوجد شرح بالفيديو في نهاية المقالة لزيادة التوضيح </p> <p> والآن لنتحدث عن تصميمنا لهذه الأزرار ولنبدأ بما سنحتاجه للبدء في التصميم </p> <br /> <h2>الخطوة الأولى : الدخول لمحرر الأكواد</h2> <br /> <p> بالعادة ولتصميم اي من أزرار الويب سنحتاج الى برنامج يمكننا من خلاله كتابة الأكواد بكل سهولة ولكن ولتوفير الوقت يمكنك استخدام محرر الاكواد اون لاين اي انك لن تحتاج الى تحميل اي برنامج وانما يمكنك كتابة الاكواد من هذا الموقع مباشرة قم بفتح <a href="https://coders-time.blogspot.com" target="_blank">محرر الاكواد</a> في نافذة جانبية حاليا ليسهل لك العودة اليه لاحقا </p><br /> <h2>الخطوة الثانية : استخدام أكواد Html</h2> <br /> <p> من المهم ان نذكر اننا سنقوم بكتابة نوعين من الأكواد وهما css وأيضا html وتعتبر اللغتان من أسهل انواع لغات البرمجة في وقتنا الحالي </p> <p>ولنبدا أولا بأكواد html</p> <p> من الممكن القول اننا وباستخدام هذه اللغة سنقوم بإنشاء أساس البناء لزر الويب اي بدونها لن نستطيع انشاء اي من ازرار المواقع </p> <p> ويوجد الكثير من الاوامر التي تستخدم لإنشاء الازرار ولكن سنتحدث عن الاوامر الاكثر شيوعا واستخداما وهو الامر a حيث يتم استخدامه وبشكل اساسي مع الروابط التي نريد تضمينها في الموقع </p> <p> سنقوم بكتابة الامر a في جسم الموقع اي ضمن الكود body وفي المكان المخصص الذي نريد ان يظهر فيه الزر </p> <pre><code> <span>&lt;html&gt;</span> <span>&lt;head&gt;</span> <span>&lt;/head&gt;</span> <span>&lt;body&gt;</span> <span style="color: #c30909;">&lt;a&gt; &lt;/a&gt;</span> <span>&lt;/body&gt;</span> <span>&lt;/html&gt;</span> </code></pre> <p>هنالك بعض الخصائص التي يمكنك تضمينها مع الكود حسب الرغبة وهي كالاتي</p> <pre> <code><span style="color: #c30909;">&lt;a herf="www.google.com"&gt; &lt;/a&gt;</span></code> <p>باستخدام هذه الميزة يمكنك ادراج الرابط الذي تريده وكتابته بين القوسين</p> <code><span style="color: #c30909;">&lt;a target="_blank or _self"&gt; &lt;/a&gt;</span></code> <p>اي التوجيه فيمكنك ادراج القيمة blank_ لفتح الرابط في نافذة جديدة او self_ لفتح الرابط في نفس نافذة المتصفح</p> <code><span style="color: #c30909;">&lt;a rel="nofollow"&gt; &lt;/a&gt;</span></code> <p>يمكنك اضافة هذه الخاصية اذاكان الرابط الذي قمت باضافته هو رابط خارجي اي من خارج موقعك</p> <code><span style="color: #c30909;">&lt;a&gt; clickme &lt;/a&gt;</span></code> <p>بين القوسين ستقوم بكتابة العبارة التي تريدها ان تظهر للزائر على سبيل المثال اضغط هنا او اضغط للتحميل</p> <code><span style="color: #c30909;">&lt;a class="my-button"&gt; &lt;/a&gt;</span></code> <p>Class ستحتاج هذه الخاصية لتعريف الامر a وعند كتابتك لاكواد ال css</p> <p>لذالك قم بكتابة اي قيمة تريدها ولكن باحرف انجليزية فقط وبدون الارقام والاشكال الخاصة </p> </pre> <p>بعد الانتهاء من جميع الخيارات سيكون الأمر a ظاهرا كما في المثال التالي</p> <pre><code> <span>&lt;html&gt;</span> <span>&lt;head&gt;</span> <span>&lt;/head&gt;</span> <span>&lt;body&gt;</span> <span style="color: #c30909;">&lt;a herf="www.google.com" target="_blank" rel="nofollow" class="my-button"&gt; clickme &lt;/a&gt;</span> <span>&lt;/body&gt;</span> <span>&lt;/html&gt;</span> </code></pre> <p>والان اصبح بامكانك الانتقال للخطوة الثالثة</p><a href="https://zonezol.blogspot.com/2020/11/button-top-10.html" target="_blank">أفضل 10 أزرار css جاهزة للتحميل مجانا أزرار الويب Html بأكواد خفيفة للمعاينة والمشاركة</a><br /> <h2>الخطوة الثالثة : كتابة أكواد Css لتصميم زر الويب</h2> <br /> <p> حان الوقت لاضافة بعض التاثيرات الجمالية وبهذا الصدد انا اتحدث عن اللغة المحبوبة لدى الصممين وهي اكواد css </p> <p> في الحقيقة يوجد الكثير من الاوامر التي يمكنك اضافتها وتخصيص تصميمك بها لذلك سأحاول بقدر المستطاع ان اغطي على اهم الخصائص التي سنحتاجها لتصميم زر css بسيط </p> <p> وبما اننا سنستخدم الان لغة مختلفة عن html سنحتاج الى التعريف للمتصفح اننا سنقوم بكتابة اكواد من لغة css ولتعريف المتصفح بذلك سنقوم بكتابة الامر style </p> <pre><code> <span style="color: #0979c3;">&lt;style&gt;</span> <span style="color: #0979c3;">&lt;/style&gt;</span> <span style="color: #c30909;">&lt;a herf="www.google.com" target="_blank" rel="nofollow" class="my-button"&gt; clickme &lt;/a&gt;</span> </code></pre> <p> ضمن الأمر style سنقوم بكتابة بعض الاكواد التي سنختارها لتصميم زر الويب حسب الرغبة وللتعريف سنقوم بكتابة اسم Class الحاص بالزر مسبوقنا بنقطة </p> <pre><code> <span style="color: #0979c3;">&lt;style&gt;</span> <span style="color: #4dc309;">.mybutton {</span> <span style="color: #4dc309;">}</span> <span style="color: #0979c3;">&lt;/style&gt;</span> </code></pre> <p> وسنقوم بكتابة اسماء بعض التاثيرات وادخال القيم المناسبة لكل كود بين القوسين المعقوفين وهي كالاتي </p> <pre><code> <span style="color: #0979c3;">&lt;style&gt;</span> <span style="color: #4dc309;">.mybutton {</span> <p>لون خلفية الزر</p> <span style="color: #4dc309;">background: color;</span> <p>لون النص الظاهر بداخل الزر</p> <span style="color: #4dc309;">color: color;</span> <p>الإطار الخارجي</p> <span style="color: #4dc309;">border: px solid color;</span> <p>انحناء اطراف الاطار الخارجي</p> <span style="color: #4dc309;">border-radius: px;</span> <p>حجم النص</p> <span style="color: #4dc309;">font-size: px;</span> <p>سمك النص غامق</p> <span style="color: #4dc309;">font-weight: bold;</span> <p>عرض الزر </p> <span style="color: #4dc309;">width: px;</span> <p>طول الزر</p> <span style="color: #4dc309;">height: 50px;</span> <p>ارتفاع النص بداخل الزر <strong>ينصح ان يكون بنفس قيم طول الزر</strong></p> <span style="color: #4dc309;">line-height: 50px;</span> <p>الشفافية</p> <span style="color: #4dc309;">opacity: 1 or 2;</span> <p>ازالة جميع التاثيرات التلقائية من الزر</p> <span style="color: #4dc309;">text-decoration: none;</span> <p>موقع الزر في الصفحة ويمكنك اضافة اكثر من قيمة ولكن يجب عليك المراعاة في استخدام هذه الخاصية فالتعامل معها معقد قليلا </p> <span style="color: #42a00c;">position: relative or absolute or fixed or static;</span> <p>وايضا اذا قمت باستخدام الميزة position ستحتاج الى التخلي عن العرض والطول وستستبدلها بالابعاد</p> <span style="color: #42a00c;">top: px or %;</span> <span style="color: #42a00c;">bottom: px or %;</span> <span style="color: #42a00c;">right: px or %;</span> <span style="color: #42a00c;">left: px or %;</span> <p>وايضا في بعض الحالات ستحتاج الى كتابة نص اضافي باستخدام هذه الميزة</p> <span style="color: #42a00c;">content: 'text';</span> <p>هذه الميزة ستساعدك على اختيار مكان ظهور الزر ايضا وتعتبر سهلة الاستخدام</p> <span style="color: #4dc309;">display: inline or block or inline-block or flex or none;</span> <span style="color: #4dc309;">}</span> <span style="color: #0979c3;">&lt;/style&gt;</span> </code></pre> <p>والان ستكون الاكواد الخاصة بنا مشابهة للآتي</p> <pre><code> <span style="color: #4dc309;">.mybutton {</span> <span style="color: #4dc309;">background: #000000;</span> <span style="color: #4dc309;">color: #ffffff</span> <span style="color: #4dc309;">border: 2px solid #ffffff;</span> <span style="color: #4dc309;">border-radius: 10px;</span> <span style="color: #4dc309;">font-size: 20px;</span> <span style="color: #4dc309;">font-weight: bold;</span> <span style="color: #4dc309;">width: 200px;</span> <span style="color: #4dc309;">height: 50px;</span> <span style="color: #4dc309;">line-height: 50px;</span> <span style="color: #4dc309;">text-decoration: none;</span> <span style="color: #4dc309;">}</span> </code></pre> <p> اعلم انها ستكون خطوة صعبة قليلا في البداية ولكن سيسهل عليك الامر بعد الاعتياد عليها </p> <p> يمكنك ايضا اضافة الخواص مثل شكل زر الويب قبل تمرير مؤشر الماوس وبعد تمرير المؤشر عليه مع التغير في بعض الخصائص مثل اللون ونحوه وتكتب كالتالي </p> <pre><code> <span style="color: #0979c3;">&lt;style&gt;</span> <span style="color: #4dc309;">.mybutton {</span> <span style="color: #4dc309;">}</span> <p> ستكتب اسم الكلاس بشكل عادي وستضيف له نفس هذا الامر ان اردت اضافة بعض الخصائص قبل تمرير مؤشر الماوس على الزر</p> <span style="color: #4dc309;">.mybutton:before {</span> <span style="color: #4dc309;">}</span> <p> ستضيف هذا الامر ان اردت اضافة بعض الخصائص اثناء تمرير مؤشر الماوس على الزر</p> <span style="color: #4dc309;">.mybutton:hover {</span> <span style="color: #4dc309;">}</span> <p>ستضيف هذا الامر ان اردت اضافة بعض الخصائص على الزر بعد تمرير مؤشر الماوس على الزر</p> <span style="color: #4dc309;">.mybutton:after {</span> <span style="color: #4dc309;">}</span> <span style="color: #0979c3;">&lt;/style&gt;</span> </code></pre> <br /> <h2>الخطوة الرابعة: عرض زر الويب في موقعنا</h2> <br /> <p> الآن وبعد ان انتهينا من كتابة جميع أكواد css و html&nbsp; لزر الويب أصبح من السهل عرض الزر في مدونتنا ونقله لمقالاتنا او حفظه ليسهل علينا الرجوع إليه متى رغبنا بذلك والآن وللتوضيح أكثر سنقوم باستعراض 3 أزرار مختلفة لتوضيح الأفكار </p> <h3>زر الويب الأول</h3> <p>الأكواد المستخدمة لعرض الزر</p> <pre><code> <span style="color: #c30909;">&lt;a herf="#" target="_self" class="button-m"&gt; اضغط للتحميل &lt;/a&gt;</span> <span style="color: #0979c3;">&lt;style&gt;</span> <span style="color: #4dc309;">.button-m {</span> <span style="color: #4dc309;">width: 260px;</span> <span style="color: #4dc309;">height: 70px;</span> <span style="color: #4dc309;">text-align: center;</span> <span style="color: #4dc309;">text-decoration: none;</span> <span style="color: #4dc309;">background: rgba(0, 0, 0, 0);</span> <span style="color: #4dc309;">color: #c30909;</span> <span style="color: #4dc309;">font-size: 30px;</span> <span style="color: #4dc309;">font-weight: bold;</span> <span style="color: #4dc309;">line-height: 60px;</span> <span style="color: #4dc309;">border: 2px solid #c30909;</span> <span style="color: #4dc309;">border-radius: 10px;</span> <span style="color: #4dc309;">transition: 0.5s;</span> <span style="color: #4dc309;">display: inline-block;</span> <span style="color: #4dc309;">}</span> <span style="color: #48af0c;">.button-m:hover {</span> <span style="color: #48af0c;">background: #c30909;</span> <span style="color: #48af0c;">color: #ffffff;</span> <span style="color: #48af0c;">transition: 0.5s;</span> <span style="color: #48af0c;">}</span> <span style="color: #0979c3;">&lt;/style&gt;</span> </code></pre> <p>وسيكون شكل الزر كالآتي</p> <div class="button-des"> <a class="button-m" href="#" target="_self">اضغط للتحميل</a> </div> <br /> <h3>زر ويب الثاني</h3> <br /> <p>الأكواد المستخدمة لعرض الزر</p> <pre><code> <span style="color: #c30909;">&lt;a herf="#" target="_self" class="button-m"&gt; اضغط هنا &lt;/a&gt;</span> <span style="color: #0979c3;">&lt;style&gt;</span> <span style="color: #4dc309;">.button-s {</span> <span style="color: #4dc309;">width: 260px;</span> <span style="color: #4dc309;">height: 70px;</span> <span style="color: #4dc309;">text-align: center;</span> <span style="color: #4dc309;">text-decoration: none;</span> <span style="color: #4dc309;">font-size: 30px;</span> <span style="color: #4dc309;">font-weight: bold;</span> <span style="color: #4dc309;">line-height: 70px;</span> <span style="color: #4dc309;">border-radius: 10px;</span> <span style="color: #4dc309;">transition: 0.5s;</span> <span style="color: #4dc309;">display: inline-block;</span> <span style="color: #4dc309;">position: relative;</span> <span style="color: #4dc309;">}</span> <span style="color: #48af0c;">.button-s:hover {</span> <span style="color: #48af0c;">background: rgb(16, 142, 151);</span> <span style="color: #48af0c;">color: #e2e2e2;</span> <span style="color: #48af0c;">transition: 0.5s;</span> <span style="color: #48af0c;">}</span> <span style="color: #42a00b;">.button-s:before {</span> <span style="color: #42a00b;">content: 'للتحميل';</span> <span style="color: #42a00b;">position: absolute;</span> <span style="color: #42a00b;">top: 0;</span> <span style="color: #42a00b;">left: 0;</span> <span style="color: #42a00b;">right: 0;</span> <span style="color: #42a00b;">bottom: 0;</span> <span style="color: #42a00b;">background: rgb(9 172 96);</span> <span style="color: #42a00b;">color: #ffffff;</span> <span style="color: #42a00b;">border-radius: 10px;</span> <span style="color: #42a00b;">opacity: 1;</span> <span style="color: #42a00b;">transition: 0.5s;</span> <span style="color: #42a00b;">}</span> <span style="color: #3f990b;">.button-s:hover:before{</span> <span style="color: #3f990b;">opacity: 0;</span> <span style="color: #3f990b;">transition: 0.5s;</span> <span style="color: #3f990b;">filter: blur(40px);</span> <span style="color: #3f990b;">}</span> <span style="color: #0979c3;">&lt;/style&gt;</span> </code></pre> <p>وسيكون شكل الزر كالآتي</p> <div class="button-des"> <a class="button-s" href="#" target="_self">اضغط هنا</a> </div> <br /> <h3>زر الموقع الثالث</h3> <br /> <p>الأكواد المستخدمة لعرض الزر</p> <pre><code> <span style="color: #c30909;">&lt;a herf="#" target="_self" class="button-g"&gt; اضغط هنا &lt;/a&gt;</span> <span style="color: #0979c3;">&lt;style&gt;</span> <span style="color: #4dc309;">.button-g {</span> <span style="color: #4dc309;">width: 260px;</span> <span style="color: #4dc309;">height: 70px;</span> <span style="color: #4dc309;">text-align: center;</span> <span style="color: #4dc309;">font-weight: bold;</span> <span style="color: #4dc309;">line-height: 70px;</span> <span style="color: #4dc309;">border-radius: 10px;</span> <span style="color: #4dc309;">transition: 0.5s;</span> <span style="color: #4dc309;">display: inline-block;</span> <span style="color: #4dc309;">position: relative;</span> <span style="color: #4dc309;">color: #e2e1e1;</span> <span style="color: #4dc309;">background: rgb(106, 28, 179);</span> <span style="color: #4dc309;">}</span> <span style="color: #48af0c;">.button-g:hover {</span> <span style="color: #48af0c;">transition: 0.5s;</span> <span style="color: #48af0c;">}</span> <span style="color: #42a00b;">.button-g:before {</span> <span style="color: #42a00b;">content: 'للتحميل';</span> <span style="color: #42a00b;">position: absolute;</span> <span style="color: #42a00b;">top: 0;</span> <span style="color: #42a00b;">left: 0;</span> <span style="color: #42a00b;">right: 40px;</span> <span style="color: #42a00b;">bottom: 0;</span> <span style="color: #42a00b;">background: black;</span> <span style="color: #42a00b;">border-radius: 10px 0 0 10px;</span> <span style="color: #42a00b;">transition: 0.5s;</span> <span style="color: #42a00b;">}</span> <span style="color: #3f990b;">.button-g:hover:before{</span> <span style="color: #3f990b;">right: 220px;</span> <span style="color: #3f990b;">transition: 0.5s;</span> <span style="color: #3f990b;">color: transparent;</span> <span style="color: #3f990b;">}</span> <span style="color: #0979c3;">&lt;/style&gt;</span> </code></pre> <p>وسيكون شكل الزر كالآتي</p> <div class="button-des"> <a class="button-g" href="#" target="_self">اضغط هنا</a> </div> <br /> <h3> شرح بالفيديو لكتابة أكواد Html و Css من الصفر لإنشاء وتصميم 3 أزرار للويب يمكنك استخدامها </h3> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/AaBC3tBEIsk?rel=0" width="640" youtube-src-id="AaBC3tBEIsk"></iframe><br> <h3>يمكنك تحميل جميع ملحقات الشرح</h3> <br> <p><a href="https://www.mediafire.com/file/j7b5elconf5kveg/3_%25D8%25A3%25D8%25B2%25D8%25B1%25D8%25A7%25D8%25B1_%25D9%2585%25D8%25AA%25D8%25AC%25D8%25A7%25D9%2588%25D8%25A8%25D8%25A9_%25D9%2585%25D9%2586_OneZol.txt/file" rel="nofollow" target="_blank">اضغط هنا</a></p> <p> وبهذا نكون قد انتهينا من شرحنا لهذا اليوم فأتمنى ان يكون قد نال على اعجابكم ورضاكم </p> <p>اترككم في حفظ الله ورعايته - اترك تعليقك بأسفل المقالة</p> </article> OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com0tag:blogger.com,1999:blog-1552951967015435344.post-62710058077302923232020-10-26T01:51:00.023+02:002021-01-16T16:01:25.728+02:00<style> .onezol-article pre{ width: auto; overflow: auto; border: 2px solid #c30909; direction: ltr ; } </style> <article class="onezol-article"> <p>هل تعلم عزيزي القارئ ان 65% من البيانات المخزنة على معظم المواقع هي في الغالب عبارة عن صور</p> <p>ولكن مع تطور العلم وتطور تقنيات ضغط الصور تم إصدار صيغة الويب الشهيرة WebP</p> <p>فلماذا تعتبر هذه الصيغة هي الصيغة الأفضل والأمثل استخداما على الانترنت سواء للمستخدم أو الزائر ؟</p> <p>تتميز هذه الصيغة عن بقية الصيغ بالعديد من التقنيات التي تجعلها الأقل حجما والأسرع تصفحا وتحميلا للصفحات بمعنى آخر الحفاظ على مستوى البطارية وتحسين تجربة المستخدم وأيضا الأهم من ذلك استهلاك أقل للبيانات <a href="https://zonezol.blogspot.com/2020/10/webp.html" target="_blank">للتعرف على المزيد عن هذه الصيغة</a></p> <br> <a><img alt="جميع طرق تحويل الصور إلى WebP واستخدامها على بلوجر" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYUn1gk6l3XZu0N9mtlWYrV8yfMl2cfRZ_i2FMK6H4JurH39bVsxgyynwRwVtXDI-YjRYSH0kI9SAjt-TuVQ_e9EdZUOxsFIaX2YulW0Ahd_AWmwduYUn7F3BuTQw3ieEAvGNw15jnpu8/s16000-rw/%25D8%25A7%25D9%2584%25D8%25AA%25D8%25AD%25D9%2588%25D9%258A%25D9%2584+%25D8%25A7%25D9%2584%25D9%2589+webp.webp" title="جميع طرق تحويل الصور إلى WebP واستخدامها على بلوجر" /></a> <br> <p>في هذا المقال سنتحدث عن الجانب العملي والتطبيقي لأغلب الطرق والأدوات المستخدمة لتحويل الصور من وإلى صيغة الويب WebP</p> <p>ومع ذلك من المهم أن تتذكر أن WebP ليس بديلا لصور JPEG و PNG ان WebP تنسيق يمكنك تقديمه للمتصفحات التي يمكنها استخدامه ولكن يجب الاحتفاظ بتنسيقات الصور القديمة في متناول اليد للمتصفحات الأخرى التي لاتقوم بدعم هذه الصيغة</p> <br> <h2>ماهي المتصفحات التي تقوم بدعم صيغة الويب WebP ؟</h2> <br> <p>نظرا لأن WebP هي إحدى تقنيات Google فإن دعمها ثابت في المتصفحات القائمة على Blink كما تشكل هذه المتصفحات جزءا كبيرا من المستخدمين في جميع أنحاء العالم مما يعني أن ما يقترب من 75٪ من المتصفحات المستخدمة تدعم WebP</p> <p>ولمعرفة جميع المتصفحات التي تقوم بدعم هذه الصيغة <a href="https://zonezol.blogspot.com/2020/10/webp.html" target="_blank">قم بقراءة هذا المقال</a></p> <br> <h2>أهم برامج تحويل الصور إلى صيغة الويب WebP</h2> <p>لنبدأ أولا بأشهر برنامج لتعديل وتصميم الصور</p> <p>إذا كنت معتادا على Photoshop فإن أسهل طريقة للتحويل والتعرف على WebP هي تجربة المكون الإضافي WebP Photoshop</p> <p>بعد تثبيته ستتمكن من تحويل صورك من وإلى WebP كما والتعديل على مستوى الفقدان والجودة</p> <p>لتحميل الإضافة قم <a href="https://www.mediafire.com/file/9pnxfy18d4uok3u/WebPShop-master.zip/file" target="_blank" rel="nofollow">بالضغط هنا</a></p> <p>لتركيب الإضافة كل ماعليك هو فك الضغط عن المجلد ثم الدخول إلى الملف ثم bin و اختيار نسختك ثم نسخ الإضافة وإرفاقها في جذر البرنامج بداخل المجلد plugs in</p> <p>كما ويتوفر شرح بسيط بالفيديو في نهاية المقال</p> <br> <a><img alt="تعديل الخيارات الموجودة على فوتوشوب webp" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioqz-MC1Ko6YK2G6fi-JoHPf7nkO7PPH3RJ8AOJItnZFbeqq6sOg-YnXmppSjNbYQ_Sy1UyMCl-Qz9DpkjZZNlPHbCia9YJ1zngvcOSENGHOQ1klBarjNKhcBfJrS1qlKKEYcffzSTwIA/s16000-rw/%25D8%25AE%25D9%258A%25D8%25A7%25D8%25B1%25D8%25A7%25D8%25AA+%25D8%25A7%25D9%2584%25D8%25B1%25D9%2581%25D8%25B9+%25D9%2585%25D9%2586+%25D9%2581%25D9%2588%25D8%25AA%25D9%2588%25D8%25B4%25D9%2588%25D8%25A8.webp" title="جميع طرق تحويل الصور إلى WebP واستخدامها على بلوجر" /></a> <br> <p>يوفر مربع حوار الإعدادات لـWebP مزيدا من المرونة لتكوين الإخراج يمكنك ضبط جودة الصورة باستخدام شريط تمرير من 0 إلى 100 وتعيين قوة ملف تعريف التصفية للحصول على أحجام ملفات أقل ( على حساب جودة الصورة بالطبع ) وضبط تصفية الضوضاء والحدة</p> <p>الشيئ السيء مع المكون الإضافي WebP Photoshop يتمثل في أنه لا توجد واجهة Save for Web لذلك يمكنك معاينة الشكل الذي ستبدو عليه الصورة بالإعدادات التي اخترتها كما أنه من الصعب تحويل مجموعة من الصور من وإلى WebP مما قد يرهق البعض</p> <p>كما ويوجد العديد من البرامج الأخرى مثل GIMP و Thumb وغيره إذا أردت تجربتها</p> <br> <h2>أهم المواقع لتحويل صورك من وإلى WebP</h2> <br> <p>بالتأكيد ليس الجميع خبيرا في استخدام برامج تعديل الصور لذلك لاتقلق فيمكنك تحويل صورك من وإلى WebP فقط بضغطة زر</p> <p>بصراحة يوجد العديد من المواقع المجانية والتي تقوم بتحويل مختلف صيغ الصور من وإلى WebP وسأذكر لكم أهم هذه المواقع وهو الموقع الشهير <a href="https://squoosh.app/" target="_blank" rel="nofollow">Squoosh</a> </p> <p>هذا الموقع متخصص في ضغط حجم الصور وأيضا تحويلها إلى صيغ اخرى بواجهة ولوحة تحكم ممتازة كل ماعليك هو الدخول للمواقع ورفع صورتك التي تريد تحويلها إلى WebP ثم التحكم في الجودة وحجم الضغط حينها سيقوم الموقع بتحويل صورتك إلى WebP تلقائيا ويمكنك تحميلها والاستمتاع بسرعة وحجم أفضل </p> <p>ويجدر بالذكر أنه يمكنك تحميل الموقع كتطبيق وعلى جميع الأجهزة بالضغط على كلمة install لتتمكن بعد ذلك من العودة إليه كلما رغبت في التحويل بين الصيغ</p> <p>كما يوجد العديد من المواقع الأخرى إذا أردت اجراء بعض التجارب</p> <a href="https://onlineconvertfree.com/ar/convert/webp/" target="_blank" rel="nofollow" >onlineconvertfree</a> <br> <a href="https://convertio.co/ar/jpg-webp/" target="_blank" rel="nofollow" >convertio</a> <br> <a href="https://tiny-img.com/webp/" target="_blank" rel="nofollow" >tiny</a> <br> <a href="https://cloudconvert.com/" target="_blank" rel="nofollow" >cloudconvert</a> <br> <h2>طريقة استخدام صيغة WebP في بلوجر Blogger لزيادة السرعة</h2> <br> <p>إذا كنت تستخدم في موقعك صورا بصيغة PNG أو JPG فبالتأكيد ستلاحظ أنه عند تحليل موقعك في <a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="nofollow">Google PageSpeed Insight</a> ان هنالك بطئ ملحوظ في موقعك بسبب عدم عرض الصور بتنسيقات الجيل القادم مما يؤثر على سرعة الموقع الخاص بك </p> <p>ستساعدك هذه الطريقة على تجاوز هذه المشكلة بطريقة بسيطة</p> <p>بالعادة عند رفعك لصورة بصيغة WebP يقوم بلوجر بتحويلها إلى احدى الصيغ الأخرى مثل PNG و JPG فما هو الحل ؟</p> <p>يتوفر طريقة بسيطة جدا لعرض الصور في بلوجر بصيغة WebP وستلاحظ بعد استخدامها سرعة في أداء موقعك</p> <p>وأيضا اختفاء رسالة حفظ الصور بتنسيقات الجيل القادم عند تحليل سرعة الموقع </p> <p>تجدر الإشارة هنا أنه يجب ان تقوم بتحويل صيغة صورتك إلى WebP باستخدام أحد الطرق السابقة قبل الشروع في استخدامها على بلوجر</p> <p>الآن وبعد كتابتك لأحد المشاركات على بلوجر وإضافة بعض الصور قم بتبديل وضع الإنشاء إلى عرض html </p> <p>ثم بعد ذلك قم بالبحث عن رابط الصورة المطلوبة وقم باضافة القيمة <span style="color: #c30909">rw-</span> إلى الرمز <span style="color: #c30909">s1600</span> بحيث يكون شكل الرابط بعد التعديل عليه كما في المثال التالي</p> <p>قبل تغيير الرابط</p> <pre><code>href="https://zolimg/<span style="color: #c30909">s1600</span>/0dea.jpg" src="https://zolimg/<span style="color: #c30909">s1600</span>/0dea.jpg"</code></pre> <p>بعد تغيير الرابط</p> <pre><code>href="https://zolimg/<span style="color: #c30909">s1600-rw</span>/0dea.jpg" src="https://zolimg/<span style="color: #c30909">s1600-rw</span>/0dea.jpg"</code></pre> <p>حيث يؤدي ذلك إلى تغيير الحجم التنقلي للملف وبهذه الطريقة ستتمكن من عرضها على بلوجر بكفاءة </p> <br> <p style="color: #c30909">ويجدر الملاحظة إلى أمرين</p> <p>أن الرمز <span style="color: #c30909">s1600</span> ليس ثابتا ومن الممكن ان يتغير بتغيير مقاسات الصورة المراد تحويلها أي من الممكن ان يكون <span style="color: #c30909">s700</span> أو <span style="color: #c30909">s900</span> وما إلى ذلك</p> <p>يتواجد رابطان لكل صورة الأول يكون بعد المسمى <span style="color: #2ec309">href</span> والثاني يكون بعد المسمى <span style="color: #2ec309">SRC</span> تأكد من التعديل على الرابطين لكل صورة واحدة</p> <br> <p>كما ويمكنك حفظ الصور في الذاكرة المؤقتة للمتصفح أو مايعرف بملفات الكاش ، حيث يؤدي ذلك الى تسريع تحميل الصفحة في المرات القادمة للزائر</p> <br> <p>ويتم ذلك عبر اضافة الكود <span style="color: #c30909">e day</span> حيث يتم كتابة عدد ايام حفظ الصورة في ذاكرة المتصفح للجهاز وتكون بين 1 وحتى 365 يوما ، وسيكون رابط الصورة في النهاية على النحو التالي</p> <br> <pre><code><span style="color: #2ec309">href</span>="https://zolimg/<span style="color: #c30909">s1600-rw-e90</span>/0dea.jpg" <span style="color: #2ec309">src</span>="https://zolimg/<span style="color: #c30909">s1600-rw-e90</span>/0dea.jpg"</code></pre> <br> <p>لمشاهدة شرح تحويل الصور إلى webp بالفيديو</p> <br> <iframe class="BLOG_video_class" allowfullscreen="" youtube-src-id="AnNozg_TXb0" width="640" height="360" src="https://www.youtube.com/embed/AnNozg_TXb0?rel=0"></iframe> <br> <p>الخلاصة</p> <p> ستساعدك هذه الصيغة على تحسين تجربة المستخدم لموقعك على الويب من خلال السماح بتحميل موقعك بشكل أسرع وسيستفيد المستخدمون الذين يتصفحون مدونتك عبر شبكات المحمول بشكل كبير أيضا حيث سيؤدي إلى تقليل استهلاك البطارية واستهلاك البيانات</p> <p>في الختام</p> <p>WebP هو تنسيق صور متعدد الاستخدامات يمكننا تقديمه للمتصفحات بدلا من صور PNG و JPEG بحيث يؤدي إلى تقليل كبير في حجم الصور على موقع الويب الخاص بك وكما نعلم أن أي شيء ينتج عنه نقل بيانات أقل سيقلل من وقت تحميل الصفحة</p> <p>اتمنى ان يكون هذا المقال البسيط قد غير من وجهة نظرك حول صيغة WebP</p> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com0tag:blogger.com,1999:blog-1552951967015435344.post-81200178436986336062020-10-25T01:23:00.027+02:002021-01-16T15:44:59.442+02:00<article class="onezol-article"> <p>من المحتمل أنك رأيت صور WebP من قبل إذا فتحت YouTube في Google Chrome فستكون كل هذه الصور المصغرة عبارة عن صور مصغرة لـ WebP </p> <p>إذا كنت ستفتح تطبيق Facebook على هاتف Android الخاص بك فستكون جميع الصور التي تراها هي WebP حيث يتم استخدامه بالتأكيد من قبل العديد من الشركات حول العالم للعديد من الأسباب</p> <p>في مقال سابق تحدثنا عن أهم الأشياء التي يجب علينا مراعاتها قبل رفع الصور على الإنترنت واليوم سنتحدث بتفصيل أكثر عن صيغة الويب بي web p ولماذا تعتبر هذه الصيغة هي الأفضل والأمثل استعمالا من بين مختلف الصيغ الأخرى؟</p> <p>حاليا سأتخطى الجانب العملي التطبيقي لأتحدث عنه في مقال منفصل تماما</p> <p>الصور هي أدوات معبرة ولديها القدرة على التحدث أكثر من بعض النصوص يكمن التحدي الحقيقي في السير على حبل مشدود بين المحتوى الغني بصريا والتسليم السريع لهذا المحتوى</p> <br /> <a><img alt="ماهي WebP ولماذا تتربع على عرش صور الانترنت كأسرع تنسيق ملفات للمواقع" border="0" data-original-height="394" data-original-width="700" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmS8gRMA1tJbySHLXGGbRLFw5C6lWkpfNcQTlExJDElTo-oCmC65FcQZ9421ZicI8ocd99NL3Rnu7vHSwNyEETTBRQ3cqpAK6SxntxnjI8Iahk0Ro9biruU-7-LTYDpOKN3wv2FSMHH4o/s16000-rw/webp.webp" title="ماهي WebP ولماذا تتربع على عرش صور الانترنت كأسرع تنسيق ملفات للمواقع" /></a> <br /> <h2>ماهي صيغة الويب بي web p ؟</h2> <br /> <p>ويب بي WebP هي تنسيق أي صيغة صور مفتوحة المصدر يتم تطويرها من قبل شركة جوجل Google</p> <p>تعد صيغة WebP أو كما يسميها البعض Weppy المشروع الشقيق لتنسيق الفيديو WebM حيث تم بناءها باستخدام برنامج ترميز الفيديو VP8 الذي طورته شركة On2 Technologies</p> <p>تعمل هذه الصيغة على تقليص حجم الصور مع الحفاظ على الجودة العالية وهي خاصة بالصور التي تستخدم على الويب بمختلف أنواعها المفقودة lossy وغير المفقودة lossless</p> <p>ويمكن القول أن صيغة WebP تجمع بشكل أساسي بين ميزات جميع صيغ الصور JPEG و PNG و GIF معا بطريقة سلسة</p> <p>لتوضيح الفكرة أكثر لابد لنا من التعرف على نوعي ضغط الصور</p> <br /> <h3>ضغط الصور مع فقدان للبيانات lossy</h3> <br /> <p>الضغط مع الفقد أو الضغط غير القابل للرجوع هو نوع من أنواع تشفير البيانات التي تستخدم تقديرات تقريبية غير دقيقة وتجاهل جزئي للبيانات لتمثيل المحتوى ويتم استخدام هذه التقنيات بشكل أساسي لتقليل حجم البيانات</p> <p>حيث يؤدي ضغط الصور مع الفقد إلى إنشاء صور متشابهة البيانات تقريبا مما يقلل من حجم الملف بعد الضغط لذلك عادة ما تكون صور الضغط المفقودة أصغر حجما من صور الضغط بدون الفقدان ولكنها تعاني من فقدان الجودة</p> <p>كما أن للضغط مع الفقدان مساوئ تدهور البيانات في كل مرة تقوم فيها بضغط نفس الصورة حيث يصبح التعرف على الصورة أصعب فأصعب</p> <p>ويتم استخدام الضغط مع الفقد في الكثير من التطبيقات ولكن سنذكر منها مايهمنا في هذا المقال وهي صيغة الصور JPEG و WebP</p> <p>كما وأنها تعتبر الطريقة الشائعة حاليا في ضغط مختلف أنواع البيانات</p> <br /> <h3>ضغط الصور بدون فقدان للبيانات lossless</h3> <br /> <p>الضغط بدون فقدان هو نوع من خوارزميات ضغط البيانات التي تسمح بإعادة بناء البيانات الأصلية بشكل مثالي عند قراءة البيانات المضغوطة ويستخدم عادة مع معدلات ضغط محسّنة بشكل كبير وبالتالي الحصول على أحجام منخفضة للوسائط</p> <p>يتم استخدام ضغط البيانات بدون فقدان في العديد من التطبيقات مثل صيغ الصور Png و Gif و WebP وغيره من الحالات التي يكون فيها من المهم أن تكون البيانات الأصلية والبيانات التي تم فك ضغطها متطابقين مما يجعل الصور لا تفقد أي جودة بعد ضغطها ولكنها تعرض أحجام ملفات أكبر بكثير من سابقتها التي بفقدان</p> <p>من ناحية إن الضغط بدون فقدان البيانات يجعل الصور تبدو أفضل بكثير ولكن من الناحية الأخرى فإن التعامل مع أحجام الملفات الكبيرة من الممكن ان يتسبب في تعطيل خادمك أو ان يجعل تحميل مواقع الويب أبطأ من المعتاد</p> <br /> <a><img alt="الفرق بين ضغط الصور بفقدان وبدون فقدان" border="0" data-original-height="540" data-original-width="960" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-oEpTydux9IW_TcMbK7Suf4g5I7lU29o-Vg7RyaRbyDzbUe5aU2bCXCxVEkFi71GOMhnwpfpkF9Inp9cFt9Zs9icylKRUc1WF92mtJ2rYimKFEvxnRghLfSYlCnt6I3x6D6PbJtLSL-I/s16000-rw/%25D9%2585%25D8%25A7-%25D9%2587%25D9%2588-%25D8%25A7%25D9%2584%25D9%2581%25D8%25B1%25D9%2582-%25D8%25A8%25D9%258A%25D9%2586-%25D8%25B5%25D9%258A%25D8%25BA-%25D8%25A7%25D9%2584%25D8%25B5%25D9%2588%25D8%25B1-%25D8%25A7%25D9%2584%25D9%2585%25D8%25AA%25D9%2586%25D9%2588%25D8%25B9%25D8%25A9-webp-jpg-png-gif-.webp" title="ماهي WebP ولماذا تتربع على عرش صور الانترنت كأسرع تنسيق ملفات للمواقع" /></a> <br /> <h2>مراحل تطوير صيغة الويب بي WebP والأبحاث التي أجريت عليها</h2> <br /> <p>بداية من العام 2010 كانت الصور تشكل حوالي 65٪ من البايت المنقول لكل صفحة ويب وبالتأكيد كان لها الدور الرئيسي في ابطاء تجربة المستخدم وخاصة على الشبكات المقيدة مثل شبكة الهاتف الجوال</p> <p>لقد بدأ كل شيء عندما لاحظت شركة Google أن الصور بشكل عام هي المسؤولة باستمرار عن غالبية وقت الإستجابة على صفحات الويب</p> <p>فعندها قرر بعض المهندسين العاملين في شركة جوجل Google اكتشاف ما إذا كانت هناك طريقة لزيادة ضغط الصور المفقودة لجعلها يتم تحميلها بشكل أسرع مع الحفاظ على الجودة والدقة</p> <p>في التاسع عشر من فبرارير ومن نفس العام قامت شركة جوجل Google بشراء شركة On2 Technologies بسبب إمتلاكها بعض التقنيات المتطورة والتي كان من بينها برنامج الترميز VP8</p> <p>عندها بدء الفريق عملهم باستخدام بعض الأجزاء من برنامج الترميز VP8 والذي يعمل على تشفير الإطار الداخلي للفيديو للدفع إلى ترميز وتشفير الصور الثابتة</p> <p>وأيضا تم استخدام حاوية خفيفة الوزن للغاية تعتمد على الصيغة RIFF والتي تساهم في تقليل الحد الأدنى من الحمل بمقدار 20 بايت فقط لكل صورة كما وأنها قابلة للتوسع للسماح للمؤلفين بحفظ البيانات الوصفية التي يرغبون في تخزينها والتي تسمى اليوم بميزة ALT</p> <p>بينما كانت فوائد ضغط الصورة المستند إلى VP8 واضحة من الناحية النظرية احتاج فريق العمل إلى اختبارها في العالم الحقيقي لذلك ومن أجل قياس فعالية المشروع تم اختيار مليون صورة عشوائيا من الإنترنت (معظمها ملفات JPEG وبعض ملفات PNG و GIF) وتم إعادة تشفيرها إلى WebP دون المساس بالجودة المرئية بشكل ملحوظ</p> <p>وقد أدى ذلك إلى تقليل حجم ملف الصورة بنسبة 39٪ في المتوسط وقد كانت هذه النتائج بحد ذاتها تعتبر تقدما ملحوظا لفريق العمل</p> <p>فبناءا على هذه النتائج أعلنت شركة جوجل Google يوم الخميس 30 سبتمبر من العام 2010 أول بداية حقيقية لصيغة الويب بي WebP حيث قالت أنه من المفترض أن تكون صيغة الويب بي WebP معيارا جديدا مفتوحا للرسومات الحقيقية للصور المضغوطة في شبكة الإنترنت</p> <p>ولكن مازالت هنالك الكثير من العقبات التي كانت تواجه هذه الصيغة الجديدة متمثلة في عرض الصورة بصيغة WebP حيث كان لابد من إضافتها لكل المتصفحات وبرامج عرض وتعديل وتحويل صيغ الصور</p> <p>ولكن وبالرغم من وجود الكثير من العقبات ازداد عدد مواقع الويب وتطبيقات الهاتف التي تستخدم صيغة WebP ازديادا كبيرا</p> <p>في الثالث من أكتوبر عام 2011 أضافت جوجل Google تنسيق ملف ممتد يسمح بدعم WebP للرسوم المتحركة وملف تعريف ICC وبيانات XMP و Exif الوصفية والتبليط أي تكوين صور كبيرة 16384 × 16384 بلاطة كحد أقصى</p> <p>مما سمح بدعم الرسوم المتحركة بتحويل صور GIF المتحركة القديمة إلى WebP متحرك</p> <p>في الثامن عشر من نوفمبر عام 2011 بدأت جوجل Google في تجربة الضغط بدون فقدان البيانات ودعم الشفافية ( قناة ألفا ) في كلا الوضعين بدون فقدان البيانات وفقدان البيانات </p> <p>حيث تم تمكين دعم مكتبة libwebp بشكل افتراضي في السادس عشر من أغسطس عام 2012 ووفقا لقياسات جوجل Google يؤدي التحويل من PNG إلى WebP إلى تقليل حجم الملف بنسبة 45٪ عند البدء بملفات PNG الموجودة على الويب وانخفاض بنسبة 28٪ مقارنة بملفات PNG التي يتم إعادة ضغطها باستخدام PngCrush</p> <p>تسمح حاوية WebP ( أي حاوية RIFF لـ WebP ) بدعم الميزات فوق حالة الإستخدام الأساسية لـ WebP ( أي ملف يحتوي على صورة واحدة مشفرة كإطار رئيسي VP8 تعرف حاليا بالصورة المصغرة) من أهم مميزات هذه الحاوية أنها توفر دعما اضافيا لما يلي</p> <br /> <ul> <li><span>الضغط بدون فقدان البيانات حيث يمكن ضغط الصورة بدون فقدان البيانات باستخدام تنسيق WebP Lossless</span></li> <li><span>البيانات الوصفية حيث انه من الممكن ان تحتوي الصورة على بيانات وصفية مخزنة في تنسيقات Exif أو XMP</span></li> <li><span>الشفافية كما أنه من الممكن ان تحتوي الصورة على شفافية أي قناة ألفا</span></li> <li><span>ملف تعريف اللون قد تحتوي الصورة على ملف تعريف ICC مضمن</span></li> <li><span>الرسوم المتحركة قد تحتوي الصورة على إطارات متعددة مع توقف مؤقت بينها مما يجعلها رسوم متحركة</span></li> <li><span>في مقارنة تم إجراؤها بين GIF و APNG و WebP تبين من مصادر GIF أن APNG تحافظ على حجم ملف أقل مع الحفاظ على جودة متساوية</span></li> </ul> <br /> <p>وتعتبر هذه التطورات من أبرز وأهم الأشياء التي حدثت في ذاك الوقت ويكفي أن نقول انه يتم تطوير هذه التقنية إلى يومنا هذا ولكن بمعدلات بسيطة تكاد لاتذكر</p> <br /> <h2>صيغة الويب بي WebP اليوم والتكنلوجيا المستخدمة في بناءها</h2> <br /> <p>صيغة الويب بي WebP اليوم في الإصدار 1.0.0 لذلك اعتقد أنه سيكون وقتا رائعا للتحدث عما يجعل WebP قويا جدا ولماذا يعد خيارا رائعا لمصممي ومطوري الويب؟</p> <ul> <li><span>تعتمد خوارزمية الضغط مع فقدان البيانات WebP على التشفير داخل الإطار لتنسيق الفيديو VP8 وتنسيق ملف تبادل الموارد RIFF كتنسيق حاوية</span></li> <li><span>كما وأصبح WebP عبارة عن مخطط تحويل قائم على الكتلة مع ثمانية بتات من عمق اللون ونموذج اللمعان مع أخذ عينات فرعية من الصيغ</span></li> <li><span>بدون مزيد من المحتوى فإن حاوية RIFF الإلزامية لها سعة عشرين بايت فقط على الرغم من أنها يمكن أن تحتوي أيضا على بيانات وصفية إضافية الطول الجانبي لصور WebP محدد بـ 16383 بكسل</span></li> <li><span>يعتمد WebP بشكل أساسي على توقع الكتل حيث يتم فك تشفير الكتلة بترتيب المسح النقطي من اليسار إلى اليمين ومن أعلى إلى أسفل</span></li> <li><span>هناك أربعة أوضاع أساسية لتنبؤ الكتلة أفقي وعمودي ولون واحد وموجة حقيقية</span></li> <li><span>كما ويتم ضغط البيانات الخاطئة والكتل غير المتوقعة في كتلة فرعية 4 × 4 بكسل</span></li> <li><span>حيث يتم إجراء كلا التحويلين بحساب النقطة الثابتة لتجنب أخطاء التقريب</span></li> <li><span>يتم ضغط الإخراج باستخدام ترميز إنتروبيا كما ويحتوي WebP أيضا على دعم واضح لفك التشفير المتوازي</span></li> <li><span>يتكون التطبيق المرجعي من برنامج محول في شكل برنامج سطر أوامر لنظامLinux ومكتبة CWebP برمجة لفك التشفير مثل WebM</span></li> <li><span>تمكن مجتمع المصادر المفتوحة بسرعة من نقل المحول إلى أنظمة أساسية أخرى مثل Windows</span></li> <li><span>تم تصميم ضغط WebP بدون فقدان للبيانات وهو تنسيق جديد لا علاقة له بـ VP8 بواسطة مهندس البرمجيات Jyrki Alakuijala يستخدم تقنيات متقدمة مثل أكواد الانتروبيا المخصصة لقنوات الألوان المختلفة واستغلال المنطقة ثنائية الأبعاد للمسافات المرجعية المتخلفة وذاكرة تخزين الألوان كما ويكمل هذه التقنيات الأساسية مثل ترميز القاموس وترميز هوفمان وتحويل فهرسة الألوان</span></li> <li><span>تستخدم صيغة WebP تعريفا تعاوديا حيث يتم ترميز جميع صور التحكم بنفس طريقة ترميز الصورة بأكملها</span></li> <li><span>اقترحت Google استخدام WebP للصور المتحركة كبديل لتنسيق GIF الشهير مستشهدة بمزايا الألوان ذات 24 بت مع الشفافية والجمع بين الإطارات بضغط مع فقدان وضغط بدون فقدان في نفس الرسوم المتحركة وكذلك دعم البحث عن إطارات محددة</span></li> <li><span>كما أبلغت Google عن انخفاض بنسبة 64٪ في حجم الملف للصور المحولة من صور GIF المتحركة إلى ملفات WebP مع فقدان للبيانات وانخفاض بنسبة 19٪ عند التحويل إلى WebP بدون فقدان للبيانات</span></li> </ul> <br /> <h2>المتصفحات التي تدعم صيغة الويب بي WebP</h2> <br /> <p>الآن وبعد ان تعمقنا في فهم آلية عمل هذه الصيغة الحديثة والتكنلوجيا المستخدمة في صناعتها </p> <p>من الجدير بالذكر ان نعرف ما إن كانت جميع المتصفحات تدعم هذه الصيغة ؟ أم لا ؟</p> <p>نظريا وبطبيعة الحال إذا أتيحت لك الفرصة لجعل موقع الويب الخاص بك أسرع لأكثر من ثلثي المستخدمين لديك فهل ستفوت هذه الفرصة؟</p> <p>يتم دعم WebP في Google Chrome و Firefox و Edge ومتصفح Opera والعديد من مكتبات الأدوات والبرامج الأخرى</p> <p>كما ويتضمن WebP مكتبة libwebp وهي مكتبة مفتوحة المصدر أي أنه يمكن اضافتها لجميع المتصفحات والمستخدمين وأيضا المواقع والمدونات حيث تم اضافتها للتشفير وفك التشفير وهي مكتبة خفيفة الوزن وتمتلك أدوات سطر الأوامر CWebP و DWebP لتحويل الصور من وإلى تنسيق WebP بالإضافة إلى أدوات لعرض صور WebP وإخراجها وتحريكها</p> <p>ويمكننا تلخيص جميع المتصفحات التي تدعم صيغة الويب بي WebP تلقائيا بدون أي اضافات في التالي</p> <br /> <ul> <li><span>Google Chrome (سطح المكتب + الأندرويد )</span></li> <li><span>Opera</span></li> <li><span>FireFox</span></li> <li><span>Pale Moon</span></li> <li><span>WaterFox</span></li> <li><span>GNOME WEB</span></li> <li><span>MidOri</span></li> <li><span>Falkon</span></li> <li><span>Microsoft Edge</span></li> <li><span>Safari للإصدارات الحديثة IOS14+</span></li> </ul> <br /> <h3>البرامج التي تدعم صيغة الويب WebP</h3> <br /> <ul> <li><span>Picasa</span></li> <li><span>PhotoLine</span></li> <li><span>PoxeLmator</span></li> <li><span>ImageMagick</span></li> <li><span>IrfanView</span></li> <li><span>XNView</span></li> <li><span>GDAL</span></li> <li><span>Paint.Net</span></li> <li><span>GIMP</span></li> <li><span>GThump</span></li> <li><span>Adobe PhotoShob</span></li> <li><span>Windows Photo Viewer</span></li> <li><span>Microsoft Office 2010</span></li> <li><span>Fist Picture Viewer</span></li> </ul> <br /> <p>ويوجد العديد من البرامج والإضافات والمكتبات الأخرى حيث يتم التحديث باستمرار</p> <br /> <h3>مميزات صيغة الويب بي WebP</h3> <br /> <ul> <li><span>تدعم صيغة الويب WebP الشفافية ( قناة ألفا ) بتكلفة 22٪ فقط من البايتات الإضافية وفي بعض الحالات التي يكون فيها ضغط الألوان RGB مع فقدان يتم توفير أحجام ملفات أصغر بمقدار 3 أضعاف مقارنة بـ PNG</span></li> <li><span>ميزتها الرئيسية التي تتفوق بها على صيغ الصور الأخرى هي أنَ الحجم التخزيني للصورة أقل بكثير من الصيغ الأخرى مما يعني أنَ سرعة تحميل الصور ستكون أكبر وسيقل زمن تراسل البيانات في الخادم وعند زائر الموقع</span></li> <li><span>تدعم صيغة WebP ضغط الصور الفقود (lossy) وغير الفقود (lossless) وتدعم أيضًا الرسومات المتحركة لذا يمكنها أن تستبدل صيغة GIF بها</span></li> <li><span>شرعت جوجل في إنشاء تنسيق ملف مجاني ومفتوح المصدر يخزن تنسيقات الضغط الفاسدة وغير المفقودة بجودة عالية مع تقليل حجم الصور أي بمعنى أوضح يمكن تحميل الصفحات بشكل أسرع واستخدام نطاق ترددي أقل مما يوفير طاقة للبطارية خاصة على الأجهزة المحمولة ويحدث كل هذا عندما تستخدم الصفحات صورا بصيغة WebP</span></li> <li><span>صور WebP غير المفقودة أصغر حجمًا بنسبة 26٪ مقارنة بصور PNG</span></li> <li><span>صور WebP المفقودة أصغر بنسبة 25-34٪ من صور JPEG المماثلة بمؤشر جودة مكافئ SSIM</span></li> </ul> <br /> <h3>سلبيات صيغة الويب بي WebP</h3> <br /> <p>الجانب السلبي الرئيسي لصيغة WebP يمكن ان يقتصر على أنظمة إدارة المحتوى ( CMS ) أي بمعنى إذا كنت تستخدم WordPress أو Drupal أو Joomla أوما إلى ذلك فسيتعين عليك تثبيت ملحق يتيح لك استخدام WebP وعلى الرغم من سهولة القيام بذلك إلا أنه جعل تقدم WebP إلى الأمام أكثر توقفا مما ينبغي</p> <p>وتظهر نقطة الضعف الرئيسية في مطوري الويب أي أنه إذا قمت بتثبيت الإضافات على نظام إدارة المحتوى الخاص بك واستخدمت صورا بصيغة WebP فمن المرجح أن يتم تحميل موقعك على الويب بشكل أسرع لمستخدمي Chrome و Opera والمتصفحات الأخرى التي تدعم هذه الصيغة وأي مستخدمين آخرين لمتصفحات لاتدعم الصيغة بحد ذاتها ولكنها توفر مكونات WebP الإضافية التي وتعرضها للمستخدم</p> <br /> <h3>معلومات مهمة حول صيغة WebP وترتيب لبعض الأفكار</h3> <br /> <p>يدعم متصفحا Google Chrome و Opera صيغة WebP دون إضافات وهذان المتصفحان فقط مسؤولان عن عرض 74% تقريبا من صفحات الويب حتى يومنا هذا مما يضمن أنَّ عددا كبيرا من المستخدمين يمكنهم تصفح المواقع بشكل أسرع فيما لو استعملت تلك المواقع صورا بصيغة WebP ومن الجدير بالذكر أنَّه قد تم مؤخرا توفر دعم لصيغة WebP في متصفح Firefox وأيضا Safari</p> <p>فمن يعلم قد يكون من الممكن اعتماد هذه الصيغة كصيغة افتراضية لجميع المصفحات في أحد الأيام</p> <p>تكون صور WebP أصغر من نظيراتها في JPEG و PNG وعادة ما تكون بحجم أقل بنسبة 25 إلى35٪ من حجم الملف الأصلي مما يساعد في تقليل أحجام الصفحات ويحسن الأداء</p> <p>اكتشف موقع YouTube أن التبديل إلى صور WebP المصغرة أدى إلى زيادة تحميل الصفحات بنسبة 10٪</p> <p>شهد Facebook توفيرا بنسبة 25-35٪ في حجم ملفات JPEGs و 80٪ من توفير حجم الملفات لـ PNG عندما تحولوا إلى استخدام WebP</p> <p>يتم استخدام امتدادات الملفات من قبل نظام التشغيل لتحديد التطبيقات المرتبطة بأنواع الملفات مما سيسهل فرصة عرض وتعديل وتجاوب صيغة WebP بشكل تلقائي في الاصدارات الحديثة</p> <p>ومن المهم جدا تذكر أن صيغة webp في الوقت الحالي ليست بديلا عن الصيغ الأخرى فهي صيغة تعمل فقط من خلال المتصفحات التي تدعمها ولهذا عليك المحافظة على الصور بصيغة PNG و JPG إلى جانب الصور بصيغة WebP وغيرها وذلك من أجل المتصفحات الأخرى كخطوة احترازية</p> <br /> <a><img alt="مقارنة بين صيغ الصور" border="0" data-original-height="540" data-original-width="960" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjloEyLMUov8ZqsiROGgwV7AXF1EKiErfr2YY1XW6s9bVSc3E_zCakXxX4xu2bxGAup0rLWfiVViqwZsPMQyMqS5djYkBzV4qOf0B3Yg4w6yAqy-2wf2PH-oBCCg4PGerAe9RSRPu_NfN0/s16000-rw/Untitled-2-Recovered.webp" title="ماهي WebP ولماذا تتربع على عرش صور الانترنت كأسرع تنسيق ملفات للمواقع" /></a> <br /> <h4>مقارنة صيغةWebP بالصيغة PNG</h4> <br /> <p>الآن وبعد أن عرفنا ما هو WebP بالتفصيل أصبح بإمكاننا مقارنة WebP بتنسيقات الصور الشائعة الأخرى المتوفرة حاليا</p> <p>صيغة PNG اختصار لـ Portable Network Graphics تم انشائها عام 1996 لتطوير صيغة الـ JPG و GIF حيث تمتاز بميزة الشفافية والجودة والحجم الممتاز تدعم التدرج اللوني RGB وتمتلك حدود لوني لا يتجاوز الـ 256 لون كما انها لا تدعم النموذج اللوني CMYK وهي مناسبة لنقل الصور على شبكة الانترنت إو إستخدامها لتكوين الصور الشفافة او لصناعة الشعارات Logo لوجود الشفافية والجودة الممتازة</p> <p>تتميز بأنها أفضل من يدعم الشفافية وأيضا لا تفقد جودتها بالضغط ( lossless ) حجمها جيد مقارنتا بـ GIF لكن ليست مثل الـ JPG من ناحية الحجم وأيضا مناسبة جدا لضغط الصور</p> <p>وتتمثل عيوبها في أنها ليست جيدة في الصور الكبيرة حيث ان حجمها يصبح كبيرا جدا</p> <p>كما أنها لا تدعم الصورة المتحركة مثل GIF وأيضا لا تدعم ميزة التدرج اللوني لانها لا تتخطى الـ 256 لون</p> <p>ربما يكون PNG هو تنسيق الصور الأكثر قيمة حاليا في السوق إلى جانب WebP تدعم PNG الشفافية وهي عنصر حاسم في تصميم الويب تتيح لك الشفافية هيكلة الصور بحيث لا تتعارض مع بعضها البعض مع الاحتفاظ بإطار عمل تصميم متسق على موقع الويب الخاص بك</p> <p>يدعم WebP أيضًا الشفافية مما يجعلها صورة بارزة لمصممي الويب الذين يريدون الحرية التي توفرها الشفافية</p> <p>يوفر WebP أحجام ملفات أصغر بنسبة 26٪ من PNG مع استمرار توفير الشفافية والجودة نفسها</p> <p>يتم تحميل WebP بشكل أسرع من صور PNG بسبب حجم الملف</p> <p>نقطة تفوق صيغة PNG الوحيدة هي في استخدامها للمتصفحات التي لاتدعم صيغة WebP</p> <br /> <h4>مقارنة صيغة WebP بصيغة JPEG</h4> <br /> <p>صيغة JPEG اختصار لـ Joint Photographic Experts Group او (JPEG, JFIF ,JPG ,JPE) تعتبر من أشهر الصيغ الشائعة في شبكة الانترنت من بعد الـ GIF وتتميز بضغط عالي للصور حيث تستطيع صيغة الـ JPEG ضغط الصورة 20 مرة وبشكل ممتاز ولكنها تسبب ايضا قلة في جودة الصورة</p> <p>تتميز هذه الصيغة بأنها تقوم بضغط الصورة بشكل ممتاز جدا ولكن على حساب فقدان بعض البيانات كما وتعتبرالأكثر شيوعا واستخداما بين الصيغ الاخرى تدعم الألوان المتنوعة من 24 لون الى 16 مليون لون لذلك تكون غنية بالألوان</p> <p>تكمن عيوبها في فقدان الصورة لبعض من التفاصيل كما ان كثرة الضغط تسبب في تلف الجودة ولا تدعم الشفافية عكس الـ PNG كما أنها لا تدعم الصورة المتحركة عكس الـ GIF وأيضا تعتبر ذات ضغط فقدان ( Lossy ) مما يسبب ضياع بعض أجزاء البيانات</p> <p>عموما مقارنةWebP مقابل JPEG هو أمر لا يحتاج إلى تفكير</p> <p>يوفر WebP أحجام ملفات أصغر بنسبة 25 - 35٪ بنفس فهرس جودة SSIM مما يعني أن صور WebP لها أحجام ملفات أصغر بنفس الجودة</p> <p>يقدم WebP حزمة شاملة أفضل من JPEG كتنسيق صورة الجانب السلبي الوحيد لـ WebP في هذه المعركة هو أنه لا يمكن لجميع المتصفحات تحميل WebP لذا سيقوم البعض بتحميل ملف JPEG كبديل عن WebP</p> <br /> <h4>مقارنة صيغة WebP بصيغة GIF</h4> <br /> <p>صيغة GIF اختصار لـ Graphics Interchange Format تعتبر من أشهر وأقدم الصيغ الموجودة في شبكة الانترنت حيث تستطيع صيغة GIF بضغط الصورة بنسبة 40% ومن ابرز استخداماتها هي الصور المتحركة حيث تكون الصورة المتحركة ذات حجم ملفات كبير بحسب ضغط المستخدم للصورة ولكنها تكون ملائمة للصور المتحركة</p> <p>من الأشياء التي تميز هذه الصيغة أنها أفضل صيغة تدعم الصورة المتحركة كما وتدعم الصورة الشفافة لكن ليس بمستوى الـ PNG وتعتبر ذات ضغط وحجم مناسب للصورة العادية كما أنها ذات ضغط بدون فقدان ( Lossless )</p> <p>وتتخلص عيوبها في ان الصور المتحركة تكون كبيرة الحجم كما أنها لا تدعم ميزة التدرج اللوني لأنها لا تتخطى الـ 256 لون مثل PNG وتعتبر من اقدم الصيغ الموجودة في الانترنت</p> <p>هذه هي المرة الوحيدة التي قد لا يكون فيها WebP هو نوع الملف الأمثل</p> <p>بالتأكيد WebP أفضل من GIF لأنه يقدم نفس الجودة بحجم ملف أصغر ومع ذلك فإن الضغط مع فقدان البيانات ليس هو الأفضل لصور GIF المتحركة بالمقابل يجب عند تحويل الصور المتحركة GIF إلى WebP أن يكون ضغطها بدون أي فقدان للبيانات وفي هذه الحالة تكون صيغة WebP أفضل من GIF</p> <p>نظرًا لأن الصور المتحركة تعتمد بشكل كبير على التنسيق غير المفقود فإن التنسيقات مثل APNG ستفوز من حيث الجودة وحجم الملف مقابل WebP و GIF</p> <p>لا يزال WebP يتمتع بميزة مقابل GIF لكن APNG هو الفائز الواضح في فئة الصور المتحركة</p> <br /> <p>بكل إختصار إذا كنت تريد موقعا على شبكة الإنترنت فأنت بالتأكيد ستريد WebP</p> <p>WebP هو تنسيق صور مذهل تماما لمصممي مواقع الويب وسيكون من الخطأ عدم استخدام حصص WebP الرائعة من الجودة إلى الحجم على موقع الويب الخاص ملفات WebP ستجعل موقعك يتم تحميله بشكل أسرع ويظهر بشكل أفضل لذا إذا لم تكن تستخدم WebP بالفعل فجربه نحن على استعداد للمراهنة على أنك ستشهد قفزة في الأداء</p> <br /> <h5>الخلاصة</h5> <br /> <p style="font-weight: bold;">ماهي ملفات WebP ؟</p> <br /> <p>هي عبارة عن صيغة صور يتم استخدامها في مواقع الويب ومن الممكن أيضا استخدامها في الخارج</p> <br /> <p style="font-weight: bold;">كيف يعمل WebP ؟</p> <br /> <p>يستخدم ضغط WebP الخاسر الترميز التنبئي لتشفير صورة وهي نفس الطريقة المستخدمة بواسطة برنامج ترميز الفيديو VP8 لضغط الإطارات الرئيسية في مقاطع الفيديو</p> <p>ويستخدم WebP الضغط التنبئي لترميز الصورة التي تتحقق من القيم في الكتل المجاورة للبكسل للتنبؤ بالقيم الموجودة في الكتلة ثم تقوم بترميز الفرق بينها فقط ويتيح ذلك نسخ البكسل عدة مرات عبر ملف واحد وتتم إزالة البيانات المكررة من كل كتلة ويؤدي حفظ البيانات التي تتغير بين كل كتلة فقط إلى تقليل مساحة التخزين مقارنة بتنسيقات PNG و JPEG</p> <p>وتكون الصور التي لا تحتوي على ملفات WebP المفقودة أصغر بنسبة 26٪ من ملفات PNG وأصغر بنسبة 34٪ من ملفات JPEG المفقودة في مؤشر جودة التشابه الهيكلي المكافئ</p> <p>يستخدم ضغط WebP بدون فقدان أجزاء الصورة التي تم رؤيتها بالفعل ومن أجل إعادة بناء وحدات البكسل الجديدة تماما يمكنه أيضا استخدام لوحة محلية إذا لم يتم العثور على تطابق مثير للاهتمام</p> <p>يؤدي الضغط مع الفقدان إلى تقليل حجم الملف ولكن على حساب تقليل جودة الصورة</p> <br /> <p style="font-weight: bold;">ماهي تقنيات ضغط WebP ؟</p> <br /> <p>يتكون ملف WebP من بيانات صورة VP8 أو VP8L وحاوية قائمة على RIFF وتعمل مكتبة libwebp المستقلة كتطبيق مرجعي لمواصفات WebP وهي متاحة للمستخدمين</p> <p>إذا كان تطبيق الويب أو الموقع الخاص بك يعاني من مشاكل في الأداء أو كان حجم التراسل الشبكي كبيرا فتحويل صورك إلى صيغة WebP سيساعدك كثيرا في تحسين أداء الصفحات</p> <br /> <p>وفي الختام يمكن القول وبلا مبالغه ان صيغة WebP تعتبر أفضل صيغة صور لمواقع ومدونات وتطبيقات الانترنت على الاطلاق حتى كتابة هذا الموضوع</p> <p>حيث يهتم جدا اصحاب مواقع الانترنت و تطبيقات الانترنت بتوفير صور بجودة جيدة أو مقبوله على الأقل مع حجم تخزينى صغير قدر الإمكان للصور على مواقعهم و تطبيقاتهم على الانترنت</p> <p>وهذا بالتأكيد ما تقدمه صيغة webp وبالتالى عندما يستخدمون صور بحجم تخزينى صغير دون التأثير على درجة وضوح وجودة الصوره بشكل كبير تزداد سرعة مواقعهم وتطبيقاتهم على الإنترنت ويكون معدل إرسال البيانات منخفض جدا بين سيرفر الموقع والزائر</p> <p>وسيكون تطبيق الانترنت سريع وكذلك سرعة تحميل الموقع أو المدونه وتتحسن علاقته مع محرك البحث جوجل والزائر على حد سواء مع الحفاظ على المظهر الجمالي للموقع او التطبيق من خلال عرض صور جيدة</p> <p>حيث عند ضغط الصور بالصيغ الأخرى PNG أو JPG تنخفض جودتها بشكل واضح وبدرجات مختلفة على حسب مستوى الضغط لذلك ينصح أصحاب مواقع الانترنت بشده بأن يستخدموا أو يستبدلوا صيغ الصور التى يستعملونها على مواقعهم بصيغة webp وقريبا جدا سأقوم بإصدار مقالة بهذا الصدد فلا تنس تشجيعك لنا</p> <br /> <p style="font-weight: bold;">المراجع</p> <p>ويكبيديا</p> <p>Chrome page</p> <p>Developres google</p> <p>Web dev</p> <p>insanelib</p> <br /> <p>إقرأ أيضا</p> <br /> <a href="https://zonezol.blogspot.com/2020/10/WebP.html">جميع طرق تحويل الصور إلى WebP واستخدامها على بلوجر</a> <br /> <a href="https://zonezol.blogspot.com/2020/07/meta-tags.html">إضافة أكواد الميتا تاج بطريقة إحترافية لإشهار مدونتك على بلوجر meta tag keyword</a> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com0tag:blogger.com,1999:blog-1552951967015435344.post-88108701186938415842020-10-12T11:01:00.014+02:002021-01-16T15:44:51.406+02:00<style> .onezol-article pre{ width: auto; overflow: auto; border: 2px solid #c30909; } </style> <article class="onezol-article"> <p>يقوم الكثير من المدونين أو اليوتيوبرز بإرفاق فيديوهات من اليوتيوب إلى مواقعهم أو مدوناتهم بشكل مستمر حيث يساعد هذا الأمر في توضيح الأفكار أو التطبيق العملي للشروحات وغيره من الأمور</p> <p>وفي هذا المقال سنتحدث عن بعض المعلومات والنصائح التي يتغافل عنها الكثيرين والتي بدورها ستساعدكم في إضافة بعض اللمسات الجميلة والمؤثرة قبل وبعد رفع الفيديوهات من Youtube إلى مواقعكم</p> <br> <a><img alt="الطريقة الصحيحة لرفع فيديو من اليوتيوب وعرضه في مدونتك مع بعض الخدع شرح تفصيلي" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs5A2id4GvYYe2RqNfNrHlsld8Y4se65aZ-2W8SD3NBR4WrTy-ekqEmBVKIaah_iwX9SWvIMUz-7V868jhZ1s7RspZhNHcKIWJ008EA6zkKbGIT3QhoJ8vbFUW9OLhC5mb6ORBZhnaDf8/s16000-rw/youtube-blogger.webp" title="الطريقة الصحيحة لرفع فيديو من اليوتيوب وعرضه في مدونتك مع بعض الخدع شرح تفصيلي" /></a> <br> <h2>طريقة إضافة فيديو من اليوتيوب إلى مدونتك</h2> <br> <p>عند اختيارك لفيديو معين على اليوتيوب ولإضافته إلى مقالة غالبا ستستخدم إحدى هذين الطريقتين ولا بأس إذا كنت تستخدم الطريقة الأولى أو الثانية فكلاهما صحيحتين تماما</p> <p>الطريقة الأولى : من بلوجر ستختار مشاركة جديدة ومن لوحة الأدوات ستقوم بالضغط على إدراج ملف فيديو ثم يوتيوب ثم ستبحث عن الفيديو الذي تريده على اليوتيوب بكتابة اسمه أو لصق رابط الفيديو ثم تقوم بادراجه</p> <p>الطريقة الثانية : ستفتح الفيديو في اليوتيوب ثم تقوم بعمل مشاركة ثم تضمين ستظهر لك بعض الاعدادات التي ستستطيع من خلالها التعديل على بعض الأشياء وسنتطرق لها فيما بعد ثم ستنسخ الكود الموجود ثم ستقوم بلصقه في المقالة التي تريد اضافته إليها بعد التبديل إلى وضع html </p> <p>الآن نعود إلى موضوعنا الرئيسي في هذه الخطوة وبعد ارفاق الفيديو من اليوتيوب هنالك بعض الأكواد والعبارات التي تساعدك في التحكم المثالي في طريقة عرض الفيديو والمقاسات وغيره من الأمور المهمة</p> <br> <h3>ضبط مقاسات وأبعاد الفيديو You tube</h3> <br> <p>جميعنا يعلم ان مقاسات عرض الفيديوهات تختلف من جهاز الى آخر وانه ليست جميع المقاسات تكون متجاوبة مع الفيديو الذي قمت برفعه مسبقا </p> <p>حيث كما تعلم ان اليوتيوب لديه مقاسات معينة يعرض بها الفيديوهات</p> <p> وهي اما 360 بكسل للطول و 640 بكسل للعرض</p> <p>أو 480 بكسل للطول و 853 بكسل للعرض</p> <p>والتي تعتبر كبيرة نوعا ما وهذه هي أفضل مقاسات سطح المكتب التي يمكنك عرض الفيديوهات بها لنكمل</p> <p>فبنفس الطريقة التي يقوم اليوتيوب باختيارها للمقاسات ستقوم أنت بدورك بتحديد مقاسات معينة لموقعك بحيث تكون مناسبة للعرض</p> <p>ولاحظ هنا أنه يجب عليك ان تحافظ على النسبة بين الطول إلى العرض أو العرض إلى الطول للحصول على أفضل طريقة لعرض الفيديو</p> <p>المقصود بالنسبة هنا أي التناسب بين الطول والعرض كالنصف أو الربع </p> <p>على سبيل المثال : إذا كان الفيديو قبل رفعه على اليوتيوب بمقاس 1080 للطول و 1920 للعرض</p> <p>فيمكننا حساب النسبة بقسمة العرض على الطول أو الطول على العرض</p> <p>فعند قسمة 1920 على 1080 ستحصل على نسبة العرض 1.7 بمعنى أنك هنا ستختار الطول الذي تريده وتقوم بضربه بهذا العدد لتحديد العرض المناسب</p> <p>اي اذا اخترت الطول على سبيل المثال 400 فستقوم بضربه بنسبة العرض والتي في مثالنا الحالي تكون 1.7 فسيكون العرض المناسب لهذا الطول هو ناتج الضرب 711.1</p> <p>فستضع العرض 711 والطول 400 وبهذه الطريقة ستحافظ على التناسب بين الطول والعرض</p> <p>وبعكس الطريقة ستحصل على نسبة الطول وهي 0.5</p> <p>وبالتالي عندما تحافظ على النسبة ستلاحظ دائما عند تشغيلك للفيديوهات على موقعك أنها لاتميل الى تكبير العرض أو الطول وإنما ستحفاظ على الأبعاد</p> <br> <h3>طريقة تعديل المقاسات</h3> <br> <p>لنفترض انك قمت برفع فيديو من واجهة بلوجر وقمت بتبديل الوضع الى عرض HTML فسيكون الكود الكامل مشابه أو قريب من هذا الكود</p> <pre><code>&lt;iframe allowfullscreen="" class="BLOG_video_class" <span style="color: #097fc3;">height="360"</span> src="https://www.youtube.com/embed/6Y8dauxPD5Y" <span style="color: #c30909;">width="640"</span> youtube-src-id="6Y8dauxPD5Y"&gt;&lt;/iframe&gt;</code></pre> <p>الأكواد التي ستقوم بتغيير قيمها</p> <span style="color: #097fc3;">العرض = width</span> <br> <span style="color: #c30909;">الطول = height</span> <br> <h3>اختبار مدى تجاوب الموقع مع مختلف مقاسات الشاشات</h3> <br> <p>للتأكد من ان مقاسات الفيديوهات لديك تظهر بشكل مناسب يجب عليك التأكد والدخول بأكثر من جهاز لنفس المقالة أو التدوينة </p> <p>ولاختصار الوقت يمكنك استخدام <a href="https://websiteresponsivetest.com/" target="_blank" rel="nofollow" >هذا الموقع</a> الذي يوفر عليك كل هذا العناء فكل ماعليك هو ادخال رابط موقعك ثم اختيار مقاس الشاشة التي تريدها وتصفح موقعك كما تشاء</p> <br> <h3>اختيار الفيديوهات المقترحة بنفسك</h3> <br> <p>يمكنك عزيزي القارئ تضييق الخناق على اليوتيوب ليقترح فيديوهات من نفس قناتك</p> <p>أي انه أثناء مشاهدة الزائر للفيديوهات من موقعك وعندما يقوم بإيقاف الفيديو أو عند الانتهاء من المشاهدة سيقوم اليوتيوب باقتراح فيديوهات عشوائية للزائر سواء ان كانت من قناتك ام من غيرها</p> <p> ولكن بإضافة هذا الكود سيقترح اليوتيوب فيديوهات تكون فقط من داخل قناتك على اليويتوب وعرضها للزائر كما ويمكنه مشاهدتها من موقعك مباشرة دون الدخول لليوتيوب</p> <p>تعتبر هذه الخاصية من الخواص المهمة والتي يلجأ اليها المحترفون دون الافصاح عنها </p> <p>بكل سهولة لتفعيل هذه الخاصية قم بإدارج هذه العبارة بعد رابط الفيديو في القناة</p> <p style="color: #c30909;">rel=0?</p> <p>أي على سبيل المثال سيكون الرابط بعد إضافة الكود كالتالي</p> <p>https://www.youtube.com/embed/6Y8dauxPD5Y<span style="color: #c30909;">?rel=0</span></p> <br> <h3>التشغيل التلقائي للفيديوهات على مدونتك الأوتو بلاي</h3> <br> <p>عند دخولك لهذا المقال من الممكن أنك قد لاحظت ان الفيديو الذي في نهاية مقالنا هذا قد اشتغل تلقائيا دون ضغطك على زر التشغيل وتعرف هذه الخاصية باسم اوتو بلاي أو auto play</p> <p>يقوم بعض المدونين بتفعيل هذه الخاصية بغرض زيادة عدد المشاهدات</p> <p>ولكن تاكد دائما عند اضافتك لهذه الخاصية ان يكون المقال الذي كتبته يتحدث عن نفس الفيديو او يكون تمهيد أو توضيح للفيديو وبالتالي سينغمس الزائر في الفيديو لانه سيجد مايبحث عنه متوافق مع الفيديو وبالتالي سيكمل المشاهدة وسيقل معدل الإرتداد الى موقعك</p> <p>عادة ماتستخدم هذه الخاصية في المقالات القصيرة ولكنني قمت باضافتها بغرض توضيح الفكرة </p> <p>عموما حاول ان لا تكثر من هذه الخاصية فهي قد تكون مزعجة في بعض الأحيان</p> <p>لاضافة هذه الخاصية قم بكتابة الأمر</p> <p style="color: #c30909;">autoplay=1?</p> <p>بعد رابط الفيديو ليكون الرابط كاملا بالشكل التالي</p> <p>https://www.youtube.com/embed/6Y8dauxPD5Y<span style="color: #c30909;">?autoplay=1</span></p> <br> <h3>خاصية الربط بين خواص فيديوهات اليوتيوب</h3> <br> <p>لاحظ انه يمكنك اضافة اكثر من خاصية لرابط واحد باضافة هذا الكود</p> <p style="color: #c30909;">;amp&</p> <p>بين كل خاصيتين تريد اضافتهما على سبيل المثال</p> <p>https://www.youtube.com/embed/6Y8dauxPD5Y?autoplay=0<span style="color: #c30909;">& amp;</span>?rel=0</p> <br> <h3>اختيار وقت بدء الفيديو في المدونة</h3> <br> <p>أيضا إذا أردت اختيار وقت معين لبدء اشتغال الفيديو منه فيمكنك التحكم بوقت اشتغال الفيديو بالثانية باضافة الكود التالي لنهاية رابط الفيديو</p> <p style="color: #c30909;">start=number?</p> <p>على سبيل المثال</p> <p>https://www.youtube.com/embed/6Y8dauxPD5Y<span style="color: #c30909;">?start=65</span></p> <p>ليكون وقت التشغيل بعد الدقيقة 1 والثانية 5</p> <br> <h3>اخفاء أزرار التحكم الخاصة بفيديو اليوتيوب</h3> <br> <p>يمكنك التحكم في اختيار اظهار أو اخفاء عناصر التحكم بالفيديو</p> <p>كالصوت والدقة وغيره من الأدوات التي تظهر في الشريط السفلي في اليوتيوب</p> <p>إذا اردت اخفاء هذه الأدوات يمكنك ذلك عن طريق اضافة هذا الكود بعد نهاية رابط الفيديو</p> <p style="color: #c30909;">controls=0?</p> <p>على سبيل المثال</p> <p>https://www.youtube.com/embed/6Y8dauxPD5Y<span style="color: #c30909;">?controls=0</span></p> <br> <h3>الحفاظ على خصوصية الفيديو في مدونتك</h3> <br> <p>تعرف هذه الخاصية باسم منع ملفات تعريف الارتباط من النظر الى الفيديو الخاص بك</p> <p>حيث عند تفعليها لن يتمكن المشاهد من معرفة بعض الأشياء مثل لن يستطيع التحكم في تشغيل التسميات التوضيحية والترجمة وأيضا لن يستطيع الاشتراك في القناة وبعض الأشياء الاخرى عموما اذا أردت تفعيل هذه الخاصية</p> <p>فستقوم بتضمين هذا الكود داخل رابط الفيديو</p> <p style="color: #c30909;">nocookie-</p> <p>على سبيل المثال</p> <p>https://www.youtube<span style="color: #c30909;">-nocookie</span>.com/embed/6Y8dauxPD5Y</p> <p>لاتنس انه يمكنك ايضا ايقاف تشغيل الصوت في البدء وغيره من الخواص اللانهائية</p> <p>فعالم تصميم وبرمجة الويب هو عالم مفتوح أي ان فكرة واحدة تطرأ في مخيلتك قد تجعلك مليونيرا في أحد الأيام </p> <p>في ختام هذا المقال أحب ان انوه على انني قد قمت بكتابة هذا المقال فقط لمشاركة بعض الأفكار التي لن تجعلني أصبح مليونيرا</p> <p> ولكن قد تحفز بعض الأجزاء في دماغك والتي ستساعد على توليد الأفكار المثيرة</p> <p>أعلم ان هذا المقال قد اختلف سرده عن باقي المقالات على سبيل التغير فارجو أن ينال على اعجابكم واستحسان عقولكم</p> <p><span style="color: #c30909;">توقف</span> هل تظن اننا انتهينا ؟</p> <p>شاركني بكلمة في التعليقات</p> <p>هل تعلم ان مشاهدة فيديو مدته ثلاث دقائق قد يغير من مستقبلك لمدة ثلاث سنوات متتالية؟</p> <br> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/KhFT-_tt35A?rel=0&amp;?autoplay=1" width="640" youtube-src-id="KhFT-_tt35A"></iframe> <br> <p>إقرأ أيضا</p> <br> <a href="https://zonezol.blogspot.com/2020/08/qr-code.html" >أفضل طريقة لكسب آلآف المتابعين والزوار فقط من موقعك QR CODE</a> <br> <a href="https://zonezol.blogspot.com/2020/09/seoplus-arrow-up.html" >انشاء زر الصعود الى رأس الصفحة بشكل أنيق مشابه لقالب سيو بلس seo plus</a> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com0tag:blogger.com,1999:blog-1552951967015435344.post-64932141870025669712020-09-14T16:30:00.009+02:002021-01-16T15:44:44.179+02:00<article class="onezol-article"> <p>هنالك الكثير من الأدوات التي يوفرها لك فريق مطورين الفيس بوك والتي يمكنك اظهاراها واضافتها الى موقعك</p> <br> <a href="https://zonezol.blogspot.com/2020/08/facebook-icon.html" >كصندوق الاعجاب بالصفحة وايضا اظهار شريط التايملاين في موقعك وغيره الكثير</a> <br> <p>واليوم نحب أن نشارككم أحد هذه الاضافات وهي عن طريق اظهار زر في اسفل موقعك يمكن للزائرين من خلاله ارسال الرسائل والتواصل معك عبر صفحتك على الفيس بوك كما ويمكنك الرد عليهم بسهولة من تطبيق الماسنجر الخاص بك</p> <p>والمميز في الأمر ان هذه الاداة تقوم بربط الموقع الالكتروني بصفحة الفيس بوك وبالتالي يصبح التواصل بينك وبين الزائرين أسهل وأسرع</p> <br> <a><img alt="اضافة messenger إلى موقعك الويب أفضل طرق التواصل جربها الآن" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPJV2sWkagzoQfHU5FWXQOttQVaSeFWaOM0ksDGuxJ6fDFAEtShqBHSHX5hEpRr0fY_TP2nxmEyrxHIra31o1MESD-wwcpBOAC-e3VVvugehyphenhyphen3oxTEaBtXTus6pBv3f7-fZw1ziSC97aI/s16000-rw/%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B1-%25D9%2585%25D8%25A7%25D8%25B3%25D9%2586%25D8%25AC%25D8%25B1.webp" title="اضافة messenger إلى موقعك الويب أفضل طرق التواصل جربها الآن" /></a> <br> <h2>زر المراسلة Facebook Chat Plugin</h2> <br> <p>لاضافة زر المراسلة الى موقعك تحتاج لعمل 3 أشياء بسيطة</p> <br> <h3>الخطوة الأولى</h3> <br> <p>قم بالدخول الى صفحتك على الفيس بوك ولست أقصد هنا الحساب الشخصي وانما يجب أن تتوفر لديك صفحة خاصة بموقعك على الفيس بوك</p> <br> <p>عند الدخول الى صفحتك قم بالذهاب الى الاعدادات من شريط القوائم ثم بعد ذلك قم باختيار المراسلات</p> <br> <p>انزل قليلا لتجد خيار مكتوب فيه اضافة messeger الى موقعك الويب</p> <br> <p>قم بالضغط عليه ثم اضغط التالي</p> <br> <h3>الخطوة الثانية</h3> <br> <p>بعد الدخول الى الواجهة قم بالتعديل على الخيارات حسب رغبتك</p> <br> <p>اختيار اللغة الافتراضية : ستختار اللغة التي تريد استخدامها</p> <br> <p>انشاء الرسالة الترحيبية : ستقوم بكتابة رسالة ترحيبية ترحب فيها بالأشخاص الذين سيقومون بالضغط على الأيقونة فيما بعد</p> <br> <p>مساعدة الأشخاص على الدردشة بحساب ضيف : اختر فيم اذا كنت تريد ان يراسلك أي شخص حتى لو لم يكن مسجلا في خدمة الفيس بوك (قم بتفعيل الخيار On )</p> <br> <p>ام تريد ان يراسلك فقط الاشخاص المسجلون على الفيس بوك ( قم بتفعيل الخيار Off )</p> <br> <p>بعد ذلك قم بالضغط على التالي</p> <br> <p>المظهر : قم بالتعديل على لون الايقونة للتناسب مع لون الموقع الخاص بك حيث ستقوم بكتابة اللون بترميز HEX</p> <br> <p>بعد تعديل اللون قم بالضغط على التالي</p> <br> <p>اضافة اسم نطاق موقع الويب : قم بكتابة رابط صفحة موقعك الرئيسية كاملا</p> <br> <p>مثال : https://zonezol.blogspot.com</p> <br> <p>واخيرا قم بنسخ جميع الأكواد التي ستظهر لك</p> <br> <h3>الخطوة الثالثة</h3> <br> <p>قم بالدخول لواجهة بلوجر الرئيسية ثم الى التنسيق</p> <br> <p>وقم باختيار مكان لإضافة الأداة</p> <br> <p> المقصود هنا ليس مكان ظهورها ولكن فقط لتحفظ في اي مكان قمت بوضعها وانصحك في هذه الحالة باختيار الفوتر او ذيل المدونة</p> <br> <p>قم بالضغط على اضافة اداة ثم اختر Html/JavaScript بعد ذلك قم بلصق جميع الأكواد في المحتوى</p> <br> <p>وقم بالضغط على كلمة حفظ</p> <br> <p>الآن كل ماعليك هو الدخول الى موقعك والاستمتاع بالتواصل مع أصدقائك وزوارك في الموقع الخاص بك</p> <br> <p>لمشاهدة الشرح كاملا بالفيديو</p> <br> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/9oCgdYZlDhc" width="640" youtube-src-id="9oCgdYZlDhc" ></iframe> <br> <p>وفي الختام لاتنس وضع تعليقك أسفل المقال</p> <p>إقرأ أيضا</p> <br> <a href="https://zonezol.blogspot.com/2020/09/seoplus-redirect.html" >الطريقة الحصرية لاضافة صفحة اعادة التوجيه لقالب سيو بلس seo plus ضاعف أرباحك</a> <br> <a href="https://zonezol.blogspot.com/2020/08/facebook-icon.html" >طريقة اضافة اداة الاعجاب بصفحة الفيس بوك لموقعك بالشكل الرسمي</a> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com0tag:blogger.com,1999:blog-1552951967015435344.post-20672137469797550632020-09-10T00:39:00.010+02:002021-01-16T15:44:36.076+02:00<article class="onezol-article"> <p>اذا كنت تستخدم قالب سيو بلس المجاني وقد سئمت من عدم تمكنك من الحصول على الإضافات الخاصة بالقالب المدفوع</p> <p>أو كنت تستخدم أي قالب وأردت الحصول على زر الصعود الى رأس الصفحة بشكل أكثر احترافية وأناقة من الذي تجده غالبا على اليوتوب أو مجرد بحث جوجل</p> <p>فهذا المقال قد كتب خصيصا لك ياصديقي فأرجو ان تكمل قراءته حتى النهاية</p> <br> <a><img alt="انشاء زر الصعود الى رأس الصفحة بشكل أنيق مشابه لقالب سيو بلس seo plus" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyWmV229huKZT7-J_bNri1s8hjjIDGIpXacN42SkYaJHM61fOGnf8lh-Hih8KySr53UZkDnSZtE8_Ru7OoGNFOvdraSwUzpbdo4RZ8mZzrMxgOTii2NmPCmpRq4d-1gMRGiPQvOR4fzmM/s16000-rw/%25D8%25B1%25D8%25A7%25D8%25B3-%25D8%25A7%25D9%2584%25D8%25B5%25D9%2581%25D8%25AD%25D8%25A9-%25D9%258A%25D9%2588%25D8%25AA%25D9%258A%25D9%2588%25D8%25A8.webp" title="انشاء زر الصعود الى رأس الصفحة بشكل أنيق مشابه لقالب سيو بلس seo plus" /></a> <br> <h2>اضافة زر الصعود الى رأس الصفحة</h2> <br> <p>يساعدك زر الصعود الى رأس الصفحة على تسهيل تجربة المستخدم أثناء تصفحه أحد المواضيع التي تكتبها وبالتالي سهولة الوصول لمختلف أقسام الموقع الخاص بك</p> <p>يتميز الزر الذي سنقوم بشرحه فيما بعد بالانسيابية</p> <p>فعلى سبيل المثال عند الضغط عليه سيقودك الى الأعلى بسرعة 0.25 ثانية وعند الاقتراب شيئا فشيئا من رأس الصفحة ستقل السرعة الى أن تصل الى صفر وبالتالي سيتوقف عند رأس الصفحة</p> <p>ولاضافة هذا الزر هنالك ثلاث خطوات بسيطة وسهلة</p> <br> <p>أولا : تحميل الأكواد الخاصة بزر الصعود الى رأس الصفحة</p> <a href="https://www.mediafire.com/file/gsg656632wyjry6/%25D8%25B2%25D8%25B1_%25D8%25B1%25D8%25A3%25D8%25B3_%25D8%25A7%25D9%2584%25D8%25B5%25D9%2581%25D8%25AD%25D8%25A9_%25D8%25B2%25D9%2588%25D9%2586_%25D8%25B2%25D9%2588%25D9%2584.rar/file" target="_blank" rel="nofollow" >اضغط هنا للتحميل</a> <br> <p>ثانيا : التعديل على أكواد زر الصعود الى رأس الصفحة</p> <br> <p>اذا تركت الأكواد كما هي فسيعمل معك الزر بدون أي مشاكل وسيكون افتراضيا مشابها للزر الذي بقالب سيو بلس المدفوع</p> <p>وأيضا يمكنك تعديل ماتشاء من الأكواد حسب خبرتك في اللغات Html و CSS و JavaScript</p> <p>ولكن ان كنت جديد في تعلم تصميم المواقع أو كنت لاتعلم شيئا عنها فلاتقلق سنشرح لك أهم الأشياء التي يبحث في تعديلها الأغلبية</p> <p>وهي اللون والأيقونة التي تظهر في المنتصف</p> <br> <p style="font-weight: bold;">اللون</p> <br> <p>للتعديل على لون الغلاف الخاص بزر الصعود الى رأس الصفحة ستبحث عن اسم الصف أو class</p> <p>top-link-show.</p> <p>وستقوم بالنزول أسفله قليلا حتى تجد الكلمة أو العبارة</p> <p>; background-color: #3560ab</p> <p>في المكان المظلل ستقوم باختيار لونك المتناسق مع ألوان موقعك واستبداله برمز اللون الموجود مسبقا</p> <p>سيساعدك هذا الموقع في انتقاء أفضل الألون بنفس تريمز الألوان المطلوب</p> <a href="https://htmlcolorcodes.com/" target="_blank" rel="nofollow" >للدخول للموقع</a> <br> <p style="font-weight: bold;">الأيقونة التي تظهر بمنتصف الزر</p> <p>يمكنك التعديل عليها بسهولة حيث يمكنك اختيار أي أيقونة وتحميلها وانصحك باختيار هذا الموقع لانتقاء أفضل التصاميم</p> <a href="https://www.flaticon.com/" target="_blank" rel="nofollow" >للدخول للموقع</a> <p>بعد ذلك قم برفع صورتك على الانترنت على أحد مواقع استضافة الصور</p> <p>ثم بعد ذلك ستقوم بنسخ رابط الصورة ثم البحث في السطر الرابع من الكود عن الكلمة Src </p> <p>بعد هذه الكلمة ستجد رابط للأيقونة الافتراضية التي قمنا بانتقائها للتناسب مع القالب بين علامتي الاقتباس " "</p> <p>ستقوم باستبدال الرابط الموجود مسبقا برابط صورتك التي قمت برفعها على الانترنت</p> <br> <p style="font-weight: bold;">ثالثا : تركيب زر الصعود الى رأس الصفحة على بلوجر</p> <br> <p>تعتبر هذه أسهل خطوة فكل ماعليك هنا هو نسخ جميع الأكواد الخاصة بزر الصعود الى رأس الصفحة</p> <p>ثم التوجه عبر الصفحة الرئيسية لبلوجر ثم الى التنسيق</p> <p>ستختار أي مكان تريده لإضافة الزر ولكن يستحسن أن تكون ضمن ذيل المدونة أو الفوتر footer </p> <p>قم بالضغط على اضافة اداة ثم اختارالأداة Javascript/Html قم بلصق جميع الأكواد في المحتوى ثم اضغط على حفظ</p> <p>وبهذه الخطوات البسيطة كل ماعليك الآن هو الدخول الى موقعك وتجريب الأداة والاستمتاع بالتجربة</p> <p>لمشاهدة الشرح كاملا بالفيديو</p> <br> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/6Y8dauxPD5Y?rel=0" width="640" youtube-src-id="6Y8dauxPD5Y"></iframe> <br> <p>وفي الختام لاتنس ترك تعليقك أسفل الموضوع</p> <br> <p>إقرأ أيضا</p> <br> <a href="https://zonezol.blogspot.com/2020/09/seoplus-redirect.html" >الطريقة الحصرية لاضافة صفحة اعادة التوجيه لقالب سيو بلس seo plus ضاعف أرباحك</a> <br> <a href="https://zonezol.blogspot.com/2020/09/seo-plus-news.html" >كيفية اضافة شريط آخر الأخبار بشكل احترافي شبيه بقالب سيو بلس Seo plus</a> <br> <a href="https://zonezol.blogspot.com/2020/09/seo-plus.html">شرح كامل لتحميل وتركيب قالب سيو بلس من الصفر مجانا احترافي Seo Plus V5</a> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com0tag:blogger.com,1999:blog-1552951967015435344.post-67996527997183451762020-09-08T10:20:00.015+02:002021-01-24T17:48:23.282+02:00<article class="onezol-article"> <p>ان كنت تضع اعلانات في موقعك الالكتروني وتبحث عن طريقة لمضاعفة أرباحك من الاعلانات ؟ فهذا الموضوع يهمك</p> <p>وان كانت نسبة معدل الارتداد لديك مرتفعة ؟ فأيضا هذا الموضوع يهمك</p> <p>ان انشاء صفحة اعادة التوجيه في الوقت الحالي أصبح من الأمور المهمة والتي يقوم بها أغلب أصحاب المواقع الصغيرة والكبيرة</p> <p>لهذا سنشرح لكم اليوم طريقة اضافتها وبكل يسر وسهولة فأكملو معنا</p> <p>ملاحظة هذه الصفحة تعمل حصرا على جميع القوالب ولكن تم تسميتها بسيو بلس لتشابهها الكبير مع النسخة المدفوعة من القالب</p> <br> <a><img alt="الطريقة الحصرية لاضافة صفحة اعادة التوجيه لقالب سيو بلس seo plus ضاعف أرباحك" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5tGgEsK27JjbaHqvWWHsVpO9Wrh8-WxQl2xsIxyAAcSyTdOUHaiGBa7AhABA5f_4tRWYUcxwOrf8tiK_yqE74zS2m5sRYp53LjMxNKzpO2fpqZ6aNP309dqVbFuuMPKbtzdKA8F_eNjo/s16000-rw/%25D8%25A7%25D8%25B9%25D8%25A7%25D8%25AF%25D8%25A9+%25D8%25A7%25D9%2584%25D8%25AA%25D9%2588%25D8%25AC%25D9%258A%25D9%2587+%25D9%2584%25D9%258A%25D9%2588%25D8%25AA%25D9%258A%25D9%2588%25D8%25A8.webp" title="الطريقة الحصرية لاضافة صفحة اعادة التوجيه لقالب سيو بلس seo plus ضاعف أرباحك" /></a> <br> <h2>انشاء صفحة اعادة التوجيه لقوالب سيو بلس seo plus v5</h2> <a href="https://zonezol.blogspot.com/2020/09/seo-plus-news.html">كيفية اضافة شريط آخر الأخبار بشكل احترافي شبيه بقالب سيو بلس Seo plus</a> <br> <a href="https://zonezol.blogspot.com/2020/09/seo-plus.html">شرح كامل لتحميل وتركيب قالب سيو بلس من الصفر مجانا احترافي Seo Plus V5</a> <br> <p style="font-weight: bold;">أولا : تحميل أكواد إعادة التوجيه</p> <a href="https://www.mediafire.com/file/25pfpewcob3ijsp/%25D8%25B5%25D9%2581%25D8%25AD%25D8%25A9_%25D8%25A7%25D8%25B9%25D8%25A7%25D8%25AF%25D8%25A9_%25D8%25A7%25D9%2584%25D8%25AA%25D9%2588%25D8%25AC%25D9%258A%25D9%2587_%25D9%2584%25D9%2582%25D8%25A7%25D9%2584%25D8%25A8_%25D8%25B3%25D9%258A%25D9%2588_%25D8%25A8%25D9%2584%25D8%25B3.txt/file" target="_blank" rel="nofollow" >اضغط هنا للتحميل</a> <br> <p style="font-weight: bold;">ثانيا : انشاء صفحة اعادة التوجيه</p> <br> <p> الآن قم بعمل صفحة جديدة من بلوجر وقم بالتعديل على العنوان والخيارات وهنا أنصحك بضبط علامات الرؤوس المخصصة كما قي الصورة التالية</p> <br> <a><img alt="صورة تشرح ضبط علامات الرؤوس المخصصة والاعدادات" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5xyqxmz-47hSbHv3BAyVn80SKxbz6SzHvoM61DcxI6CmUxwrdJOJjHMXWXRI5hLL7QrpaodSurpb7ICMTZM1wmaR1zY0FykfN7NQ2RLuicmxeCMx1u3TgmWFNUPSwrcO0xPjcSFqwCPE/s16000-rw/Untitled-2.webp" title="الطريقة الحصرية لاضافة صفحة اعادة التوجيه لقالب سيو بلس seo plus ضاعف أرباحك" /></a> <br> <p> بعد ذلك قم بتبديل العرض الى HTML</p> <p>اذا وجدت أي اكواد في الصفحة قم بحذفها</p> <p>بعد ذلك قم بنسخ أول ثلاثة أسطر من الكود والصقها في الصفحة ثم اضغط على حفظ</p> <p>إذا أردت ادراج العبارات أو الاعلانات فوق الصفحة قم بوضعها أعلى الكود أما اذا اردت ادراج العبارات أو الاعلانات أسفل الصفحة فقم بوضعها أسفل الكود لاحظ انك ستضع عباراتك في وضع عرض HTML ولن تقوم بالتبديل الى وضع الانشاء</p> <br> <p style="font-weight: bold;">ثالثا : تركيب أكواد صفحة اعادة التوجيه</p> <br> <p>لتركيب أكواد الصفحة قم بالتوجه الى المظهر ثم تعديل الHTML</p> <p>بعد ذلك من الماوس اضغط في اي مكان لتحديد المؤشر و من لوحة المفاتيح قم بالضغط على Ctrl + F</p> <p>ثم في خانة البحث قم بكتابة هذه الكلمة</p> <p><span style="color: #c30909;">threaded_comments</span> ثم اضغط Enter</p> <p>الآن انزل قليلا في الصفحة حتى تجد كود مكتوب باللون الآخضر ويسمى ب<span style="color: #c30909;">b:section/</span></p> <p>قم بنسخ الأكواد من السطر الذي تتواجد فيه العبارة اعدادات صفحة تحويل الروابط حتى نهاية الاكواد</p> <p>ثم قم بلصقها أعلى الكود المسمى ب <span style="color: #c30909;">b:section/</span> بعد ذلك قم بالضغط على كلمة حفظ</p> <br> <p style="font-weight: bold;">رابعا : التعديل على صفحة تحويل الروابط</p> <br> <p>قم بالذهاب من بلوجر الى التنسيق</p> <p>ستجد صفحة تحويل الروابط مضافة هناك قم بالضغط على كلمة تعديل</p> <br> <ul> <li><span>Ads-text : يمكنك هنا وضع عنوان لأحد المواضيع التي تريد الاعلان عنها سواء كانت من داخل موقعك ام من رابط خارجي</span></li> <li><span>Ads-rel : اذا كان الرابط الذي قمت باضافته هو رابط داخلي اي من موقعك فاكتب dofollow أما اذا كان رابط خارجي اي من خارج موقعك فقم بكتابة الامر nofollow</span></li> <li><span>Ads-link : هنا قم بكتابة رابط الموضوع الذي تريد الاعلان عنه </span></li> <li><span>block-site : هذه الاعدادات خاصة بالصفحات التي لاتريد ظهور صفحة اعادة التوجيه عند الضغط عليها ولكن اتركها كما هي ولاتقم بعمل اي من التعديلات الا اذا واجهتك مشكلة ما في المستقبل</span></li> <li><span>timer : هنا يمكنك التعديل على زمن الانتظار في الصفحة </span></li> <li><span>Text-err : هنا يمكنك التعديل على الكلمة التي تظهر عندما لايعمل الرابط المطلوب</span></li> <li><span>Text-ready : هنا يمكنك التعديل على الكلمة التي تظهر عندما يكتمل زمن الانتظار</span></li> <li><span>Text-configure : هنا يمكنك التعديل على الكلمة التي تظهر عندا يكون العداد في وضع التنازل </span></li> <li><span>Border : هنا يمكنك التعديل على سمك الدائرة </span></li> <li><span>Color : هنا يمكنك التعديل على لون الدائرة حيث ستقوم بوضع ترميز اللون بدلا من الاشارة اليه بالاسم يمكنك استخدام هذا الموقع لتعديل الالوان<a href="https://www.w3schools.com/colors/colors_picker.asp"> اضغط هنا </a></span></li> <li><span>Width : هنا يمكنك التعديل على عرض الضفحة حيث أنصحك باستخدام الرقمين اما 1 او 2</span></li> <li><span>Name-page : يعتبر هذا هو الخيار الاكثر اهمية حيث ستضع اسم رابط صفحة تحويل الروابط كما في المثال التالي</span></li> <li><span>https://examble/p/<span style="color: #c30909;">redirect</span>.html</span></li> <li><span>حيث في مثالنا الحاليا <span style="color: #c30909;">redirect</span> يكون اسم صفحة التحويل </span></li> </ul> <br> <p>قم بكتابته في صفحة التعديل</p> <p>بعد الانتهاء من التعديلات قم بالضغط على حفظ </p> <p>والآن يمكنك تجربة الصفحة والاستمتاع بمضاعفة عائدك المادئي</p> <br> <h3>لمشاهدة شرح اضافة صفحة اعادة التوجيه بالفيديو</h3> <br> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/xlTR4Di-ozY?rel=0" width="640" youtube-src-id="xlTR4Di-ozY"></iframe> <br> <p>وفي الختام لاتنس وضع تعليقك أسفل المقال</p> <br> <p>إقرأ أيضا</p> <br> <a href="https://zonezol.blogspot.com/2020/07/meta-tags.html" >إضافة أكواد الميتا تاج بطريقة إحترافية لإشهار مدونتك على بلوجر meta tag keyword</a> <br> <a href="https://zonezol.blogspot.com/2020/08/twitter.html" >طريقة اضافة أيقونة تويتر الى موقعك باحترافية في بلوجر</a> </article> OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com4tag:blogger.com,1999:blog-1552951967015435344.post-7291840819984298932020-09-04T12:00:00.026+02:002021-01-16T15:44:19.144+02:00<article class="onezol-article"> <p>في هذا المقال المختصر سنقوم بتقديم شرح مختصر لكيفية اضافة شريط آخر الأخبار شبيه بشريط الأخبار الخاص بقالب سيو بلس seo plus فأتمنى ان ينال الشرح على اعجابكم واستحسانكم</p> <br> <a><img alt="كيفية اضافة شريط آخر الأخبار بشكل احترافي شبيه بقالب سيو بلس Seo plus" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_tVx1Wp_k3gSLahwyp6IUqHRorbXGqUxA0fQP-O0jlGbU2JbCsVmrttoKJodqJ_VzUt-Axp3lkvi5WPPK_GpziY1sYDwQVJ_5EQ0Es_eWWQRwW7olu5zSvf1mTTLoPQO45KQRuL3bmBA/s16000-rw/%25D8%25A7%25D8%25AE%25D8%25B1+%25D8%25A7%25D9%2584%25D8%25A7%25D8%25AE%25D8%25A8%25D8%25A7%25D8%25B1+%25D9%258A%25D9%2588%25D8%25AA%25D9%258A%25D9%2588%25D8%25A8.webp" title="كيفية اضافة شريط آخر الأخبار بشكل احترافي شبيه بقالب سيو بلس Seo plus" /></a> <br> <h2>اضافة شريط آخر الأخبار</h2> <br> <p>الخطوة الأولى</p> <p>قم بتحميل أكواد الشريط</p> <a href="https://www.mediafire.com/file/vfg7nn566r5omoh/%25D8%25A7%25D8%25AE%25D8%25B1_%25D8%25A7%25D9%2584%25D8%25A7%25D8%25AE%25D8%25A8%25D8%25A7%25D8%25B1.rar/file" target="_blank" rel="nofollow" >اضغط هنا لتحميل الأكواد</a> <br> <p>الخطوة الثانية</p> <p>بعد تحميلك لملف الأكواد</p> <p>ستجد أمام كل كود يمكنك تعديله شرح باللغة العربية</p> <p>قم بالتعديل على الأكواد ليتناسب مع احتياجاتك</p> <br> <p>الخطوة الثالثة</p> <p>قم بنسخ الأكواد كاملة بعد التعديل عليها</p> <p> ثم توجه الى الصفحة الرئيسية لبلوجر</p> <p>ومن هناك قم بالتوجه الى التنسيق</p> <p>ثم اختر اي مكان في القائمة العلوية لتضيف الشريط إليه</p> <p>وإذا كنت تستخدم قالب سيو بلس فستجد منطقة الاعلان أسفل القائمة العلوية قم بضم الأكواد اليها</p> <br> <p>شرح عملي لإضافة الشريط والتعديل عليه</p> <br> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/RqGOQm6jpRU" width="640" youtube-src-id="RqGOQm6jpRU"></iframe> <br> <p>في الختام لاتنس ترك تعليقك</p> <br> <a href="https://zonezol.blogspot.com/2020/09/seo-plus.html">شرح كامل لتحميل وتركيب قالب سيو بلس من الصفر مجانا احترافي Seo Plus</a> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com1tag:blogger.com,1999:blog-1552951967015435344.post-60655189663885368142020-09-04T04:20:00.013+02:002021-01-16T15:43:59.348+02:00<article class="onezol-article"> <p>أصدقائي الأعزاء أقدم لكم اليوم شرحا كاملا لأحد أفضل وأسرع القوالب المتواجدة في ساحة مدونات بلوجر وهو قالب سيوبلس الحديث seo plus v5</p> <p>حيث لن يقتصر الشرح على تحميل القالب والتركيب فقط وإنما سنتعدى ذلك إلى شرح المزايا الأساسية والإضافات الخاصة وأيضا بعض الطرق لتجهيز وتحسين ظهورالقالب في محركات البحث SEO</p> <p>كما ويتوفر في نهاية كل عنوان فيديو توضيحي إذا أردت مشاهدة الشرح بالصوت والصورة فأتمنى أن ينال المجهود على رضاكم واستحسانكم</p> <br /> <a><img alt="شرح كامل لتحميل وتركيب قالب سيو بلس من الصفر مجانا احترافي Seo Plus V5" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigAKIQQeaLaZ8YD4tahGwvTmG3ooK1lKsbiP1IJS1ryu7Fl5hh0_hYh8-EvuHU3v8ZmHPYpptlH_hQXtNF0ZQHOeNOfKR3RroWenLHWudWFjF1VVyW7Q9JRofEq7UzaohZ4T4EVuRJjrM/s16000-rw/%25D9%258A%25D9%2588%25D8%25AA%25D9%258A%25D9%2588%25D8%25A8.webp" title="شرح كامل لتحميل وتركيب قالب سيو بلس من الصفر مجانا احترافي Seo Plus V5" /></a> <br /> <p>ملاحظة يتوفر قالب سيو بلس بنسختين هما النسخة المجانية والنسخة المدفوعة ولكن اخترت ان اشرح لكم النسخة المجانية و ان اترك النسخة المدفوعة لفيما بعد وهذا ان اردتم مني شرحها لكم</p> <p>ملاحظة وأيضا يتوفر قالب سيو بلس بنسختين حسب رغبتكم ان أردته باللغة العربية وجدته وان أردته باللغة الانجليزية كذلك</p> <br /> <h2>الميزات والتحميل والتركيب لقالب سيو بلس Seo Plus</h2> <br /> <p>بداية وقبل تحميلك للقالب يجب ان تعرف ماهي المميزات الخاصة بقالب سيو بلس والتي ستدهشك بصراحة</p> <br /> <h3>المميزات الأساسية لقالب سيو بلس Seo Plus v5 النسخة المجانية</h3> <br /> <ul> <li><span> يدعم https</span></li> <li><span>تحسين وضغط اكواد java script</span></li> <li><span>تحسين وضغط اكواد Css , HTML</span></li> <li><span>خاصية تاجيل الصور</span></li> <li><span>أكواد الميتا والسيو</span></li> <li><span>التجاوب</span></li> <li><span>خاصية الروابط الداخلية</span></li> <li><span>خاصية جدول المحتويات</span></li> <li><span>صفحة الخطأ 404</span></li> <li><span>الإتجاه من اليسار لليمين LTR للمدونات الأجنبية</span></li> <li><span>إعلانات داخل المشاركات بشكل جزئي</span></li> <li><span>التحكم في الآلوان</span></li> <li><span>صفحات مخصصة (اتصل بنا - الأرشيف)</span></li> <li><span>خاصية التعليقات المتطورة</span></li> <li><span>خاصية منع نسخ المحتوى</span></li> </ul> <br /> <h3>المميزات الأساسية لقالب سيو بلس Seo Plus v5 النسخة المدفوعة </h3> <br /> <ul> <li><span>يدعم https</span></li> <li><span>تحسين وضغط اكواد java script</span></li> <li><span>تحسين وضغط اكواد Css , HTML</span></li> <li><span>خاصية تاجيل الصور</span></li> <li><span>خاصية تحويل الصور المصغرة لصيغة web p</span></li> <li><span>أكواد الميتا والسيو</span></li> <li><span>التجاوب</span></li> <li><span>خاصية تقسيم الموضوع</span></li> <li><span>خاصية اقراء المزيد</span></li> <li><span>خاصية الروابط الداخلية</span></li> <li><span>خاصية جدول المحتويات</span></li> <li><span>صفحة الخطأ</span></li> <li><span>الإتجاه من اليسار لليمين LTR للمدونات الأجنبية</span></li> <li><span>إعلانات داخل المشاركات</span></li> <li><span>التحكم في الآلوان</span></li> <li><span>أقسام الصفحة الرئيسية</span></li> <li><span>شريط الاخبار</span></li> <li><span>صفحات مخصصة (اتصل بنا - الأرشيف)</span></li> <li><span>خاصية اعادة توجية الروابط الخارجية</span></li> <li><span>أداة آخر التعليقات</span></li> <li><span>خاصية التعليقات المتطورة</span></li> <li><span>خاصية تثبيت القائمة الجانبية عند التمرير</span></li> <li><span>خاصية منع نسخ المحتوي</span></li> <li><span>خاصية تغير شكل القائمة العلوية</span></li> <li><span>خدمات ما بعد البيع ( دعم فني - تحديثات مجانية )</span></li> </ul> <br /> <h2>تحميل قالب سيو بلس Seo Plus v5</h2> <br /> <p>لتحميل قالب سيو بلس فكل ماعليك هو اختيار أحد الروابط التالية</p> <a href="https://www.mediafire.com/file/kvxmr36n8yhsix0/Seoplus_V5_Free.rar/file" rel="nofollow" target="_blank">النسخة المجانية العربية + الانجليزية رابط مباشر</a> <br /> <a href="https://www.mediafire.com/file/8mqz2isa3tp0tsv/%25D9%2582%25D8%25A7%25D9%2584%25D8%25A8_%25D8%25AA%25D9%2586%25D8%25B8%25D9%258A%25D9%2581.txt/file" rel="nofollow" target="_blank">قالب التنظيف</a> <br /> <a href="https://www.seoplus-template.com/" rel="nofollow" target="_blank">تحميل النسخة المدفوعة من الموقع الرسمي</a> <br /> <h3>تركيب قالب سيو بلس Seo Plus</h3> <br /> <p>لتركيب قالب سيو بلس سنحتاج إلى شيئين رئيسين وهما</p> <p>الأول : أكواد القالب فإذا لم تجد تحميل القالب بالأعلى فلا تقلق يوجد رابط تحميل آخر تجده في أسفل الفيديو</p> <p>الثاني : قالب التنظيف أيضا ستجد الرابط في أسفل الفيديو</p> <p>الخطوة الأولى : ستقوم بنسخ أكواد قالب التنظيف ثم الدخول الى الواجهة الرئيسية لبلوجر ثم الى المظهر</p> <p>للإحتياط فقط قم بأخذ نسخة احتياطية لقالبك الذي تستخدمه</p> <p>ثم بعد ذلك قم بالضغط على تعديل HTML</p> <p>ثم قم بحذف جميع الأكواد التي تستخدمها</p> <p>ثم الصق أكواد قالب التنظيف</p> <p>ثم اضغط على حفظ المظهر</p> <br /> <p>الخطوة الثانية : ستقوم بنسخ أكواد قالب سيو بلس</p> <p>ثم بنفس الطريقة قم بالعودة الى المظهر</p> <p>ثم تعديل HTML</p> <p>ومن هناك قم بحذف أكواد قالب التنظيف</p> <p>ثم قم بلصق أكواد قالب سيو بلس</p> <p>وأخيرا قم بحفظ المظهر</p> <p>ومبروك عليك مقدما تركيب القالب</p> <p>شرح عملي لكامل الخطوات أعلاه</p> <br /> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/GYJ6D-nM3mQ?rel=0" width="640" youtube-src-id="GYJ6D-nM3mQ"></iframe> <br /> <h3>شرح كامل للاعدادات الأساسية لقالب سيو بلس Seo Plus v5</h3> <br /> <p>يوجد الكثير من الأمور التي ستحتاج الى تعديلها في البداية ولكن لاتقلق فستحصد ثمارك فيما بعد</p> <p>في هذا الفيديو سنقوم بشرح جميع الاعدادات الأساسية</p> <p>وهذا دليل لبعض الاشياء المشروحة</p> <br /> <p>أنوع الخطوط التي يمكنك استخدامها</p> <p>Tajawal</p> <p>Cairo</p> <p>Changa</p> <p>Messiri</p> <p>Almarai</p> <p>sans-serif</p> <p>Segoe</p> <br /> <p>مقاسات اللوغو أو صورة رأس الصفحة</p> <p>العرض 250 px الارتفاع 70 px</p> <br /> <a href="https://zonezol.blogspot.com/2020/07/cooltext.html">موقع cooltext المجاني لكاتبة نصوص احترافية 2020</a> <br /> <p>مواقع التواصل الاجتماعي التي يمكنك اضافتها</p> <p>Facebook</p> <p>instagram</p> <p>twitter</p> <p>linkdn</p> <p>tumblr</p> <p>whatsapp</p> <p>youtube</p> <p>behance</p> <p>flickr</p> <p>blogger</p> <p>wordpress</p> <p>tumblr</p> <p>telegram</p> <p>skype</p> <p>pinterest</p> <p>google play</p> <br /> <p>لإضافة أكواد ميتا تاغ احترافية</p> <a href="https://zonezol.blogspot.com/2020/07/meta-tags.html">إضافة أكواد الميتا تاج بطريقة إحترافية لإشهار مدونتك على بلوجر meta tag keyword</a> <br /> <p>لإضافة ملف الروبوت</p> <a href="https://zonezol.blogspot.com/2020/08/blogger-advice-robot-txt.html">الطريقة الصحيحة لإضافة ملفات الروبوت ببلوجر Robot.txt</a> <br /> <p>لتغيير الصورة الافتراضية</p> <br /> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/sV5ijTEGvlM?rel=0" width="640" youtube-src-id="sV5ijTEGvlM"></iframe> <br /> <p>لتسريع الموقع قم بتبديل القيمة true بالقيمة false</p> <br /> <p>مقاسات الصور المصغرة للمشاركات العرض 640 px والطول 380 px</p> <br /> <p>لجعل ميزة اقرا ايضا في آخر المقال قم باضافة الكلمة [bot] لعنوان الميزة</p> <br /> <p>شرح عملي لكل ما سبق</p> <br /> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/9TccYQNq2yI?rel=0" width="640" youtube-src-id="9TccYQNq2yI"></iframe> <br /> <h2>شرح اضافة صفحة اتصل بنا والارشيف لقالب سيو بلس v5 Seo plus</h2> <br /> <p>يعتبر هذا الجزء هو الجزء الأسهل في هذه السلسلة فكل ماعليك لاضافة هاتين الصفحتين هو القيام بالآتي</p> <br /> <p>قم بتحميل الملف التالي الذي يحتوي على الصفحتين</p> <a href="https://www.mediafire.com/file/25e2sk1vtm183o2/%25D8%25B3%25D9%258A%25D9%2588_%25D8%25A8%25D9%2584%25D8%25B3_%25D8%25A7%25D8%25AA%25D8%25B5%25D9%2584_%25D8%25A8%25D9%2586%25D8%25A7_%25D9%2588%25D8%25A7%25D9%2584%25D8%25A7%25D8%25B1%25D8%25B4%25D9%258A%25D9%2581.rar/file" rel="nofollow" target="_blank">صفحة اتصل بنا + صفحة الأرشيف</a> <br /> <p>قم بتكرار الخطوات التي بالأسفل لكل صفحة تريد اضافتها على حدة</p> <p>قم بعمل صفحة جديدة على بلوجر</p> <p>ثم من قائمة الأدوات قم بتبديل وضع الانشاء الى وضع الHTML</p> <p>قم بلصق أكواد الصفحة</p> <p>ثم قم بتعديل العنوان</p> <p>وقم بتعديل الخيارات حسب رغبتك</p> <p>ويستحسن ضبط الخيارات كما في الصورة التالية</p> <br /> <a><img alt="صورة تشرح ضبط الاعدادات الأساسية وعلامات رؤوس مخصصة" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEgKIi5jwMUMdTEg1ov4cwvOrzBMkh5I_pzMWFl-ZzAP2wQ4KtHl2I8gujzInTdapuAhgzxnpQU8GeQNiBOPcaMJdJjiVVeFy1GfCXIDNoohYkjJOro5fV4joIWgmMpgHdh2b3T3c873I/s16000-rw/Untitled-2.webp" title="شرح كامل لتحميل وتركيب قالب سيو بلس من الصفر مجانا احترافي Seo Plus V5" /></a> <br /> <p>شرح عملي لكل مما سبق</p> <br /> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/bNQ8rX1Mu2M?rel=0" width="640" youtube-src-id="bNQ8rX1Mu2M"></iframe> <br /> <p>مممم اظن انك مازلت تبحث عن المزيد من الأجوبة</p> <p>عموما الى هنا قد انتهينا من شرح أهم الأمور الأساسية المتعلقة بقالب سيو بلس Seo Plus V5</p> <p>والآن أصبح بامكانك اختيار ما تشاء من المواضيع التالية والبدء بما تجده يناسب احتياجاتك</p> <p>لاتستعجل ياصديقي فامامك الكثير لتقدمه في المستقبل</p> <br> <p>إقرأ أيضا</p> <br> <a href="https://zonezol.blogspot.com/2020/09/seo-plus-news.html" target="_blank">شريط اخر الاخبار للنسخة المجانية من قالب سيو بلس</a> <br> <a href="https://zonezol.blogspot.com/2020/09/seoplus-redirect.html" target="_blank">صفحة اعادة التوجيه للنسخة المجانية من قالب سيو بلس</a> <br> <a href="https://zonezol.blogspot.com/2020/09/seoplus-arrow-up.html" target="_blank">زر رأس الصفحة للنسحة المجانية من قالب سيو بلس</a> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com1tag:blogger.com,1999:blog-1552951967015435344.post-73785346088334921312020-09-03T17:47:00.012+02:002021-01-24T18:00:47.525+02:00<article class="onezol-article"> <p>إذا كنت مدون في بداية مشواره أو محترف وكنت تبحث عن أحدث وأفضل اكواد الميتا تاج لإشهار مدونتك ومقالاتك وجعلها تتصدر نتائج البحث فكل ما عليك هو متابعة هذا المقال حتى النهاية</p> <br /> <a><img alt="إضافة أكواد الميتا تاج بطريقة إحترافية لإشهار مدونتك على بلوجر meta tag keyword" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizVIhIA1rI7DUVXrG8qTnwIZ_-NHsxFtcI1dlMzTQk3aE5kykW1z-zuvwfJRhNV1sXKZjuQDXuoJWFLohByUHxNpKKxpjcj59e0Ks3ZYcmfVk57Ty9tFmFf36-elSxotT6v5PsqxLBwPA/s16000-rw/%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B12.webp" title="إضافة أكواد الميتا تاج بطريقة إحترافية لإشهار مدونتك على بلوجر meta tag keyword" /></a> <br /> <h2> ماهي أكواد الميتا تاج meta tag keyword </h2> <br /> <p>أكواد الميتا تاج هي العامل الأساسي لتعريف الزوار بمدونتك و ببساطة هي تعبير عن هوية مدونتك لدى محركات البحث ليسهل عليها التعرف على أهم المعلومات الخاصة بمدونتك والتي تقدمها لهم أنت وكما تعطي انطباعا أوليا لمحركات البحث أن صاحب المدونة هو شخص محترف والذي بدوره تحسين ال SEO وتصدر نتائج البحث وسهولة وتسريع الأرشفة لموضوعاتك لتقوم بتحقيق أفضل النتائج</p> <br /> <h2>كيفية إضافة أكواد الميتا تاج meta tag keyword</h2> <br /> <p>أولا : ستقوم بتحميل ملف الأكواد</p> <a href="https://www.mediafire.com/file/v1a5iucdhbbknla/meta_tags.rar/file" rel="nofollow" target="_blank">اضغط هنا</a> <p>ثانيا : ستقوم بالدخول الى الملف والتعديل على الأكواد حسب الآتي</p> <br /> <h3>شرح اكواد الميتا تاج بعد التحميل</h3> <br /> <p>اسم او عنوان الموقع : هنا ستضع اسم موقعك سواء باللغة العربية ام الإنجليزية</p> <p>وصف الموقع : في هذه الخانة ستقوم بكتابة وصف دقيق لايتجاوز ال3 أسطر عن موقعك وماهي الخدمات التي يقدمها وما الى ذلك</p> <p>رابط الصورة اللوغو : في هذه الخانة ستقوم بوضع رابط للصورة التي تريد عرضها عندما ينشر أحدهم رابط موقعك على مواقع التواصل</p> <p>رابط الموقع الخاص بك : هنا ستقوم بوضع الرابط الذي تريد اظهاره عندما يقوم أحدهم بنشر رابط موقعك على الانترنت</p> <br /> <h3>أكواد مواقع التواصل الاجتماعي</h3> <br /> <p>fb admins : هنا قم بوضع الايدي الخاص بحسابك الشخصي على الفيس بوك</p> <p>fb pages : هنا قم بوضع الايدي الخاص بصفحة الموقع على الفيس بوك</p> <p>fb app id : هنا قم بوضع الايدي الخاص بتطبيقك على الفيس بوك أو بكل بساطة احذف الكود ان لم يكن لديك تطبيق </p> <p>twitter creator : قم بكتابة اسم المستخدم او اليوزر نيم لحسابك على تويتر</p> <p>twitter site : قم بكتابة اسم المستخدم او اليوزر نيم لحسابك على تويتر</p> <br /> <h3>أكواد الميتا تاج الأساسية</h3> <br /> <p>اسم أو عنوان الموقع : هنا ستضع اسم موقعك سواء باللغة العربية ام الإنجليزية</p> <p>وصف الموقع : في هذه الخانة ستقوم بكتابة وصف دقيق لايتجاوز ال3 أسطر عن موقعك وماهي الخدمات التي يقدمها وما الى ذلك</p> <p><a href="https://zonezol.blogspot.com/2020/12/secrets-of-keywords-in-blogger.html" target="_blank">الكلمات المفتاحية</a> : هنا ستضع أقسام موقعك أو كما يسميها البعض بالتسميات ولكن ستضع بين كل قسم وآخر علامة فاصلة ( shift+و )</p> <p>مثال : مقالات,مواقع,أفلام,موسيقى الخ</p> <p>يمكنك أيضا الاستعانة بهذا الموقع لتحسين كلماتك المفتاحية</p> <a href="https://www.wordtracker.com/search" rel="nofollow" target="_blank">اضغط هنا للدخول للموقع</a> <p>المؤلف أو الكاتب : ستكتب هنا إسم مؤلف المدونة أو صاحبها</p> <p>الايميل : هنا ستكتب البريد الإلكتروني الذي أنشأت به مدونتك</p> <p>5 days : وهي الوقت الذي سيقوم روبوت محرك البحث بإعادة الزيارة لمدونتك ليقوم بأرشفة المواضيع أي متوسط عدد الأيام التي تحتاجها لكتابة مقال أو موضوع جديد</p> <p>اللغة المستخدمة : ستقوم بكتابة اللغة التي تكتب بها في مدونتك إذا كانت العربية ضع AR أو الانجليزية ضع EN ونحوه أو يمكنك إختيار أكثر من لغة إذا كنت تكتب بلغات مختلفة وقم بالفصل بينهم بالفاصلة ,</p> <p>ويفضل أن لاتقوم بالتعديل على باقي الأكواد لتلافي المشاكل</p> <p>بعد الانتهاء من التعديل ستقوم بنسخ الأكواد كاملة ومن ثم قم بالذهاب الى الصفحة الرئيسية في بلوجر ثم المظهر ثم تعديل HTML</p> <p>وبعد الدخول ستقوم بلصق جميع الأكواد أسف الوسم &lt;head&gt;</p> <p>وبعد الإنتهاء ستقوم بحفظ المظهر ومبروك عليك مقدما</p> <p>يمكنك أيضا مشاهدة الشرح بالفيديو</p> <br /> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/4mw3YgLBQUE?rel=0" width="640" youtube-src-id="4mw3YgLBQUE"></iframe> <br /> <a href="https://www.mediafire.com/file/v1a5iucdhbbknla/meta_tags.rar/file" rel="nofollow" target="_blank">لتحميل الأكواد اضغط هنا</a> <p>للدخول لموقع الكلمات المفتاحية keywords</p> <a href="https://www.wordtracker.com/search" rel="nofollow" target="_blank">اضغط هنا</a> <br /> <p>إقرأ أيضا</p> <br /> <a href="https://zonezol.blogspot.com/2020/08/blogger-advice-robot-txt.html">الطريقة الصحيحة لإضافة ملفات الروبوت ببلوجر Robot.txt</a> <br /> <a href="https://zonezol.blogspot.com/2020/07/bing-webmaster.html">شرح أدوات مشرفي المواقع بينج تصدر محركات البحث bing webmaster</a> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com0tag:blogger.com,1999:blog-1552951967015435344.post-201985789861743402020-08-29T12:24:00.007+02:002021-01-16T15:43:42.474+02:00<article class="onezol-article"> <p>عندما تمسك بأحد المنتجات في المحلات التجارية قد تلاحظ في جزء من المنتج أنه يوجد بعض الخطوط أسفلها بعض الأرقام ولكن قد لاتعلم بالظبط ما فائدة هذه الأشكال أو ماتدل عليه</p> <p>في هذا المقال سنتحدث بشكل مجمل عن جميع مايخص الباركود Bar Code ورموز الاستجابة السريعة QR Code نشأته وفيم يستخدم وطريقة كتابته وكيفية قراءته والكثير فأتمنى أن يثريكم بالمعلومات</p> <br> <h2>الجيل الأول : الباركود Bar Code</h2> <br> <a><img alt="جميع ماتريد ان تعرفه عن الباركود Bar Code و رموز الاستجابة السريعة QR Code" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLnR-TjuXXy6S1j2guCp2XLpunS8A2kQcWdOVSF45GqFZchuumA8KZUv2N6x74NfGQJm6bgVzkwaRNPUQSK_xknLBiagZY2BFvO_O-4utT_r2RxpD1Z4GsmIZ-1AroKGK6qJq7OSz-Lqs/s16000-rw/Untitled-6.webp" title="جميع ماتريد ان تعرفه عن الباركود Bar Code و رموز الاستجابة السريعة QR Code" /></a> <br> <h3>نشأة مصطلح الباركود Bar Code</h3> <br> <p>مر هذا الاختراع العجيب بعدة مراحل حتى وصل إلى ماهو عليه الآن فالبداية كانت عام 1932م في جامعة هارفارد الأمريكية عندما قام الطالب "والاس فلينت" ببحث حول "البقالة المؤتمتة" ولكن فكرته لم تر النور بسبب الأزمة الاقتصادية التي كانت تعاني منها أمريكا في ذلك الوقت</p> <p>تم تطوير هذا البحث عام 1949م من قبل كل من المخترعين "نورما جوزيف وورلاند" و "بيرنارد سيلفر" حيث قاما بابتكار طريقة آلية لحفظ وعرض بعض المعلومات عن سلع ومنتجات محددة وكانت عبارة عن مجموعة من الدوائر المتداخلة المختلفة الحجم ولكن باء اختراعهم بالفشل بسبب كلفته الباهظة في ذلك الوقت</p> <p>وفي عام 1973م قام "جورج لاورير" بتطوير هذه الشيفرة الدائرية إلى الشكل الطولي المعروف الآن وتم استخدامها في متاجر ولاية أوهايو الأمريكية لأول مرة ومن هنا بدأت المحلات التجارية بتبني الفكرة واحدة تليها الأخرى</p> <br> <h3>تعريف الباركود Bar Code</h3> <br> <p>الباركود Bar Code : رمز شريطي أو شفرة خيطية ‏ تقوم بالتمثيل الضوئي لبيانات قابلة للقراءة من قبل الحاسوب مثل الأرقام والحروف وهو رمز ثنائي الأبعاد وفي الأصل كانت تمثل البيانات في مناطق العرض والفراغات بين الخطوط المتوازية ويمكن أن نطلق عليها الرموز أو الشفرات الخيطية أحادية البعد</p> <p>ففكرة الباركود Barcode هي مرور شعاع الليزر على الخيوط المشفرة فتمتص الخيوط السوداء الشعاع و تحول دون انعكاسه و ينعكس شعاع الليزر من الخيوط البيضاء ببيانات يقرأها النظام ليعرف نوع المنتج وأي بيانات أخرى موجودة على هذا الرمز الخيطي</p> <br> <h3>كيف يتم قراءة الباركود Bar Code</h3> <br> <p>يتم قراءة الباركود Bar Code عن طريق جهاز خاص يسمى بالماسح الضوئي Barcode Reader حيث يقوم بإطلاق شعاع ضوئي غالبا باللون الأحمر على الشيفرة فتعمل الأعمدة السوداء فيه على امتصاص الضوء وتقوم الأعمدة البيضاء بعكس الضوء الوارد إلى قارئ الباركود والذي يقوم بدوره بتحليل الضوء المنعكس وفك ترميز الكود وإرسال البيانات إلى الحاسب المتصل به لعرضها</p> <br> <a><img alt="قارئ الباركود bar code reader" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx4KuLxbAyzoeC57z8wMjBCzDxQgEkGceScHeFkRhNrseVLZEBS7KiIxzuBZLImkNl2INZIzIRPyi9ANMRQSLc2q1MDi8pYdNsigZ41pGwCh2J9yidzD0iiE-Gf6HlVZoJdbbrLV0PC9M/s16000-rw/Untitled-9.webp" title="جميع ماتريد ان تعرفه عن الباركود Bar Code و رموز الاستجابة السريعة QR Code" /></a> <br> <p>هناك الكثير من المعلومات التي يمكن استخراجها من الباركود Bar Code كاسم الدولة المصنّعة للسلعة، اسم السلعة ووزنها، تاريخ الانتاج، السعر... الخ</p> <p>يمكننا ببساطة معرفة اسم البلد المنشأ من خلال فحص الأرقام الثلاثة الأولى الموجودة على الباركود من اليسارفكل بلد له أرقام مختلفة ومميزة فمثلا لو كانت الأرقام الثلاثة الأولى 471 فإن مَنشأ السلعة تايواني ولو كانت ضمن المجال 450 حتى 459 فهي ذات منشأ ياباني ولو كانت 622 فهي ذات منشأ مصري</p> <br> <h2>الجيل الثاني : رمز الاستجابة السريعة QR Code</h2> <br> <a><img alt="رمز الاستجابة السريعة bar code new generation" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN2ZtD-XCU6-ihwqcktkWuPSl9mV43X3fgyRUHKAmo4map2jENLEmkzPqm7iCgSS56MsuB8ptDB_gi4qcYdATEbwtqc35RaUG5w5Z4YbLh5yPytbmafOACNiOwHERaYC62BuMmXkCLcRY/s16000-rw/Untitled-1.webp" title="جميع ماتريد ان تعرفه عن الباركود Bar Code و رموز الاستجابة السريعة QR Code" /></a> <br> <h3>نشأة مصطلح رمز الاستجابة السريعة QR CODE</h3> <br> <p>ظهر رمز الاستجابة السريعة QR Code كجيل ثانى للرمز الخيطي وهو ذو بعدين</p> <p>فإذا نظرت لأى كود QR ستجده ذو طول وعرض كما يوجد به مربعات فى ثلاث زوايا و توجد بينها المساحة الافتراضية التى تحمل البيانات المقروءة عن طريق القارئ الخاص بها أو ببرنامج معين على جهاز الهاتف المحمول</p> <br> <h3>تعريف رمز الرد السريع QR Code</h3> <br> <p>رمز الرد السريع QR Code : هو عبارة عن مجموعة من البكسلات التي تتكون على شكل صورة تفهمها الأجهزة بحيث تدل على شيء معين إما عنوان موقع أو بريد الكتروني أو رقم هاتف أو أي نص عادي أو حتى صورة</p> <p>يوجد العديد من الأجهزة بمختلف الأنواع والأشكال التي تستطيع قراءة رموز الاستجابة السريعة QR Code فعند تحميلك لأي تطبيقات المسح الضوئي Scan Code أو بكل بساطة تمرير كاميرا الهاتف على رمز الاستجابة السريعة QR Code فإن الهاتف بكل بساطة سيقوم بترجمة هذه البكسلات ويقوم بنقلك تلقائيا الى العنوان المعني بهذا الكود</p> <br> <h2>الفرق بين الباركود Bar Code و رموز الاستجابة السريعة QR Code</h2> <br> <p>1- الباركود Bar Code عبارة عن خيوط و يأخذ غالباً شكل مستطيل وهو ذو بعد واحد</p> <p>أما رمز الاستجابة السريعة QR Code فغالباً ما يكون مربع الشكل وهو ذو بعدين </p> <br> <p>2- الباركود Bar Code يستخدم لمعرفة معلومات عن السلع أو الخدمات و له قارىء مخصص لها يسمى BarCode Reader</p> <p>أما رمز الرد السريع QR Code فيمكنك قرائته عن طريق برنامج للهاتف المحمول من خلال تصوير الكود بالكاميرا الموجودة بالهاتف وأيضا يمكنك تصميم رمز الإستجابة السريع QR code الخاص بك من المواقع وأيضا التطبيقات و ذلك يعطيك دفعة لتثير فضول الناس إلى استخدامه</p> <br> <h3>أهمية رمز الاستجابة السريعة QR Code</h3> <br> <p>تكمن أهمية رمز الرد السريع QR Code في تعدد طرق استخداماته </p> <br> <ul> <li><span>يمكنك الحصول على الكثير من المعلومات بسهولة عن طريق تصوير مربع واحد وهذا أحد أهم مميزات رمز الاستجابة السريع QR Code</span></li> <li><span>يمكنك تصميم رمزك الشخصي ووضع معلوماتك ضمنه فلا يضطر الشخص لحمل الكرت طيلة الوقت كل ما عليه هو تسليط كاميرا الهاتف على الكود حتى يحتفظ بكل بياناتك على جهازه</span></li> <li><span>بعض المجلات بدأت بوضع رمز الاستجابة السريع QR code على بعض صفحاتها وإذا قمت بقرائتها بجهازك فستعطيك موقع لمقالة أو موقع لفيديو أو اي ملف ميديا تريد المجلة إعطائها لك</span></li> <li><span>إذا كنت على عجلة من أمرك و وجدت بالشارع أحد الإعلانات قد لفت انتباهك فكل ما عليك ان تقوم بتصوير كود الاستجابه السريع QR Code و تصفحه لاحقاً فى أي وقت تريده</span></li> <li><span>بعض أماكن بيع المنتجات تتيح الكيو آر كود أسفل الموديلات للسلعة و بتصويرك للكود يمكنك ان تتعرف على جميع المعلومات الخاصة بالسلعة المحددة بل قد يصل الأمر إلى ان تتيح لك شراء السلعة من الانترنت إن أردت ذلك</span></li> <li><span>بعض الإعلانات ما هي إلا عبارة عن QR code وعندما تقرأها تجدها أسم ووظيفة و رقم هاتف وبعض المعلومات الخاصة بالإعلان</span></li> <li><span>يمكنك معرفة أماكن معينة على الخريطة عن طريق برامج تعتمد على كود الإستجابة السريع</span></li> <li><span>يمكنك حرفيا تحويل أي نص مكتوب إلى رمز QR Code بسهولة تامة عن طريق أحد المواقع أو البرامج أو التطبيقات وسنتحدث عن هذا الموضوع فيم بعد</span></li> </ul> <br> <h3>كيف تقوم بتحويل أي بيانات إلى QR Code ؟</h3> <br> <p>يمكنك تحويل النصوص وعناوين الURL وأي موقع أو صفحة على مختلف مواقع التواصل الاجتماعي والبريد الالكتروني والصور ومقاطع الفيديو وقد تطول اللستة ولكن باختصار لكي تتخيلو معي الأمر قد يصل الأمر الى تسجيل دخولك لصفحتك على الفيس بوك فقط عن طريق مسح الكود بأحد تطبيقات المسح الضوئي فقط</p> <br> <h3>طرق تصميم وإنشاء وقراءة رموز الاستجابة السريعة QR Code</h3> <br> <p>هنالك الكثير من طرق تصميم وإنشاء كود الQR بسهولة وسنذكر أشهرها</p> <a href="https://zonezol.blogspot.com/2020/08/qr-code.html">أفضل طريقة لكسب آلآف المتابعين والزوار فقط من موقعك QR CODE</a> <p>تطبيق تصميم وقراءة رمز QR Code لأجهزة الآيفون</p> <a href="https://apps.apple.com/us/app/qr-reader-for-iphone/id368494609" target="_blank" rel="nofollow" >QR Reader for iPhone</a> <p>تطبيق قراءة رمز QR Code لأجهزة الأندرويد</p> <a href="https://play.google.com/store/apps/details?id=tw.mobileapp.qrcode.banner" target="_blank" rel="nofollow" >قارئ رمز QR‏</a> <p>أفضل المواقع لتصميم الQR Code</p> <a href="https://www.qr-code-generator.com/" target="_blank" rel="nofollow" >QR Code</a> <br> <a href="https://www.qrcode-monkey.com/" target="_blank" rel="nofollow" >QR Code monkey</a> <br> <a href="http://goqr.me/" target="_blank" rel="nofollow" >Go QR</a> <br> <a href="https://www.qrstuff.com/" target="_blank" rel="nofollow" >QR Stuff</a> <p>برنامج قراءة الباركود لأجهزة الويندوز Windows</p> <p>هناك الكثير من البرامج التي يمكن الاستفادة منها في عملية مسح كود QR بسهولة تامة مثل برنامج <a href="https://www.microsoft.com/ar-eg/p/easy-barcode-scanner-free/9wzdncrdc2r9?activetab=pivot:overviewtab" target="_blank" rel="nofollow">QR Reader</a> حيث بإمكانك أن تضع ما تشاء من أكواد وتمسحها عن طريقه كما تستطيع تحديد منطقة الباركود عبره وعمل مسح وطباعة للكود وهو برنامج صغير الحجم ولايؤثر على جهازك أبداً</p> <p>يمكنك تحميل برنامج قارئ الباركود للكمبيوتر بشكل مجاني عبر</p> <a href="https://www.microsoft.com/ar-eg/p/easy-barcode-scanner-free/9wzdncrdc2r9?activetab=pivot:overviewtab" target="_blank" rel="nofollow">عبر الضغط هنا</a> <p> وهو يتوافق مع جميع أنظمة الويندوز</p> <p>طريقة استخدامه بسيطة جداً حيث يحوي أداة دورها تحديد المنطقة التي تحوي كود QR ومن ثم مسح الكود وطباعة جميع المعلومات الخاصة به</p> <br> <h2>دخول كود المسح الضوئي QR Code في التعليم</h2> <br> <a><img alt="دخول الباركود في التعليم" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9xI-EZwADs5Kx4eoDJXkdz9O1WTUErlOXuXF7jok-sjJdPDYVw_bWZGy4jYSszFJ2fzmHrSbx9imS7jajr9Fc7ssdRET_ubokRTmbsn9WMdfJjXCavhEQciaB-c6LmItbSAG5CzE-IMA/s16000-rw/Untitled-5.webp" title="جميع ماتريد ان تعرفه عن الباركود Bar Code و رموز الاستجابة السريعة QR Code" /></a> <br> <p>لم يتوقف استخدام كود المسح الضوئي QR Code في المجالات التجارية وغيرها من المجالات بل تعداها ليدخل في مجال التعليم وأصبحت هذه التقنية موضع اهتمام المعنيين بالعملية التعليمية فأصبح بإمكاننا من خلال كود المسح الضوئي QR Code تجديد طريقة طرح المناهج الدراسية وتسهيل التعلم عند استخدامه بالشكل الصحيح</p> <p>ويقصد باستخدام تقنية المسح الضوئي في التعليم</p> <p>أنها طريقة تقوم على استخدام كود الاستجابة السريعة QR في التعلم من خلال إنشاء رموز الـ QR ضمن الكتب المدرسية ومن ثم ربطها بمصادر إضافية أو مراجعات أخرى أو حتى بنشاطات صفية فتسمح للطالب من خلال مسح الكود بواسطة قارئ الأكواد أو تطبيق الكاميرا في الهواتف الذكية على الحصول على المزيد من المعلومات وتعتبر هذه الطريقة بمثابة وسيلة للتفاعل بين الطلاب والتكنولوجيا الحديثة</p> <ul> <li><span> من الإستخدامات الرائعة لرمز الـ QR في التعليم هي استخدامه في مراجعات الكتب الموجودة في مكتبة المدرسة حيث يتم إنشاء رموز QR ووضعها على غلاف هذه الكتب أو بعض الكتب المحددة مثل كتب الحاسب أو اللغة الإنجليزية وعليه يتم ربطها بالمراجعات ورأي القراء السابقين أو فيلم ترويجي للكتاب مثلاً أو أي مرجع إضافي آخر</span></li> <li><span>وتعتبر هذه الطريقة سهلة ومفيدة كما تعمل على تسريع عملية تصفح الكتب فيمكن للطالب من خلال مسح سريع للكود أن يصل للمعلومات التي يرغب بمعرفتها عن الكتاب قبل اختياره أو استعارته</span></li> <li><span>يمكن استخدام رمز الـ QR في المناهج والكتب المدرسية (محل الصور الفوتوغرافية بالكتاب) وبذلك يساعد الطالب على الوصول بشكل أسهل إلى مختلف المصادر التعليمية</span></li> <li><span>يمكن استخدام رمز الـ QR في تسجيل حضور الطلاب للمدرسة أو الحصة من خلال مسح بطاقات الـ QR الخاصة بكل طالب بحيث أنها تعتبر طريقة أسرع وأوفر وقتا من النظام التقليدي أو نظام البصمة</span></li> <li><span>يستفاد من استخدام رمز الـ QR في العملية التعليمية من خلال تحفيز الطلاب على الاكتشاف و البحث بالإضافة لتقوية الدافع لديهم للتعلم في الفصول الدراسية</span></li> <li><span>يمكن استخدام رمز الـ QR في الواجبات المنزلية حيث يمكن للمعلم أن يقوم بوضع الإجابات الصحيحة في شكل كود QR ومن ثم يستطيع الطالب مسح الكود بعد أن ينجز فرضه ويستعرض الإجابة الصحيحة</span></li> <li><span>إن استخدام هذه الطريقة في التعليم تسهم في الحفاظ على البيئة حيث تغني عن استخدام كم كبير من الأوراق المطبوعة والتي يمكن تخزينها في رمز الـ QR</span></li> <li><span>يمكننا طباعة الـ QR على الكثير من الأشياء كالأوراق و الكتب و مواقع الإنترنت و لوحات الإعلانات.. وغيرها وذلك يعطيها مرونة هائلة في إيصال مضمونها للجميع</span></li> </ul> <br> <p>ختاما لهذا المقال لاتنس وضع تعليقك أسفل المقال</p> <br> <p>المصادر</p> <br> <p>ana-3rby</p> <p>thaqafnafsak</p> <p>annajah</p> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com0tag:blogger.com,1999:blog-1552951967015435344.post-12155993832155578242020-08-29T12:07:00.009+02:002021-01-16T15:43:32.700+02:00<article class="onezol-article"> <p>إذا كنت تملك موقع إلكتروني وكنت تبحث عن طريقة مميزة لزيادة متابعيك على مختلف مواقع التواصل الإجتماعي من فيس بوك أو تويتر أو انستقرام أو أي وسيلة تواصل اخرى فهذا المقال قد كتب خصيصا لك</p> <p>سنتحدث في هذا المقال عن رمز الاستجابة السريعة QR CODE وكيفية استخدامه في الموقع الخاص بك</p> <br> <a><img alt="أفضل طريقة لكسب آلآف المتابعين والزوار فقط من موقعك QR CODE" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb2BMpHekkijK8Jk6CalLzMI-6zjVnR-bnPgZ52OHrxriIdyF_ekrRUGMhqEkBxi7ec3dVfYjOirvp4MMNNjV_5ONLD9QlCd8vkPy-0WzKihqPnSdQzzGwZllD2sbq-rTm-qgukO3yEvs/s16000-rw/Untitled-8.webp" title="أفضل طريقة لكسب آلآف المتابعين والزوار فقط من موقعك QR CODE" /></a> <br> <p>إذا كنت لاتعلم حت الآن ماهو كود الQR فأنصحك بقراءة هذا المقال بالتحديد لأنني سأختصر المعلومات حوله وأركز على طريقة زيادة متابعيك على مواقع التواصل الإجتماعي</p> <a href="https://zonezol.blogspot.com/2020/08/bar-code-qr-code.html">جميع ماتريد ان تعرفه عن الباركود Bar Code و رموز الاستجابة السريعة QR Code</a> <br> <h2>ماهو رمز الإستجابة السريعة QR CODE</h2> <br> <p>رمز الاستجابة السريعة هو عبارة عن مجموعة من البكسلات التي تتكون على شكل صورة تفهمها الأجهزة بحيث تدل على شيء معين إما صفحة على مواقع التواصل الاجتماعي أوبريد الكتروني أو رقم هاتف أو حت أي نص عادي أو صورة</p> <p>ويتكون من اسم العلامة التجارية لنظام مصفوفة الرموز الشريطية ثنائية الأبعاد يتميز بسهولة وسرعة القراءة ونسبة التخزين العالية</p> <p>يوجد العديد من الأجهزة بمختلف الأنواع والأشكال التي تستطيع قراءة رموز الاستجابة السريعة QR CODE</p> <p>فعند تحميلك لأي تطبيقات المسح الضوئي SCAN CODE أو بكل بساطة تمرير كاميرا الهاتف على رمز الاستجابة السريعة QR CODE فإن الهاتف بكل بساطة سيقوم بترجمة هذه البكسلات ويقوم بنقلك تلقائيا الى العنوان المعني بهذا الكود</p> <br> <h2>طريقة زيادة متابعيك على مختلف مواقع التواصل الإجتماعي فقط باستخدام رمز QR</h2> <br> <p>نأتي الآن إلى سبب إنشائنا لهذه المقالة حيث سنوضح لك الفكرة الرئيسية لطريقة مميزة توضح لك بالظبط ما نعنيه بزيادة المتابعين</p> <p>وأيضا يمكنك استخدام العكس تماما أي زيادة زوارك على المدونة من خلال نشرك لكود QR على مواقع التواصل الإجتماعي</p> <p>أولا</p> <p>سنقوم بإنشاء رمز QR حسب ماتريد ان تنشره سواء موقعك الإلكتروني أو مقالة أو صفحتك على الفيس بوك أو تويتر....إلخ</p> <p>تنويه بسيط : يمكنك مشاهدة الشرح بالكامل بآخر المقالة إذا أردت </p> <p>أولا قم بالدخول إلى هذا الموقع الذي سنقوم بإنشاء رمز الQR من خلاله</p> <a href="https://www.qrcode-monkey.com/" target="_blank" rel="nofollow" >QR Code Monkey</a> <p>ثانيا</p> <p>قم بإنشاء كود الQR الخاص بك عن طريق لصق الرابط الخاص بموقعك الإلكتروني أو صفحتك وقم بالتعديل على الخصائص حسب ذوقك</p> <p>سنساعدك أيضا على اختيار المقاسات المخصصة لإظهار كود الQR على موقعك الإلكتروني فلا تقلق وأكمل حاليا</p> <p>لاحظ أنه يجب أن تختار صورة مربعة أي يفضل أن تكون في القائمة الجانبية بمقاس 300x300</p> <p>ثالثا</p> <p>إذا كنت قد اخترت النشر لموقعك فقم بنشر الصورة على موقعك ومشاركتها مع أصدقائك</p> <p>أما إذا كنت تريد النشر لصفحتك على مواقع التواصل الإجتماعي فهنالك ثلاث خطوات لنشر الكود على موقعك</p> <p>أولا</p> <p>قم برفع كود الQR أو الصورة على الإنترنت أو بكل بساطة قم بإنشاء مشاركة جديدة وقم باختيار الحجم الأصلي وقم بنسخ رابط الصورة</p> <p>ثانيا</p> <p>قم بتحميل ملف الأكواد تجده في نهاية المقال</p> <p>بعد تحميلك لملف الأكواد قم بتعديل رابط الصفحة وضع رابط صفحتك على موقع التواصل الإجتماعي بعد ذلك قم بتعديل الأبعاد للتتناسب مع الصورة التي قمت بتحديدها مسبقا ( أي الطول Height والعرض Width )ثم قم بالتعديل رابط الصورة المخصصة وضع رابط صورتك أو رمز الQR</p> <p>ثالثا</p> <p>قم بنسخ الأكواد كاملة وضعها في المكان الذي تريد إظهاره فيها</p> <p>إذا كنت تستخدم مدونة بلوجر فقم بالتوجه عبر القائمة الرئيسية الخاصة ببلوجر ثم إلى تنسيق ومن ثم اضافة اداة يستحسن في القائمة الجانبية وبعد ذلك قم باختيار اداة HTML / JAVA SCRIPT </p> <p>بعد ذلك اترك العنوان فارغا وقم بلصق الأكواد كاملة في خانة المحتوى وقم بالضغط على كلمة حفظ</p> <p>وبذلك تكون تكون قد أتممت جميع الخطوات الخاصة بإضافة كود الQR إلى موقعك وبكل سهولة</p> <p>إذا أردت مشاهدة الشرح كامل فيمكنك مشاهدة هذا الفيديو</p> <br> <iframe allowfullscreen="" class="BLOG_video_class" height="360" src="https://www.youtube.com/embed/XagzODuFcug?rel=0" width="640" youtube-src-id="XagzODuFcug"></iframe> <br> <p>للدخول لموقع إنشاء وتصميم كود الQR</p> <a href="https://www.qrcode-monkey.com/" target="_blank" rel="nofollow" >QR Code Monkey</a> <p>لتحميل الأكواد الخاصة بإضافة كود الQR إلى موقعك</p> <a href="https://www.mediafire.com/file/uqb7laeqvlalyhf/qr_code.zip/file" target="_blank" rel="nofollow" >قم بالضغط هنا</a> <p>أتمنى أن يكون المقال قد نال على إعجابكم لاتنس التعليق أسفل المقال</p> <br> <p>إقرأ أيضا</p> <br> <a href="https://zonezol.blogspot.com/2020/08/facebook-icon.html" >طريقة اضافة اداة الاعجاب بصفحة الفيس بوك لموقعك بالشكل الرسمي</a> <br> <a href="https://zonezol.blogspot.com/2020/08/youtube.html" >اضافة زر الاشتراك في اليوتيوب لموقعك باحترافية</a> </article>OneZolhttp://www.blogger.com/profile/10897228446445387596noreply@blogger.com0