TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে Weebly সাইটে টুলটিপ যোগ করবেন?

0

Weebly শুধুমাত্র কয়েক মিনিটের মধ্যে আপনার সাইট তৈরির সম্ভাবনা প্রদান করে না বরং আপনি যে কোন অতিরিক্ত বৈশিষ্ট্য যোগ করার জন্য অসংখ্য কাস্টমাইজিং সুযোগও প্রদান করেন। বিনামূল্যে ব্যবহারকারীদের উৎস CSS এবং HTML কোড সম্পাদনা করার অনুমতি দেওয়া Weebly এর সাফল্যের প্রধান কারণ। আমরা ইতিমধ্যে অনেক লিখেছি টিপস এবং ট্রিকস সেইসাথে উইজেট আপনার Weebly সাইট আরো পেশাদারী তৈরীর জন্য। এবং এই নিবন্ধে আমরা টুলটিপ উইজেট দিয়ে আমাদের উইজেট সিরিজ চালিয়ে যাব।

কিভাবে Weebly সাইটে টুলটিপ যোগ করবেন?

টুলটিপ হল একটি পপআপ দেখা যায় যখন মাউস একটি নির্দিষ্ট শব্দ বা হেল্প আইকনের উপরে থাকে। একটি মোবাইল ডিভাইসে উপস্থিত হওয়া এবং টুলটিপ অদৃশ্য হয়ে যাওয়া টাচ ইভেন্ট বা এটি সম্পূর্ণরূপে নিষ্ক্রিয় করা যেতে পারে। টুলটিপ অনেক উপকারী উপায়ে ব্যবহার করা যেতে পারে:

  • একটি সংক্ষেপ, প্রতিশব্দ এবং সংক্ষিপ্তসার যোগ করুন।
  • আপনার পণ্যগুলির মধ্যে একটি প্রদর্শন করুন এবং টুলটিপ শব্দটিকে একটি পণ্য পৃষ্ঠায় লিঙ্ক করুন।
  • টুলটিপের ভিতরে একটি বিজ্ঞাপন বা অধিভুক্ত লিঙ্ক রাখুন।
  • সংযুক্ত শব্দটির সাথে সম্পর্কিত চিত্র দেখান।
  • একটি ভিন্ন ভাষায় অনূদিত শব্দ রাখুন।
  • শব্দটি সম্পর্কে আরও তথ্য প্রদান করুন।

সুনির্দিষ্ট বিষয়বস্তুর উপর অতিরিক্ত তথ্য প্রদানের জন্য আপনার Weebly সাইটে যে বৈশিষ্ট্যগুলি আপনি insুকিয়ে দিতে চেয়েছিলেন তার মধ্যে একটি হল টুলটিপ। আপনার সামগ্রীতে টুলটিপ যুক্ত করার অনেকগুলি উপায় রয়েছে:

  • HTML শিরোনাম ট্যাগ ব্যবহার করে।
  • সহজ CSS ব্যবহার করা।
  • উন্নত CSS ব্যবহার করা।

এই নিবন্ধে আমরা ব্যাখ্যা করব কিভাবে সহজ HTML এবং CSS কোড ব্যবহার করে Weebly সাইটে টুলটিপ যোগ করা যায়। স্ক্রিপ্ট ব্যবহার করে টুলটিপ যোগ করাও সম্ভব যা আমরা এই টিউটোরিয়ালে কভার করব না।

HTML শিরোনাম ট্যাগ সহ টুলটিপ যোগ করা

আপনার বিষয়বস্তুর কোন নির্দিষ্ট শব্দে টুলটিপ যোগ করার সবচেয়ে সহজ উপায় হল শিরোনাম ট্যাগ ব্যবহার করা। টুলটিপের বাক্সটি ব্রাউজারের ডিফল্ট স্টাইলের উপর ভিত্তি করে তৈরি হবে এবং এর জন্য আপনাকে কোন CSS যোগ করার প্রয়োজন নেই । নীচে শিরোনাম ট্যাগ ব্যবহার করে টুলটিপ যুক্ত করার একটি উদাহরণ, টুলটিপ দেখতে হাইলাইট করা সামগ্রীর উপর আপনার মাউস সরান।

আপনার মাউসটি এখানে সরান

