ارشفة مدونتك بصيغة الjquery-css

24‏/06‏/2010









السلام عليكم





أولا شكرا خاص ل i-marco












أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم ثم تصميم   " تحرير HTML "
 


ثانيا : قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة. 



ثالثا : ضع علامة في خانة توسيع القوالب .
 


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






</head>






و ضع فوقه او اسفله هدا الكود





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




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





]]></b:skin>





و ضع فوقه مباشرتا هدا الكود







#dafis-acc{

font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

color:#333;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitaHp_oruH7-WiNNbH3SdrmAk7WOY3_ESGk5Y2WnyR-uK-kPl-KOJUbTAeuCJ_t2NrLYrZ2TDcsKIpvV9mXRbdYEZHtRFb09bv0us5j21sWCj8eeeoeKX8wejSgFE8BvhmFXgOcBzOUSY/d/bg5.gif) repeat-y scroll left center #E7F7FB;

padding:2px 0;

border:1px solid #339DC6;

}

.dafis-label{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvdhj_Thbzz4UmogwWioxbt5TAT_utYPJ7UwDhCI389L6t0H3gHjAGwRH7_kj1zEOnWZtkxCBY3cfZbphN6NoGJAK7y4rPFyXSP6UDGB3bk6IKu-M0YY3DnJ_9Q5qgtxK0ZCvce4jlhZo/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB;

font-weight:bold;

line-height:1.4em;

overflow:hidden;

white-space:nowrap;

vertical-align: baseline;

margin: 1px 3px;

outline: none;

cursor: pointer;

text-decoration: none;

padding: 2px 10px;

color: #fff;

text-shadow: 0 1px 1px rgba(0,0,0,.3);

border:1px solid #2F94BA;

}

.dafis-label:hover{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5E210U_DqQYuKh-dDj3Zkacl_CX6luyrDHLkQaYIxs6ihX2VwSHfW3b9G1bUBFh-0XaeiECgtAw6vvv1hkHCkhZu8yjNaz9ABHQZ3bghL4k7Vqt2DkHntM02ajRP48hXDeoycRJJewHI/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB;

color:#003366;

}

.dafis-daf ol{

margin:0 0 0 30px !important;

padding:0 !important;

}

.dafis-daf ol li{

background-color:#C9E9F4;

line-height:1.5em;

margin:1px 3px !important;

white-space:nowrap;

text-align:left;

border:1px solid #339DC6;

}

.dafis-daf ol li a{

text-decoration: none !important;

color:#333 !important;

display:block;

padding-left:10px;

}

.dafis-daf ol li a:hover{

background: #7BC4DF;

border-left: 5px #333 solid;

padding-left: 5px;

text-shadow: 0 1px 1px rgba(0,0,0,.3);

}





أخيرا :  استعرض مدونتك ثم احفظ قالبك.




شرح كيفية الإستخدام




قم بكتابة تدوينتك بالطريقة المعتادة




و عندما تأتي للسطر الذي سوف تريد وضع فيه هته الخاصية,



أنتقل لوضع تحرير HTML و قم بوضع الكود بهذه الطريقة





أو يمكنك اضافة باضافة اداة HTML





و لا تنسى وضع رابط مدونتك ..فقط غير XXX الى رابط مدونتك





<script type="text/javascript" src="http://blogspacetech.googlecode.com/files/dafis_Beautiful.js"></script>

<script src="xxx.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>