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

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

0

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

সম্পর্কিত: ওয়েবলি সাইটে কীভাবে সংগঠন চার্ট যুক্ত করবেন?

Weebly এ প্রাইসিং টেবিল যোগ করুন

Weebly- এ মূল্য নির্ধারণের টেবিল যোগ করার জন্য আপনি নিম্নলিখিত পদ্ধতিগুলি ব্যবহার করতে পারেন।

  1. অ্যাপ সেন্টার থেকে প্রাইস চার্ট অ্যাপ ব্যবহার করা
  2. কাস্টম স্ক্রিপ্ট ব্যবহার করে টেবিল উইজেটের মূল্য নির্ধারণ

আসুন উভয় পদ্ধতি বিস্তারিতভাবে ব্যাখ্যা করি।

Weebly মূল্য চার্ট অ্যাপ

প্রথমে আসুন প্রাইস চার্ট অ্যাপ সম্পর্কে আলোচনা করি যা উইবলি অ্যাপ সেন্টারের "ইকমার্স" বিভাগের অধীনে উপলব্ধ। যখন আপনি উইবলি এডিটরে থাকেন, তখন "অ্যাপস" বিভাগে যান এবং প্রাইসিং চার্ট অ্যাপটি সার্চ করুন। অ্যাপটি খুঁজে পাওয়ার পর আপনি অ্যাপটিকে আপনার সাইটে সংযুক্ত করতে পারেন। কিভাবে Weebly App Center থেকে আপনার সাইটে অ্যাপ সংযুক্ত করা যায় সে সম্পর্কে আমাদের নিবন্ধটি দেখুন ।

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

Weebly প্রাইসিং চার্ট অ্যাপ

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

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

প্রাইসিং টেবিল Weebly প্রাইসিং চার্ট অ্যাপ দিয়ে তৈরি

ফ্রি প্রাইস চার্ট অ্যাপের বৈশিষ্ট্য

প্রাইস চার্ট অ্যাপটি Weebly দ্বারা প্রকাশিত হয়েছে এবং তাই আপনি ধরে নিতে পারেন Weebly এডিটরের সাথে ইন্টিগ্রেশন অন্য যেকোনো অ্যাপের চেয়ে সহজ হবে। মনে রাখবেন, আপনাকে অ্যাপটিকে আপনার প্রতিটি সাইটের সাথে আলাদাভাবে সংযুক্ত করতে হবে এবং নিম্নলিখিত বৈশিষ্ট্যগুলি ব্যবহার করতে হবে:

  • উইজেটটিতে একটি পরিকল্পনা, বৈশিষ্ট্য এবং বোতাম উপাদান রয়েছে।
  • এটি একটি সম্পূর্ণ উইজেট যার অর্থ আপনি অন্য কোন উপাদানকে মাঝখানে টেনে আনতে পারবেন না।
  • যদিও উইজেট সীমাহীন পরিকল্পনা এবং বৈশিষ্ট্যগুলির অনুমতি দেয়, আমরা 3 থেকে 5 টি পরিকল্পনা কঠোর করার সুপারিশ করি।
  • আপনার প্রয়োজন অনুসারে আপনি পটভূমির রঙগুলি কাস্টমাইজ করতে পারেন।

স্ক্রিপ্ট ব্যবহার করে প্রাইসিং টেবিল উইজেট

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

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

স্ক্রিপ্ট ব্যবহার করে প্রাইসিং টেবিল

আপনি নীচের ধাপগুলি অনুসরণ করে আপনার Weebly সাইটে উইজেট যুক্ত করতে পারেন।

  • স্ক্রিপ্ট যোগ করা হচ্ছে
  • কাস্টম CSS স্টাইল যোগ করা হচ্ছে
  • HTML কোড এম্বেড করা

স্ক্রিপ্ট যোগ করা

আপনার ওয়েবলি সাইটের "পৃষ্ঠা> পৃষ্ঠা নির্বাচন করুন> এসইও সেটিংস> পাদলেখ কোড" বিভাগে নীচের স্ক্রিপ্টটি যোগ করুন।

