اضافة اداة اقراء المزيد مع تصغير التدوينات بحجم معين بشكل جديد بتقنية css3

  بسم الله الرحمن الرحيم وبه نستعين والصلاة والسلام علي اشرف المرسلين ثم اما بعد

السلام عليكم ورحمة الله وبركاته اعتذر عن عدم كتابتي لمواضيع لمدة دامات اكثر من اسبوعين وهذا بسبب اني كنت اصمم القالب انا واصدقائي الاحباء اسامة الاسدي وعبد الغفور بارك الله فيهم وبعدها كنت اخذ دروة php وتقديم ورقي للجامعة وسفري الدائم اليها فانا باذن الله ساكتب بعض المواضيع وبعدها سانقطع قليلا لدراستي....

 .. لنكمل الدرس كما رائيتم في مدونة بلوجر فيس في قالبها الجديد

ان اقراء المزيد بتقنية css3.

واقراء المزيد ايضا لها مقاس لقد عدلت علي الاضافة لتعمل في بهذه التقنية التي انا اعشقها جدا.. وسوف اريكم اليوم كيفية تركيبها علي مدونتكم بدلا من الطريقة التقليدية وهي وضع صورة بدون مقدمات كثر لنذهب ونري طريقة التركيب في مدونتكم

اولا اذهب الي تحكم بلوجر 

ثانيا اتبع التعليمات...

1. اخذ نسخة احطايتية من قالبك توقعا لحدوث اي خطا.
2.  قالب
3. تحرير html
4. متابعة
5. توسيع عناصر وجهة المستخدم  

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

</head>

وقبلها او فوقه تمام اضف هذا الكود

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){var s=a.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)}}a=s.join("")}b=(b<a.length-1)?b:a.length-2;while(a.charAt(b-1)!=' '&&a.indexOf(' ',b)!=-1)b++;a=a.substring(0,b-1);return a+'...'}function createSummaryAndThumb(a){var b=document.getElementById(a);var c="";var d=b.getElementsByTagName("img");var e=summary_noimg;if(d.length>=1){c='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+d[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var f=c+'<div>'+removeHtmlTag(b.innerHTML,e)+'</div>';b.innerHTML=f}
//]]>
</script>
<script type='text/javascript'>
/*طول وعرض الصورة*/
summary_noimg = 550;
summary_img = 450;
/*طول وعرض النص*/
img_thumb_height = 150;
img_thumb_width = 200;
</script>

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

<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>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:6px;float:right;text-align:right;'><a expr:href='data:post.url' >اكمل الموضوع</a></span>
</b:if>
</b:if>

استبدل كلمة اكمل باي كلمة تريد.
ان ذهب الي الصفحة الرئيسية ستجد الااضافة موجودة الان
سنضيف التاثير علي الاضافة

  ابحث عن الوسم التالي وضع قبله او فوقه الكود التالي 

 ]]></b:skin>

/* start read more css3 by blogger face.com */

}.rmlink a{position:absolute;
  left:10px;
  bottom:10px;
  background:#F0F0F0;
  border:1px solid #f1f1f1;
  border-radius:8px;
  box-shadow:0 0 1px white inset,0 0px 3px #B5B5B5;
  color:#999 !important;font:13px "tahoma";text-align:center;margin-top:15px;padding:5px 15px 6px 15px;-webkit-transition:background 0.4s  ease-in-out;
  -moz-transition:background 0.4s ease-in-out;
  -o-transition:background 0.4s ease-in-out;
  -ms-transition:background 0.4s ease-in-out;
  transition:background 0.4s ease-in-out}
  .rmlink a:hover{background:#3EA1B2;
  border:1px solid #3EA1B2;
  border-radius:8px;
  box-shadow:0 0 1px #3EA1B2 inset,0 0px 3px #b5b5b5;
  color:#fff !important}#b-c-r{background:#2B2B2B;
  margin:-2px 0 0 0;
  overflow:hidden;
  border-top:2px solid gainsboro
  ;width:1020px}
 /*end read more css3 by blogger face.com */

  تم بحمد الله عمل الموضوع فان اخطائت فمني ومن الشيطان وان اصبت فهو من الله
والسلام عليكم ورحمة الله وبركاته  منتظر تقيميكم واي مساعدة او استفسار انا في خدمتك

وسوم:بلوجر,اكواد,اقراء المزيد,فيس,بوك ,برامج,تصميم,قوالب,فوتوشوب,جوجل,سي اس اس,css,css3

من فضلك اضغظ لايك لمشاهدة لينك التحميل