Хувцасны хэмжээ хөрвүүлэгч: Өөрийн медианд хэрхэн ашиглах вэ?

Агуулга

💡 Танилцуулга: Хэмжээ хөрвүүлэгч виджет гэж юу вэ?

Таны вэбсайт болон блогтоо хэдэн мөр код ашиглан шууд шигтгэх боломжтой, жижиг хэрэглүүр юм.

Үндсэн үүрэг: Хэрэглэгчийн сонгосон нэг улс эсвэл бүс нутгийн хэмжээг (жишээ нь, АНУ-ын размер 8) өөр бүс нутгийн хэмжээ (Жишээ нь, Европын размер 40) рүү хялбар, хурдан хөрвүүлэх.

Энэ виджет яагаад чухал вэ?

Үйлчлүүлэгчийн Туршлагыг Сайжруулна: Хэмжээ таарахгүй байх вий гэсэн айдас, эргэлзээг арилгаж, худалдан авалт хийх магадлалыг нэмэгдүүлнэ.
SEO-д Тустай “Үнэ Цэнэтэй Контент”: Хэрэглэгчийн хэрэгцээтэй хэрэгсэл (tool) байрлуулснаар хүмүүс таны хуудсанд удаан байх ба энэ нь Google-ийн хувьд таны сайтыг чанартай гэж үзэх үндэс болно.
Гар утсанд тохирсон (Responsive) Дизайн: Гар утас, таблет, компьютер гээд бүх төрлийн дэлгэц дээр төгс харагдаж, хэрэглэхэд эвтэйхэн.

🚀 Хэн, хаана ашиглах боломжтой Вэ?

Энэхүү хөрвүүлэгч нь зөвхөн худалдаа хийдэг вэбсайт биш, олон улсын мэдээлэл болон загварын ертөнцөд чухал ач холбогдолтой.

Ашиглах Судалгааны Талбар	Хэрэглээний Зорилго	SEO Гарчигт Ашиглах Үгс
Мэдээлэл/Блог Сайтууд	Гадаадаас бараа захиалах, аялах зөвлөгөө өгөх. Хэрэглэгчийг хуудсандаа удаан тогтоох.	`Хувцасны хэмжээг хөрвүүлэх хэрэгсэл`, `Америк-Европ размерын зөрүү`
Fashion/Lifestyle Нийтлэл	Гадаадын брэндүүдийн онцлог, шинэ коллекцийг танилцуулах.	`Загварлаг хувцасны размер`, `Япон-Солонгосын хувцасны хэмжээ`, `Жинсэн өмдний хэмжээг хөрвүүлэх`
Олон Улсын Худалдаа/Логистик	Импортын барааны хэмжээний стандартыг хурдан тодорхойлох.	`Олон улсын худалдааны хэмжээний стандарт`, `Барааны хэмжээний хөрвүүлэгч`
Боловсролын Платформ	Тухайн улсын хэмжээний системийн талаарх хичээл, даалгавар.	`Гадаад хэлний соёлын ялгаа`, `Ази размерын систем`

Алхам алхмаар заавар: Өөрийн сайтад виджет шигтгэх

Та доорх кодыг хуулж аваад, өөрийн Вэбсайт, Блог эсвэл CMS (Content Management System) систем дээрээ HTML эсвэл Custom Code оруулах хэсэгт нь шууд байрлуулахад л хангалттай.

Алхам 1: Виджет Кодыг Хуулах

Таны хөрвүүлэгч виджетийн Responsive буюу бүх дэлгэц дээр зөв харагдах HTML болон CSS нэгдсэн код:

<div class="converter-iframe-wrapper">
  <iframe
    src="https://mgl.tsorublog.com/wp-content/uploads/converter/index.html"
    
    /* Responsive болгох тохиргоо */
    width="100%" 
    height="550px" 
    
    frameborder="0"
    scrolling="no"
    title="Олон улсын хувцасны хэмжээ хөрвүүлэгч"
    style="border: 1px solid #007bff; border-radius: 8px; display: block;" 
  >
    Дэлгэрэнгүй Хувцасны Размер Хөрвүүлэгч
  </iframe>
</div>

<style>
.converter-iframe-wrapper {
    /* Хамгийн дээд өргөнийг тогтоосноор том дэлгэц дээр хэт томрохгүй */
    max-width: 400px; 
    width: 100%;
    margin: 0 auto; /* Төвлөрүүлэх */
    height: 550px; /* Iframe-ийн өндрийг барих */
}

.converter-iframe-wrapper iframe {
    /* Доторх Iframe гаднах 'wrapper'-аа дүүргэнэ */
    width: 100%;
    height: 100%;
}

/* Утасны дэлгэц дээр ч 400px-ийн хязгааргүй дүүргэж харагдуулах (320px-ээс бага дэлгэц) */
@media (max-width: 420px) {
    .converter-iframe-wrapper {
        max-width: 100%; /* Утасны дэлгэцний өргөнийг бүрэн дүүргэнэ */
        margin: 0;
    }
}
</style>

Алхам 2: Платформдоо Байрлуулах

Платформ	Оруулах Хэсэг	Заавар
WordPress (Gutenberg)	Custom HTML Block (Гаалийн HTML Блок)	Хуудас эсвэл нийтлэлээ засахдаа `+` товчийг дарж, “Custom HTML”-ийг сонгоод, дээрх кодыг хуулж тавина.
Blogger/Blogspot	HTML/JavaScript Widget	Layout (Хэлбэр Загвар) хэсэгт очоод, нэмэлт “HTML/JavaScript” виджетийг сонгож, кодыг оруулна.
Энгийн HTML Сайт	`<body>` таг доторх хүссэн газартаа	Хүссэн `<div>` дотроо эсвэл шууд хуудасны агуулгын хэсэгт кодыг хуулж тавина.
Elementor / Page Builders	HTML Widget	Elementor эсвэл бусад Page Builder-ийн “HTML” элементийг чирээд, кодыг дотор нь байрлуулна.