#آموزشی #css #شخصی‌سازی

📑 استایل دهی مجزا به لینک هایی که در تب جدید باز میشوند

📝 پیشگفتار : شاید برای شما هم پیش آمده باشد که بخواهید کلیه لینک هایی که در صفحه جدید ( تب جدید ) باز میشوند را به شکل خاصی نمایش دهید! بعنوان مثال متنی را کنار ( قبل یا بعد ) آنها نمایش دهید یا رنگ و نوع نمایش آن را به نحوی تغییر دهید که کاربر قبل از کلیک بر روی آن لینک بداند که قرار است در تب جدیدی صفحه را مشاهده کند! خب این کار با استفاده از چندخط کد css قابل انجام است! در ادامه آموزش همراه ما باشید 😉
🖌 با استفاده از کد زیر در فایل استایل قالب ، به قالب سایت میفهمانیم که لینک هایی که در تب جدید قرار است باز شوند را به شکل دلخواهی نمایش دهند ، پس از کد موارد مهم را توضیح خواهم داد.
کدcss :

a[target="_blank"]:before,
a[target="new"]:before {
  outline: 1px solid #333;
  color: #333;
  background: #ff9;
  font: 14px;
  content: "این لینک در صفحه جدید باز میشود!";
}

📍 در خط اول کد ما به قالب میفهمانیم که کلیه لینک ها (تگهای a ) موجود در قالب که صفحه هدف آنها تب جدید درمرورگر است به شکلی که استایل دهی شده است نمایش داده شود!
📍با کلاس کاذب :before گفتیم که بعد از متن یک فضای خالی را ایجاد کند
📍 با استفاده از content گفتیم که یک محتوا را نمایش دهد (توجه کنید که این کلاس درصورتی نمایش داده خواهد شد که از یک کلاس کاذب در بین ویژگی ها استفاده شود )

با آموزش های بیشتر و تخصصی تر همراه ما باشید 🌹

قلب وردپرس را به دوستان خود معرفی کنید 😉

@wpheart
@wpheart
@wpheart

#آموزشی #css #شخصی‌سازی

📑 استایل دهی به لینک ها بر اساس فایل هدف آنها

📝 پیش گفتار : لازم است بدانید که زیبایی سایت و طرح دلنشین و همه چیز تمام سایت و البته مهم تر از بقیه در دسترس بودن محتوای سایت کمک زیادی به جذب کاربر میکنه! از این رو با استفاده از برخی ترفند ها شما میتونید سایتتون رو به سادگی زیبا سازی کنید😉 در ادامه قطعه کد css به شما معرفی خواهم کرد که با استفاده از آن میتوانید به لینک های موجود در سایت خود با توجه به فایل های هدف ( zip,pdf,mp3,mp4,dox,&...) استایل بدید و برای هر یک آیکن خاصی در نظر بگیرید! پس همراه من باشید با این آموزش 😉
🖌 قطعه کدی که ازش حرف میزنیم به شکل زیر نوشته میشه که توضیحات مربوطه رو در ادامه خواهم گفت :

a[href$='.zip'] {
  padding: 0 20px 0 0;
  background: transparent url(/images/zip.png) no-repeat center right;
}

📍 در مثال بالا ما به قالب فهماندیم که اگر لینکی که در تگ a قرار گرفته است، هدفش یک فایل با پسوند zip بود، ایکن مربوطه رو در سمت چپ اون لینک نمایش بده !
📍 منظور از لینک هدف درواقع لینک مستقیمی است که در قالب لینک قرار داده شده است. بعنوان مثال برای کد بالا لینکی صدق میکند که به شکل زیر باشد
http://houniya.ir/files/test/learn.zip

📌 شما میتوانید با کپی کردن این کد پسوند های دیگر را شخصی سازی کنید


با آموزش های بیشتر و تخصصی تر همراه ما باشید 🌹

قلب وردپرس را به دوستان خود معرفی کنید 😉

@wpheart
@wpheart
@wpheart

#آموزشی #css #شخصی‌سازی

📑 استایل دهی به لینک ها بر اساس فایل هدف آنها

📝 پیش گفتار : لازم است بدانید که زیبایی سایت و طرح دلنشین و همه چیز تمام سایت و البته مهم تر از بقیه در دسترس بودن محتوای سایت کمک زیادی به جذب کاربر میکنه! از این رو با استفاده از برخی ترفند ها شما میتونید سایتتون رو به سادگی زیبا سازی کنید😉 در ادامه قطعه کد css به شما معرفی خواهم کرد که با استفاده از آن میتوانید به لینک های موجود در سایت خود با توجه به فایل های هدف ( zip,pdf,mp3,mp4,dox,&...) استایل بدید و برای هر یک آیکن خاصی در نظر بگیرید! پس همراه من باشید با این آموزش 😉
🖌 قطعه کدی که ازش حرف میزنیم به شکل زیر نوشته میشه که توضیحات مربوطه رو در ادامه خواهم گفت :

a[href$='.zip'] {
  padding: 0 20px 0 0;
  background: transparent url(/images/zip.png) no-repeat center right;
}

📍 در مثال بالا ما به قالب فهماندیم که اگر لینکی که در تگ a قرار گرفته است، هدفش یک فایل با پسوند zip بود، ایکن مربوطه رو در سمت چپ اون لینک نمایش بده !
📍 منظور از لینک هدف درواقع لینک مستقیمی است که در قالب لینک قرار داده شده است. بعنوان مثال برای کد بالا لینکی صدق میکند که به شکل زیر باشد
http://houniya.ir/files/test/learn.zip

📌 شما میتوانید با کپی کردن این کد پسوند های دیگر را شخصی سازی کنید


با آموزش های بیشتر و تخصصی تر همراه ما باشید 🌹

قلب وردپرس را به دوستان خود معرفی کنید 😉

@wpheart
@wpheart
@wpheart