سون لرن • آموزش

سلام منم یه سایت دارم که وقتی صفحه میخواد لود بشه اولش خیلی بد میاره بنظرتون مشکلش کجاست چندباریم به برنامه نویس سپردم ولی دلیلشو نفهمیده بنظر شما مشکل مال Css یا مال Html ؟ آدرس سایتم : vestamusc.ir , ...ادامه مطلب

در این قسمت میخوام یک کد ( Rings Navigation ) جالب رو در اختیارتون بزارم. دموتوضیحات مربوط به کد Rings Navigation همونطور که دیدید یک دایره با متن Menu در گوشه بالا و سمت راست صفحه قرار داده شده و با کلیک بر روی اون یک منوی حلقه ای زیبا با تعدادی زیرمنو نمایش داده میشه. شما میتونین از این مورد ایده گرفته و از اون در سایتتون استفاده کنید. برای مشاهده کدهای مربوط به این نمونه میتونین وارد بخش View Source بشید. برای ساخت این نمونه از CSS Animation استفاده شده است و با استفاده از Javascript نیز اون رو مدیریت میکنیم. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی لینک دانلود Source attractive beauty code CSS‏ idea inspire Rings Navigation , ...ادامه مطلب

در این قسمت میخوام یک کد ( Nested Dropdown Navigation ) جالب رو در اختیارتون بزارم. توضیحات مربوط به کد همونطور که دیدید یک منو قرار داده شده و زمانی که بر روی اون کلیک میکنید زیر منوی سطح اول باز میشه. گزینه مربوط به Shop یک آیکون > داره که با کلیک بر روی اون زیرمنوهای سطح دوم نیز با افکتی زیبا باز میشن. این کار با استفاده از CSS خالص انجام شده است و هیچ کد Javascript در اون استفاده نشده است. شای,کدهای,دیدنی,تودرتو ...ادامه مطلب

در این قسمت میخوام یک کد ( fullscreen overlay navigation ) جالب رو در اختیارتون بزارم. همونطور که دیدید یک آیکون همبرگر در بالا و سمت راست قرار داده شده و با کلیک بر روی اون یک منوی تمام صفحه نمایش داده میشه. میتونین از این کد در سایتتون استفاده کنید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتها, ...ادامه مطلب

در این قسمت میخوام یک کد ( following subnav ) جالب رو در اختیارتون بزارم. همونطور که دیدید یک منو ساخته شده و زمانی که بر روی آیتم های اون هاور میکنید، خط موجود به دنبال ماوس شما حرکت میکنه و زمانی که بر روی آیتم Skills هاور میکنید، یک زیر منو بصورت زیبا نمایش داده میشه. همه این موارد با استفاده از, ...ادامه مطلب

در این قسمت میخوام یک کد ( Menu by yoann ) جالب رو در اختیارتون بزارم. همونطور که دیدید یک گزینه قرار داده شده و زمانی که بر روی اون کلیک میکنید، یک زیر منوی زیبا برای اون نمایش داده میشه و میتونین از اون ایده گرفته و یا در سایتتون استفاده کنید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان Let's block ads! بخوانید,کدهای جذاب وبلاگ,کدهای جالب وبلاگ,کدهای جالب وبلاگ بلاگفا,کدهای جالب ویژوال بیسیک,کدهای جذاب برای وبلاگ,کدهای جالب وی چت,کدهای جالب وبلاگ نویسی,کدهای جالب وجدید برای وبلاگ ...ادامه مطلب

در این قسمت میخوام یک کد ( pure CSS 3D Radial Menu ) جالب رو در اختیارتون بزارم. همونطور که دیدید یک منوی دایره ای و شعاعی پیشرفته و جالب قرار داده شده و میتونین از اون ایده گرفته و استفاده کنید. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان Let's block ads! بخوانید,کدهای جذاب وبلاگ,کدهای جالب وبلاگ,کدهای جالب وبلاگ بلاگفا,کدهای جالب ویژوال بیسیک,کدهای جذاب برای وبلاگ,کدهای جالب وی چت,کدهای جالب وبلاگ نویسی,کدهای جالب وجدید برای وبلاگ ...ادامه مطلب

در این قسمت میخوام یک کد ( Ionic Side Menu Transitions ) جالب رو در اختیارتون بزارم. همونطور که دیدید یک منوی جانبی در سمت چپ قرار گرفته و انیمیشنهای زیبایی برای اون در نظر گرفته شده. برای دیدن و عوض کردن انیمیشن ها بر روی دکمه های موجود در پایین صفحه کلیک کنید. مثلا اگر بر روی wave کلیک کنید، منو بصورت موجی نمایش داده میشه. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان Let's block ads! بخوانید, ...ادامه مطلب

