আপনার ব্লগে যুক্ত করুন Sliding Up Image Description(ভাসমান বিবরণ)

0
272

আসসালামুয়ালাইকুম,

চলে এলাম আমার ৩য় পোস্ট নিয়ে আশা করি আপনাদের ভাল লাগবে

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

শিরোনাম দেখে অবশ্যই বুঝতে পেরেছেন আজকের টপিক, আর যারা না বুঝতে পেরেছেন তাদের জন্য ইমেজ যুক্ত করে দিলাম

আশা করি এইবার বুঝতে পারবেন

এইবার কাজ শুরু করা যাক ,

 

প্রথমে আপনার ব্লগার এর Dashboard এ জান তারপর Layout এ ক্লিক করে Add Gadgetথেকে HTML/Javascript সিলেক্ট

করুন এইবার নিছের কোডগুল কপি করে পেস্ট করে দিন

  • <style>
  • .image-box {
  •   width:280px;height:280px;overflow:hidden;background-color:white;
  •   border:1px solid #ccc;float:left;margin:1px 1px;
  •   font:normal normal 12px/1.4 Segoe,”Segoe UI”,Arial,Sans-Serif;
  •   color:#333;
  • }
  • .image-container,
  • .image-details {height:280px;border:5px solid white;background-color:#ffc;
  •   transition:margin-top .4s ease-out .4s;
  • }
  • .image-container img {
  •   width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;
  •   max-height:none;
  •   background-color:black;
  • }
  • .image-details h4,
  • .image-details p {
  •   margin:0 0 .2em;padding:0 0;height:70px;
  • }
  • .image-details h4 {
  •   font-size:120%;height:auto;
  • }
  • .image-details .details {
  •   padding:10px 12px;overflow:hidden;
  • }
  • .image-details .more {
  •   color:white;text-decoration:none;display:block;
  •   text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;
  • }
  • .image-box:hover {border-color:#bbb; width:280px;
  •   height:280px;}
  • .image-box:hover .image-container {margin-top:-160px}
  • .image-details .more:hover {background-color:black}
  • </style>
  • <div id=”image-box-wrapper”>
  •  <div>
  •   <div>
  •    <img width=”280″ height=”280″ src=”http://2.bp.blogspot.com/-XtTVaIhT6dE/UX9-IAg95uI/AAAAAAAAAhg/FQzPqv9htEY/s1600/3.jpg” alt=”Food”>
  •   </div>
  •   <div>
  •    <div>
  •     <h4>Lorem Ipsum</h4>
  •     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy…</p>
  •     <p><a href=”Post Link “>More</a></p>
  •    </div>
  •   </div>
  •  </div>
  •  <div style=”clear:both;”></div>
  • </div>

 

এইবার সেভ করুন।

 

পোস্টটি সর্বপ্রথম আমার ব্লগে প্রকাশিত হয়। সময় পেলে আমার ব্লগে একবার ঘুরে আশবেন  অথবা http://www.alokitobd.org

 

ধন্যবাদ

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

মন্তব্য দিন আপনার