اضافة أقرا المزيد بتقنية Css3

السلام عليكم ورحمة الله تعالى وبركاته اخواني اعضاء وزوار مدونة محمد عماد اليوم نأتيكم باضافة رااائعة وجميلة جدا بتقنية Css3 وهي اضافة اقراء المزيد مثل الموجودة في مدونة المحترف اليوم مدونة محمد عماد تقدمها لكل اعضاء وزوار المدونة ودبعم من مدونة كومبيوتر كوم نأتي الان لطريقة التركيب 

صورة الاضافة


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



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

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

</head>

وبعدها قم بلصق الكود التالي قبلها/فوقها مباشر 
<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */ summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/ img_thumb_height = 128; /* عرض الصورة في الملخص*/ img_thumb_width = 128; /*طول الصورة في الملخص */ </script> <script src='http://abuiyad.googlecode.com/svn/read-more-right.js' type='text/javascript'/><font size="0"><a href=" http://www.weight-losssuccessstories.net">siege auto</a></font>

والان قم بالبحث عن الكود التالي
<data:post.body/>

واستبدله بهذا الكود 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/><data:post.body/> <b:else/> <b:if cond='data:blog.pageType != &quot;item&quot;'> <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='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>إقرأ المزيد...</a></span> <a href='http://abu-iyad.blogspot.com/2010/07/read-more-for-blogger.html' style='display:none;'>Résumé</a><a href='http://abu-iyad.blogspot.com' style='display:none;'>abuiyad</a> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> </b:if><font size="0"><a href=" http://www.weight-losssuccessstories.net/ ">siege auto</a></font>

استبدل كلمة إقرأ المزيد... باي كلمة تريدها واحفظ القالب وتوجه الى مدونتك ستكون خاصية اقراء المزيد موجود 
الان سنضيف تأثير Css3 على الاضافة 

ابحث عن الكود التالي
]]></b:skin>

وضع قبله او فوقه الكود التالي 
.rmlink a{ background: #F1F1F1; border: 1px solid #E6E6E6; border-radius: 5px 5px 5px 5px; box-shadow: 0 0 2px #FFFFFF inset, 0 1px 1px #CACACA; color: #999999 !important; display: inline-block; font: 17px "Arial"; font-weight:700; text-align: center; padding: 2px 15px 2px; color: #999999 !important; padding-right:15px; padding-left:15px; padding-tpo:5px; padding-bottom:3px; margin-top: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-color: #00A8D8; border-color: #fff; outline: medium none; color: #f3f3f3 !important; text-decoration:none }

والان احفظ قالبك ومبرووكـ عليك الاضافة 

المصدر: http://com-pc.blogspot.com/2013/01/css3.html

هناك 4 تعليقات :

  1. أخي راسلني أود التحدث معك على إنفراد
    contact@saidblog.com

    ردحذف
  2. أخوي @Said Eddihi يمكنك مراسلتي عبر هذا الايميل
    Khamaiseh98@gmail.com

    ردحذف
  3. الردود
    1. العفوا اخي Radouane Abbane11 هذا واجب المدونة ونتمى منك الاشتراك بالمدونة لتتعرف على جديد اضافات بلوجر !!

      حذف

جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).