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

কিভাবে Weebly তে অনুভূমিক ট্যাব উইজেট যোগ করবেন?

0

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

ডিফল্ট ট্যাব অ্যাপ ব্যবহার করে অনুভূমিক ট্যাব যুক্ত করুন

অ্যাপ সেন্টার এমন একটি মার্কেটপ্লেস যেখানে আপনি ট্যাবস অ্যাপের মতো সব উইবলি এবং থার্ড-পার্টি অ্যাপ খুঁজে পেতে পারেন।

  • একবার আপনি Weebly সাইট এডিটরে থাকলে, "বিল্ড> অ্যাপস" এর মাধ্যমে অ্যাপ সেন্টারে যান।
  • "ট্যাব" টাইপ করার জন্য উপরের ডান কোণে অনুসন্ধান বাক্সটি ব্যবহার করুন এবং এন্টার টিপুন।
  • আপনি সার্চ ফলাফলে ট্যাব অ্যাপ দেখতে পাবেন এবং বিস্তারিত দেখতে এটিতে ক্লিক করুন।
  • "যোগ করুন" বোতামে ক্লিক করুন এবং অ্যাপটিকে আপনার ওয়েবলি সাইটে সংযুক্ত করুন।

কিভাবে Weebly তে অনুভূমিক ট্যাব উইজেট যোগ করবেন?

Weebly সাইটে ট্যাব অ্যাপ সংযুক্ত করা হচ্ছে

আপনি ডিফল্ট উপাদানগুলির মতো "বিল্ড" বিভাগের অধীনে সংযুক্ত অ্যাপ্লিকেশনটি দেখতে পারেন। আপনার সাইটে ট্যাবযুক্ত সামগ্রী toোকানোর জন্য ট্যাব উপাদান টেনে আনুন এবং ড্রপ করুন। Weebly তে অনুভূমিক ট্যাব তৈরি করতে আপনি ট্যাব শিরোনাম এবং সম্পাদকের বিষয়বস্তু কাস্টমাইজ করতে পারেন।

কিভাবে Weebly তে অনুভূমিক ট্যাব উইজেট যোগ করবেন?

Weebly ট্যাব অ্যাপ দিয়ে তৈরি ট্যাব

ট্যাব অ্যাপের বৈশিষ্ট্য

ব্যবহারকারীরা ট্যাব অ্যাপে নিম্নলিখিতগুলি কাস্টমাইজ করতে পারেন:

  • সীমাহীন ট্যাব যোগ করুন – আমরা সম্পাদকের উপর আঘাত না করার জন্য সর্বাধিক 4 বা 5 ট্যাব সীমাবদ্ধ করার সুপারিশ করি। এছাড়াও বেশি সংখ্যক ট্যাব মোবাইল ডিভাইসে পঠনযোগ্যতার সমস্যা থাকবে।
  • সক্রিয়, নিষ্ক্রিয় ট্যাব এবং সীমানার রঙ কাস্টমাইজ করুন।
  • ট্যাবগুলির বিষয়বস্তু এলাকার ভিতরে যেকোন উপাদান টেনে আনুন এবং ফেলে দিন। আপনি ট্যাবগুলির বিষয়বস্তু এলাকার ভিতরে মানচিত্র, যোগাযোগ ফর্ম, স্লাইডশো ইত্যাদি করতে পারেন।
  • ট্যাবযুক্ত বিষয়বস্তুর জন্য থিমগুলির মধ্যে একটি – স্ট্যান্ডার্ড, লাইন, উপাদান এবং সহজ নির্বাচন করুন।

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

Weebly সাইটের জন্য কাস্টম ট্যাব

ইন্টারনেটে অনেক রেডিমেড CSS এবং jQuery ট্যাব পাওয়া যায় যা আপনি সামান্য পরিবর্তন করে যোগ করতে পারেন। এমন একটি কাস্টম ট্যাব CSS দিয়ে তৈরি কোডড্রপ থেকে। এটি বিশেষভাবে উপযুক্ত যখন আপনার কাছে কেবলমাত্র ট্যাবের ভিতরে একটি পাঠ্য সামগ্রী যুক্ত করা আছে। নীচে ট্যাবগুলি কেমন দেখাবে।

কিভাবে Weebly তে অনুভূমিক ট্যাব উইজেট যোগ করবেন?

অনুভূমিক ট্যাব উইজেট

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

কিভাবে Weebly তে অনুভূমিক ট্যাব উইজেট যোগ করবেন?

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

