شرح إظهار عناوين المواضيع فقط في الصفحة الرئيسية لمدونات بلوجر
. هاك بسيط يعمل على إظهار العناوين فقط وليس العنوان والموضوع معا .. حيث يظهر العنوان في الصفحة الرئيسية للمدونة فقط وعند الضغط عليه يحولك الى الموضوع الرئيسي . ولكي تستطيع تركيب هذا الهاك في مدونتك اتبع الآتي
1. ادخل الى لوحة التحكم ثم التصميم ثم تحرير ال HTML وقم بتوسيع القالب .
2. لا تنسى بأخذ نسخة احتياطية من القالب الخاص بك .
3. ابحث عن هذا الكود </head>
ثم أضف قبله " فوقه " مباشرة هذا الكود
<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {color:#333333;}
.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}
</b:if>
</style>
كود عرض المصغرات واقرأ المزيد
بسم الله و الحمد لله و الصلاة و السلالم على رسول الله.
العديد من المدونين يتساءلون عن طريقة تلقائية لعرض مقتطفات تدويناتهم بشكل تلقائي على الصفحة الرئيسية و تحتها مباشرة رابط "تابع القراءة" أو "اقرأ المزيد" لمتابعة التدوينة كاملة. و لهم نقدم هذه الإضافة المفيدة التي تحسن مظهر المدونة و تجعلها صديقة لمحركات البحث . و تجدر الإشارة أن النسخة المقدمة هنا (و هي نفسها المقدمة في بعض المواقع ك vietwebguide.com ) تمكنك من الحصول على محاذات ميامنة للمصغرات كما هو موضح في الصورة الموالية
--» قبل تحرير القالب يجب حفظ نسخة احتياطية منه لاستعادتها عند الضرورة.
الخطوة الأولى: من باب " التخطيط" نختار "تحرير Html" و نوسع القالب عبر وضع علامة في المربع الصغير أعلا صندوق التحرير و نبحث عن
و مباشرة قبلها أي فوقها نضع هذا الكود :
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 500;
summary_img = 450;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://sites.google.com/site/simoxisite/Home/read-moreotomatis.js' type='text/javascript'/>
summary_noimg = 500;
summary_img = 450;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://sites.google.com/site/simoxisite/Home/read-moreotomatis.js' type='text/javascript'/>
» شرح الألوان:
- الأحمر لتعديل طول مقتطف التدوينة التي لا تضم صورا.
- الأزرق لطول مقتطف التدوينات التي بها صور.
- الأخضر لتعديل أبعاد المصغرات ( الصور الصغيرة التي تبدو في الرئيسية ).
- البرتقالي هو رابط ملف الجافاسكريبت يمكن إعادة رفعه و تحرير رابطه.
الخطوة الثانية: نبحث على </DATA:POST.BODY>
بواسطة CTRL+F نحدده و نعوضه بهذا الكود :
<p><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> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if></p>
لجعل الصورة إلى جهة اليسار استبدل right ب left في الكود أعلاه .
و أخيرا احفظ القالب و مبروك عليك!
اك الانتقال لأعلى الصفحة باستعمال مكتبة jQuery
[السبت, أغسطس 22, 2009 | 15 تعليقات ] نبضات
أغلب مدونات ووردبريس Wordpress تستعمل إضافة Wp To Top لوضع رابط الانتقال إلى أعلى الصفحة بطريقة سلسة. و صاحب هذه الإضافة اعتمد على هذه الطريقة jQuery topLink Plugin لإنشاء هذه الإضافة الممتازة. و اعتماداعلى نفس الموضوع سندرج هذه الإضافة في مدونات بلوجر و يمكن كذلك استعمال الطريقة ذاتها لإدراجها في أي موقع أو صفحة ويب. بسم الله نبدأ.
يمكن تجريب الإضافة من خلال هذه المدونة التجريبية. حاول النزول لأسفل الصفحة و سيظهر الزر تلقائيا.
طريقة الإضافة في مدونات بلوجر
أولا من لوحة التحكم نتوجه إلى صفحة تحرير Html ثم نبحث عن
]]></b:skin>
و مباشرة تحتها نضيف الكود الموالي
<script src='http://sites.google.com/site/simoxooorg/up-to-top/jquery-1.3.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxooorg/up-to-top/jquery.scrollTo-1.4.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200,
ieOffset: 50
}, settings);
return this.each(function() {
//listen for scroll
var el = $(this);
el.css('display','none'); //in case the user forgot
$(window).scroll(function() {
if(!jQuery.support.hrefNormalized) {
el.css({
'position': 'absolute',
'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
});
}
if($(window).scrollTop() >= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};
$(document).ready(function() {
$('#top-link').topLink({
min: 400,
fadeSpeed: 500
});
//smoothscroll
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>
اضافة جعل الروابط بلون قوس قزح عند مرور الماوس
هذا الكود خاص بـ مدونة الاحلام
ملحوظه الاضافة تعمل على اسكريبت واى موقع
شرح اضافة الكود
1. افتح لوحة التحكم
2. اختر تصميم
3. ثم تحرير HTML
4. علم صح على توسيع قوالب عناصر واجهة المستخدم
5. ابحث عن
كود PHP:
<head>
اضف بها مباشر الكود التالى
كود PHP:
<script type="text/javascript" src="http://blog-al7lam.googlecode.com/files/rainbow.js"></script>
ثم اضغط حفظ القالب
ومبروك
مواضيع قد تفيدك أيضاَ :
0 التعليقات:
إرسال تعليق