قالب بلوجر خطوة خطوة(تنسيق css):

لغة السي أس أس لغة تنسيقية، أي أن دورها في الصفحات الموجودة على شبكة الانترنت يتمثل في التنسيق واظهار المحتوي بشكل جميل ومبهرج(ههه).

لا يحتاج النبوغ في هذه اللغة لجهد كبير لقلة قواعدها وسهولة استيعابها عندنا نحن البشر. لكن النتائج التي يمكن أن يقدمها كل فرد منا تختلف من شخص لآخر. فإتقانك لهذه اللغة ومعرفتك لقواعدها لا يعني أن صفحاتك ستكون جميلة في أعين الآخرين (ربما لدوقك الفاسد أو أنك مميز عن الآخرين). لذلك نجد أن المبدعين في مثل هذا الصنف من اللغات جلهم مصممون.

تنسيق قالبنا: 

في الأسطر الآتية سنقوم بتنسيق قالبنا (قالب برموج). وللعلم هذا القالب ثابت (أي أن حجم عناصره لا ولن يتغير بتغير أبعاد النافدة التي تحتويه).

*{
    margin: 0;
    padding: 0;
}
html{
    direction: rtl;
}

body{
    margin: 0;
    padding: 0;
    background: url('pixels.png') repeat #F7941E;   
}

#page-wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#outer-wrapper{
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}

/*header styles*/
#header{
    display: none
}

#crosscolPages{
    margin: 0;
    padding: 0;
    background: url('برموج.png');
    height: 280px;
}

#crosscolPages ul{
    list-style: none;
    margin: 0;
    padding: 0;
    width: 121px;
    position: relative;
    right: 839px;
    border-radius: 0 0 10px 10px;
    background: #231F30;
    overflow: hidden;
}

#crosscolPages li{
    margin: 0;
    padding: 0;
    float: right;
}

#crosscolPages li a{
    display: block;
    margin: 0;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    color: #FFFFFF;
    font-family: fantasy;
}

#crosscolPages li a:hover{
    color: #F7941E;
}

/* navigation bar */
#crosscolLabels{
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-top: solid 1px #231F20;
}

#crosscolLabels ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

#crosscolLabels li{
    float: right;
    /*background:#231F20;*/
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

#crosscolLabels p{
    margin: 0;
    padding: 0;
    color: #F7941E;
    padding: 5px 10px 5px 10px;
    font-family: fantasy;
    background:#231F20;
}
#crosscolLabels li a{
    display: block;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    color: #FFFFFF;
    font-family: sans-serif;
    font-size: 100%;
    background:#231F20;
}

#crosscolLabels li a:hover{
    background: none;
    color: #231F20;
    font-family: fantasy;
    
}

#line-under-header{
    height: 16px;
    background: #231F20;
    width: 100%;
    z-index: -1;
    position: absolute;
    top: 265px;
}
#line-under-footer{
    height: 75px;
    background: #231F20;
    width: 100%;
    z-index: -1;
    margin-top: -75px;
    padding: 0;
}

/*========= التنسيقات الخاصةب الجسم الرئيسي الذي يحتوي الرسائل وغيرها من المكونات ====*/
#main-wrapper{
    width: 65%;
    float: right;
    margin-left: 10px;
    margin-top: 20px;
    background: #231F20;
    border-radius: 20px 20px 0 0;
    
}

/*======= النتسيقات الخاصة بالقائمة الجانبية =============================*/
#sidebar-wrapper{
    float:right;
    background: #231F20;
    margin-top: -30px;
    width: 30%;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
    padding-bottom: 5px;
}

#sidebar-wrapper #search-bar{
    width: 90%;
    margin: auto;
}

#sidebar-wrapper #search-bar .search-box{
    width: 84.9%;
}

#sidebar-wrapper #most-readed-posts{
    width: 100%;
    margin: auto;
    text-align: center;
}

#sidebar-wrapper #most-readed-posts h2{
    font-size: 100%;
}
#sidebar-wrapper #most-readed-posts .most-readed-titles a{
    color: #F7941E;
    text-decoration: none;
    display: block;
    padding: 10px 0 10px 0;
}

#sidebar-wrapper #most-readed-posts .most-readed-titles a:hover{
    background: #F7941E;
    color: #231F20;
}

/*======== التنسيقات الخاصة بالرسائل=================*/

.posts{
    width: 96%;
    margin: auto;
    margin-top: 10px;
    background: #F7941E;
    border-radius: 10px;
    overflow: hidden;
    border: 4px solid #F7941E;
}

.posts .post-header{
    background: #F15A29;
    overflow: hidden;
}

.posts .post-header ul{
    list-style: none;
    overflow: hidden;
}

.posts .post-header ul li{
    float: right;
}

.posts .post-header h2{
    font-family: "Courier New";
    clear: both;
    margin: 0;
    margin-left: 40px;
    display: inline;
    
}

.posts .post-header h2 a{
    text-decoration: none;
    color: inherit;
    
}
.posts .post-header h2 a:hover{
    color: white;
    
}
.posts .post-header .post-date{
    background: #F7941E;
    margin: 0;
    border-radius: 0 0 10px 10px;
    padding: 5px;
    margin-bottom: 5px;
    box-shadow: 0px 0px 2px 3px #333;
    
}

.post-body{
    background: white;
    padding: 5px;
    font-family: arial, sans-serif;
    font-size: 24px;
    line-height: 1.5;
}

/*======== التنسيقات الخاصة بالذي ===========*/
#footer{
    clear: both;
    background: #231F20;
    overflow:hidden;
}
#footer #copyright{
    float: right;
    width: 65%;
    text-align: center;
    margin-top: 30px;
    font-size: 120%;
    color: #FFF;
}
#footer #share-blog{
    overflow:hidden;
    float: left;
    width: 35%;
}
#footer ul{
    list-style: none;
}

#footer ul li{
    float: right;
}
#footer #share-blog ul li a{
    display: block;
    margin: 5px;
    margin-top: 10px;
    border-radius: 10px;
}
#footer #share-blog ul li a img{
    background: transparent;
    width: 65px;
    height: 53px;
    
}

من فضلك شارك هذا الموضوع اذا اعجبك

ضع تعليقا أخي الكريم