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

কিভাবে Weebly সাইটে উল্লম্ব ট্যাব উইজেট যোগ করবেন?

0

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

এটা দেখতে কেমন?

উইজেটটি নীচের মত দেখতে হবে:

কিভাবে Weebly সাইটে উল্লম্ব ট্যাব উইজেট যোগ করবেন?

Weebly উল্লম্ব ট্যাব উইজেট

উল্লম্ব ট্যাবের জন্য CSS

মূলত উইজেটটিতে তিনটি অংশ রয়েছে – পূর্ণ ধারক, উল্লম্ব নেভিগেশন লেবেল এবং ট্যাব সামগ্রী।

  • উল্লম্ব মেনুতে পাঁচটি ট্যাব সংজ্ঞায়িত করতে অ-তালিকাভুক্ত তালিকাটি তালিকা-শৈলীর সাথে নেভিগেশনের জন্য ব্যবহৃত হয় এবং nth-child বৈশিষ্ট্যটি ব্যবহার করা হয়। আপনি CSS পরিবর্তন করতে পারেন এবং আপনার প্রয়োজন অনুযায়ী কম -বেশি ট্যাব যুক্ত করতে পারেন।
  • রেডিও ইনপুট টাইপ সমস্ত নিষ্ক্রিয় ট্যাব বিষয়বস্তু লুকিয়ে রাখতে এবং সক্রিয় ট্যাব সামগ্রী হাইলাইট করতে ব্যবহৃত হয়।
  • ন্যাভিগেশন বিভাগটি 24% এবং ট্যাবের বিষয়বস্তু 75% হিসাবে সংজ্ঞায়িত করা হয়েছে যা আপনি পরিবর্তন করতে পারেন।
  • আপনি আপনার প্রয়োজন অনুসারে ব্যাকগ্রাউন্ড কালার এবং হোভারিং কালার পরিবর্তন করতে পারেন ।

নীচে উল্লম্ব ট্যাব উইজেটের সম্পূর্ণ সিএসএস রয়েছে যা আপনার উইবলি সাইটের "হেডার কোড" বিভাগের অধীনে যোগ করা হবে।

<style> /* Start of Tab Container */ #tab-container{ position:relative; margin: 20px auto; width: 800px; border-radius: 10px; box-shadow: 1px 1px 5px #aaa; padding: 20px; background:#fff; } /* Start of Navigation Menu */ input[type=radio]{ display:none; } label{ cursor:pointer; padding-left: 20px; line-height: 2; } nav{ position:relative; display:inline-block; width: 24%; } nav ul{ list-style:none; margin:20px 0 0 0; padding:0; } nav ul li{ position:relative; height: 50px; font-size: 20px; padding-top:10px; font-weight:bold; line-height: 30px; border-style:solid; border-width:1px; border-color: gray transparent gray gray; border-radius: 10px 0 0 10px; background: #99CCCC; } nav ul li:hover{ background:#efefef; z-index:1; color: rgb(50, 50, 50); } nav ul li:nth-child(1):hover::before{ border-color: #e1e1e1; } nav ul li:nth-child(1)::before{ tab-content:""; position:absolute; border-style:solid; border-width:5px; border-color: #aaa; top:-10px;right:-1px; } nav ul li:nth-child(1)::after{ tab-content:""; position:absolute; border-style:solid; border-width:5px; border-color: #fff; top:-11px;right:0px; border-radius: 0 0 10px 0; box-shadow: 1px 1px 0px gray } nav ul li:nth-child(5):hover::before{ border-color: #e1e1e1; } nav ul li:nth-child(5)::before{ tab-content:""; position:absolute; border-style:solid; border-width:5px; border-color: #aaa; bottom:-10px;right:-1px; } nav ul li:nth-child(5)::after{ tab-content:""; position:absolute; border-style:solid; border-width:5px; border-color: #fff; bottom:-11px;right:0px; border-radius: 0 10px 0 0; box-shadow: 1px -1px 0px gray } /* Start of Tab Content */ #tab-content{ position:relative; display:inline-block; background: #e1e1e1; vertical-align:top; border-radius: 10px; width:75%; box-shadow: 0 -1px 4px #aaa; } #tab-content p{ padding: 15px; font-size: 20px; line-height: 30px; } #tab-content .div{ position:relative; display:none; padding: 20px; } /* Define Active Navigation Label and Tab Content */ #tab1:checked~ #tab-content .div:nth-child(1), #tab2:checked~ #tab-content .div:nth-child(2), #tab3:checked~ #tab-content .div:nth-child(3), #tab4:checked~ #tab-content .div:nth-child(4), #tab5:checked~ #tab-content .div:nth-child(5){ display:inline-block; } #tab1:checked~ nav ul li:nth-child(1), #tab2:checked~ nav ul li:nth-child(2), #tab3:checked~ nav ul li:nth-child(3), #tab4:checked~ nav ul li:nth-child(4), #tab5:checked~ nav ul li:nth-child(5){ background:#e1e1e1; z-index:1; } #tab1:checked~ nav ul li:nth-child(1)::before, #tab2:checked~ nav ul li:nth-child(2)::before, #tab3:checked~ nav ul li:nth-child(3)::before, #tab4:checked~ nav ul li:nth-child(4)::before, #tab5:checked~ nav ul li:nth-child(5)::before{ border-color:#e1e1e1; </style>

