اضافة صناديق بأشكال زجاجيه أحترافيه بتقنية CSS3 :
جئتكم اليوم بصناديق أحترافيه بتقنية CSS3 وهي حقاَ جميلة وبشكل جذاب , يمكن اضافتها داخل المشكارة او خاجرها او في التخطيط او اي مكان يتقبل لغة html الصناديق تصميمها بسيط وغير معقد ولذالك هي جميلة في رائي.
مميزاتها :
7 الوان للصناديق
تم أضافة الخط الكوفي لها
أشكال زجاجيه وجميلة
خفيفة التصفح ولا تؤثر في سرعة المدونة
طريقة التركيب :
اذهب للقالب وابحث عن هذا الكود ]]></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 وليس تأليف :
احمر :
صورة :
|
صندوق احمر css3 |
الكود :
<holoblogger id='red'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger>
اسود :
صورة :
|
صندوق اسود css3 |
الكود :
<holoblogger id='Black'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger>
ازرق :
صورة :
|
صندوق ازرق css3 |
الكود :
<holoblogger id='Blue'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger>
اخضر :
صورة :
|
صندوق أخضر css3 |
الكود :
<holoblogger id='Green'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger>
بنفسجي :
صورة :
|
صندوق بنفسجي css3 |
الكود :
<holoblogger id='Purple'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger>
رصاصي :
صورة :
|
صندوق رصاصي css3 |
الكود :
<holoblogger id='Gray'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger>
برتقالي :
صورة :
|
صندوق برتقالي css3 |
الكود :
<holoblogger id='Orange'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger>
من تصميم حلول بلوجر
تعليقات: (0) (يمكنك التعليق برابط صورة او فيديو) إضافة تعليق