Apne Blogger Website Mein Ek Simple Search Box Kaise Add Karein

Apne Blogger Website Mein Ek Simple Search Box Kaise Add Karein

Apne Blogger Website Mein Ek Simple Search Box Kaise Add Karein


Agar aap apne Blogger website ko ek search feature se sajana chahte hain, toh aap HTML aur CSS ka istemal karke aasani se ek simple search box ko integrate kar sakte hain. Niche diye gaye step-by-step guide ko follow karein apne Blogger site mein ek search box ko add karne ke liye:


Step 1: Apne Blogger Template Mein Access Karein

  1. Apne Blogger account mein login karein.
  2. Left sidebar se "Layout" section mein jayein.
  3. Sidebar me ya Kahi bhi ek HTML javascript gadget add kre jha apko ise show krna hai 
  4. Code yha se copy kre aur vha paste kr de 
  5. Save kr ke preview dekhen 

Step 2: HTML Markup Ko Add Karein

Apne Blogger template ke <layout> section ke sidebar mein, neeche di gayi HTML code ko add karein:

<form class="srcform" action="/search">
<input type="text" name="search" placeholder="what is in your mind ?" id="searchbx" aria-label="Search" required>
<button class="btn" type="submit">Search</button>
</form>
  

Yeh code snippet ek search form ko input field aur submit button ke saath banata hai. Form action "/search" par set hai, jo ki default Blogger search URL hai.


Step 3: CSS Styles Lagayein

Neeche diye gaye CSS styles ko apne Blogger template ke close </head> ke uper dale ya <style> tags htake b:skin  mein add karein:

<style>
    .srcform{
        width: 100%;
       max-width: 600px;
        display: flex;
        gap:10px;
        margin: auto;
        justify-content: space-around;  }
    #searchbx{width: 100%;}   
.srcform input{ padding:10px; border: 1.5px solid #ccc; border-radius:4px;}
.btn{background: linear-gradient(30deg,#0081ff,#00d5ff); color: white; border: none; border-radius:3px; }
</style>
  

Yeh CSS styles ensure karte hain ki search form aur uske elements visually appealing aur responsive ho.

Step 4: Changes Ko Save Karein Aur Preview Karein


HTML markup aur CSS styles ko add karne ke baad, apne template changes ko save karein. Phir, apne Blogger website ko preview karein aur naye add kiye gaye search box ko dekhein.

Conclusion 

In steps ke saath, aapne apne Blogger website mein ek simple search box ko successfully integrate kiya hai, jisse visitors aasani se content search kar sakte hain. Apne website ke needs ke according design aur functionality ko further customize karne mein Puri azadi hai.

Last word

In this post we will provided information about Apne Blogger Website Mein Ek Simple Search Box Kaise Add Karein, If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.

Next Post Previous Post
No Comment
Add Comment
comment url

Paid Templates