دروس Blogger

08‏/05‏/2010

لتغيير خلفية المدونة

للمشاهدة

البحث عن هدا الكود



body {



margin: 0px 0px 0px 0px;



padding: 0px 0px 0px 0px;



text-align: center;



color: #fff;



background: url('http://www.................png') repeat;



font-family: arial,verdana,helvetica,tahoma,Sans-serif;



font-size: 100%;



width: 100%;



}

أو هدا الكود



    body {



    background:$bgcolor;



    margin:0;



    color:$textcolor;



    font:x-small Georgia Serif;



    font-size/* */:/**/small;



    font-size: /**/small;



    text-align: center;



    }

و تغيير فقط الكلمة background

الى



background: url('http://DIRECT_LINK_OF_ANY_SMALL_IMAGE') repeat;

انتهى

تغيير عرض الأدوات لتكسب مساحة أخرى قد تستغلها

في القالب العادي المشهور Minima

تكون الأكواد على النحو التالي



#header-wrapper {
 
 width:660px;
 
 margin:0 auto 10px;
 
 border:1px solid $bordercolor;
 
 }



..................................







#outer-wrapper {
 
 width: 660px;
 
 margin:0 auto;
 
 padding:10px;
 
 text-align:$startSide;
 
 font: $bodyfont;
 
 }



..................................






 #main-wrapper {
 
 width: 410px;
 
 float: $startSide;



..................................







#sidebar-wrapper {
 
 width: 220px; float: $endSide;
 

..................................







#footer {
 
 width:660px;
 
 clear:both;

ماعليك فقط تغييير الأرقام لتكسب مساحة أخرى



#header-wrapper {



width:750px;



margin:0 auto 10px;



border:1px solid $bordercolor;



}



......................................................................



#outer-wrapper {



width: 750px;



margin:0 auto;



padding:10px;



text-align:$startSide;



font: $bodyfont;



}



.......................................................................







#main-wrapper {



width: 500px;



float: $startSide;



........................................................................







#sidebar-wrapper {



width: 220px;



float: $endSide;



........................................................................







#footer {



width:750px;



clear:both;

انتهى

لحدف ' عرض المشاركات الأقدم'

ابحث عن هدا الكود



<b:includable id='status-message'>



<b:if cond='data:navMessage'>



<div class='status-msg-wrap'>



<div class='status-msg-body'>



<data:navMessage/>



</div>



<div class='status-msg-border'>



<div class='status-msg-bg'>



<div class='status-msg-hidden'><data:navMessage/></div>



</div>



</div>



</div>



<div style='clear: both;'/>



</b:if>



</b:includable>

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



<b:includable id='status-message'>



<b:if cond='data:navMessage'>



<div>



</div>



<div style='clear: both;'/>



</b:if>



</b:includable>

انتهى

خلفية بين كل موضوع و اخر

فقط ابحث عن هدا الكود



.post {



margin:.5em 0 1.5em;



border-bottom:1px dotted $bordercolor;



padding-bottom:1.5em;



}

و عوضه بهدا الكود و لا تنسى وضع خلفيتك



.post {



background: url(http://i36.tinypic.com/xqid55.jpg);



background-repeat: no-repeat;



background-position: bottom center;



margin:.5em 0 1.5em;



border-bottom:0px dotted $bordercolor;



padding-bottom:3.5em;



}

ادا لم تنجح معك الطريقة

فاليك الطريقة الثانية

فقط ابحث عن هدا الكود



<div class='post-footer-line post-footer-line-3'/>

و ضع بعده هدا الكود



<center><img height='20' src='URL OF YOUR PICTURE'/></center>

انتهى

وضع صورة لأقسام مدونتك

ابحث عن هدا الكود



.sidebar ul {



list-style:none;



margin:0 0 0;



padding:0 0 0;



}



.sidebar li {



margin:0;



padding-top:0;



padding-$endSide:0;



padding-bottom:.25em;



padding-$startSide:15px;



text-indent:-15px;



line-height:1.5em;



}

و عوضه بهدا الكود



.sidebar ul {



list-style:none;



margin:0 0 0;



padding:10px 0 0;



}



.sidebar ul li {



background:url("http://i33.tinypic.com/332b6dt.jpg") no-repeat 2px .25em;



margin:0;



padding:0 0 3px 16px;



margin-bottom:2px;



text-indent:7px;
 
 line-height:1.3em;



}

الكود بالون الازرق..بامكانك تغيير الرقم و الدي يمثل المسافة

بين الصورة و أحد أقسام المدونة

الكود المغاير فيمثل المسافة العمودية (خط الطول)

انتهى

لاخفاء و عرض الاداة

لطفا حمل الملف التالي

أو



/*********************/



/*  S I D E B A R    */



/*********************/







#sidebar-wrapper {



float:right;



width:290px;







 



}







.sidebar { 



 }







#sidebar h2 {



background:url("http://a.imageshack.us/img835/9159/canvasb.png")no-repeat 100% 50%;



