معهد خبراء بلوجر - اضافة اقرء المزيد بتقنية css3 لمدونات بلوجر

http://4.bp.blogspot.com/-vOKdCWy88z...9%8A%D8%AF.png

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

درسنا اليوم .... هو كيفية اضافة اقرء المزيد بتقنية css3
لمعاينة الاضافة من هنا http://readmore-css3.blogspot.com/

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

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

كود بلغة HTML:

</head>

قم بلصق الكود التالي قبله مباشرة

كود بلغة HTML:

<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>

والآن قم بالبحث عن الكود التالي :

كود بلغة HTML:

<data:post.body/>

ثم قم بإستبدالة بهذا الكود :

كود بلغة HTML:

<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>

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

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

كود بلغة HTML:

]]></b:skin>

كود بلغة HTML:

.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