کدهای کاربردی

کد آماده برای ایجاد ایکون پشتیبانی

Sun, 10 May 2026 16:56:00 +0330




	
    https://rozup.ir/view/4041021/Telegram_logo.svg" class="icon">
    
        online support
        پشتیبانی آنلاین

کدهای کاربردی

کد آماده پنل کاربری برای کاربران سایت های رزبلاگ

Sun, 22 Feb 2026 17:24:00 +0330

کد زیر را در هدر در بخش مخصوص خود جایگذاری کنید

در صورتی که میخواهید برای سایت استفاده کنید باید Shop_Url را به Url تغییر دهید




    
        
            
            
        
        
            
                
                                             
                    [Login_Name] عزیز
                    
                
            
            
                
                    پیشخوان
                    
                
            
            
                
                    ویرایش پروفایل
                    
                
            
            
                
                    لیست سفارشات
                    
                
            
            
                
                    علاقه مندیها
                    
                
            
            
                
                    مدیریت آدرس ها
                    
                
            
            
                
                    خروج از حساب کاربری

دمو

کدهای کاربردی

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

Sun, 22 Feb 2026 16:42:00 +0330

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


9
سبد خرید

کد زیر را در انتهای قالب خود یا در قالب هدر یا فوتر فروشگاه قرار بدید





    
    
        
            
            
                سبد خرید
                
            

            
            
                
                
                    
                        
                            
                        
                    
                    
                        [Product_Cart_Title]
                        1عدد - [Discount] [Product_Cart_Price] تومان
                    
                    
                        
                    
                
                
            

            
            
            
                
                سبد خرید شما خالی است!
            
            

            
            
            
                
                    جمع کل:
                    [Cart_Total_Price] تومان
                
                مشاهده سبد خرید

عکس از سبد خرید آماده

کدهای کاربردی

مجموعه آیکوهای شبکه های اجتماعی ایرانی و خارجی

Sun, 18 May 2025 02:47:00 +0330

لیست آیکون های شبکه اجتماعی با پسوند PNG و SVG

تلگرام (Telegram)
واتس‌اپ (WhatsApp)
ایتا (Eitaa)
آپارات (Aparat)
آی‌فیلو (iFilo)
روبیکا (Rubika)
سروش‌پلاس (Splus)
آی‌گپ (iGap)
گپ (Gap)
بله (Bale)

کد html

کدهای کاربردی

نحوه طراحی PWA به صورت اینلاین بدون نیاز به فایل Manifest.js و نصب اپلیکیشن برای سایت

Tue, 29 Apr 2025 02:49:00 +0330

اگر می‌خواهید یک اپلیکیشن وب پیشرفته (PWA) بدون استفاده از فایل جداگانه manifest.json طراحی کنید، می‌توانید اطلاعات مانیفست را به‌صورت اینلاین در HTML قرار داده و آن را در جاوا اسکریپت پردازش کنید.

✅ مراحل کلی

1️⃣ اضافه کردن مانیفست اینلاین در HTML در کدهای قالب

2️⃣ رفتن به قسمت قالب > تنظیمات قالب

3️⃣ ست کردن اسم اپلیکیشن و لوگو و دیگر تنظیمات اپ

4️⃣ باز کردن سایت در مرورگر گوشی و نصب اپلیکیشن

5️⃣ تست اپلیکیشن و بررسی عملکرد PWA

🔹 مرحله 1 اضافه کردن مانیفست اینلاین در HTML




appInstalled3

🔹 مرحله 2 اضافه کردن کد به قسمت HEAD ویرایش قالب.

🔹 مرحله 3 کپی کدهای زیر در نوت پد و تغییر ادرس logo فعلی در کد با لوگو سایت خود و ذخیره با نام service-worker.js

و در نهایت آپلود فایل ذخیره شده در رزاپ و اضافه کردن به کد بالا به جای service-worker.js فعلی

