مشكلة اضافة اقرا المزيد لمدونات بلوجر بتقنية الCSS

مشكلة اضافة اقرا المزيد لمدونات بلوجر بتقنية الCSS

@Arwa~هنا مشكلتك تكمن في انك تضيفي الكود في مكان مغاير للمكان المطلوب .. تابعي معي
اولا عليكي البحث(CTRL+F) عن الوسم التالي </head> واضافة الكود التالي فوقه مباشرة

 <script type='text/javascript'>var thumbnail_mode = "no-float" ; 
summary_noimg = 430; 
summary_img = 340; 
img_thumb_height = 100; 
img_thumb_width = 120; 
</script> 
<script type='text/javascript'> 
//<![CDATA[ 
function removeHtmlTag(strx,chop){ 
if(strx.indexOf("<")!=-1) 
{ 
var s = strx.split("<"); 
for(var i=0;i<s.length;i++){ 
if(s[i].indexOf(">")!=-1){ 
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
} 
} 
strx = s.join(""); 
} 
chop = (chop < strx.length-1) ? chop : strx.length-2; 
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
strx = strx.substring(0,chop-1); 
return strx+'...'; 
} 
function createSummaryAndThumb(pID){ 
var div = document.getElementById(pID); 
var imgtag = ""; 
var img = div.getElementsByTagName("img"); 
var summ = summary_noimg; 
if(img.length>=1) { 
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; 
summ = summary_img; 
} 
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; 
div.innerHTML = summary; 
} 
//]]></script>  

ثم تبحثي(CTRL+F) عن الكود التالي<data:post.body/> ستجدين اكثر من وسم في قالبك (يمكمك الظغطEnter مرة اخرى لتجدي الوسم التالي) المهم استبدلي الكود التالي بدل الكود الثاني(رقم 2) الذي ستجديه بهذا الشكل <data:post.body/>

 <b:if cond='data:blog.pageType == &quot;item&quot;'> 
<data:post.body/> 
<b:else/> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
<data:post.body/> 
<b:else/> 
<div expr:id='&quot;summary&quot; + data:post.id'> 
<data:post.body/> 
</div> 
<script type='text/javascript'> 
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); 
</script> 
<span class='jump-link' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url'>...اقرأ المزيد</a></span>
<div style='clear: both;'/> 
</b:if> 
</b:if> 

الان لم يبقى علينا سوى اضافات اللمسات الفنية ليظهر لنا اقرا المزيد بشكل جميل لذا نبحث(CTRL+F) عن الوسم التالي ]]></b:skin> لاضافة اكواد الCSS التالية فوقه مباشرة 

 .jump-link {
display: block;
 font-size: 12px;
 font-weight: bold;
 text-align:right;
}
.jump-link a {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #000000;
 padding: 6px 15px;
 background: -moz-linear-gradient(
  top,
  #ffffff 0%,
  #b5b5b5);
 background: -webkit-gradient(
  linear, left top, left bottom, 
  from(#ffffff),
  to(#b5b5b5));
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 border: 3px solid #0088ff;
 -moz-box-shadow:
  0px 1px 3px rgba(000,000,000,0.5),
  inset 0px 0px 3px rgba(255,255,255,1);
 -webkit-box-shadow:
  0px 1px 3px rgba(000,000,000,0.5),
  inset 0px 0px 3px rgba(255,255,255,1);
 box-shadow:
  0px 1px 3px rgba(000,000,000,0.5),
  inset 0px 0px 3px rgba(255,255,255,1);
 text-shadow:
  0px 1px 2px rgba(000,000,000,0.5),
  0px 1px 2px rgba(252,254,255,0.9);
} 

اذا لم يعجبك شكل الزر يمكنك اختيار اي شكل من الاشكال التالية واستبدال كود الCSS بالكود الخاص بها من هنا