<style> .tabs { position: relative; width: 100%; } .tabs input { position: absolute; z-index: 1000; width: 160px; height: 40px; left: 0px; top: 0px; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); cursor: pointer; } .tabs input#tab-2{ left: 160px; } .tabs input#tab-3{ left: 320px; } .tabs input#tab-4{ left: 480px; } .tabs label { background: skyblue; font-size: 16px; line-height: 40px; position: relative; padding: 0 20px; float: left; display: block; color: #333333; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; text-align: center; text-shadow: 1px 1px 1px rgba(255,255,255,0.3); border-radius: 3px 3px 0 0; box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1); } .tabs label:after { content: ''; background: #fff; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; display: block; } .tabs input:hover + label { background: #f1f1f1; } .tabs label:first-of-type { z-index: 4; box-shadow: 2px 0 2px rgba(0,0,0,0.1); } .tab-label-2 { z-index: 3; } .tab-label-3 { z-index: 2; } .tab-label-4 { z-index: 1; } .tabs input:checked + label { background: #f8f8f8; z-index: 6; } .clear-shadow { clear: both; } .content { background: rgba(96, 125, 139, 0.16); position: relative; width: 100%; height: 300px; z-index: 5; box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1); border-radius: 0 3px 3px 3px; } .content div { position: absolute; top: 0; left: 0; padding: 10px 40px; z-index: 1; opacity: 0; -webkit-transition: opacity linear 0.1s; -moz-transition: opacity linear 0.1s; -o-transition: opacity linear 0.1s; -ms-transition: opacity linear 0.1s; transition: opacity linear 0.1s; } .tabs input.tab-selector-1:checked ~ .content .content-1, .tabs input.tab-selector-2:checked ~ .content .content-2, .tabs input.tab-selector-3:checked ~ .content .content-3, .tabs input.tab-selector-4:checked ~ .content .content-4 { z-index: 100; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition: opacity ease-out 0.2s 0.1s; -moz-transition: opacity ease-out 0.2s 0.1s; -o-transition: opacity ease-out 0.2s 0.1s; -ms-transition: opacity ease-out 0.2s 0.1s; transition: opacity ease-out 0.2s 0.1s; } .content div h2, .content div h3{ color: lightslategrey; padding: 20px; } .content div p { font-size: 20px; line-height: 28px; font-style: italic; text-align: left; color: #777; padding-left: 15px; font-family: Cambria, Georgia, serif; border-left: 8px solid rgba(63,148,148, 0.1); } </style>

নীচে ট্যাবগুলির জন্য HTML কোড রয়েছে যা আপনি " এম্বেড কোড " উপাদান ব্যবহার করে সন্নিবেশ করতে পারেন ।

<section class="tabs"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1">This is Tab 1</label> <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" /> <label for="tab-2" class="tab-label-2">This is Tab 2</label> <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" /> <label for="tab-3" class="tab-label-3">This is Tab 3</label> <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" /> <label for="tab-4" class="tab-label-4">This is Tab 4</label> <div class="clear-shadow"></div> <div class="content"> <!-- This is a content for Tab 1 --> <div class="content-1"> <h2>Heading 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h3>Sub-Heading 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- This is a content for Tab 2 --> <div class="content-2"> <h2>Heading 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h3>Sub-Heading 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- This is a content for Tab 3 --> <div class="content-3"> <h2>Heading 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h3>Sub-Heading 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- This is a content for Tab 4 --> <div class="content-4"> <h2>Heading 4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h3>Sub-Heading 4</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </section>

আমরা ট্যাবে প্রথম শিরোনাম তৈরি করি (এটি ট্যাব 1) 160px হিসাবে এবং পরবর্তী শিরোনামের জন্য 320px এবং 480px পর্যন্ত বৃদ্ধি করুন। আপনি এটিকে সেই অনুযায়ী সামঞ্জস্য করতে পারেন যাতে ক্লিকযোগ্য এলাকা ট্যাবের শিরোনামের সাথে মানানসই হয়। কাস্টম ট্যাব উইজেটের সুবিধা হল আপনি অফলাইনে বিষয়বস্তু প্রস্তুত করতে পারেন এবং কয়েক মিনিটের মধ্যে আপনার সাইটে পেস্ট করতে পারেন। যখন আপনি ট্যাবগুলিকে পুনর্বিন্যাস করতে চান, আপনি অফলাইনে এটি করতে পারেন এবং কেবল পুরানো কোডটি নতুন দিয়ে প্রতিস্থাপন করুন।

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

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