السلام عليكم ورحمة الله وبركات
في عصر السرعة والمحتوى المرئي، أصبحت قصص الويب (Web Stories) واحدة من أبرز الأدوات التي تجذب انتباه المستخدمين. يتم عرض هذه القصص بطريقة جذابة وسريعة، حيث يمكن أن تتضمن نصوصًا، صورًا، وفيديوهات، مما يجعلها وسيلة مثالية لتقديم المعلومات بشكل مشوق وسهل التفاعل. ولكن مع تزايد استخدام هذه القصص على الإنترنت، أصبحت هناك حاجة ملحة لتخصيصها بما يتناسب مع هوية الموقع أو العلامة التجارية، ويفتح هذا الباب أمام تقنيات متقدمة مثل AMP (Accelerated Mobile Pages). تتيح لك AMP تخصيص قصص الويب بشكل دقيق عبر خاصية amp-custom، التي تقدم لك مرونة كبيرة لتعديل شكل وعرض القصة، مما يعزز تجربة المستخدم ويجعلها أكثر تفاعلية وجاذبية. في هذا المقال، سنغوص في كيفية تخصيص Web Stories باستخدام amp-custom، مستعرضين أهم الأساليب والتقنيات لتحقيق أقصى استفادة من هذه الأداة.
عرض المعلومات المتعمق:
1. ما هو amp-custom؟
خاصية amp-custom هي وسيلة لتخصيص المظهر والتصميم في قصص الويب باستخدام CSS (Cascading Style Sheets) مخصص. من خلال تضمين كود CSS داخل مستند الـ HTML للـ Web Story، يمكن للمطورين التحكم في كيفية عرض المحتوى بشكل دقيق. هذه الأداة تمثل جزءاً أساسياً في بيئة AMP، مما يسمح لك بإجراء تعديلات على القصة دون التأثير على الأداء أو السرعة، وهو أمر بالغ الأهمية في عصر يتسم بالتنافس الشديد على سرعة تحميل المحتوى.
2. أساسيات تخصيص Web Story باستخدام amp-custom:
- التحكم في الألوان والتنسيقات: من خلال amp-custom، يمكنك تخصيص ألوان النصوص والخلفيات والعناصر التفاعلية في القصة. على سبيل المثال، إذا كان لديك هوية بصرية معينة للموقع أو العلامة التجارية، يمكنك تخصيص الألوان لتتوافق مع هذا الأسلوب.
- تخصيص الصور والفيديوهات: يمكن تخصيص العناصر البصرية مثل الصور والفيديوهات بحيث تظهر بشكل متناسق وجذاب. يمكنك تحديد حجم الصور أو إضافة تأثيرات عند التمرير على الصور، مما يضفي على القصة مزيدًا من التفاعلية.
- الخطوط المخصصة: من خلال amp-custom، يمكنك تضمين خطوط مخصصة تستخدمها في موقعك لخلق هوية بصرية موحدة عبر قصص الويب. الخطوط يمكن أن تؤثر بشكل كبير على تجربة القراءة، لذلك من الضروري اختيار الخطوط التي تتماشى مع هدف القصة وطابعها.
3. نصائح لتخصيص Web Story بشكل فعال:
- استخدام الحركات الانتقالية المتسقة: لتوفير تجربة سلسة للمستخدمين، من الضروري استخدام الحركات الانتقالية بين الشرائح. يمكن تحقيق ذلك باستخدام CSS للتحكم في كيفية انتقال المحتوى بين الشرائح، مثل استخدام تأثيرات التلاشي أو الانزلاق.
- إضافة تفاعل مع المستخدم: على سبيل المثال، يمكنك إضافة أزرار للتنقل بين الشرائح أو حتى إضافة روابط داخل القصة لفتح صفحات إضافية. التفاعل مع المستخدم يزيد من تفاعلهم مع القصة ويجعلهم أكثر انغماسًا في المحتوى.
- تحسين الأداء: نظرًا لأن AMP يهدف إلى تحسين سرعة تحميل الصفحات، يجب أن تكون أكواد CSS المستخدمة في amp-custom مختصرة وفعالة. التقليل من الكود الزائد سيؤدي إلى تحميل أسرع وأكثر سلاسة.
4. تخصيص النصوص والخطوط:
يمكنك تخصيص النصوص داخل Web Story باستخدام amp-custom بشكل يجعل القصة أكثر قراءة وجاذبية. من خلال تحديد أنواع وأحجام الخطوط، وألوان النصوص، يمكن أن تخلق تجربة قراءة أفضل. بالإضافة إلى ذلك، يمكن استخدام @font-face لتحميل خطوط مخصصة، مما يمنحك الحرية في استخدام أي خط يتناسب مع هوية علامتك التجارية.
5. إضافة صور وفيديوهات متحركة:
مع amp-custom، يمكن دمج الصور والفيديوهات المتحركة داخل Web Story بطريقة مبهرة، مما يعزز من الجذب البصري للقصة. على سبيل المثال، يمكنك تضمين صور متحركة (GIF) أو فيديوهات تعمل تلقائيًا أثناء التمرير، أو إضافة تأثيرات حركة عند الانتقال بين الشرائح.
6. تحسين التفاعل عبر الحواف التفاعلية:
يمكن استخدام amp-custom لخلق تفاعلات فورية مثل تأثيرات تحوم (hover effects) على الأزرار والعناصر التفاعلية. هذه الأنماط يمكن أن تزيد من تفاعل المستخدمين مع القصص وتدفعهم للمشاركة أو التفاعل مع المحتوى بشكل أكبر.
التفاصيل الصغيرة هي التي تصنع الفارق، والتفاصيل الصغيرة هي التي تجعل الأشياء كبيرة.
– جيمس كاميرون
تخصيص مثالي لقصص ويب
سابقا في مقال قصص الويب ستوري: كيفية إضافتها على مدونة بلوجر تطرقت لكود html خاص بقصص الويب و دكرت لك بعض التخصيصات سريعة ضمن html amp نفسه الان ساحاول نشر لك تخصيص لقصص ويب هذا التخصيص بوجه عام يصلح لاهم صفحات القصص يغطي تخصيص العناوين و الازرار و اساليب الانيميشن لعرض المحتوى و بعض النقاط سنتطرق لها اليوم تابع معي شرح الكود في الصندوق اسفله
معاينة- لن اطرق لجميع التخصيصات ستحتاج ان تتابع التخصيص من الموقع الرسمي التابع لجوجل AMP.dev
Tajawal يمكنك استعمال الخط الافتراضي للقصة الويب الخاصة بك او استعمال اي خط اخر تستخدمه في قالبك بلس يو اي (استعمال الكثير من الخطوط قد يسبب ضعف في الاداء لذلك لا انصحك باستعمال اكثر من نوعين من الخطوط في موقعك.
الكود مضغوط Minified CSS
amp-story-page{background:linear-gradient(360deg,#D0F0EA 0%,#92E0D3 20%,#6DB2A6 55%,#2B8578 90%,#446662 100%);color:#fff;font-family:'Tajawal',sans-serif}amp-story{font-family:'Tajawal',sans-serif;--primary-color:#92E0D3;--accent-color:#299e94;--banner-color:#446662;--text-light:#FFFFFF;--text-dark:#2E2E2E}#cover amp-story-grid-layer[template="vertical"]{background:linear-gradient(180deg,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.2) 100%)}#cover h1{font-size:clamp(2em,6vw,2.8em);color:var(--text-light);text-shadow:0 4px 6px rgba(0,0,0,0.3);margin:0.5em 0;position:relative;padding-bottom:0.3em}#cover h1::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:clamp(60px,15vw,80px);height:3px;background:var(--accent-color)}#cover p{color:rgba(255,255,255,0.9);font-size:clamp(0.9em,2vw,1em);letter-spacing:0.05em}amp-story-grid-layer h1{font-size:clamp(2em,5vw,2.4em);background:linear-gradient(-55deg,var(--primary-color),var(--accent-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0.8em 0}amp-story-grid-layer q{font-style:italic;color:var(--text-dark);padding:clamp(1em,3vw,1.2em);margin:1em auto;background:rgba(255,255,255,0.9);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.1);position:relative;border-right:4px solid var(--accent-color);display:block;max-width:90%;text-align:right;quotes:none;font-size:1em}.quote-mark{font-size:2.5em;position:relative;bottom:-0.2em;color:#ff5733}.author{display:block;margin-top:1em;font-size:0.8em;text-align:left;color:#666;padding-left:1.2em}amp-story-grid-layer[template="thirds"]{background:linear-gradient(to bottom,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.1) 100%);margin-top:-30px}amp-story-grid-layer[template="thirds"] h1{-webkit-text-fill-color:var(--text-light);text-shadow:0 2px 4px rgba(0,0,0,0.3)}amp-story-grid-layer[template="thirds"] p{vertical-align:top;margin:0;padding:0.5em 1em;color:var(--text-light);font-size:clamp(0.9em,1.8vw,1em);line-height:1.5;background:rgba(0,0,0,0.4);padding:1.5em;border-radius:12px;backdrop-filter:blur(5px);position:absolute;max-width:100%}.noedge .wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:1em;padding:1em}amp-img{filter:brightness(0.95) contrast(1.05);border-radius:12px}.noedge amp-img{overflow:hidden;transition:transform 0.3s ease;box-shadow:0 4px 12px rgba(0,0,0,0.2)}.noedge amp-img:hover{transform:scale(1.02);z-index:2}.banner-text{font-size:clamp(1.2em,3.5vw,1.6em);color:var(--text-light);background:var(--banner-color);padding:0.8em 1.5em;border-radius:30px;box-shadow:0 4px 12px rgba(0,0,0,0.3);display:inline-block;margin:0 auto;z-index:10}.banner-layer{align-content:end;padding-bottom:35px}amp-story-page-outlink a{background:var(--accent-color);color:var(--text-dark);font-weight:600;padding:1em 2em;border-radius:30px;text-decoration:none;transition:all 0.3s ease;display:inline-flex;align-items:center;gap:0.5em}amp-story-page-outlink a::before{content:"";display:inline-block;width:26px;height:26px;background-image:url('https://cdn.siwane.xyz/IMG/siwane.svg');background-size:contain;background-repeat:no-repeat}amp-story-page-outlink a:hover{background:#085471;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.3)}[animate-in]{animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@keyframes whoosh-in-right{from{transform:translateX(100%) rotate(10deg);opacity:0}to{transform:translateX(0) rotate(0);opacity:1}}@media (max-width:480px){amp-story-grid-layer[template="thirds"] p{padding:1em}.noedge .wrapper{gap:0.8em}.banner-layer{padding-bottom:25px}}.text-layer{align-items:flex-end;padding-bottom:30px}.story-text{color:var(--text-light);font-size:clamp(0.9em,1.8vw,1em);line-height:1.6;background:rgba(0,0,0,0.4);padding:1.5em;border-radius:12px;backdrop-filter:blur(5px);position:absolute;bottom:20px;right:0;max-width:80%;text-align:right;direction:rtl;margin-right:50px}
الكود مرتب Prettified CSS
body {
font-family: 'Tajawal'
}
/* Custom CSS Story */
amp-story-page {
background: linear-gradient(360deg, #D0F0EA 0%, #92E0D3 20%, #6DB2A6 55%, #2B8578 90%, #446662 100%);
color: #fff;
font-family: 'Tajawal', sans-serif
}
amp-story {
font-family: 'Tajawal', sans-serif;
--primary-color: #92E0D3;
--accent-color: #299e94;
--banner-color: #446662;
--text-light: #FFFFFF;
--text-dark: #2E2E2E
}
#cover amp-story-grid-layer[template="vertical"] {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%)
}
#cover h1 {
font-size: clamp(2em, 6vw, 2.8em);
color: var(--text-light);
text-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
margin: 0.5em 0;
position: relative;
padding-bottom: 0.3em
}
#cover h1::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: clamp(60px, 15vw, 80px);
height: 3px;
background: var(--accent-color)
}
#cover p {
color: rgba(255, 255, 255, 0.9);
font-size: clamp(0.9em, 2vw, 1em);
letter-spacing: 0.05em
}
amp-story-grid-layer h1 {
font-size: clamp(2em, 5vw, 2.4em);
background: linear-gradient(-55deg, var(--primary-color), var(--accent-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0.8em 0
}
amp-story-grid-layer q {
font-style: italic;
color: var(--text-dark);
padding: clamp(1em, 3vw, 1.2em);
margin: 1em auto;
background: rgba(255, 255, 255, 0.9);
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: relative;
border-right: 4px solid var(--accent-color);
display: block;
max-width: 90%;
text-align: right;
quotes: none;
font-size: 1em
}
.quote-mark {
font-size: 2.5em;
position: relative;
bottom: -0.2em;
color: #ff5733
}
.author {
display: block;
margin-top: 1em;
font-size: 0.8em;
text-align: left;
color: #666;
padding-left: 1.2em
}
amp-story-grid-layer[template="thirds"] {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1) 100%);
margin-top: -30px
}
amp-story-grid-layer[template="thirds"] h1 {
-webkit-text-fill-color: var(--text-light);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
}
amp-story-grid-layer[template="thirds"] p {
vertical-align: top;
margin: 0;
padding: 0.5em 1em;
color: var(--text-light);
font-size: clamp(0.9em, 1.8vw, 1em);
line-height: 1.5;
background: rgba(0, 0, 0, 0.4);
padding: 1.5em;
border-radius: 12px;
backdrop-filter: blur(5px);
position: absolute;
max-width: 100%
}
.noedge .wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1em;
padding: 1em
}
amp-img {
filter: brightness(0.95) contrast(1.05);
border-radius: 12px
}
.noedge amp-img {
overflow: hidden;
transition: transform 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2)
}
.noedge amp-img:hover {
transform: scale(1.02);
z-index: 2
}
.banner-text {
font-size: clamp(1.2em, 3.5vw, 1.6em);
color: var(--text-light);
background: var(--banner-color);
padding: 0.8em 1.5em;
border-radius: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
display: inline-block;
margin: 0 auto;
z-index: 10
}
.banner-layer {
align-content: end;
padding-bottom: 35px
}
amp-story-page-outlink a {
background: var(--accent-color);
color: var(--text-dark);
font-weight: 600;
padding: 1em 2em;
border-radius: 30px;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5em
}
amp-story-page-outlink a::before {
content: "";
display: inline-block;
width: 26px;
height: 26px;
background-image: url('https://cdn.siwane.xyz/IMG/siwane.svg');
background-size: contain;
background-repeat: no-repeat
}
amp-story-page-outlink a:hover {
background: #085471;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3)
}
[animate-in] {
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
@keyframes whoosh-in-right {
from {
transform: translateX(100%) rotate(10deg);
opacity: 0
}
to {
transform: translateX(0) rotate(0);
opacity: 1
}
}
@media (max-width:480px) {
amp-story-grid-layer[template="thirds"] p {
padding: 1em
}
.noedge .wrapper {
gap: 0.8em
}
.banner-layer {
padding-bottom: 25px
}
}
.text-layer {
align-items: flex-end;
padding-bottom: 30px
}
.story-text {
color: var(--text-light);
font-size: clamp(0.9em, 1.8vw, 1em);
line-height: 1.6;
background: rgba(0, 0, 0, 0.4);
padding: 1.5em;
border-radius: 12px;
backdrop-filter: blur(5px);
position: absolute;
bottom: 20px;
right: 0;
max-width: 80%;
text-align: right;
direction: rtl;
margin-right: 50px
}سأقدم شرحًا شاملاً لكل جزء من الكود مع توضيح المفاهيم الأساسية:
1. إعدادات عامة للصفحة (Global Styles)
body {
font-family: 'Tajawal'; /* خط عربي */
}
الهدف: تطبيق خط "تاجوال" على كل النصوص في الصفحة.
2. خلفية القصة (Story Background)
amp-story-page {
background: linear-gradient(360deg, #D0F0EA 0%, #92E0D3 20%, ...);
color: #fff;
font-family: 'Tajawal', sans-serif;
}
التدرج اللوني: خلفية متعددة الألوان من الأسفل إلى الأعلى (360 درجة).
الألوان: تبدأ من ألوان فاتحة وتنتهي بلون غامق (#446662).
3. المتغيرات المخصصة (CSS Variables)
amp-story {
--primary-color: #92E0D3; /* لون رئيسي */
--accent-color: #299e94; /* لون مميز */
--banner-color: #446662; /* لون البانر */
/* ... */
}
الاستخدام: var(--primary-color) لسهولة التعديل لاحقًا.
4. طبقة الغلاف (Cover Layer)
#cover amp-story-grid-layer[template="vertical"] {
background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 100%);
}
الهدف: طبقة شبه شفافة فوق الخلفية لإبراز النص.
5. تصميم العنوان الرئيسي (H1)
#cover h1 {
font-size: clamp(2em, 6vw, 2.8em); /* حجم متجاوب */
text-shadow: 0 4px 6px rgba(0,0,0,0.3); /* ظل للنص */
position: relative; /* لتحديد موقع العنصر الوهمي */
}
#cover h1::after {
content: '';
width: clamp(60px, 15vw, 80px); /* خط تحت العنوان */
background: var(--accent-color);
}
clamp(): يجعل العنصر متجاوبًا بين قيم محددة.
6. نص الغلاف الفرعي (Cover Paragraph)
#cover p {
color: rgba(255,255,255,0.9); /* أبيض مع شفافية 90% */
font-size: clamp(0.9em, 2vw, 1em);
}
rgba(): اللون مع مستوى شفافية (0 = شفاف، 1 = معتم).
7. عناوين الطبقات الداخلية (Grid Layer Headings)
amp-story-grid-layer h1 {
background: linear-gradient(-55deg, var(--primary-color), var(--accent-color));
-webkit-background-clip: text; /* تدرج لوني داخل النص */
-webkit-text-fill-color: transparent;
}
تأثير التدرج على النص: يجعل النص ملونًا بتدرج بدل لون ثابت.
8. تصميم الاقتباسات (Quotes)
amp-story-grid-layer q {
background: rgba(255,255,255,0.9); /* خلفية شبه شفافة */
border-right: 4px solid var(--accent-color); /* حد أيمن */
quotes: none; /* إزالة علامات الاقتباس التلقائية */
}
.quote-mark {
font-size: 2.5em; /* حجم كبير لعلامة الاقتباس */
color: #ff5733; /* لون مميز */
}
.author {
text-align: left; /* محاذاة اسم المؤلف لليسار */
}
display: block: يجعل العنصر يشغل سطرًا كاملًا.
9. طبقة الثلثين (Thirds Template)
amp-story-grid-layer[template="thirds"] {
background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, ...);
margin-top: -30px; /* رفع الطبقة لأعلى */
}
amp-story-grid-layer[template="thirds"] p {
backdrop-filter: blur(5px); /* تأثير ضبابي */
position: absolute; /* تثبيت الموضع */
}
backdrop-filter: يُستخدم لتطبيق تأثيرات على ما خلف العنصر.
10. شبكة الصور (Image Grid)
.noedge .wrapper {
display: grid; /* نظام شبكي */
grid-template-columns: repeat(2, 1fr); /* عمودين متساويين */
gap: 1em; /* فراغ بين العناصر */
}
.noedge amp-img:hover {
transform: scale(1.02); /* تكبير الصورة عند المرور */
z-index: 2; /* إظهار الصورة فوق الأخرى */
}
grid: تخطيط عصري لترتيب العناصر في صفوف وأعمدة.
11. البانر النصي (Banner)
.banner-text {
background: var(--banner-color);
border-radius: 30px; /* حواف دائرية */
box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* ظل ثلاثي الأبعاد */
}
.banner-layer {
align-content: end; /* محاذاة العناصر للأسفل */
}
12. زر الرابط الخارجي (Outlink Button)
amp-story-page-outlink a {
background: var(--accent-color);
border-radius: 30px; /* شكل دائري */
transition: all 0.3s ease; /* تأثيرات حركية */
}
amp-story-page-outlink a::before {
background-image: url('https://cdn.siwane.xyz/IMG/siwane.svg'); /* أيقونة مخصصة */
}
amp-story-page-outlink a:hover {
transform: translateY(-2px); /* حركة للأعلى عند المرور */
}
::before: يُستخدم لإضافة محتوى قبل العنصر (مثل الأيقونة).
13. الرسوم المتحركة (Animations)
@keyframes whoosh-in-right {
from { transform: translateX(100%); } /* بداية الحركة */
to { transform: translateX(0); } /* نهاية الحركة */
}
[animate-in] {
animation-timing-function: cubic-bezier(...); /* نمط الحركة */
}
translateX(): حركة أفقية.
14. التصميم المتجاوب (Responsive Design)
@media (max-width: 480px) {
.noedge .wrapper { gap: 0.8em; } /* تقليل الفراغ في الجوال */
.banner-layer { padding-bottom: 25px; }
}
@media: شرط لتطبيق التنسيقات على شاشات محددة.
15. طبقة النص السفلي (Text Layer)
.text-layer {
align-items: flex-end; /* محاذاة العناصر للأسفل */
}
.story-text {
direction: rtl; /* نص من اليمين لليسار (للعربية) */
margin-right: 50px; /* مسافة من اليمين */
}
مفاهيم أساسية في الكود
- الوحدات النسبية: (
vw,em) لتنسيقات متجاوبة. - الـ Pseudo-elements: (
::after,::before) لإضافة عناصر زخرفية. - الـ Flexbox & Grid: لتنظيم العناصر.
- الانتقالات: (
transition) لتحسين التفاعل مع المستخدم. - الـ Z-index: للتحكم في ترتيب الطبقات.
كيفية تطوير الكود
- جرّب تغيير الألوان في المتغيرات (
--primary-color). - عدّل قيمة
clamp()لترى كيف يتكيف الحجم. - أضف
animation-delayللتحكم في توقيت الحركات.
تنبيه!ضروري ان تاخد نسخة احتياطية لقالب مدونتك قبل اضافة اي تعديل ولك لاجل تفادي اي اخطاء غير متوقعة ايضا انبهك على اضافة تعليقات داخل اكواد قالبك قبل اضافة اي كود مخصص.
اضافة كود css الى قالب مدونتك
تنبيه مهم!هدا الكود موجه بشكل خاص الى قالب Plus UI 3.1.0 لا يمكن اضافته لاي قالب لا يدعم AMP بشكل عام اذا كان قالب مدونتك يدعم AMP يجب ان تكون على دراية بكيفية التعامل مع اكواد قالب مدونتك.
خياريمكنك اضافة هده التخصيصات لصفحات ويب ستوري خاصة يمكنك الرجوع لهذا المستودع SiwaneXYZ و عملى فورك للمستودع واعمل عليه براحته ستجد قصة ويب مخصصة بشكل اتيق تلبي حاجتك و ستساعدك في تنمية و تطوير مهاراتك
- فتح لوحة التحكم في بلوجر: قم بتسجيل الدخول إلى حسابك في بلوجر واذهب إلى لوحة التحكم.
- المظهر: انقر على المضهر ايقونته ()
- الدخول إلى إعدادات القالب: من قائمة القالب في لوحة التحكم، انقر على السهم بجانب "تخصيص" أختر "تعديل HTML".
- إضافة الكود: في ملف HTML للقالب، من خلال لوحة التحكم انقر على Ctrl + F ابحث عن العنصر
<style amp-custom='amp-custom'>وأضف انقر هنا لتمرير اعلى صندوق الاكواد الموجود في الصندوق اعلاه الخاص بـ CSS مباشرة بعد هذا العنصر/*<