در این قسمت میخوام یک کد ( Bubble Menu ) جالب رو در اختیارتون بزارم. همونطور که دیدید یک منوی حبابی و بسیار زیبا ساخته شده و قرار گرفته و زمانی که بر روی اون هاور میکنید بصورت بسیار زیبا از هم جدا میشن و زیر هم قرار میگیرن و دوباره با بیرون بردن ماوس از روی اونا، سر جای اولشون بر میگردن. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان Let's block ads! بخوانید, ...ادامه مطلب

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون یک منو ثابت و عمودی که واکنشگرا هست رو میسازه و میتونین از اون استفاده کنید. میتونین بر روی دمو در لینک مورد نظر کلیک کنید، تا نتیجه کار رو ببینید. برای شروع وارد سایت vertical-fixed-navigation-2 بشین. امیدوارم بدردتون بخوره. موفق باشید. یا علی Let's block ads! بخوانید, ...ادامه مطلب

0 26 ۲۴ اردیبهشت ۹۵ به نام خدا و سلام. در خدمت شما هستیم با قسمت اول از آپدیت های دوره مجازی طراحی قالب حرفه ای وردپرس. در این جلسه قصد داریم تا منوی کشویی شورتکد ها رو در ویرایشگر وردپرس پیاده سازی کنیم. در ابتدا کدهای مورد نظر برای اضافه کردن یک پلاگین tinymce (ویرایشگر  وردپرس) رو بررسی می کنیم و سپس با نوشتن کدهای مریوط به گزینه های منو شورت کدهای دلخواه رو که قبلا در سیستم تعریف کردیم رو به منوی مورد نظر اضافه می کنیم. این کار باعث استفاده آسان تر از شورت کدهای تعریف شده برای کاربر نهایی قالب میشه و نیازی به نوشتن کدهای شورتکد در ویرایش گر نیست.   در این جلسه خواهیم دید : بررسی کدهای اضافه کردن پلاگین tinymce بررسی کدهای جاوااسکریپت ایجاد منوهای مختلف برای شورت کدها ایجاد زیر منوهای مختلف توضیحات : بعد از درخواست های فراوان دوستان برای برگزاری دوره آموزش طراحی قالب وردپرس به صورت حرفه ای و تلاش سون لرن برای انجام مقدمات برگزاری دوره بالاخره انتظار ها به پایان رسید.در این دوره یک قالب حرفه ای و مردن با افکت های زیبا را به همراه کد نویسی بهینه و هم چنین امکانات متعدد یک وب سایت دانلود و آموزش را با هم پیاده سازی خواهیم کرد.برای راحتی کار دوره به سه بخش کلی تقسیم شده که بخش اول طراحی قالب در فتوشاپ - بخش دوم تبدیل قالب طراحی شده به HTML و CSS و بخش سوم هم پیاده سازی قالب با امکانات حرفه ای در وردپرس هست.چنانچه قبلا در دوره های دیگر سون لرن شرکت کرده اید این دوره علاوه بر آموزش کامل وردپرس تمرینی بسیار حرفه ای برای شما خواهد بود و هم اکنون با محتوایی غنی تر و حرفه ای تر و قیمتی بسیار کمتر از آن چه در دوره های حضوری وجود دارد می توانید در آن ثبت نام کنید ! Let's block ads! بخوانید, ...ادامه مطلب