const CACHE_NAME = 'pwa-rozblog-v1';
const REQUIRED_FILES = [
  '/',
  'https://www.rozblog.com/theme/rozblog_v6/img/logo.png'
];
// نصب Service Worker و ذخیره فایل‌های ضروری در Cache
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      console.log('Caching required files...');
      return cache.addAll(REQUIRED_FILES);
    })
  );
});

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);

  // فقط فایل‌های استاتیک را کش کن، نه صفحات HTML
  if (
    url.pathname.endsWith('.jpg') ||
    url.pathname.endsWith('.png') ||
    url.pathname.endsWith('.webp') ||
    url.pathname.endsWith('.css') ||
    url.pathname.endsWith('.js')
  ) {
    event.respondWith(
      caches.match(event.request).then((response) => {
        if (response) {
          return response;
        }
        return fetch(event.request).then((response) => {
          if (!response || response.status !== 200 || response.type !== 'basic') {
            return response;
          }
          const responseToCache = response.clone();
          caches.open(CACHE_NAME).then((cache) => {
            cache.put(event.request, responseToCache);
          });
          return response;
        });
      })
    );
  } else {
    // برای درخواست‌های دیگر، آن‌ها را مستقیماً از شبکه دریافت کن
    event.respondWith(fetch(event.request));
  }
});

