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

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

5

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

নীচে বুটস্ট্র্যাপ টাইমলাইন উইজেটটি দেখতে কেমন হবে।

  • 2015

    টাইমলাইন ইভেন্ট 5

    এখানে আপনার টাইমলাইন ইভেন্টের বিষয়বস্তু। ঘটনাটি বিস্তারিতভাবে বর্ণনা করার জন্য একটি ছোট অনুচ্ছেদ লিখুন।

  • 2014

    টাইমলাইন ইভেন্ট 4

    এখানে আপনার টাইমলাইন ইভেন্টের বিষয়বস্তু। ঘটনাটি বিস্তারিতভাবে বর্ণনা করার জন্য একটি ছোট অনুচ্ছেদ লিখুন।

  • 2013

    টাইমলাইন ইভেন্ট 3

    এখানে আপনার টাইমলাইন ইভেন্টের বিষয়বস্তু। ঘটনাটি বিস্তারিতভাবে বর্ণনা করার জন্য একটি ছোট অনুচ্ছেদ লিখুন।

  • 2012

    টাইমলাইন ইভেন্ট 2

    এখানে আপনার টাইমলাইন ইভেন্টের বিষয়বস্তু। ঘটনাটি বিস্তারিতভাবে বর্ণনা করার জন্য একটি ছোট অনুচ্ছেদ লিখুন।

  • ২০১১

    টাইমলাইন ইভেন্ট ঘ

    এখানে আপনার টাইমলাইন ইভেন্টের বিষয়বস্তু। ঘটনাটি বিস্তারিতভাবে বর্ণনা করার জন্য একটি ছোট অনুচ্ছেদ লিখুন।

  • বুটস্ট্র্যাপ ফ্রেমওয়ার্ক দ্বারা অনুপ্রাণিত এবং Weebly সাইটে অনুসারে পরিবর্তন করা হয়েছে।

  • সমস্ত ডিভাইসে সম্পূর্ণরূপে প্রতিক্রিয়াশীল।

  • ইভেন্টের শিরোনাম এবং সামগ্রীর রঙ আপনার প্রয়োজন অনুসারে কাস্টমাইজ করা যায়।

  • শিরোনাম এবং সামগ্রীর ফন্টের আকার এবং ওজন আপনার প্রয়োজন অনুসারে কাস্টমাইজ করা যায়।

উপরের ডেমো একটি উদাহরণ হিসাবে বছর এবং ঘটনা দেখায়। আপনি বিষয়বস্তু পরিবর্তন করতে পারেন যা আপনি প্রদর্শন করতে চান।

Weebly সাইটে টাইমলাইন উইজেট যুক্ত করুন

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

  • উইজেটের জন্য CSS কোড যোগ করুন
  • উইজেটের জন্য HTML কোড যোগ করুন

টাইমলাইন উইজেটের জন্য CSS যোগ করা

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

"থিমস" ট্যাবে যান এবং নিচের বাম কোণে " HTML / CSS সম্পাদনা করুন " বোতামে ক্লিক করুন। এটি আপনাকে Weebly কোড এডিটরে নিয়ে যাবে। "স্টাইলস" বিভাগের অধীনে "main.less" ফাইলটি খুঁজুন এবং বিদ্যমান কোডের নীচে এই কোডটি আটকান। আপনার পরিবর্তনগুলি সংরক্ষণ করুন এবং কোড সম্পাদক থেকে প্রস্থান করুন।