0 22 ۱۷ اردیبهشت ۹۵ به نام خدا و سلام. در خدمت شما هستیم با جلسه سیزدهم از دوره مجازی پلاگین نویسی وردپرس. در این جلسه قصد داریم تا وارد بخش مدیریت پلاگین شویم و برای شروع هم منوی مدیریت پلاگین را ایجاد می کنیم. در ابتدا با تابع add_menu_page آشنا خواهیم شد و پارامتر های مختلف آن را بررسی خواهیم کرد. سپس این تابع را پیاده سازی خواهیم کا تا منوی مدیریت پلاگین را ایجاد کنیم. باری دوستانی که تازه کدهای وردپرس را شروع کرده اند مطمئنا جذابیت زیادی خواهد داشت. در این جلسه خواهیم دید : معرفی تابع add_menu_page پیاده سازی کدهای بخش admin نحوه اجرای کدهای سمت admin ایجاد منوی مدیریت پلاگین توضیحات : وردپرس به عنوان محبوب ترین سیستم مدیریت محتوا در بین اکثر کاربران فضای مجازی به خوبی شناخته شده است و این موضوع باعث شده تا سیستم های مختلفی برای وردپرس تهیه و به بازار عرضه شود. هر چند وردپرس خود رایگان است اما قابلیت های توسعه آن از جمله قالب ها و پلاگین ها که به کاربران کمک می کند سیستم مورد نظر خود را پیاده سازی کنند، باعث شده است تا رونق بسیار زیادی در بازار فروش قالب ها و پلاگین های آن ایجاد شود. فروش هایی که تا دهها میلیون دلار هم برای یک افزونه می رسد! در این دوره سعی کرده ایم تمامی مواردی که شما برای تهیه یک پلاگین عالی و کاملا حرفه ای نیاز دارد را قرار دهیم و تدریس نماییم. آموزش ها به صورت کاملا پروژه محور و کاربردی تهیه شده است، پلاگین هایی حرفه ای که هم نحوه ایجاد و کدنویسی آنها را یاد خواهید گرفت و هم آنها را در پایان دوره خواهید داشت. شما پس از گذراندن این دوره قادر خواهید بود هر نوع پلاگین دلخواه دیگری را که فکر می کنید برای سایت خود بنویسید. لازم به ذکر است در صورت سفارش پلاگین های طراحی و کدنویسی شده در این دوره، باید هزینه ای حداقل 800 هزارتومانی بپردازید! در صورتی که در این دوره شما فقط با پرداخت هزینه ای اندک، هم پلاگین نویسی حرفه ای خواهید شد و هم این پلاگین ها را در پایان دوره خواهید داشت. تدریس مباحث این دوره نیز به مانند دوره های دیگر سون لرن، بر اساس اصل صداقت در تدریس و جامع بودن دوره هاست و مدرس تمامی تجربیات حرفه ای خود در این زمینه را به شما انتقال خواهد داد! به جرئت می توانیم ادعا کنیم دوره حاضر حرفه ای ترین و استانداردترین دوره پلاگین نویسی وردپ, ...ادامه مطلب

در این قسمت میخوام یک کد ( Responsive Menu App ) جالب رو در اختیارتون بزارم. همونطور که دیدید یک منوی چند جزئی زیبا قرار داده شده و با هاور کردن بر روی هر قسمت، اون قسمت بزرگ میشه و محتویات اون نمایش داده میشه. بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین. موفق باشید. یا علی Source نوع کد رايگان Let's block ads! بخوانید, ...ادامه مطلب

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'Avenir Next', Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif; color: #444; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: #4e3c3e; outline: none; } a:hover, a:focus { color: #f48b95; } #container { width: 600px; margin: 100px auto; } /* Common styles for all menus */ .menu { line-height: 1; margin: 0 auto 3em; } .menu__list { position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .menu__item { display: block; margin: 1em 0; } .menu__link { font-size: 1.05em; font-weight: bold; display: block; padding: 1em; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .menu__link:hover, .menu__link:focus { outline: none; } /* Individual styles */ /* Juliet Styles */ .menu--juliet .menu__item {     position: relative;     -webkit-transition: color .25s;     transition: color .25s; } .menu--juliet .menu__item::before, .menu--juliet .menu__item::after, .menu--juliet .menu__item--current::before, .menu--juliet .menu__item--current::after {     position: absolute;     left: 50%;     width: 0;     height: 0;     border: solid transparent;     content: '';     pointer-events: none; } .menu--juliet .menu__item::before, .menu--juliet .menu__item::after { -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -webkit-transform-origin: left left; transform-origin: left left; -webkit-transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); } .menu--juliet .menu__item--current::before, .menu--juliet .menu__item--current::after {    -webkit-transfor, ...ادامه مطلب

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'Avenir Next', Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif; color: #444; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: #4e3c3e; outline: none; } a:hover, a:focus { color: #f48b95; } #container { width: 700px; margin: 100px auto; } /* Common styles for all menus */ .menu { line-height: 1; margin: 0 auto 3em; } .menu__list { position: relative; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .menu__item { display: block; margin: 1em 0; } .menu__link { font-size: 1.05em; font-weight: bold; display: block; padding: 1em; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .menu__link:hover, .menu__link:focus { outline: none; } /* Individual styles */ /* Horatio Styles */ .menu--horatio .menu__item { margin-left: 3px; margin-right: 3px; color: #4e3c3e; } .menu--horatio .menu__item { position: relative; -webkit-transition: color .25s; transition: color .25s; } .menu--horatio .menu__item a { position: relative; color: inherit; } .menu--horatio .menu__item--current { color: #b5b5b5; } .menu--horatio .menu__item:hover { color: #d94f5c; } .menu--horatio .menu__item::before, .menu--horatio .menu__item::after, .menu--horatio .menu__item a::before, .menu--horatio .menu__item a::after { position: absolute; display: block; top: 0; right: 0; bottom: 0; left: 0; border: 2px solid currentColor; } .menu--horatio .menu__item::before { border-width: 0 0 0 2px; -webkit-transform-origin: left bottom; transform-origin: left bottom; } .menu--horatio .menu__item::after { border-width: 0 2px 0 0; -webkit-transform-origin: right top; , ...ادامه مطلب