font-family:"Helvetica Neue",Arial,"Lucida Grande",sans-serif;



font-size:18px;















font-weight:normal;



}







#sidebar h2.headactive {



background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtBdsfyhyphenhyphenDKpIKyE-aplf3gTMXO3yAYkgOETsR7G4BNHK0P8L4jZri6u0qd7RK9h6RY-kaL7CkNWdG2QGJM-Nq2-Y8Irm_AuFr0k6WBHi7PqyulbyD7LxSyskEGdZ_2ffs0lbR0XVOkxAf/")no-repeat 100% 50%;







}







#sidebar2 h2.headactive {



background:url("http://a.imageshack.us/img835/9159/canvasb.png")no-repeat 100% 50%;



}











.sidebar  li {



border-bottom:1px dotted rgba(0, 0, 0, 0.7);







}







.sidebar  li:hover {



border-bottom:1px dotted rgba(0, 0, 0, 0.9);



}







.sidebar  li a {















}







.sidebar .widget { 







background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTa3EFgeAcQG8QTREP-75AAatZDI9eXy2sVBUAzXila_Y-2Z-c7_Z7Ve5vfUDG1B30rSYJgNb8ZJ2yCaY6GI1St94Qv1vIIEuOsDcHfBza2rBYR8ugkQGEgsen9Fn2vjWSm-CXPpE0ZpxQ/") repeat scroll 0 0 transparent;







 }































































































/************** SIDEBAR *****************/







#sidebar-wrapper {



float:right;



margin-bottom:13px;



width:290px;



  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */



}







.sidebar { 



 }







#sidebar h2 {



background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghwhn8-1IX1hkcDeMaq3sHfjILV-oyWTRWB278KZwuZQPjFO7gDh4uCF8pFewisdlCy1Kqe_qFrUqyrRGzkFRVIRQmp0qTCC7GCzqCcSzmaVh8HJwCXmH8M5lnkdSva5mA5oAnVK34zCOp/")no-repeat 100% 50%;



font-family:"Helvetica Neue",Arial,"Lucida Grande",sans-serif;



font-size:18px;



margin-bottom:15px;



text-transform:uppercase;



line-height:34px;



font-weight:normal;



}







#sidebar h2.headactive {



background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtBdsfyhyphenhyphenDKpIKyE-aplf3gTMXO3yAYkgOETsR7G4BNHK0P8L4jZri6u0qd7RK9h6RY-kaL7CkNWdG2QGJM-Nq2-Y8Irm_AuFr0k6WBHi7PqyulbyD7LxSyskEGdZ_2ffs0lbR0XVOkxAf/")no-repeat 100% 50%;



border-bottom:1px solid #282828;



}







#sidebar2 h2.headactive {



background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghwhn8-1IX1hkcDeMaq3sHfjILV-oyWTRWB278KZwuZQPjFO7gDh4uCF8pFewisdlCy1Kqe_qFrUqyrRGzkFRVIRQmp0qTCC7GCzqCcSzmaVh8HJwCXmH8M5lnkdSva5mA5oAnVK34zCOp/")no-repeat 100% 50%;



}







.sidebar  ul {



margin-left:0;



}







.sidebar  li {



border-bottom:1px dotted rgba(0, 0, 0, 0.7);



padding:10px 0;



}







.sidebar  li:hover {



border-bottom:1px dotted rgba(0, 0, 0, 0.9);



}







.sidebar  li a {



padding:10px 5px 10px 10px;



}







.sidebar .widget { 



margin:0 0 1.5em;



background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTa3EFgeAcQG8QTREP-75AAatZDI9eXy2sVBUAzXila_Y-2Z-c7_Z7Ve5vfUDG1B30rSYJgNb8ZJ2yCaY6GI1St94Qv1vIIEuOsDcHfBza2rBYR8ugkQGEgsen9Fn2vjWSm-CXPpE0ZpxQ/") repeat scroll 0 0 transparent;



-moz-border-radius: 5px; 



-khtml-border-radius: 5px;



-webkit-border-radius: 5px; 



border-radius: 5px; 



margin:0 0 20px;



padding:10px 20px;



 }































]]></b:skin>







<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>







<script type='text/javascript'>



var sidebarnameacc1="sidebar";



var accordionside1=true;



var sideshow1=new Array(0,0);



var sidebarnameacc2="sidebar2";



var accordionside2=false;



var sideshow2=new Array(0,0);



</script>



<script src='http://blogspacetech.googlecode.com/files/accordionscriptv-min.js' type='text/javascript'/>







  </head>































<body>



  <!-- skip links for text browsers -->



    <span id='skiplinks' style='display:none;'>



      <a href='#main'>skip to main </a> |



      <a href='#sidebar'>skip to sidebar</a>



    </span>

انتهى

آخر مواضيع المدونة

أقسام المدونة

روابط مفيدة

الصفحات

دروس Blogger

0