Create A Blogger Template From Scratch - Search Box Animation

---

Blogger Template From Scratch – Search Bar Animation और Read More Button

नमस्ते दोस्तों,
हम एक नया Blogger Template शुरू से बना रहे हैं। अभी तक हमने डेस्कटॉप होमपेज के सारे सेक्शन डिज़ाइन कर लिए हैं।

इस पोस्ट में हम दो चीज़ें बनाएंगे:

1. Search Bar Animation – यानी जब आप Search Icon पर क्लिक करेंगे, तो एक सर्च बॉक्स खुलेगा जिसमें यूज़र कुछ टाइप करके सर्च कर सकता है।

2. Read More Button – हर ब्लॉग पोस्ट के नीचे एक सुंदर "Read More" बटन होगा, जिससे विज़िटर पूरा आर्टिकल पढ़ सके।

---

🔹 Step 1: Search Bar का HTML कोड

सबसे पहले हमें Search Bar के लिए HTML लिखना होगा।
यह कोड हम Search Icon के बाद डालेंगे:

HTML Code :

<div class="search-container">

  <div class="blog-search">

    <input type="text" placeholder="Search...">

    <input type="submit" value="Search">

  </div>

</div>

👉 इसमें हमने एक search-container बनाया और उसके अंदर एक input text box (जहाँ यूज़र टाइप करेगा) और एक Search button रखा है।

---

🔹 Step 2: CSS से Search Bar Animation

अब हम Search Box को style और animate करेंगे।

HTML Code :

.top-nav .search-container {

  position: absolute;

  right: 0;

  top: 24px;

  opacity: 0;

  pointer-events: none;

  transition: all 0.4s ease;

}

.top-nav .search-container.active {

  opacity: 1;

  pointer-events: auto;

  top: 40px;

}

.top-nav .search-container input[type="text"] {

  padding: 8px 24px;

  border: 0;

  box-shadow: 0 4px 8px -2px rgba(0,0,0,0.2);

}

.top-nav .search-container input[type="submit"] {

  padding: 8px 24px;

  background: #ffe259;

  border: 1px solid #ffe259;

  box-shadow: 0 4px 8px -2px rgba(0,0,0,0.2);

  cursor: pointer;

}

👉 जब हम search icon पर क्लिक करेंगे, तो .active class जुड़ जाएगी और search box smoothly दिखेगा।

---

🔹 Step 3: JavaScript से Search Box Animate करना

अब हमें JavaScript से क्लिक इवेंट जोड़ना होगा।

HTML Code :

const searchIcon = document.querySelector(".search-icon");

const searchContainer = document.querySelector(".search-container");

searchIcon.addEventListener("click", () => {

  searchContainer.classList.toggle("active");

});

👉 अब search icon पर क्लिक करने से search box open और close होगा।

---

🔹 Step 4: Read More Button बनाना

हर blog post के नीचे Read More बटन दिखाने के लिए यह HTML लिखें:

HTML Code :

<div class="post-body">

  <p>यहाँ आपकी पोस्ट का content होगा...</p>

  <div class="read-more-container">

    <a href="#" class="read-more">Read More</a>

  </div>

</div>

---

🔹 Step 5: Read More Button का CSS

HTML Code :

.post-body {

  height: 180px;

  overflow: hidden;

  position: relative;

}

.post-body::after {

  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100px;

  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);

}

.read-more-container {

  position: absolute;

  bottom: 16px;

  left: 0;

  right: 0;

  text-align: center;

}

.read-more-container .read-more {

  text-decoration: none;

  text-transform: uppercase;

  font-weight: bold;

}

👉 इससे आपका पोस्ट छोटा दिखेगा और नीचे हल्का fade effect आएगा। पूरा आर्टिकल पढ़ने के लिए यूज़र को "Read More" पर क्लिक करना होगा।

---

✅ Final Result

• Search icon पर क्लिक करने पर animated search box दिखेगा।
• Blog posts के नीचे आकर्षक "Read More" button आएगा।

---

📘 Line by Line Explanation (Beginners के लिए)

---

🔹 Search Bar का HTML

HTML Code :

<div class="search-container">

  <div class="blog-search">

    <input type="text" placeholder="Search...">

    <input type="submit" value="Search">

  </div>

</div>

👉 Explanation

• <div class="search-container"> → यह main container है जिसमें पूरा search box होगा।
• <div class="blog-search"> → यह अंदर का division है जिसमें text box और button रखे हैं।
• <input type="text" placeholder="Search..."> → यह एक text box है जहाँ user अपनी search query लिखेगा। placeholder सिर्फ hint दिखाने के लिए है।
• <input type="submit" value="Search"> → यह search button है जिसपर click करने से search action होगा।

---

🔹 Search Bar का CSS

CSS Code :

.top-nav .search-container {

  position: absolute;

  right: 0;

  top: 24px;

  opacity: 0;

  pointer-events: none;

  transition: all 0.4s ease;

}

👉 यह code search box को शुरू में छुपा देता है (opacity: 0; pointer-events: none;) और smooth animation देता है (transition)।

