صناديق CSS مميزة لتنسيق التدوينة

بسم الله و الحمد لله و الصلاة و السلام على خير خلق الله محمد الأمين و على آله و صحبه أجمعين و من تبعهم إلى يوم الدين.

إخواني الكرام، السلام عليكم و رحمة الله.

في هذه الأيام أقوم بتطوير للمدونة من ناحية القالب و الإضافات المميزة التي تتلائم معه .

في هده التدوينة أقدم لكم كود صناديق CSS لتنسيق التدوينة

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

لمشاهده مثال يمكنكم زيارة الصفحة من هنا

.p-con ul li { padding: 2px 0px 2px 15px; list-style-type: none; background: url(images/p-con-li.png) no-repeat left top; font-size: 12px; line-height: 15px; color: #63565f; }

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

قبل أن تقوم بأي تعديل على القالب قم بأخد نسخة إحطياطية

لتحميل الملف من على سيرفر الميديافير : www.mediafier.com

لا أبيح ولا أسامح كل من يزيل حقوق التكويد ومن يفعل ذلك فالله حسبه. وأبرئ ذمتي من كل استخدام للكود فيما لا يرضي الله

مارأيكم بها؟

الأن الى كيفية إضافته الى المدونة
ادا كنت تستخدم بلوجر فادهب الى قالب --- تحرير HTML --- توسيع قوالب عناصر واجهة المستخدم 

قبل أن تقوم بأي تعديل على القالب قم بأخد نسخة إحطياطية
إبحث عن

]]></b:skin>

و قبلهه قم بتسخ الكود التالي:

/*------Anass Blog Box------------------------------------------------------*/
/*------code by Anass-Q @ http://anass-blog.blogspot.com/ ------------------*/
/*------copyright 2011-2012 ------------------------------------------------*/
/*------Anass Blog Box------------------------------------------------------*/
/* code
------------------------------------------------*/

.anasscode {
   clear: both;
    padding: 3px 2px;
    background: #FEF9DF url(http://i1006.photobucket.com/albums/af183/ThunderClap4th/code-1.png) no-repeat 1% 10% ;
    border: 1px dotted #aaa;
    color: #36c;
    word-wrap: break-word;
    font-family: tahoma;
    direction:ltr;
    text-align: justify;
    font-size:11px;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    margin-right: 2px;
    }

.anasscode:before {
   content: "code :";
    display: block;
    clear: both;
    font-weight: bold;
    color: #c00;
    margin: 2px;
    margin-left: 22px;
     }

/*-------------------------------------------*/
/*-notes------------------------------------------*/
.notes {
    padding: 5px 3px;
    margin: auto;
    margin-bottom: 25px;
    text-align: justify;
    font-size:11px;
    font-family:tahoma;
    line-height:1.75em;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #eeeeee;
    background: #FFFFfC url(http://i1006.photobucket.com/albums/af183/ThunderClap4th/notice.png) no-repeat 99% 20%;
    color: #333;
    text-shadow:0 1px 0 #FFFFFF;
}
.notes:before {
   content: "ملاحظة :";
    display: block;
    clear: both;
    font-weight: bold;
    color: #c00;
    margin: 2px;
    margin-right: 21px;
}
/*-------------------------------------------*/
/*-Alert--------------------------------------------*/
.alert {
    padding: 5px 3px;
    margin: auto;
    margin-bottom: 25px;
    border: 1px solid #eeeeee;
    text-align: justify;
    font-family:tahoma;
    font-size:11px;
    line-height:1.75em;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: #FFD8D8 url(http://i1006.photobucket.com/albums/af183/ThunderClap4th/warning.png) no-repeat 99% 20%;
    color: #333;
    text-shadow:0 1px 0 #FFFFFF;
}
.alert:before {
   content: "تحذير :";
    display: block;
    clear: both;
    font-weight: bold;
    color: #c00;
    margin: 2px;
    margin-right: 21px;
}
/*-------------------------------------------*/
/*---download----------------------------------------*/
.download {
    text-align: justify;
    font-size:11px;
    font-family:tahoma;
    line-height:1.75em;
    padding: 5px 3px;
    margin: auto;
    margin-bottom: 25px;
    border: 1px solid #eeeeee;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: #f3f3f3 url(http://i1006.photobucket.com/albums/af183/ThunderClap4th/download.png) no-repeat 99% 12%;
    color: #333;
    text-shadow:0 1px 0 #FFFFFF;
}
.download a{
  color: #1982D1 !important;
  text-decoration: none !important;
}
.download a:hover{
  text-decoration: underline !important;
}


.download:before {
   content: "تحميل :";
    display: block;
    clear: both;
    font-weight: bold;
    color: #c00;
    margin: 2px;
    margin-right: 21px;
}
/*-------------------------------------------*/
/*---copyright----------------------------------------*/
.mycopyright {
     padding: 5px 3px;
    margin: auto;
    margin-bottom: 25px;
    border: 1px solid #eeeeee;
    text-align: center;
    font-size:12px;
    font-family:tahoma;
    font-weight: bold;
    line-height:1.75em;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: #FF8F8F;
    color: #fff;
    text-shadow:0 1px 0 #ffc;
}
/*-------------------------------------------*/
/*------Anass Blog Box------------------------------------------------------*/

أما إدا كنت تستخدم ووردبريس فقم بلصق هدا الكود في أخر ملف styles.css

و عندما نقوم بكتابة تدوينة و نريد إضافة أحد الصناديق نغير المحرر من تأليفي (بلوجر) أو مرئي (ووردبريس) و نضيف أحد الأكواد التالية حسب المراد :

<div class="anasscode">  نضع الأكواد هنا  </div>

<div class="notes"> الملاحظات </div>

<div class="alert"> التحذيرات </div>

<div class="download"> نص و رابط التحميل </div>

<div class="mycopyright"> حقوق التدوينة مثل : حقوق تعريب القالب  </div>

مكان الكتابة نضع ما نريد

أي إستفسار فهو مرحب به..

دمتم في رعاية الله
أخوكم أناس كيو