আপনার ব্লগে যুক্ত করুন Sliding Up Image Description

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

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

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

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

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

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

 

প্রথমে আপনার ব্লগার এর 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

 

ধন্যবাদ

Level 0

আমি Tanveer Sunny। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 4 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 20 টি টিউন ও 7 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস