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

هذا إعلان في أحد المواقع الكبرى، وسيظهر الإعلان الخاص بنا بنفس الشكل ونفس الأداء تقريباً وسيكون متوافق مع جميع الشاشات والمتصفحات أيضاً وبدون أي مشاكل. كما أنها تعمل على كلاً من بلوجر والووردبريس، ولكن لكلاً منهما طريقة مختلفة سأقوم بشرحهم.
إقرأ أيضاً: الفرق بين بلوجر والوردبريس وأيهما أفضل!
طريقة اضافة اعلان عائم اسفل الموقع لزيادة أرباحك
الطريقة سهلة جداً ولا تحتاج إلى عمل شئ كبير، فقط سنقوم بإضافة بعض الأكواد وستعمل معنا بشكل طبيعي جداً.. والطريقة تعمل على كلاً من بلوجر والووردبريس. وستقوم بزيادة أرباحك بشكل كبير وملحوظ لأنها ستقوم بزيادة نسبة الظهور والنقر في موقعك.
إضافة إعلان عائم أسفل المدونة بشكل جديد على بلوجر
تابع معي لمعرفة طريقة اضافة اعلان عائم اسفل المدونة في بلوجر بطريقة سهلة جداً…
الخطوة الأولى: إضافة كود ال CSS
(1) قم بالدخول إلى بلوجر ثم المظهر ثم تعديل html
(2) قم بالضغط على CTRL+F والبحث عن هذا الوسم </b:skin>
(3) قم بلصق كود ال CSS أعلى الوسم.
/* Floating Ad Start BY www.star4tips.com*/ .star4tips-Ads { position: fixed; bottom: 0px; left: 0; width: 336px;height: 280px; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1); -webkit-transition: all .1s ease-in; transition: all .1s ease-in; display: flex; align-items: center; justify-content: center; z-index: 20; } .star4tips-Ads-close { height: 0px; position: absolute; top: -20px; text-align: left; border-top-right-radius: 5px; border-top-left-radius: 5px; font-size: 12px; border-right: 20px solid transparent; border-bottom: 20px solid rgb(76, 76, 76); overflow: visible; box-sizing: border-box !important; width: 120px; left:0; } .star4tips-Ads .star4tips-Ads-close svg { width: 22px; height: 22px; fill: #fff; } .star4tips-Ads .star4tips-Ads-content { overflow: hidden; display: block; position: relative; height: 280px; width: 336px; } /* Floating Ad End BY www.star4tips.com*/
الخطوة الثانية: إضافة كود ال HTML
(4) قم بالضغط على CTRL+F والبحث عن الوسم </body>
(5) قم بلصق كود الHTML أعلاه.
<!-- Floating Ad Start BY www.star4tips.com --> <div class='star4tips-Ads' id='star4tips-Ads'> <div class='star4tips-Ads-close' onclick='document.getElementById("star4tips-Ads").style.display="none"'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div> <div class='star4tips-Ads-content'> <center> <!-- قم بإضافة إعلان أدسنس بحجم 336*280 هنا --> </center> </div> </div> <!-- Floating Ad End BY www.star4tips.com -->
(6) أضف إعلان أدسنس بحجم 360*280 بدلاً من الكود المُلون بالأحمر.
(7) الآن قم بالحفظ وقم بفتح المدونة وستجد أن الإعلان قد ظهر بشكل طبيعي.
إضافة إعلان عائم أسفل المدونة بشكل جديد على الووردبريس
تابع معي لمعرفة طريقة اضافة اعلان عائم اسفل موقع الووردبريس بطريقة سهلة جداً وبدون الحاجة إلى أي إضافات أخرى…
الخطوة الأولى: إضافة كود ال CSS
(1) قم بالدخول إلى لوحة التحكم في الووردبريس ثم المظهر ثم التخصيص.
(2) قم بالدخول إلى تنسيقات (CSS) إضافية.
(3) قم بلصق كود الCSS وقم بالنشر.
/* Floating Ad Start BY www.star4tips.com*/ .star4tips-Ads { position: fixed; bottom: 0px; left: 0; width: 336px;height: 280px; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1); -webkit-transition: all .1s ease-in; transition: all .1s ease-in; display: flex; align-items: center; justify-content: center; z-index: 20; } .star4tips-Ads-close { height: 0px; position: absolute; top: -20px; text-align: left; border-top-right-radius: 5px; border-top-left-radius: 5px; font-size: 12px; border-right: 20px solid transparent; border-bottom: 20px solid rgb(76, 76, 76); overflow: visible; box-sizing: border-box !important; width: 120px; left:0; } .star4tips-Ads .star4tips-Ads-close svg { width: 22px; height: 22px; fill: #fff; } .star4tips-Ads .star4tips-Ads-content { overflow: hidden; display: block; position: relative; height: 280px; width: 336px; } /* Floating Ad End BY www.star4tips.com*/
الخطوة الثانية: إضافة كود ال HTML
(4) قم بالدخول إلى المظهر ثم محرر القوالب
(5) قم بالدخول إلى ملف ال Footer أياً كان نوع قالبك ستجد هذا الملف
(6) قم بلصق كود الhtml في بداية الملف
<!-- Floating Ad Start BY www.star4tips.com --> <div class='star4tips-Ads' id='star4tips-Ads'> <div class='star4tips-Ads-close' onclick='document.getElementById("star4tips-Ads").style.display="none"'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div> <div class='star4tips-Ads-content'> <center> <!-- قم بإضافة إعلان أدسنس بحجم 336*280 هنا --> </center> </div> </div> <!-- Floating Ad End BY www.star4tips.com -->
(7) أضف إعلان أدسنس بحجم 360*280 بدلاً من الكود المُلون بالأحمر.
(8) الآن قم بالحفظ وقم بفتح الموقع وستجد أن الإعلان قد ظهر بشكل طبيعي.
إقرأ أيضاً: كيفية اضافة إعلانات عائمة على جانبي مدونة بلوجر
الخاتمة
كانت هذه هي طريقة اضافة اعلان عائم أسفل الموقع أو المدونة الخاصبة بك في بلوجر أو الووردبريس بطريقة سهلة وبشكل جديد وجذاب وبدون أي مشاكل. إذا واجهت أي مشاكل قم بوضع تعليق وسوف أساعدك في حل المشكلة.