How To Add Search Box widget In Blogger

 

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

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

 

जैसा कि हम सभी को पता है कि जो भी नए ब्लोग्गेर्स है वो सभी ब्लॉगर पर अपना ब्लॉग बनाते है।तो ब्लॉगर वाले ब्लॉग में हम ज्यादा कुछ कस्टमाइज नही कर सकते है।वही अगर ब्लॉग वर्डप्रेस पर है तो हम अपने मन मर्जी से प्लुगिन्स को इंस्टॉल करके ब्लॉग को कस्टमाइज कर सकते है।पर इस अर्टिकल में हम अपने ब्लॉग के आर्टिकल में सर्च बॉक्स  रहात हे ।अब हम उसी सर्च बॉक्स  को अपने ब्लॉग के अर्टिकल में  ऐड करेंगे।जब आप इस Widget को अपने ब्लॉग में इंस्टॉल कर लेंगे तब आपको अपने ब्लॉगर साईट मे सर्च बॉक्स दिखाई देगा । अगर आपको हमारी पोस्ट पसंद आती हे तो हमारे youtube चॅनेल को जरूर subscribe करे मे इस तऱ्हा के Technical रेलेटेड इन्फॉर्मेशन लाता रहता हू ।

 

•     How To Add Search Box

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

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

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

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

Step 5- अब आपको कॉपी किये Code को </body> tag के ऊपर पेस्ट कर देना है।और सेव बटन पर क्लिक कर देना है।

अब यह Widget आपने ब्लॉग में ऐड हो चुका है।यह Widget ऑटोमेटिकली काम करता है।अगर आपके अर्टिकल कोई पद्ता हे तो असे आपके साईट पे  Search Box दिख  जाएगा। 

<style> #search-box { position: relative; width: 100%; margin: 0; } #search-form { height: 42px; border: 1px solid #ebebeb; background-color: #fff; overflow: hidden; } #search-text { font-size: 14px; color: #ddd; border-width: 0; background: transparent; height: 42px; line-height: 42px; } #search-box input[type="text"] { width: 90%; padding: 11px 0 12px 1em; color: #333; outline: none; } #search-button { position: absolute; top: 0; right: 0; height: 42px; width: 80px; font-size: 14px; color: #fff; text-align: center; line-height: 42px; border-width: 0; background-color: #fb4834; cursor: pointer; } </style> <div id="search-box"> <form action="/search" id="search-form" method="get" target="_top"> <input id="search-text" name="q" placeholder="Enter keyword..." type="text" /> <button id="search-button" type="submit"><span><i class="fa fa-search"></i></span></button> </form> </div>

 

        ।   धन्यवाद ।

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