آموزش ایجاد دکمه view more با جاوااسکریپت در وردپرس😍🤌🏻

کدهاش رو براتون پایین تر میذارم👇🏼

@coder_sara

شکل نهایی باکس به این صورته😍

@coder_sara

<div class="readmore-box">
<p class="highlight-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut d <span class="dots">...</span><span class="more">feugiat sed lectus. Non nisi est sit amet facilisis magna. Dignissim diam quis enim lobortis scelerisque fermentum. Odio ut enim blandit volutpat maecenas volutpat. Ornare lectus sit amet est placerat in egestas erat. Nisi vitae suscipit tellus mauris a diam maecenas sed. Placerat duis ultricies lacus sed turpis tincidunt id aliquet.
</span></p>

<button onclick="myFunction(this)" class="myBtn">
<span class="btn-text">View more</span>
<img class="btn-icon" src="youriconurl" style="width:22px; height:22px; margin-left:0px; margin-bottom: -5px">
</button>
</div>

کد html
🌀(برای اموزش بالا☝🏻: ایجاد دکمه‌ view more)

@coder_sara

<noscript>
function myFunction(button) {
var container = button.closest('.readmore-box');
var dots = container.querySelector('.dots');
var moreText = container.querySelector('.more');
var btnText = button.querySelector('.btn-text');

if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "View more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "View less";
moreText.style.display = "block";
}
}

</noscript>

کد جاوااسکریپت
🌀(برای آموزش بالا☝🏻: ایجاد دکمه‌ view more)

این کد رو توی صفحه‌‌ی موردنظرت، توی ویجت html قرار بده، بهتره از دوتا ویجت html جدا برای کد html و‌ Js استفاده کنی.

🔺نکـــته: اگه چندتا دکمه view more در یک صفحه داری، لازم نیست برای هر دکمه بیای کد جاوااسکریپت رو قرار بدی، اگه اسم فانکشن‌ها و موارد دیگه رو تغییر ندی، کافیه یک بار این کد جاوااسکریپت رو بذاری تا برای همه‌ی دکمه‌های‌ view more ای که توی صفحه هست کار بکنه🤌🏻

@coder_sara

🔻توضیح کد‌ html:
✔️برای این کد از متن‌ لورم و پیش فرض استفاده شده و باید با متن خودت جایگزین کنی.

✔️توی تگ p میای متنت رو قرار میدی، متنی که توی تگ p تا قبل از باز شدن تگ span با کلاس dots قرار میگیره رو کاربر میبینه و بعد سه نقطه (…) قرار میگیره و کاربر مابقی متن رو نمیبینه.

✔️وقتی روی دکمه view more کلیک بکنه میتونه مابقی متن هم ببینه.
مابقی‌متن همون متنی هستش که توی تگ‌ span با کلاس dots قرار گرفته.

@coder_sara

اینجا هم از سایت w3schools میتونی درباره‌اش بخونی و یاد بگیری😍👇🏼

🔗 https://www.w3schools.com/howto/howto_js_read_more.asp

@coder_sara

سلام🧡🥯

من دارم برای اینجا برنامه ریزی میکنم😍 و میخوام اینجا براتون یک سری ویس بذارم(درباره‌ی موضوعات مختلف)🎙️

‌▪️اولین موضوعی که به نظرم برای همــه‌تون خوبه که بلدش باشین:
نحوه‌ی صحبت با مشتریِ✅

موافقین؟🤔

چون هرچه قدر هم که:
▪️کارِت خوب باشه
▫️نمونه کارهای خوبی داشته باشی
▪️توی شبکه‌های اجتماعی فعال باشی
و…

❌ولی نتونی به نحوی با مشتری صحبت کنی و‌ خودت رو ثابت کنی که مشتری بهت اعتماد کنه، درآمدت رو نمیتونی بالا ببری!⛔️💵

سلام به همگــــی 💖

یادتونه قرار بود درباره نحوه‌ی صحبت با مشتری حرف بزنیم؟ 🥰

🔶میخوایم یک چالش سه روزه داشته باشیم و توی هرروز یک مسئله‌ی مهم رو باهم صحبت کنیم😍

🎯هدف این چالـــش چیه؟
یادبگیریم چطوری با مشتری صحبت کنیم که هم مهارت‌های خودمون رو نشون بدیم هم اعتمادسازی کنیم.

👥مناســـــب چه کســــاییه؟
تمام کسایی که فریلنسرن یا خودشون با مشتری در ارتباطن

🗓️چند روزه چالشمون؟
سه روز سه مرحله‌ی مهم برای صحبت با مشتری

🌀این پیامو بفرست برای اونی که میدونی به این چالش احتیاج داره،تا دیگه مشتری رو از دست نده 🥴❤️
@coder_sara

قـــراره چالش رو شــــروع کنیــم؛
آمـــاده ای؟

(با ری‌اکت بهم بگین)
اره حتما🔥
نه❤️

بریم برای شروع روز اول چـــالش😍💪🏼

یه فریلنسر حرفه‌ای باید روی ۲ تا مهارت نرم و سختش کار کنه

🔻مهارت سخت همون یادگیری حرفه‌اشه، مثل طراحی سایت با وردپرس، برنامه نویسی وب و…👩🏻‍💻

🔻مهارت نرم مهارت مذاکره‌اشه، ❓چقدر بلدی خوب صحبت کنی؟
❓چقدر بلدی مشتری رو متقاعد کنی که پروژه رو به تو بده؟ (اون کارفرما قطعا دنبال اینه که یکی کارشو انجام بده دیگه، چجوری متقاعدش میکنی که پروژه رو به تو بده نه به رقیبت؟)

@coder_sara

اگه اینجوری با کارفرما صحبت کنی، قطــعا پروژه رو از دست دادی❗️😑

این مکالمه چندتا ایراد بزرگ داره👇🏼

@coder_sara

با دقت این ایراد هارو بخون🪽

@coder_sara

تفــاوت رو ببین!😍🫠

حالا مزیت‌های این مکالمه رو بخون👇🏼🗣️

@coder_sara

پس قراره یاد بگیریم که اینطوری اشتباه صحبت نکنیم❗️😌✌🏻