بحث

Responsive Ads Here

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

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

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

طريقة اضافة اكواد ال 
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 الى المواضيع بشكل جميل - طريقة تغير شكل الاقتباس فى مدونات بلوجر

ليست هناك تعليقات:

إرسال تعليق

√مدونةكل ما يخصك√

مَرحبًا بِجَمِيِع زُوَّاِر مُدَوَّنَةِ كُل مَا يَخُصُّك أَتَمَنَّى لَكُمْ قضَاءَ وَقْتٍ مُمْتِعٍ مَعَنا لاَ تَنْسُو مُشَارَكَةَ اْلٌمَوَاضِيع مِنْ أَجْلِ تَعْمِيمِ اْلٌفَائِدَةِ وَشُكْرًا لكُمْ