আপনার Weebly এডিটরে, টুলটিপ Titleোকানোর জন্য শিরোনাম ট্যাগ সহ বিষয়বস্তু যোগ করার জন্য "এম্বেড কোড" উপাদানটি ব্যবহার করুন। স্প্যান এলিমেন্টের মধ্যে শিরোনাম ট্যাগ ব্যবহারের উদাহরণ নিচে দেওয়া হল:

This is a simple tooltip and <span title="Tooltip with Title tag">move your mouse over here </span>to see it in action.

CSS দিয়ে টুলটিপ বক্স কাস্টমাইজ করা

উপরের পদ্ধতিটি খুবই সহজ এবং যথেষ্ট আকর্ষণীয় নয়। CSS ব্যবহার করে আপনি কাস্টম টুলটিপ বক্স যোগ করতে পারেন যাতে এটি আরও আকর্ষণীয় দেখায়।

কাস্টম সিএসএস কোড সহ এই টুলটিপটি দেখতে আপনার মাউসটি সরান

উপরের টুলটিপের HTML নিম্নরূপ:

<p class="demo" data-tool-tip="Tooltip with custom CSS">Move your mouse over to see this tooltip with custom CSS code</p>

এবং CSS নিম্নরূপ:

<style> .demo, .demo p { margin: 4em 0; text-align: center; } [data-tool-tip] { position: relative; z-index: 2; cursor: pointer; } [data-tool-tip]:before, [data-tool-tip]:after { visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; } [data-tool-tip]:before { position: absolute; bottom: 150%; left: 50%; margin-bottom: 5px; margin-left: -80px; padding: 7px; width: 160px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #000; background-color: hsla(0, 0%, 20%, 0.9); color: #fff; content: attr(data-tool-tip); text-align: center; font-size: 14px; line-height: 1.2; } [data-tool-tip]:after { position: absolute; bottom: 150%; left: 50%; margin-left: -5px; width: 0; border-top: 5px solid #000; border-top: 5px solid hsla(0, 0%, 20%, 0.9); border-right: 5px solid transparent; border-left: 5px solid transparent; content: " "; font-size: 0; line-height: 0; } [data-tool-tip]:hover:before, [data-tool-tip]:hover:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } </style>

উন্নত CSS ব্যবহার করে টুলটিপস

একটি নির্দিষ্ট শব্দে টুলটিপ যুক্ত করা সবসময় প্রয়োজন হয় না; বেশিরভাগ সময় আপনি আরো ব্যাখ্যা প্রদানের জন্য একটি অতিরিক্ত সাহায্য বাক্স (সাধারণত একটি প্রশ্ন চিহ্ন প্রতীক) তৈরি করতে পারেন। টুলটিপ বক্স কাস্টমাইজ করার জন্য এর জন্য উন্নত CSS এর ব্যবহার প্রয়োজন এবং এখানে আমরা সহজ টেক্সট, এইচটিএমএল কন্টেন্ট এবং একটি ইমেজ ধারণকারী এই ধরনের টুলটিপ তৈরির তিনটি উপায় প্রদান করি।

সহজ পাঠ্য সহ টুলটিপ যোগ করা

নীচে একটি সাধারণ টুলটিপ মাউস হোভারে প্রদর্শিত হয় এবং মাউস মাউস সরানো হলে অদৃশ্য হয়ে যায়। এটিতে কেবল একটি পাঠ্য রয়েছে এবং বাক্সটি CSS কোড দিয়ে কাস্টমাইজ করা হয়েছে।

HTML বিষয়বস্তু সহ টুলটিপ

আপনি যদি টুলটিপের ভিতরে লিঙ্ক বা কোনো HTML বিষয়বস্তু যোগ করতে চান? নীচের ডেমোটি দেখুন এবং আপনি টুলটিপের ভিতরে লিঙ্ক, বোল্ড ইত্যাদি যেকোন HTML ট্যাগ যুক্ত করতে পারেন।

একটি টুলটিপের ভিতরে ছবি

তৃতীয় ক্ষেত্রে টুলটিপের ভিতরে একটি ইমেজ যোগ করা এবং টুলটিপ বক্সের মধ্যে একটি ছবি দেখানো নিচের ডেমোটি দেখুন।

উপরের তিনটি টুলটিপের সিএসএস নীচের মতো:

<style> /* content box */ #tool_tip{ background-color: rgba(128, 128, 128, 0.07); border-radius: 4px; padding: 40px 40px 10px 30px; max-width: 600px; position: relative; margin: 0 auto; /* font-size: 18px; - use only if required /* line-height: 28px; - use only if required */ } /* Tooltip */ .help-tip{ position: absolute; top: 18px; right: 18px; text-align: center; background-color: #4F798E; border-radius: 50%; width: 24px; height: 24px; line-height: 26px; cursor: default; } .help-tip:before{ content:'?'; font-weight: bold; color:#fff; } .help-tip:hover p{ display:block; transform-origin: 100% 0%; -webkit-animation: fadeIn 0.3s ease-in-out; animation: fadeIn 0.3s ease-in-out; } .help-tip p{ display: none; text-align: left; background-color: #1E2021; padding: 20px; width: 300px; position: absolute; border-radius: 3px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); right: -4px; color: #FFF; font-size: 13px; /* Change the font size inside tooltip */ line-height: 1.4; } .help-tip p:before{ position: absolute; content: ''; width:0; height: 0; border:6px solid transparent; border-bottom-color:#1E2021; right:10px; top:-12px; } .help-tip p:after{ width:100%; height:40px; content:''; position: absolute; top:-40px; left:0; } @-webkit-keyframes fadeIn { 0% { opacity:0; transform: scale(0.6); } 100% { opacity:100%; transform: scale(1); } } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:100%; } } /* Adjust tooltip size on mobile devices */ @media screen and (max-width: 480px) { .help-tip p{ width: 200px; } } </style>

এইচটিএমএল কোড তিনটি টুলটিপস নিচে দেওয়া হল:

<!-- HTML Code for Tooltip --> <!-- Text Tooltip--> <div id="tool_tip"> <div class="help-tip"> <p>This is a tooltip appears on mouse hovering.</p> </div> <p>This is a simple tooltip with just text display on hovering. Check it!</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius.</p> </div> <!-- Tooltip with HTML Content --> <div id="tool_tip"> <div class="help-tip"> <p>This is a tooltip with <b>HTML tags!</b> inside. <a href="https://www.webnots.com/">Here is a link!</a> You can insert any <i>HTML tag!</i></p> </div> <p>This tooltip has HTML tags inside. Check it!</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius.</p> </div> <!-- Tooltip with Image inside --> <div id="tool_tip"> <div class="help-tip"> <p>This tooltip has a picture too! < /br>< /br></p><p><img data-src="https://img.webnots.com/2015/06/Weebly-Site-Building.png" width="300" /></p> </div> <p>Also include a showcasing image inside the tooltip. Check it!</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius.</p> </div>

আপনি এই ডেমোর জন্য ব্যবহৃত CSS এবং HTML উভয় কন্টেন্ট কপি / পেস্ট করতে পারেন এবং আপনার প্রয়োজন অনুযায়ী কাস্টমাইজ করতে পারেন। লিঙ্ক এবং ইমেজ ইউআরএল আপনার নিজের সাথে প্রতিস্থাপন করুন।

Weebly সাইটে CSS এবং HTML যোগ করা

ওয়েবলিতে CSS যোগ করার দুটি উপায় রয়েছে :

  • আপনার সাইট জুড়ে শৈলীগুলি প্রয়োগ করতে এটি "main.less" এ যোগ করুন।
  • শুধুমাত্র একটি পৃষ্ঠার CSS কার্যকর করার জন্য এটি একটি নির্দিষ্ট পৃষ্ঠার " হেডার কোড " বিভাগে যোগ করুন ।

কিভাবে Weebly সাইটে টুলটিপ যোগ করবেন?

পৃষ্ঠায় হেডার কোড যোগ করুন

কাস্টম এইচটিএমএল যোগ করা

টুলটিপের HTML অংশটি আপনার বিষয়বস্তু এলাকায় স্থাপন করতে হবে যেখানে আপনি " এম্বেড কোড " উপাদান ব্যবহার করে একটি টুলটিপ সন্নিবেশ করতে চান ।

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত