قوالب بلوجر معربة

الاثنين، 24 سبتمبر، 2012

اضافة اداة اقراء المزيد مع تصغير التدوينات بحجم معين بشكل جديد بتقنية 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
من فضلك اضغظ لايك لمشاهدة لينك التحميل

13 التعليقات:

  1. جامدة جدي يا صاحبي ،، أستمر :D

    ردحذف
  2. السلام عليكم
    أخي مصطفى لقد جربت هذه طريقة ولكن عند الحفظ تقع مشكلة
    أخي أنا ليست لي أي خبرة في تعديل القوالب

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

      حذف
    2. كنت أريدها بشكل أتوماتيكي

      حذف
    3. اخي اعطني القالب الذي تود وضع الاداة فيه شكـــــراً وانا في الخدمة

      حذف
  3. أخي مصطفى أريد أضافتها لقالب
    http://arabs-c.blogspot.com/2012/10/download-arabs-computer-template.html?showComment=1350581798135#c7182007452659977903

    ردحذف
  4. نعم ولكن القالب به اقراء المزيد
    ولكن ارسل لي القالب وساحول تركيبها لك باذن الله

    ردحذف
  5. السلام عليكم اخي مصطفى حدث معي خطأ خلال الحفظ الرجاء منك مساعدتي

    ردحذف
    الردود
    1. ما هو الخطأ وانا تحت امرك في وقت واذا اردت ان اركبها لك انا تحت امرك

      حذف
  6. بارك الله فيك أخي

    عندي استفسار: قمت بوضع الإضافة بشكل جيد لكن التأثيرات على الإضافة لم تظهر عند اضافة الكود الثالث

    و هل التأثير هو لون الخلفية و الحدود

    ردحذف
  7. اخي الاضافة تعمل جيداً جــــداً وهي مجربة شخصيأ ولكن معروف ان لغة css3 لا تعمل جيدأ علي متصفح firefox
    و ان كنت تود ان اركبها لك انا في الخدمة ولكن ساتخر عليك بسبب ظروف عملي ودرستي واسف علي تاخري في الرد

    ردحذف
  8. مرحبا اخي مشكووور كتير على الكود الراشع جدا جدا
    ولكن انا لم تظهر الاضافة عندي مثل الاضافة عندكم
    حيث انتم ظهرت على الشمال وانا ظهرت بالوسط + انتك كان هناك اطار لها اما انا لا
    ممكن تعدلي عليها
    او تعطيني التاثير الخاص بكم

    ردحذف

افلام اون لاين

اختارنا لكم

 
© 2014 جميع حقوق النشر محفوظة لدى المعرفة Blog | تصميم قوالب بلوجر