हेल्लो दोस्तों आज हम अपने इस पोस्ट में बताएँगे की Blogger me Card View item कैसे हिंदी में कैसे बनाते है Blogger Card View को हम HTML और CSS Code के माध्य से बनायेंगे इसका उपयोग हम अपने ब्लॉग में किसी पेज को मैंन पर जब link देते है तो लगाते है
Blogger Card View Demo
नीचे दिखाए गए Demo में आप देख सकते है
Blogger Card View CSS Code
नीचे दिए गए CSS Code के माध्यम से हम अपने Blogger Card View को Style देंगे
.blogger-card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
}
.blogger-card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
उपरोक्त दिए गए Code में में आप Blogger Card View के width, Box Shadow hover तथा Container padding को अपने अनुसार style दे सकते है
Blogger Card View HTML Code
अब हम नीचे दिए गए HTML Code को उपरोक्त CSS Code के नीचे add करेंगे
<div class="blogger-card">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4v9H1GIvLi2iYrW5I8d_W5qYbmMWNLxuI5-UYr3D-bMIDV_O8AazPyP9o3BGQaXsoCXtVxPAZWXnZutNJZsaqSQKgZk4OKuGVAut9VNzO-qjLf2eU4OUgV7H5XATEm_JCYY1PnjYhsvY/s16000/Card+View.PNG" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Online HTML Editor</b></h4>
<p>Try this an Enjoy Free Tool</p>
</div>
</div>
उपरोक्त Code में हम अपने Blogger Card View में जो image लगाना चाहते है उस image के url को paste करंगे फिर उसके बाद उस card के main heading के बारे में लिखे फिर उसका एक छोटा सा description लिखेंगे
Blogger Card View Source Code
नीचे दिए गए Source कोड area से आप code को कॉपी कर सकते है source code area के नीचे Copy Code का बटन दिया गया है आप चाहे तो बटन पर क्लिक करके उपरोक्त code को कॉपी कर सकते है