طريقة أضافة اكواد html الى المواضيع بشكل جميل - طريقة تغير شكل الاقتباس فى مدونات بلوجر

طريقة أضافة اكواد html الى المواضيع بشكل جميل - طريقة تغير شكل الاقتباس فى مدونات بلوجر

السلام عليكم ورحمة الله وبركاته

اليوم سوف نتناول شرح جديد لموضوع مفيد وجميل

طريقة اضافة اكواد ال thml الى مدونات بلوجر بشكل جميل ومنظم
غالبا ما نريد أضافة كود html الى المواضيع ولاكن لا تظهر بشكل منظم
مثال على المشكلة

طريقة أضافة اكواد html الى المواضيع بشكل جميل - طريقة تغير شكل الاقتباس فى مدونات بلوجر

تنفيذ الطريقة :


 1- أفتح تصميم >> تحرير html

تصميم تحرير html

 2- علم على مربع توسيع قوالب عناصر واجهة المستخدم

توسيع قوالب عناصر واجهة المستخدم

3-ابحث عن الكود التالى 

post blockquote

 أذا لم تجده أبحث عن هذا 

.post-body blockquote

 قد يكون شبيه بهذا الكود فى قالبك 

.post blockquote p{

margin:.5em 0

}

 المهم انك سوف تجد الكود و بعده قوسين بينهم لغة css الصق مكانه الكود الذى سوف تختاره

4-انسخ الكود الذى الذى تريده من الاشكال الـ5 الموجودة فى الاسفل والصقه مكان الكود الذى وجدته  .

• الشكل رقم 1

تغير الاقتباس فى بلوجر الشكل رقم 1

الكود الخاص به

blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }

• الشكل رقم 2

تغير الاقتباس فى بلوجر الشكل رقم 2

الكود الخاص به 

blockquote { margin: 1em 3em; color: #999; border-left: 2px solid #999; padding-left: 1em; }

•  الشكل رقم 3

تغير الاقتباس فى بلوجر الشكل رقم 3

 الكود الخاص به

blockquote { background-color: #666; color:#fff; padding: 15px; margin: 1em 40px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 8px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; }

•  الشكل رقم 4

تغير الاقتباس فى بلوجر الشكل رقم 4

الكود الخاص به

.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF ; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } .post blockquote p { margin: 0; padding-top:10px; }

•  الشكل رقم 5

تغير الاقتباس فى بلوجر الشكل رقم 5

 الكود الخاص به 

.post blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhItp_JkEGQF_0C_6_YoC1vOznr2TAOOjh7xlW1lUC72I0NKf0Y06PHjrKR3UZFElW5n_YrCIAy9-Qy1JlK8ZgRRfBkUQQr3v4azOoOzA76jJMC-jGeGns0PETCFoFnj3etYqoElNGxeIY/s1600/BLOCK1-TOP.gif) no-repeat top; font: bold italic 1em Helvetica, verdana; color : #000; } .post blockquote div{ background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip0d9_ZufJCsYdXpBgT-6uX1y7cg8QmHia5FnzFzpRfmDHapNX3JcYDcPRXXp-zsngl1XsXMEyDr7NU_OrUgV3naz5x9ek2ivUzrcbEo_FpVxr-BQKk2RpfUXCFh4jr_Z6f_Ck0dljPeY/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding-top:10px; }

 5- بعد لصق الكود مكان الكود الذى وجدته اذهب الى نشر وضع كود html فى رسالة جديدة ثم حدد بالماوس على الكود واضغط على علامة اداة الاقتباس كما موضح فى الصور وقم بالمعاينة .

اداة الاقتبا

مبروك الاضافة.
 و اى مشكلة يرجى ابلاغى بها عن طريق التعليق على الموضوع.