self.addEventListener('activate', (event) => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

✅ این روش مانیفست را مستقیم درون HTML اضافه می‌کند، بدون نیاز به فایل جداگانه. ✅ مرورگر این داده را به‌عنوان manifest شناسایی کرده و قابلیت نصب PWA را فراهم می‌کند.

اضافه کردن دکمه جدا برای نصب اپلیکیشن و حذف ان در نسخه اپلیکیشن

کد html

نصب اپلیکیشن

let deferredPrompt_Menu;

window.addEventListener('beforeinstallprompt', (event) => {
    event.preventDefault(); // جلوگیری از نمایش خودکار پیام نصب
    deferredPrompt_Menu = event; // ذخیره درخواست نصب برای دکمه‌ی منو
    document.getElementById('installPWA_Menu').style.display = 'block'; // نمایش دکمه
});

document.getElementById('installPWA_Menu').addEventListener('click', (event) => {
    event.preventDefault(); // جلوگیری از تغییر مسیر لینک
    if (deferredPrompt_Menu) {
        deferredPrompt_Menu.prompt(); // نمایش پنجره نصب PWA
        deferredPrompt_Menu.userChoice.then((choiceResult) => {
            if (choiceResult.outcome === 'accepted') {
                console.log('کاربر PWA را نصب کرد (منو).');
            } else {
                console.log('کاربر نصب PWA را رد کرد (منو).');
            }
            deferredPrompt_Menu = null;
        });
    }
});


function isPWAInstalled() {
    return (window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone);
}

document.addEventListener('DOMContentLoaded', () => {
    const installButton = document.getElementById('installPWA_Menu');

    if (isPWAInstalled()) {
        installButton.style.display = 'none';
    }
});

کدهای کاربردی

ایجاد انیمیشن فایروورک (فشفشه و بمب ذرات انفجاری) با HTML5 Canvas و JavaScript

Sat, 22 Feb 2025 23:21:00 +0330

اگر به دنبال ایجاد یک انیمیشن زیبا و جذاب فایروورک برای وب‌سایت خود هستید، استفاده از HTML5 Canvas و JavaScript یک راه حل مناسب است. در این کد، ما یک انیمیشن فایروورک پویا و پر رنگ طراحی کرده‌ایم که به صورت تصادفی ذرات رنگی را در تمامی صفحه نمایش می‌دهد.

این انیمیشن شامل تنظیماتی مثل سرعت ذرات، شعاع آن‌ها، و رنگ‌های مختلف است که به شما اجازه می‌دهد تا انیمیشن را به دلخواه خود شخصی‌سازی کنید. علاوه بر این، کاربران می‌توانند با کلیک روی صفحه، فایروورک‌های جدیدی را ایجاد کنند.

کد ارائه شده بهینه‌سازی شده است و شامل توابعی برای مدیریت اندازه صفحه، ایجاد ذرات با رنگ‌های مختلف، و حذف ذرات بعد از رسیدن به انتهای صفحه است. با استفاده از این کد، می‌توانید یک تجربه بصری جذاب و تعاملی برای کاربران وب‌سایت خود ایجاد کنید.

ویژگی‌های کد:

پر رنگ بودن: هر ذره فایروورک رنگ تصادفی متفاوتی دارد.
تعامل کاربری: کاربران می‌توانند با کلیک روی canvas، فایروورک‌های جدیدی را ایجاد کنند.
پشتیبانی از اندازه‌گیری دینامیک: انیمیشن به صورت خودکار به اندازه صفحه مرورگر سازگار می‌شود.
سازگاری با مرورگرهای مختلف: استفاده از requestAnimationFrame برای اطمینان از عملکرد بهینه در تمام مرورگرهای مدرن.

با استفاده از این کد، می‌توانید وب‌سایت خود را با یک انیمیشن جذاب و پویا تزئین کنید که توجه کاربران را به خود جلب می‌کند.

دموی این کد

کد

کدهای کاربردی

کد استیکی کردن هدر با جاوا اسکریپت و css

Sun, 09 Feb 2025 02:00:00 +0330

امروزه طراحی وبسایت‌ها به‌گونه‌ای است که تجربه کاربری بهبود یابد و کاربران به راحتی به بخش‌های مختلف سایت دسترسی داشته باشند. یکی از عناصر مهم در طراحی وبسایت، منوی ناوبری است که می‌تواند به کاربران کمک کند تا به سرعت به بخش‌های مختلف سایت دسترسی پیدا کنند. یکی از روش‌های محبوب برای بهبود تجربه کاربری، استفاده از منوی استیکی است که همیشه در بالای صفحه باقی می‌ماند. در این مقاله، به نحوه‌ی استفاده از جاوااسکریپت و CSS برای ایجاد منوی استیکی که بر اساس اسکرول کاربران مخفی و ظاهر می‌شود، می‌پردازیم.

برای شروع، نیاز به دو عنصر اصلی داریم: یک منوی اصلی که به صورت ثابت در بالای صفحه قرار می‌گیرد و یک منوی استیکی که در هنگام اسکرول به پایین نمایش داده می‌شود. با استفاده از جاوااسکریپت خالص، می‌توانیم رفتار منوها را بر اساس موقعیت اسکرول تنظیم کنیم.

دمو

کد




    
    
    Document
    


    
        منوی اصلی
    
    
        
        محتوای سایت اینجاست...

کدهای کاربردی

ابزار فشرده‌سازی CSS بهینه‌سازی کدهای CSS با حذف فاصله‌ها، کامنت‌ها و کاراکترهای غیرضروری

Mon, 09 Sep 2024 07:40:00 +0330

ابزار فشرده سازی CSS یک ابزار آنلاین قدرتمند است که به شما کمک می کند تا کدهای CSS خود را بهینه سازی و فشرده کنید. این ابزار با حذف فاصله های اضافی، کامنت ها و کاراکترهای غیرضروری، حجم فایل های CSS شما را کاهش می دهد و باعث افزایش سرعت بارگذاری صفحات وب می شود. در ادامه به معرفی قابلیت ها و مزایای این ابزار می پردازیم.

قابلیت های ابزار فشرده سازی CSS

حذف فاصله های بعد از :: این ابزار به طور خودکار فاصله های اضافی بعد از کاراکتر : را حذف می کند. این کار باعث کاهش حجم فایل و بهبود خوانایی کد می شود.
حذف آخرین ; در هر کلاس یا آیدی: در بسیاری از موارد، آخرین ; در هر کلاس یا آیدی نیازی به وجود ندارد. این ابزار به طور خودکار این کاراکترها را حذف می کند تا حجم فایل کاهش یابد.
حذف کامنت های CSS: کامنت ها در کدهای CSS برای توضیحات و مستندسازی استفاده می شوند، اما در فایل نهایی نیازی به آن ها نیست. این ابزار تمامی کامنت ها را حذف می کند تا حجم فایل کاهش یابد.

مزایای استفاده از ابزار فشرده سازی CSS

افزایش سرعت بارگذاری صفحات وب: با کاهش حجم فایل های CSS، سرعت بارگذاری صفحات وب به طور قابل توجهی افزایش می یابد. این کار باعث بهبود تجربه کاربری و کاهش نرخ پرش کاربران می شود.
بهبود سئو: سرعت بارگذاری صفحات یکی از عوامل مهم در رتبه بندی گوگل است. با استفاده از این ابزار و بهینه سازی فایل های CSS، می توانید رتبه سایت خود را در نتایج جستجوی گوگل بهبود دهید.
کاهش مصرف پهنای باند: با کاهش حجم فایل های CSS، مصرف پهنای باند سرور کاهش می یابد. این کار می تواند هزینه های میزبانی وب را کاهش دهد و عملکرد سرور را بهبود بخشد.

مثال عملی

در اینجا یک مثال عملی از استفاده از ابزار فشرده سازی CSS آورده شده است. فرض کنید کد CSS اولیه شما به این شکل باشد:

/* کامنت نمونه */
body {
    background-color: #fff; /* رنگ پس زمینه */
    margin: 0; 
    padding: 0; 
}

h1 {
    color: #333; 
    font-size: 24px; 
}

پس از فشرده سازی، کد به این شکل تبدیل می شود:

body{background-color:#fff;margin:0;padding:0}h1{color:#333;font-size:24px}

نتیجه فشرده سازی

حجم کد اصلی: 123 بایت
حجم کد فشرده شده: 78 بایت
میزان کاهش حجم: 45 بایت

اهمیت فشرده سازی CSS در بهبود عملکرد وب سایت ها

مقدمه

در دنیای امروز، سرعت بارگذاری صفحات وب یکی از عوامل کلیدی در جذب و نگه داشتن کاربران است. یکی از روش های موثر برای بهبود سرعت بارگذاری صفحات، فشرده سازی فایل های CSS است. در این مقاله به بررسی اهمیت فشرده سازی CSS و تاثیر آن بر عملکرد وب سایت ها می پردازیم.

فشرده سازی CSS چیست؟

فشرده سازی CSS فرآیندی است که در آن کدهای CSS بهینه سازی و کوچک سازی می شوند. این فرآیند شامل حذف فاصله های اضافی، کامنت ها و کاراکترهای غیرضروری است. هدف از فشرده سازی CSS کاهش حجم فایل ها و افزایش سرعت بارگذاری صفحات وب است.

مزایای فشرده سازی CSS

افزایش سرعت بارگذاری صفحات: یکی از مهم ترین مزایای فشرده سازی CSS، افزایش سرعت بارگذاری صفحات وب است. با کاهش حجم فایل های CSS، زمان بارگذاری صفحات کاهش می یابد و کاربران تجربه بهتری از وب سایت خواهند داشت.
بهبود سئو: سرعت بارگذاری صفحات یکی از عوامل مهم در رتبه بندی گوگل است. با فشرده سازی CSS و بهینه سازی فایل ها، می توانید رتبه سایت خود را در نتایج جستجوی گوگل بهبود دهید.
کاهش مصرف پهنای باند: با کاهش حجم فایل های CSS، مصرف پهنای باند سرور کاهش می یابد. این کار می تواند هزینه های میزبانی وب را کاهش دهد و عملکرد سرور را بهبود بخشد.
بهبود تجربه کاربری: کاربران انتظار دارند که صفحات وب به سرعت بارگذاری شوند. با فشرده سازی CSS و افزایش سرعت بارگذاری صفحات، می توانید تجربه کاربری بهتری ارائه دهید و نرخ پرش کاربران را کاهش دهید.

چگونه CSS را فشرده کنیم؟

برای فشرده سازی CSS می توانید از ابزارهای آنلاین و آفلاین مختلفی استفاده کنید. یکی از ابزارهای آنلاین محبوب، ابزار فشرده سازی CSS است که به شما امکان می دهد تا کدهای CSS خود را به سرعت و به راحتی فشرده کنید. این ابزار با حذف فاصله های اضافی، کامنت ها و کاراکترهای غیرضروری، حجم فایل های CSS شما را کاهش می دهد.

نتیجه گیری

فشرده سازی CSS یکی از روش های موثر برای بهبود سرعت بارگذاری صفحات وب و بهبود عملکرد وب سایت ها است. با استفاده از ابزارهای فشرده سازی CSS و بهینه سازی فایل ها، می توانید تجربه کاربری بهتری ارائه دهید و رتبه سایت خود را در نتایج جستجوی گوگل بهبود دهید. بنابراین، توصیه می شود که همیشه فایل های CSS خود را فشرده کنید تا از مزایای آن بهره مند شوید.

کدهای کاربردی

امکان ایجکس مشاهده نتایج (پست های) بیشتر و طریقه استفاده

Sun, 01 Sep 2024 21:03:00 +0330

با این امکان، کاربران به جای کلیک کردن بر روی صفحات 1، 2، 3 و … و انتظار برای بارگذاری مجدد کل صفحه، می‌توانند به راحتی مطالب صفحات دیگر را به صورت ایجکس در زیر همان مطالب بارگذاری و مشاهده کنند. این کار باعث می‌شود کاربران بتوانند به سرعت به محتوای مورد نظر خود دسترسی پیدا کنند.

مزایای استفاده از ایجکس

افزایش سرعت بارگذاری: با استفاده از ایجکس، تنها محتوای جدید بارگذاری می‌شود و نیازی به بارگذاری مجدد کل صفحه نیست. این کار باعث کاهش زمان بارگذاری و افزایش سرعت سایت می‌شود.
بهبود تجربه کاربری: کاربران می‌توانند به راحتی و بدون وقفه به محتوای صفحات دیگر دسترسی پیدا کنند. این ویژگی به خصوص برای سایت‌هایی با محتوای زیاد و صفحات متعدد بسیار مفید است.
کاهش بار سرور: با استفاده از ایجکس، تنها درخواست‌های ضروری به سرور ارسال می‌شود و این کار باعث کاهش بار سرور و بهبود عملکرد سایت می‌شود.
نمایش پویا و جذاب: با بارگذاری پویا و بدون رفرش، سایت شما به نظر مدرن‌تر و جذاب‌تر می‌آید و کاربران تجربه‌ای لذت‌بخش‌تر خواهند داشت.

این امکان شامل تنظیماتی است که با فعال کردن آن، به طور خودکار کدهای مربوطه به قالب اضافه می‌شود. تنظیمات این قسمت شامل موارد زیر است:

صفحه‌بندی صفحه اول
صفحه‌بندی موضوعات
صفحه بندی موضوعات
صفحه بندی جستجو (در صورت فعال نمودن از تنظیمات)

برای فعال نمودن این موارد به تنظیمات سایت مراجعه کنید

طرز استفاده از سیستم برای شخصی سازی

برای اضافه کردن این سیستم کافیست مراحل زیر را انجام دهید

1 - افزودن کلاس rb_pl_ajax به والد تگ پست ها

2 - افزودن کد نمایش بیشتر بعد از همچنین میتوانید این تگ را بعد از قرار دهید



    

نمایش مطالب بیشتر

دموی سیستم

کدهای کاربردی

تگ های ورود سریع و اموزش استفاده از آن

Sat, 31 Aug 2024 20:16:00 +0330

برای استفاده از تگ کافیست تگ های زیر را در بلاک مورد نظر قاالب خود قرار دهید





[Login_Form]

و برای استفاده به صورت پنجره مدال یا بازشونده روی صفحه میتوانید از کد زیر استفاده کنید







[Login_Form]

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

ورود/عضویت

کد برای اضافه کردن دکمه "حساب کاربری ندارید ؟ "

کدهای کاربردی