میم صاد الف...

سلاااام به دوستان گل گلاب

دیروز دوست عزیزم سید محمدرضا در کامنتی در بخش پرسش و پاسخ یک سوالی پرسیده بودند در مورد اینکه چجوری دکمه موافق و مخالف پست ها رو به لایک تبدیل کنیم؟ :)

منم اومدم با یک آموزش خفن نه بسیااااااار ساده این رو بهتون یاد بدم

خب برای اینکه سرتون درد نگیره مستقیم می رویم سراغ آموزشمون :)

مرحله اول : پیدا کردن بخش موافق و مخالف

اول از همه وارد بخش ویرایش ساختار قالب فعلی می شویم

و کلمه rate-box رو جستوجو می کنیم

سپس کد زیر را پیدا می کنیم

<span class="rate-box (*user_rated*)">
<span class="rate-button-box rate-up (*user_rated_up*)">
<a class="rate-button" href="(*rate_up_link*)" rel="nofollow" title="موافق">
<img alt="موافقین" class="rateimg" src="//blog.ir/media/images/cleardot.gif">
(*up_rates*)
</a>
</span>
<span class="rate-button-box rate-down (*user_rated_down*)">
<a class="rate-button" href="(*rate_down_link*)" rel="nofollow" title="مخالف">
<img alt="مخالفین" class="rateimg" src="//blog.ir/media/images/cleardot.gif">
(*down_rates*)
</a>
</span>

مرحله دوم : انجام تغییرات لازم برای تبدیل به دکمه لایک :)

نکته مورچه ای: وقتی در html تگی را به اصطلاح کامنتش کنیم یا اینکه داخل <!-- --> قرارش بدیم دیگه نمایش داده نمی شه :)

خب بعد از پیدا کردن این بخش چند تا کارباید بکنیم

اول از همه حذف یا کامنت کردن گزینه مخالف هستش چون ما فقط لایک داریم و دیسلایک نداریم :-)

دوم از همه حذف یا کامنت کردن تگ img هست که فلش های قالبمون مخفی بشن مخفی بشن

<span class="rate-box (*user_rated*)">
<span class="rate-button-box rate-up (*user_rated_up*)">
<a class="rate-button" href="(*rate_up_link*)" rel="nofollow" title="موافق">
<!--<img alt="موافقین" class="rateimg" src="//blog.ir/media/images/cleardot.gif">-->
(*up_rates*)
</a>
</span>
<!--<span class="rate-button-box rate-down (*user_rated_down*)">
<a class="rate-button" href="(*rate_down_link*)" rel="nofollow" title="مخالف">
<img alt="مخالفین" class="rateimg" src="//blog.ir/media/images/cleardot.gif">
(*down_rates*)
</a>
</span>-->

اینم کد نهاییمون

حالا وقته اینه که ما علامت قلب رو به قالبمون اضافه کنیم که اونا با css انجام میشه

مرحله آخر : افزوده شیوه نامه های آبشاری (اینم برای اینکه برید حال کنید فارسی نوشتم :) )

وارد بخش ویرایش css قالب فعلی بشید (این چرا شیوه نامه آبشاری رو ننونشه🤔)

و در آخر کد ها این کدای عزیز رو آروم قرار بدید (اگه کدها رو بکوبید میشکنه مامانتون دعواتون می کنه. ...چی دارم می گم😐)

@keyframes like {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    30% {
        -webkit-transform: scale3d(1.25, .75, 1);
        transform: scale3d(1.25, .75, 1)
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1)
    }
    50% {
        -webkit-transform: scale3d(1.15, .85, 1);
        transform: scale3d(1.15, .85, 1)
    }
    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
    }
    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}
.rate-box .rate-button::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 1px 1px -3px 0;
    background: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg fill='none' height='15' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center/cover no-repeat;
}
.rate-box.rated .rate-button::before {
    content: "";
    animation-name: like;
    animation-duration: 1s;
    animation-fill-mode: both;
    background: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg height='15' version='1.1' width='15' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23'%3E%3Cg transform='translate(0 -1028.4)'%3E%3Cpath d='m7 1031.4c-1.5355 0-3.0784 0.5-4.25 1.7-2.3431 2.4-2.2788 6.1 0 8.5l9.25 9.8 9.25-9.8c2.279-2.4 2.343-6.1 0-8.5-2.343-2.3-6.157-2.3-8.5 0l-0.75 0.8-0.75-0.8c-1.172-1.2-2.7145-1.7-4.25-1.7z' fill='%23c0392b'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
}

ببینید حوصله ندارم توضیح بدم کدهایی که نوشتم چیه ولی در همین حد بگم که بالای کدا انیمیشنش هست پایینش دکمه لایک
اصلا چی کار دارید کدا چیه از اینور کپی و تو صفحه وبلاگ پیستش کن راحت باش :)

لایک و کامنت که نه ولی نظر و سابسکرایبم که نداریم اگرم دنبال نکرده باشید چجوری می خواید پست رو پیدا کنید پس همون دوتا یادتون نره #بیماری_تایپ_کردن_افکار_خود🤒

پس فعلا خداحافظ :))))))