.tl { position: relative; padding: 20px 0 20px; list-style: none; } .tl:before { content: " "; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background-color: #eeeeee; } .tl > li { position: relative; margin-bottom: 20px; list-style-type: none !important; } .tl > li:before, .tl > li:after { content: " "; display: table; } .tl > li:after { clear: both; } .tl > li:before, .tl > li:after { content: " "; display: table; } .tl > li:after { clear: both; } .tl > li > .tl-panel { float: left; position: relative; width: 40%; padding: 20px; border: 1px solid #d4d4d4; border-radius: 5px; -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.175); box-shadow: 0 1px 6px rgba(0,0,0,0.175); } .tl-body { font-size: 18px; line-height: 26px; color: rgba(121, 112, 112, 0.71); } .tl > li > .tl-panel:before { content: " "; display: inline-block; position: absolute; top: 26px; right: -15px; border-top: 15px solid transparent; border-right: 0 solid #ccc; border-bottom: 15px solid transparent; border-left: 15px solid #ccc; } .tl > li > .tl-panel:after { content: " "; display: inline-block; position: absolute; top: 27px; right: -14px; border-top: 14px solid transparent; border-right: 0 solid #fff; border-bottom: 14px solid transparent; border-left: 14px solid #fff; } .tl > li > .tl-badge { z-index: 1; position: absolute; top: 16px; left: 50%; width: 50px; height: 50px; margin-left: -25px; border-radius: 50% 50% 50% 50%; text-align: center; font-size: 1.4em; line-height: 50px; color: #fff; background-color: #999999; } .tl > li.tl-inverted > .tl-panel { float: right; } .tl > li.tl-inverted > .tl-panel:before { right: auto; left: -15px; border-right-width: 15px; border-left-width: 0; } .tl > li.tl-inverted > .tl-panel:after { right: auto; left: -14px; border-right-width: 14px; border-left-width: 0; } .tl-badge { font-size: 18px !important; font-weight: bold; } .tl-badge.primary { background-color: #2e6da4 !important; } .tl-badge.success { background-color: #3f903f !important; } .tl-badge.warning { background-color: #f0ad4e !important; } .tl-badge.danger { background-color: #d9534f !important; } .tl-badge.info { background-color: #5bc0de !important; } .tl-title { margin-top: 0; margin-bottom: 10px; color: rgba(45, 45, 72, 0.44); font-size: 20px; } @media screen and (max-width: 380px) { .tl > li > .tl-panel { width:25% !important; } } @media screen and (max-width: 800px) { .tl > li > .tl-panel { width:33%; } }

HTML কোড যোগ করা

"পৃষ্ঠাগুলি" ট্যাবের অধীনে পৃষ্ঠাটি চয়ন করুন এবং বিষয়বস্তু এলাকায় যান যেখানে আপনি টাইমলাইন যুক্ত করতে চান। একটি " এম্বেড কোড " উপাদান টেনে আনুন এবং ফেলে দিন এবং নীচের HTML কোডটি এম্বেড কোড এলিমেন্টের ভিতরে পেস্ট করুন।

<ul class="tl"> <li> <div class="tl-badge success">2015</div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> <li class="tl-inverted"> <div class="tl-badge warning">2014</div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> <li> <div class="tl-badge danger">2013</div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> <li class="tl-inverted"> <div class="tl-badge">2012</div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> <li> <div class="tl-badge info">2011</div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> </ul>

টাইমলাইন উইজেট কাস্টমাইজ করা

আপনি দেখতে পাচ্ছেন, এইচটিএমএল অংশটি স্ব-ব্যাখ্যামূলক যা তিনটি সহজ উপাদান রয়েছে:

  • ব্যাজ – বছর নির্দেশ করে।
  • শিরোনাম – শিরোনাম টাইমলাইন ইভেন্ট।
  • শরীর – ঘটনার বিবরণ।

আপনার নিজের কন্টেন্ট দিয়ে ডামি কন্টেন্ট প্রতিস্থাপন করুন।

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

  • মূলত বুটস্ট্র্যাপ ক্লাসগুলি বছরের জন্য রং নির্ধারণ করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, ".tl-badge.success" এর সাফল্যের ইঙ্গিত দিতে সবুজের পটভূমির রঙ রয়েছে (#3f903f)। আপনি এই ক্লাসের রং (প্রাথমিক, সাফল্য, সতর্কতা, বিপদ এবং তথ্য) আপনার ইচ্ছার যে কোন রঙে পরিবর্তন করতে পারেন।
  • অন্যান্য বৈশিষ্ট্য যেমন ব্যাকগ্রাউন্ড কালার, ফন্ট সাইজ, কালার এবং ছায়া প্রয়োজন অনুযায়ী সামঞ্জস্য করা যায়।
  • Weebly সাইটে উইজেট স্থাপন করার সময় আপনি যে প্রধান সমস্যার সম্মুখীন হতে পারেন তা হল কেন্দ্রের রেফারেন্স সহ টাইমলাইন বক্সের সারিবদ্ধকরণ। ".Tl> li> .tl-panel" শ্রেণীটির সন্ধান করুন এবং বর্তমান প্রস্থকে "40%" হিসাবে সংজ্ঞায়িত করা হয়েছে এই পৃষ্ঠায়। সেন্টার লাইনের সাথে সারিবদ্ধ করার জন্য আপনার লেআউটের উপর ভিত্তি করে প্রস্থ বাড়াতে বা কমানোর প্রয়োজন হতে পারে।
  • আমরা (সর্বোচ্চ-প্রস্থ: 800px) এর সাথে আইপ্যাডে প্রস্থ সামঞ্জস্য করতে CSmedia CSS নিয়ম ব্যবহার করেছি। টাইমলাইন উইজেটের প্রস্থ "33%" হিসাবে সেট করা আছে। আইপ্যাডে আরও ভাল সারিবদ্ধতার জন্য আপনি এই মিডিয়া প্রশ্ন এবং প্রস্থ সামঞ্জস্য করতে পারেন।
  • একইভাবে আইফোন এবং অন্যান্য মোবাইল ডিভাইসে, মিডিয়া ক্যোয়ারী (সর্বোচ্চ-প্রস্থ: 380px) টাইমলাইনের প্রস্থকে "25%" হিসাবে নির্ধারণ করে। আপনি আপনার প্রয়োজন অনুযায়ী এটিও সামঞ্জস্য করতে পারেন।

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

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