উল্লম্ব ট্যাব উইজেটের জন্য HTML

সম্পূর্ণ HTML বিষয়বস্তু একটি "ট্যাব-সামগ্রী" শ্রেণী সহ একটি ডিভি ট্যাগের মধ্যে আচ্ছাদিত এবং প্রতিটি পাঁচটি ট্যাবের বিষয়বস্তু "div" শ্রেণী ব্যবহার করে পৃথক ডিভির আওতায় আচ্ছাদিত। সামগ্রীটি আপনার নিজের সাথে প্রতিস্থাপন করুন এবং আপনার Weebly সাইটে " এম্বেড কোড " উপাদানটির ভিতরে পেস্ট করুন।

<div id="tab-container"> <!-- Start of Navigation Labels --> <input type="radio" name="check" id="tab1" checked=checked> <input type="radio" name="check" id="tab2"> <input type="radio" name="check" id="tab3"> <input type="radio" name="check" id="tab4"> <input type="radio" name="check" id="tab5"> <nav> <ul> <li><label for="tab1">Tab 1 - Text</label></li> <li><label for="tab2">Tab 2 - Image</label></li> <li><label for="tab3">Tab 3 - Video</label></li> <li><label for="tab4">Tab 4 - Dummy</label></li> <li><label for="tab5">Tab 5 - Dummy</label></li> </ul> </nav> <!-- Start of Tab Content --> <div id="tab-content"> <!-- Content for 1 Tab --> <div class="div"> <h1>Text Content</h1> <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> <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> <!-- Content for 2 Tab --> <div class="div"> <h1>Image</h1> <img src="https://img.webnots.com/2015/11/parallax1.jpg" width="570" height="400"> </div> <!-- Content for 3 Tab --> <div class="div"> <h1>HTML5 Video</h1> <video width="570" height="400" controls autoplay> <source src="https://img.webnots.com/2015/06/Slider-Video.mp4" type="video/mp4"> </video> </div> <!-- Content for 4 Tab --> <div class="div"> <h1>TAB 4</h1> <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> <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> <!-- Content for 5 Tab --> <div class="div"> <h1>TAB 5</h1> <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> <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> </div>

আপনি প্রতিটি ট্যাব কন্টেন্টের মধ্যে যেকোনো ধরনের HTML ট্যাগ যোগ করতে পারেন যেমন টেক্সট, ইমেজ, ভিডিও ইত্যাদি কিন্তু ট্যাবের বিষয়বস্তু এলাকায় ডিসপ্লে সামঞ্জস্য করার জন্য উপাদানগুলির প্রস্থ এবং উচ্চতা নিয়ন্ত্রণ করা নিশ্চিত করুন।

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

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