بسم الله الرحمن الرحيم وبه نستعين والصلاة والسلام علي اشرف المرسلين ثم اما بعد
السلام عليكم ورحمة الله وبركاته
بعد ان تلقيت العديد من الطلبات عن كيفية اضافة اقرء المزيد بتقنية css3- مثل مدونتي
درسنا اليوم .... هو كيفية اضافة اقرء المزيد بتقنية css3
لمعاينة الاضافة من هنا
اولا اذهب الي لوحة تحكم بلوجر
ثانيا اتبع التعليمات...
- اخذ نسخة احطايتية من قالبك توقعا لحدوث اي خطا.
- قالب
- تحرير html
- متابعة
- توسيع عناصر وجهة المستخدم
وبعدها ابحث عن هذا الوسم
</head>
وبعدها قم بلصق الكود التالي قبلها/فوقها مباشر
<script type='text/javascript'>var thumbnail_mode = "no-float" ; 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 == "static_page"'><br/><data:post.body/> <b:else/> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'> <data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</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 == "item"'><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 }
والان احفظ قالبك ومبرووكـ عليك الاضافة
الرجاء ذكر المصدر عند النقل
والسلام عليكم ورحمة الله وبركاته منتظر تقيميكم واي مساعدة او استفسار انا في خدمتكم >>>>
هل أعجبك الموضوع ؟
ليست هناك تعليقات: