صناديق زجاجية بتقنية CSS3 ..

صناديق زجاجية بتقنية CSS3 ..

السلام عليكم ورحمة الله وبركاتة ..
حبيت أنقل لكم اكواد لصناديق زجاجية بتقنية CSS3 .. يمكن إستعمالها في المشاركات .. كملاحظات وتنبيهات أو إعلانات ..

مميزات الكود ..

• متوفر بـ 7 ألوان
• خط الملاحظة Droid arabic kufi
• شكل جذاب ومميـز ..
• خفيف عالمدونة

•  معاينــة

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

ملاحظة للإستفادة أكثر من نسخ الأكواد أنسخها من المتصفـح .. ثم ضعها بمفكرة .. ثم انسخها  من المفكرة مرة أخرى
للإستفادة وتفادي كثير من المشاكل .. 

1. إذهب إلى الإعدادات > قالب > تحرير html
2. وابحث عن ]]></b:skin> ثم الصق الكود التآلي فوقــه

/* this boxs by : http://www.7lolblogger.com  */

holoblogger {

display: block;

padding: 3px;

color: #FFF;

text-align: right;

direction: rtl;

font: 12px 'DroidKufi-Regular',tahoma,arial;

border-radius: 4px;

max-width: 800px;

margin: 5px auto;

}

@font-face {

font-family: 'DroidKufi-Regular';

src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');

src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),

url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),

url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');}

holoblogger#Blue {

background: #64AEDF url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;

border: 1px solid #4A94C5;

  background-size: cover;

}

holoblogger#red {

background: #C93E3E url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;

border: 1px solid #AA2828;

  background-size: cover;

}

holoblogger#Green {

background: #3EC99D url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;

border: 1px solid #2BA37D;

  background-size: cover;

}

holoblogger#Gray {

background: #AFAFAF url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;

border: 1px solid #999;

  background-size: cover;

}

holoblogger#Black {

background: #222 url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;

border: 1px solid #111;

  background-size: cover;

}

holoblogger#Purple {

background: #9351DB url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;

border: 1px solid #8B24C5;

  background-size: cover;

}

holoblogger#Orange {

background: #E98745 url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;

border: 1px solid #C06A2F;

  background-size: cover;

}

• اذا اردت تركيبها داخل المشاركة فقم فقط بنسخ كود الاداة التي تريد والصقها في محرر المشاركة. تأكد من وضع المشاركة على Html وليس تأليف ..

•  الأحمــر

<holoblogger id='red'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger>

• ملاحظة أسود ..

<holoblogger id='Black'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger>

• ملاحظة أزرق

<holoblogger id='Blue'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger>

• ملاحظة أخضر ..

<holoblogger id='Green'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger>

• ملاحظة بنفسجي

<holoblogger id='Purple'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger>

• ملاحظة رصاصية

<holoblogger id='Gray'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger>

• ملاحظة برتقالي

<holoblogger id='Orange'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger>

إذا أردت تغييـر الخلفية الزجاجية بشكل او نمط أخر أبحث عن ..الرابط من خلال تحرير القوالب

https://jetara.googlecode.com/svn/trunk/header-6.png

تنويه : الصناديق صممّت بواسطة المدون حلول بلوجر ..

CSS holoblogger#Orange {
background: #E98745 url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;
border: 1px solid #C06A2F;
  background-size: cover;
}