دروس 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("http://3.bp.blogspot.com/_b8IA1ajBJG8/TGItHe6dMFI/AAAAAAAABlg/YI5ZKE9raNI/toggle_up_dark.png")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("http://3.bp.blogspot.com/_b8IA1ajBJG8/TGIvOhb8MMI/AAAAAAAABlo/lbNXDEh5iFU/bg-dark-trans8.png") 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("http://2.bp.blogspot.com/_b8IA1ajBJG8/TGItG7_uANI/AAAAAAAABlY/Dpm_OgLxnqE/toggle_down_light.png")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("http://3.bp.blogspot.com/_b8IA1ajBJG8/TGItHe6dMFI/AAAAAAAABlg/YI5ZKE9raNI/toggle_up_dark.png")no-repeat 100% 50%;

border-bottom:1px solid #282828;

}



#sidebar2 h2.headactive {

background:url("http://2.bp.blogspot.com/_b8IA1ajBJG8/TGItG7_uANI/AAAAAAAABlY/Dpm_OgLxnqE/toggle_down_light.png")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("http://3.bp.blogspot.com/_b8IA1ajBJG8/TGIvOhb8MMI/AAAAAAAABlo/lbNXDEh5iFU/bg-dark-trans8.png") 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>









انتهى