حصرى : تغيير شكل اقتباس بلوجر باشكال احترافية

يحتار بعض المدونين فى طريقة بسيطة وسهلة لتمييز الأكواد التى توضع فى المواضيع وغيرها ، ولكن فى الحقيقة الأمر لا يتطلب حيرة لأن منصة بلوجر توفر لنا أداة ممتازة وهى اداة الاقتباس ةهى من اهم الأدوات التى يغفل أهميتها كثير من المدونين العرب ، ولكن شكل الأداة الافتراضى فى بلوجر لا يشيع الرغبة فى الابداع ولذلك كان هذا الموضوع 

أداة الإقتباس

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

طريقة التركيب 

اذهب الى لوحة تحكم مدونتك >> ابحث عن blockquote  أو .post blockquote وقم بمسح الجزء الخاص بها

ملحوظة الكود بدايته قوس ونهايته قوس  

.post blockquote {

}

ثم بعد ذلك ابحث عن ]]></b:skin>

ضع قبلها كود الاقتباس المناسب لك 

الشـــــــــكل الأول 

كود الشكل الأول 

.post blockquote {

position: relative;

z-index: 50;

background:#fff url(https://lh4.googleusercontent.com/-AZ3EY_MY_QU/UQ8ZYU-_hXI/AAAAAAAAAeM/iHwn4pfuEJ4/s36/bq3.gif) top left repeat;

border:1px solid #999;color:#000;

display:block;

font-family:"Courier New", Courier, monospace;font-size:13px;

line-height:18px;

margin:10px 0 10px;

padding:18px 10px 17px;

overflow:auto;

max-height:250px;

}

الشــــــــكل الثانى

كود الشكل الثانى

.post blockquote {

overflow:auto;

max-height:250px;

border: 1px dashed #FFC600;

margin: 10px;

padding: 10px 10px 10px 60px;

background: #FFF8DD url(https://lh6.googleusercontent.com/-Ny881sz3L-o/UQ8ZYYtFzxI/AAAAAAAAAeQ/xrpyI6ekH88/s71/bq2.png) no-repeat;

background-position:20px 10px;}

الشــــكل الثالث

كود الشكل الثالث 

.post blockquote {

margin : 0 20px;

padding: 10px 20px 25px 20px;

background : #9FCFFF;

color : #484848;

border: 5px dashed #fff;

}

الشـــــــكل الرابع

كود الشكل الرابع

.post blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7PQa1-MCluNFVw4PkMW1RHTh3X7U9Mg9aioNjPf-6duZCw2auLWvMd1IF3SsOefifXti31b2nXMWA8XX1dcT_Kdiiwsj05sXhFUvOdup3iQiEgWA_OklI1PVpp5ALmbmaA15xtlsd2Lg/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/AVvXsEjvXaTQ-iKbDzCoH_WLMfPlGEJymLVmtSKHKOdE9RAayeoH4mIZUkO0nkJfG53v1gowoZ4s37939MOXwfYX0yxIKtrBzM3KWRdQ-18Qm2VAfEg_MdfcoPuNqtgZP6FcG-0p699IAjDkwZU/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding-top:10px; }

وانتظروا مجموعة اشكال مميزة ايضا ومختلفة قريبا ان شاء الله 

لاحظ جيدا الجزء المميز فى كل كود وغيره بما يناسبك 

وللاستفسار عن أى شىء اتركه فى تعليق