< script > /** * StyleFix 1.0.3 & PrefixFree 1.0.7 * @author Lea Verou * MIT license */ (function() { function t(e, t) { return [].slice.call((t || document).querySelectorAll(e)) } if (!window.addEventListener) return; var e = window.StyleFix = { link: function(t) { try { if (t.rel !== "stylesheet" || t.hasAttribute("data-noprefix")) return } catch (n) { return } var r = t.href || t.getAttribute("data-href"), i = r.replace(/[^/]+$/, ""), s = (/^[a-z]{3,10}:/.exec(i) || [""])[0], o = (/^[a-z]{3,10}://[^/]+/.exec(i) || [""])[0], u = /^([^?]*)??/.exec(r)[1], a = t.parentNode, f = new XMLHttpRequest, l; f.onreadystatechange = function() { f.readyState === 4 && l() }; l = function() { var n = f.responseText; if (n && t.parentNode && (!f.status || f.status < 400 || f.status > 600)) { n = e.fix(n, !0, t); if (i) { n = n.replace(/url(s*?((?:"|')?)(.+?)1s*?)/gi, function(e, t, n) { return /^([a-z]{3,10}:|#)/i.test(n)? e: /^///.test(n)? 'url("' + s + n + '")': /^//.test(n)? 'url("' + o + n + '")': /^?/.test(n)? 'url("' + u + n + '")': 'url("' + i + n + '")' }); var r = i.replace(/([^$+[]?{}.=!:(|)])/g, "$1"); n = n.replace(RegExp("b(behavior:s*?url('?"?)" + r, "gi"), "$1") } var l = document.createElement("style"); l.textContent = n; l.media = t.media; l.disabled = t.disabled; l.setAttribute("data-href", t.getAttribute("href")); a.insertBefore(l, t); a.removeChild(t); l.media = t.media } }; try { f.open("GET", r); f.send(null) } catch (n) { if (typeof XDomainRequest != "undefined") { f = new XDomainRequest; f.onerror = f.onprogress = function() {}; f.onload = l; f.open("GET", r); f.send(null) } } t.setAttribute("data-inprogress", "") }, styleElement: function(t) { if (t.hasAttribute("data-noprefix")) return; var n = t.disabled; t.textContent = e.fix(t.textContent, !0, t); t.disabled = n }, styleAttribute: function(t) { var n = t.getAttribute("style"); n = e.fix(n, !1, t); t.setAttribute("style", n) }, process: function() { t('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link); t("style").forEach(StyleFix.styleElement); t("[style]").forEach(StyleFix.styleAttribute) }, register: function(t, n) { (e.fixers = e.fixers || []).splice(n === undefined? e.fixers.length: n, 0, t) }, fix: function(t, n, r) { for (var i = 0; i < e.fixers.length; i++) t = e.fixers[i](t, n, r) || t; return t }, camelCase: function(e) { return e.replace(/-([a-z])/g, function(e, t) { return t.toUpperCase() }).replace("-", "") }, deCamelCase: function(e) { return e.replace(/[A-Z]/g, function(e) { return "-" + e.toLowerCase() }) } }; (function() { setTimeout(function() { t('link[rel="stylesheet"]').forEach(StyleFix.link) }, 10); document.addEventListener("DOMContentLoaded", StyleFix.process, !1) })() })(); (function(e) { function t(e, t, r, i, s) { e = n[e]; if (e.length) { var o = RegExp(t + "(" + e.join("|") + ")" + r, "gi"); s = s.replace(o, i) } return s } if (!window.StyleFix || !window.getComputedStyle) return; var n = window.PrefixFree = { prefixCSS: function(e, r, i) { var s = n.prefix; n.functions.indexOf("linear-gradient") > -1 && (e = e.replace(/(s|:|,)(repeating-)?linear-gradient(s*(-?d*.?d*)deg/ig, function(e, t, n, r) { return t + (n || "") + "linear-gradient(" + (90 - r) + "deg" })); e = t("functions", "(s|:|,)", "s*(", "$1" + s + "$2(", e); e = t("keywords", "(s|:)", "(s|;|}|$)", "$1" + s + "$2$3", e); e = t("properties", "(^|{|s|;)", "s*:", "$1" + s + "$2:", e); if (n.properties.length) { var o = RegExp("b(" + n.properties.join("|") + ")(?!:)", "gi"); e = t("valueProperties", "b", ":(.+?);", function(e) { return e.replace(o, s + "$1") }, e) } if (r) { e = t("selectors", "", "b", n.prefixSelector, e); e = t("atrules", "@", "b", "@" + s + "$1", e) } e = e.replace(RegExp("-" + s, "g"), "-"); e = e.replace(/-*-(?=[a-z]+)/gi, n.prefix); return e }, property: function(e) { return (n.properties.indexOf(e)? n.prefix: "") + e }, value: function(e, r) { e = t("functions", "(^|s|,)", "s*(", "$1" + n.prefix + "$2(", e); e = t("keywords", "(^|s)", "(s|$)", "$1" + n.prefix + "$2$3", e); return e }, prefixSelector: function(e) { return e.replace(/^:{1,2}/, function(e) { return e + n.prefix }) }, prefixProperty: function(e, t) { var r = n.prefix + e; return t? StyleFix.camelCase(r): r } }; (function() { var e = {}, t = [], r = {}, i = getComputedStyle(document.documentElement, null), s = document.createElement("div").style, o = function(n) { if (n.charAt(0) === "-") { t.push(n); var r = n.split("-"), i = r[1]; e[i] = ++e[i] || 1; while (r.length > 3) { r.pop(); var s = r.join("-"); u(s) && t.indexOf(s) === -1 && t.push(s) } } }, u = function(e) { return StyleFix.camelCase(e) in s }; if (i.length > 0) for (var a = 0; a < i.length; a++) o(i[a]); else for (var f in i) o(StyleFix.deCamelCase(f)); var l = { uses: 0 }; for (var c in e) { var h = e[c]; l.uses < h && (l = { prefix: c, uses: h }) } n.prefix = "-" + l.prefix + "-"; n.Prefix = StyleFix.camelCase(n.prefix); n.properties = []; for (var a = 0; a < t.length; a++) { var f = t[a]; if (f.indexOf(n.prefix) === 0) { var p = f.slice(n.prefix.length); u(p) || n.properties.push(p) } } n.Prefix == "Ms" && !("transform" in s) && !("MsTransform" in s) && "msTransform" in s && n.properties.push("transform", "transform-origin"); n.properties.sort() })(); (function() { function i(e, t) { r[t] = ""; r[t] = e; return !!r[t] } var e = { "linear-gradient": { property: "backgroundImage", params: "red, teal" }, calc: { property: "width", params: "1px + 5%" }, element: { property: "backgroundImage", params: "#foo" }, "cross-fade": { property: "backgroundImage", params: "url(a.png), url(b.png), 50%" } }; e["repeating-linear-gradient"] = e["repeating-radial-gradient"] = e["radial-gradient"] = e["linear-gradient"]; var t = { initial: "color", "zoom-in": "cursor", "zoom-out": "cursor", box: "display", flexbox: "display", "inline-flexbox": "display", flex: "display", "inline-flex": "display", grid: "display", "inline-grid": "display", "min-content": "width" }; n.functions = []; n.keywords = []; var r = document.createElement("div").style; for (var s in e) { var o = e[s], u = o.property, a = s + "(" + o.params + ")"; !i(a, u) && i(n.prefix + a, u) && n.functions.push(s) } for (var f in t) { var u = t[f]; !i(f, u) && i(n.prefix + f, u) && n.keywords.push(f) } })(); (function() { function s(e) { i.textContent = e + "{}"; return !!i.sheet.cssRules.length } var t = { ":read-only": null, ":read-write": null, ":any-link": null, "::selection": null }, r = { keyframes: "name", viewport: null, document: 'regexp(".")' }; n.selectors = []; n.atrules = []; var i = e.appendChild(document.createElement("style")); for (var o in t) { var u = o + (t[o]? "(" + t[o] + ")": ""); !s(u) && s(n.prefixSelector(u)) && n.selectors.push(o) } for (var a in r) { var u = a + " " + (r[a] || ""); !s("@" + u) && s("@" + n.prefix + u) && n.atrules.push(a) } e.removeChild(i) })(); n.valueProperties = ["transition", "transition-property"]; e.className += " " + n.prefix; StyleFix.register(n.prefixCSS) })(document.documentElement); < /script>

কাস্টম CSS কোড যোগ করা

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

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

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

<style type="text/css" media="screen"> .pricing_table { line-height: 150%; font-size: 12px; margin: 0 auto; width: 75%; max-width: 800px; padding-top: 10px; } .price_block { text-align: center; width: 100%; color: #fff; float: left; list-style-type: none; transition: all 0.25s; position: relative; box-sizing: border-box; margin-bottom: 10px; border-bottom: 1px solid transparent; } /*Pricing Table Header Block with Plans*/ .pricing_table h3 { text-transform: uppercase; padding: 5px 0; background: #333; margin: -10px 0 1px 0; } /*Price tag section*/ .price { display: table; background: #444; width: 100%; height: 70px; } .price_figure { font-size: 24px; text-transform: uppercase; vertical-align: middle; display: table-cell; } .price_number { font-weight: bold; display: block; } .price_tenure { font-size: 11px; } /* Pricing Plan Features*/ .features { background: #def0f4; color: #000; } .features li { padding: 8px 15px; border-bottom: 1px solid #ccc; font-size: 11px; list-style-type: none; } .footer { padding: 15px; background: #DEF0F4; } .action_button { text-decoration: none; color: #fff; font-weight: bold; border-radius: 5px; background: linear-gradient(#666, #333); padding: 5px 20px; font-size: 11px; text-transform: uppercase; } .price_block:hover { box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5); transform: scale(1.04) translateY(-5px); z-index: 1; border-bottom: 0 none; } .price_block:hover .price { background:linear-gradient(#DB7224, #F9B84A); box-shadow: inset 0 0 45px 1px #DB7224; } .price_block:hover h3 { background: #222; } .price_block:hover .action_button { background: linear-gradient(#F9B84A, #DB7224); } @media only screen and (min-width: 480px) and (max-width: 768px) { .price_block {width: 50%;} .price_block:nth-child(odd) {border-right: 1px solid transparent;} .price_block:nth-child(3) {clear: both;} .price_block:nth-child(odd):hover {border: 0 none;} } @media only screen and (min-width: 768px){ .price_block {width: 25%;} .price_block {border-right: 1px solid transparent; border-bottom: 0 none;} .price_block:last-child {border-right: 0 none;} .price_block:hover {border: 0 none;} } .skeleton, .skeleton ul, .skeleton li, .skeleton div, .skeleton h3, .skeleton span, .skeleton p { border: 5px solid rgba(255, 255, 255, 0.9); border-radius: 5px; margin: 7px !important; background: rgba(0, 0, 0, 0.05) !important; padding: 0 !important; text-align: left !important; display: block !important; width: auto !important; height: auto !important; font-size: 10px !important; font-style: italic !important; text-transform: none !important; font-weight: normal !important; color: black !important; } .skeleton .label { font-size: 11px !important; font-style: italic !important; text-transform: none !important; font-weight: normal !important; color: white !important; border: 0 none !important; padding: 5px !important; margin: 0 !important; float: none !important; text-align: left !important; text-shadow: 0 0 1px white; background: none !important; } .skeleton { display: none !important; margin: 100px !important; clear: both; } </style>

আপনি আপনার সাইটের লেআউট অনুসারে আপনার প্রয়োজন অনুসারে ফন্ট সাইজ, কালার ইত্যাদির মতো যেকোনো বৈশিষ্ট্য কাস্টমাইজ করতে পারেন।

HTML কোড যোগ করা

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

<ul class="pricing_table"> <li class="price_block"> <h3>Starter</h3> <div class="price"> <div class="price_figure"> <span class="price_number">FREE</span> </div> </div> <ul class="features"> <li>1GB Storage</li> <li>2 Clients</li> <li>5 Active Projects</li> <li>5 Colors</li> <li>Free Goodies</li> <li>24/7 Email support</li> </ul> <div class="footer"> <a href="#" class="action_button">Buy Now</a> </div> </li> <li class="price_block"> <h3>Basic</h3> <div class="price"> <div class="price_figure"> <span class="price_number">$9.99</span> <span class="price_tenure">per month</span> </div> </div> <ul class="features"> <li>2GB Storage</li> <li>5 Clients</li> <li>10 Active Projects</li> <li>10 Colors</li> <li>Free Goodies</li> <li>24/7 Email support</li> </ul> <div class="footer"> <a href="#" class="action_button">Buy Now</a> </div> </li> <li class="price_block"> <h3>Premium</h3> <div class="price"> <div class="price_figure"> <span class="price_number">$19.99</span> <span class="price_tenure">per month</span> </div> </div> <ul class="features"> <li>5GB Storage</li> <li>10 Clients</li> <li>20 Active Projects</li> <li>20 Colors</li> <li>Free Goodies</li> <li>24/7 Email support</li> </ul> <div class="footer"> <a href="#" class="action_button">Buy Now</a> </div> </li> <li class="price_block"> <h3>Lifetime</h3> <div class="price"> <div class="price_figure"> <span class="price_number">$999</span> </div> </div> <ul class="features"> <li>Unlimited Storage</li> <li>Unlimited Clients</li> <li>Unlimited Projects</li> <li>Unlimited Colors</li> <li>Free Goodies</li> <li>24/7 Email support</li> </ul> <div class="footer"> <a href="#" class="action_button">Buy Now</a> </div> </li> </ul> <ul class="skeleton pricing_table" style="margin-top: 100px; overflow: hidden;"> <li class="label" style="margin: 0 none;">ul.pricing_table</li> <li class="price_block"> <span class="label">li.price_block</span> <h3><span class="label">h3</span></h3> <div class="price"> <span class="label">div.price</span> <div class="price_figure"> <span class="label">div.price_figure</span> <span class="price_number"> <span class="label">span.price_number</span> </span> <span class="price_tenure"> <span class="label">span.price_tenure</span> </span> </div> </div> <ul class="features"> <li class="label">ul.features</li> <br /><br /><br /> </ul> <div class="footer"> <span class="label">div.footer</span> </div> </li> <li class="price_block" style="opacity: 0.5;"> <span class="label">li.price_block</span> <h3><span class="label">h3</span></h3> <div class="price"> <span class="label">div.price</span> <div class="price_figure"> <span class="label">div.price_figure</span> <span class="price_number"> <span class="label">span.price_number</span> </span> <span class="price_tenure"> <span class="label">span.price_tenure</span> </span> </div> </div> <ul class="features"> <li class="label">ul.features</li> <br /><br /><br /> </ul> <div class="footer"> <span class="label">div.footer</span> </div> </li> <li class="price_block" style="opacity: 0.25;"> <span class="label">li.price_block</span> <h3><span class="label">h3</span></h3> <div class="price"> <span class="label">div.price</span> <div class="price_figure"> <span class="label">div.price_figure</span> <span class="price_number"> <span class="label">span.price_number</span> </span> <span class="price_tenure"> <span class="label">span.price_tenure</span> </span> </div> </div> <ul class="features"> <li class="label">ul.features</li> <br /><br /><br /> </ul> <div class="footer"> <span class="label">div.footer</span> </div> </li> </ul>

এই কাস্টম উইজেটের সুবিধা হল আপনি অফলাইনে বিষয়বস্তু প্রস্তুত করতে পারেন এবং কয়েক মিনিটের মধ্যে স্ক্রিপ্ট/CSS/বিষয়বস্তু পেস্ট করতে পারেন।

চূড়ান্ত শব্দ

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

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

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