CSS Code :

.top-nav .search-container.active {

  opacity: 1;

  pointer-events: auto;

  top: 40px;

}

👉 जब .active class जुड़ती है (JavaScript से), तो search box दिखने लगता है।

CSS Code :

.top-nav .search-container input[type="text"] {

  padding: 8px 24px;

  border: 0;

  box-shadow: 0 4px 8px -2px rgba(0,0,0,0.2);

}

👉 यह search box को padding और shadow देता है ताकि वह attractive दिखे।

CSS Code :

.top-nav .search-container input[type="submit"] {

  padding: 8px 24px;

  background: #ffe259;

  border: 1px solid #ffe259;

  box-shadow: 0 4px 8px -2px rgba(0,0,0,0.2);

  cursor: pointer;

} 

👉 इससे

👉 यह search button को yellow background और hover effect देता है।

---

🔹 JavaScript (Search Box Toggle)

JavaScript Code :

const searchIcon = document.querySelector(".search-icon");

const searchContainer = document.querySelector(".search-container");

searchIcon.addEventListener("click", () => {

  searchContainer.classList.toggle("active");

});

👉 Explanation

• document.querySelector(".search-icon") → यह search icon को select करता है।
• document.querySelector(".search-container") → यह search box container को select करता है।
• addEventListener("click", ...) → जब user search icon पर क्लिक करेगा, तो function चलेगा।
• classList.toggle("active") → search box की active class on/off होती रहती है (show/hide effect)।

---

🔹 Read More Button का HTML

HTML Code :

<div class="post-body">

  <p>यहाँ आपकी पोस्ट का content होगा...</p>

  <div class="read-more-container">

    <a href="#" class="read-more">Read More</a>

  </div>

</div>

👉 Explanation

• <div class="post-body"> → पोस्ट का main हिस्सा।
• <p>...</p> → यहाँ आपका blog content होगा।
• <div class="read-more-container"> → इसमें "Read More" बटन रखा गया है।
• <a href="#" class="read-more">Read More</a> → यह actual बटन है जिसपर क्लिक करने से पूरी पोस्ट खुल सकती है।

---

🔹 Read More Button का CSS

CSS Code :

.post-body {

  height: 180px;

  overflow: hidden;

  position: relative;

}

👉 पोस्ट की height fix कर दी और extra content hidden कर दिया।

CSS Code :

.post-body::after {

  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100px;

  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);

}

👉 नीचे हल्का gradient effect आता है ताकि लगे कि content आगे भी है।

CSS Code :

.read-more-container {

  position: absolute;

  bottom: 16px;

  left: 0;

  right: 0;

  text-align: center;

} 

👉 यह "Read More" बटन को नीचे और center में रखता है।

CSS Code :

.read-more-container .read-more {

  text-decoration: none;

  text-transform: uppercase;

  font-weight: bold;

}

👉 बटन को bold और attractive look देता है।

CSS में position property beginners को अक्सर confuse करती है। चलिए इसे step by step और आसान language में समझते हैं।

---

🔹 1. position: relative (Parent element पर)

CSS Code :

.post-body {

  height: 180px;

  overflow: hidden;

  position: relative;

}

👉 यहाँ .post-body को relative position दी गई है।

मतलब यह container अपनी normal जगह पर रहेगा, लेकिन इसके अंदर जो भी element absolute होगा, वो इसी container को reference मानेगा।

📝 याद रखो: अगर parent element पर position: relative है, तो उसके अंदर का absolute child उसी parent के हिसाब से set होगा।

---

🔹 2. position: absolute (Child element पर)

CSS Code :

.read-more-container {

  position: absolute;

  bottom: 16px;

  left: 0;

  right: 0;

  text-align: center;

} 

👉 अब .read-more-container absolute है, तो वो अपनी जगह flow से हट जाएगा और अपने parent .post-body (क्योंकि उसमें relative है) के अंदर set होगा।

• bottom: 16px; → इसे parent (.post-body) के नीचे से 16px ऊपर ले आएगा।
• left: 0; और right: 0; → दोनों side से 0 करने पर element पूरे width में फैल जाएगा।
• text-align: center; → फैलने के बाद इसके अंदर का "Read More" बटन center में आ जाएगा।

---

🔹 3. क्यों ज़रूरी है position

अगर .read-more-container पर absolute ना लगाया जाए तो वो normal flow में content के साथ ऊपर आकर mix हो जाता।
लेकिन absolute करने पर वो हमेशा नीचे (bottom: 16px) ही दिखाई देगा, चाहे content कितना भी हो।

---

🔹 Visual Example (समझने के लिए)

📦 .post-body (relative)
  📄 content (overflow hidden)
  ✨ .read-more-container (absolute → bottom: 16px) → बटन हमेशा नीचे चिपका रहेगा

---

👉 आसान भाषा में:

• relative → parent को anchor बनाता है।
• absolute → child को उस anchor (parent) के अंदर कहीं भी fix करने की शक्ति देता है।

---