How to add Floating Ad Box Widget In Blogger in sample stapes

 

Floating Ad Box Widget In Blogger

 

Technical skills - pvlogicas

 

नमस्कार दोस्तो ! आप सभी का   Technical Skills  मे स्वागत है ।

Technical Skills Blog  तो आज हम इस ब्लॉग पोस्ट में हम बात करने वाले है Floating Ad Box Widget In Blogger के बारे में। की यह Widget क्या है। इसके क्या लाभ है। क्या हमें इसे अपने ब्लॉग में इस्तेमाल करना चाहिए। और कैसे हम इसे अपने ब्लॉगर के ब्लॉग में कैसे इम्प्लीमेंट कर सकते है। तो बने रहिये इस आर्टिकल में ओर जानिए इस Blogger Floating Ad Box   के बारे में हिंदी में विस्तार पूर्वक  बात करते हे । तो चलिए हम जानते है।

 

अगर आप ब्लॉगिंग करते है।और आपका ब्लॉग ब्लॉगर पर होस्ट है।और साथ ही आपका ब्लॉग मोनेटाइज है एडसेंस से। तो यह आर्टिकल आपके लिए है।आपके ब्लॉग में तो एडसेंस के Ad Header में साइडबार में और फुटर में लगे है।पर अभी हम Floating Ad Widget के बारे में बात करने वाले है। यह Widget जब आपका पेज लोड होता है तो डिस्प्ले के निचले भाग में एक बॉक्स में Ad शो होती है।और वहाँ पर एक Close का बटन होता है। अगर आप इस Close पर क्लिक करते है तो यह Ad Box हट जाएगा। इस Floating Ad Widget से High CPC और क्लिक के चांसेज बढ़ जाते है। जिससे कि आपकी रेवेन्यु में बढ़ोतरी होगी।तो अभी हम नीचे इस Widget को कैसे इम्प्लीमेंट करेंगे अपने ब्लॉग में इसके बारे में जानेंगे। अगर आपको हमारी पोस्ट पसंद आती हे तो हमारे youtube चॅनेल को जरूर subscribe करे मे इस तऱ्हा के Technical रेलेटेड इन्फॉर्मेशन लाता रहता हू ।

 

• v  Floating Ad Box Widget Implement Process

Step 1-सबसे पहले आपको अपने ब्लॉगर के डैशबोर्ड में                    लॉगिन कर लेना है।

Step 2-अब आपको नीचे कोड बॉक्स में एक HTML                     Code मिलेगा।इस कोड को कॉपी कर लेना है।

Step 3-अब आपको ब्लॉगर के डैशबोर्ड में जाकर थीम                  वाले ऑप्शन पर क्लिक करके Edit HTML क्लिक             करना है।

Step 4-अब आपको इस HTML में </body> Tag सर्च              करना है।

Step 5-अब आपको कॉपी किये गए कोड में Paste                    Your Adsense Code Here के जगह आपको               एडसेंस का Ad Code  को यहाँ पेस्ट करना है।

Step 6-अब आपको इस इस Adsense Code के साथ कोड को </body> Tag के ऊपर पेस्ट कर देना     है। और सेव करना है।अब आप अपने ब्लॉग को ओपन करिए और डिस्प्ले के नीचे एक Ad बॉक्स देखने को मिलेगा।

-----------------------Floating Youtube_subscribe_button---------------------------------- <div class='AT-sub jhfdiuh0' id='at746427'> <div class='AT-sub-close' onclick='document.getElementById("at746427").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='AT-sub-img'><img alt=' Technical Skills ' src='#'/> </div> <div class='AT-sub-content'> <span class='title'> Technical Skills </span> <span class='desc'>Subscribe our Youtube Channel</span> </div> <div class='at-btn'> <a href='https://youtube.com/TechnicalSkills?sub_confirmation=true' target='_blank'> <span class='bt-text'>Subscribe</span></a> </div></div> <style> /* Subscribe button by Technical Skills */ .AT-sub { position: fixed; left: 55px; bottom: 20px; background-color: #f2f2f2; padding: 12px 15px 12px 12px; border-radius: 15px; box-shadow: 0 4px 12px 0 rgba(9,32,76,.05); display: flex; align-items: center; max-width: 300px; min-width: 280px; color: #000000; overflow: hidden; z-index: 50;} .AT-sub .AT-sub-close { position: absolute; top: 4px; right: 8px; } .AT-sub .AT-sub-close svg { width: 22px; height: 22px; fill: #000; } .AT-sub .AT-sub-img { width: 70px; height: 50px; } .AT-sub .AT-sub-img img { display: flex; align-items: center; justify-content: center; width: 50px; } .AT-sub .AT-sub-content { width: calc(100% - 70px); padding-left: 1px; } .AT-sub .AT-sub-content a { display: block; color: inherit; } .at-btn{font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: flex-end; width: 73px; height: 25px; padding-right: 12px; background-color: #e4393c; border-radius: 4px; color: #fff; margin-top: 12px; bottom: 0; right: 0; } .AT-sub .AT-sub-content .title { display: block; font-weight: 700; font-size: 13px; text-align: left; padding-left: 12px }.AT-sub .at-btn a { display: block; color: inherit; color:#fff; } .AT-sub .AT-sub-content .desc { display: block; font-size: 10px; margin-top: 5px; color: #000; text-align: left;padding-left: 12px }.bt-text{margin-left:9px} </style>

           ।   धन्यवाद ।

आपको यह पोस्ट कैसा लगा। नीचे कमेंट करके जरूर बताएं। और इस पोस्ट को अधिक से अधिक शेयर करे।