شرح طريقة تغير شكل الاقتباس بشكل جميل فى مدونات بلوجر

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

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

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

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

تنفيذ الطريقة : 
 1- أفتح تصميم >> تحرير html 

تصميم تحرير html

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

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

الخطوة رقم 3 لي بلون اخضر ما تعديل فيها راح يكون -- بدنا بدل كل هل شياء بشيء واحد ولي هو بلونالبرتقالي


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

post blockquote

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

.post-body blockquote

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

.post blockquote p{

margin:.5em 0

}

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

هذا ما نفوم بتعديله

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

body {

اضيف الكود لي بناسبك تحتها مباشره


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/AVvXsEjRDbh7AtM2eRvi6D5KW45ANh9iBOyDZMDKpGZ0SenHoFxwenCAWQVTl4cXp4R4B5zbjFEARgQtrmZYv2zVKTxKMHHZiWo0XRotULxYoBK8IAqp9wLh_HCoONuXxW_r3N3PqwuvIcFBYHI/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/AVvXsEhEzNvmc_FhwHAR7HBWAicL4oiOnDTUruSArELveuDM6bFaEkbMox2PjF1S-53ZJaXv-DpHEcJfUHI3UyS1P2ppBNlvA0-0SD1XHqiqQZFJbdc0YJhwrYimgGE-dTMVxTtkdK9WIx0TrvE/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding-top:10px; }

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

اداة الاقتبا

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


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