مدونة خدمات بلوجر

‏إظهار الرسائل ذات التسميات صور. إظهار كافة الرسائل

إضافة تأثيرات حركية على الصور لمدونات بلوجر

السلام عليكم ورحمة الله تعالى وبركاته ،سوف نتعرف اليوم علي طريقة جميلة جدا لوضع تأتيرات على الصور وهي الخاصية نفسها التي أضعها علي جميع صور مدونتي ،هذه الخاصية تعطي للصور جمالية وتنسيق رائع عند وضع مؤشر الماوس علي الصورة سوف تميل جانبا وعند إبعاد مؤشر الماوس تعود الصورة لوضعيتها الطبيعية ،كنت أستعمل هذه الخاصية في مدونتي منذ زمن حيث كان يلزمني إضافة بعض الأكواد مع رابط الصورة التي أريد أن أعمل لها هذا التأثير وتتكرر العملية مع كل إضافة للصور ،لكنني بعد جهد شخصي تمكنت من صنع كود يتم إضافته مرة واحدة للقالب ويتم تفعيل خاصية التأثير علي جميع الصور بدون إستثناء ،وأعني بالذكر أن صور الخلاصات "إقرأ المزيد" هي كذلك تطبق عليها هذه الخاصية مما يعطي للمدونة جمالية ورونق رائعين ,والآن لنتوجه لتطبيق الكود.

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.

قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).

]]</b:skin>

ثم قم بلصق هذا الكود قبله مباشرة :

.post img {-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
}

.post img:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}

يمكنك التحكم في درجة ميلان الصور كما تريد وبإتجاهها كذلك سواء على اليسار أم على اليمين وذلك بإستبدال الرمز (+) بالرمز( -) والعكس، حيث تمثل القيمة 2deg+ درجة الميلان قبل وضع مؤشر الماوس وتمثل كذلك القيمة 1deg- درجة الميلان عند وضع مؤشر الماوس على الصورة .

والتتيجة تكون الصورة على هذا الشكل .

هذا كل شيء ،أتمني أن تعجبكم هذه الإضافة،في إنتظار آرائكم وإستفساراتكم حول الموضوع .

اكمل القراءة...

كيفية إنشاء معرض للصور على مدونات بلوجر

السلام عليكم ورحمة الله تعالى وبركاته،في هذه الفقرة سوف نتعرف و إياكم عن طريقة إنشاء معرض للصور على مدونات بلوجر وذلك بالإستعانة بخاصية إنشاء الجداول ،سبق وأن قمنا بشرح كيفية إنشاء الجداول ،فيمكنك مراجعة الموضوع لإستيعاب هذه الخاصية أكثر لاأننا سوف نستعملها هذه المرة في تنسيق الصور جنبا إلى جنب مع إمكانية التعديل على القياسات كما نشاء.
وهذا مثال على معرض للصور , الذي نريد إنشاءه .

المرحلة الأولى:

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

<A HREF="رابط الصورة" target="_blank" title="إضغط لتكبير الصورة" >
<IMG HEIGHT=50 WIDTH=50 SRC="رابط الصورة" alt="إسم الصورة" /></A>

نقوم بتغيير مالون باللون الأحمر برابط الصورة وما لون باللون الأزرق بإسم الصورة وما لون باللون الوردي بقياسات طول وعرض الصورة.
ملاحظة : يمكنك إستعمال محرر النصوص wordpad لتسهيل عميلية النسخ واللصق

المرحلة الثانية :

في هذه المرحلة سوف نقوم بعملية إدراج الكود السابق(الأكواد التي تضم جميع الصور) في الكود المخصص لإنشاء الجدول ،فالأمر بسيط جدا ما عليك سوى التركيز قليلا عند إدراج الأكواد .حيث نقوم بإدراج كل كود(الكود السابق) بين <TD> و </TD> ليس العكس .

على سبيل المثال ،إذا أردنا إنشاء جدول يضم سطرا واحدا و4 خانات نستعمل هذا الكود.

<TABLE> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> </TABLE>

وتكون النتيجة على هذا الشكل :

يمكنك إضافة خانات أخرى في نفس السطر ذلك بإضافة الوسمين <TD> </TD> قبل </TR> مع إضافة الكود الأول الذي يضم الصورة بين الوسمين ذي اللون الأخضر.
والآن لإضافة سطر تاني يضم نفس عدد الخانات وهو العدد 4 كما في المثال السابق نقوم بإضافة جميع الأوسمة الموجودة بين <TABLE> و </TABLE> بعد الوسم </TR> ليصبح الكود على هذا الشكل .

<TABLE> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR></TABLE>

وكما تلاحظ أن الوسم <TR> و</TR> هما المسؤولان عن عمل أسطر أفقية
لتكون النتيجة على هذا الشكل :

وبإتباع نفس الطريقة لإنشاء معرض للصور يضم العدد الذي تريد من الصور

أما لإضافة عنوان لمعرض الصور ،قم بإضافة هذا السطر بعد الوسم <TABLE> مع إدخال العنوان في المكان المحدد

<caption>ضع العنوان هنا</caption>

ولإضافة إطارات للصور نقوم بإضافة هذا السطر داخل الوسم <TABLE> ليصبح على هذا الشكل

<TABLE cellspacing=0 cellpadding=3 width="80%" border=1 bordercolor="#0000ff">

ولأي إستفسار المرجوا ترك تعليقاتكم أسفل الموضوع.

اكمل القراءة...

إضافة بنرات إعلانية بتأثيرات jQuery على مدونات بلوجر

السلام عليكم إخواني أخواتي الكرام ،متتبعي مدونة أبو إياد ،في هذه الفقرة سوف نتعلم كيفية إضافة بنرات إعلانية على مدونات بلوجر بتأثيرات jQuery الجميلة ،يكمن إختلاف هذه الإضافة عن باقي الإضافات الأخرى للبنرات الإعلانية في أن الإعلانات تتفاعل مع حركة الماوس ،أي عند وضع الماوس على أحد بنرات الإعلان يتم تكبيرها بطريقة جميلة ,كما هو موضح في هذه الصورة .و يمكن إستعمال هذه الخاصية ليس فقط على البنرات الإعلانية بل يمكن إستعمالها لعرض صور أخرى ,كما وضعتها على قائمة "مدوناتي"

معاينة

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F).

]]></b:skin>

ثم قم بإضافة هذا الكود قبله مباشرة :

ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://sites.google.com/site/lightbox007/photo/borderblogger.png) no-repeat center center;
border: none;
}

بعد ذلك إبحث عن هذا الكود :

</head>

ثم ألصق الكود التالي قبله :

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover")
.stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px',
height: '174px',
padding: '20px'
}, 200);

} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover")
.stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '100px',
height: '100px',
padding: '5px'
}, 400);
});

//Swap Image on Click
$("ul.thumb li a").click(function() {

var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });

});

});
</script>

والآن قم بحفظ القالب

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascriptولآن الصق الكود التالي :

<ul class="thumb">
<li><a href="رابط المعلن"><img src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" alt="" /></a></li>
<li><a href="رابط المعلن"><img src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" alt="" /></a></li>
<li><a href="رابط المعلن"><img src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" alt="" /></a></li>
<li><a href="رابط المعلن"><img src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" alt="" /></a></li>
</ul>

مع إدخال رابط المعلن ورابط البنر الخاص به مكان الرابط الأزرق
في إنتظار تعليقاتكم أتمنى أن تنال إعجابكم وإلى اللقاء

اكمل القراءة...

إضافة أيقونات بجانب العناوين لتصنيف المواضيع حسب أقسام المدونة

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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود الأحمر وسوف تجده علي هذا الشكل.

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

قم بإضافة هذا الكود قبل الكود الأحمر

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == "التسمية 1"'>

<span class="icocat"><img src="1 رابط الأيقونة " alt="description"/></span>
</b:if>

<b:if cond='data:label.name == "2 التسمية "'>

<span class="icocat"><img src="2 رابط الأيقونة " alt="description"/></span>
</b:if>

<b:if cond='data:label.name == "3 التسمية "'>

<span class="icocat"><img src="3 رابط الأيقونة " alt="description"/></span>
</b:if>

<b:if cond='data:label.name == "4 التسمية "'>

<span class="icocat"><img src="4 رابط الأيقونة " alt="description"/></span>
</b:if>

</b:loop>

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

<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
ضع الكود هنا

ولا تنسى أن تقوم بتبديل التسميات ذات اللون الأحمر بتسميات مدونتك والروابط ذات اللون الأخضر بروابط الأيقونات حسب تصنيف التسميات لديك

ولإضافة تسميات أخرى ماعليك سوي إضافة مثل هذا الكود قبل

</b:loop>

<b:if cond='data:label.name == "5 التسمية "'>

<span class="icocat"><img src="5 رابط الأيقونة " alt="description"/></span>
</b:if>

ملاحظة : يمكنك إختيار الأيقونات ذات الأبعاد 30*30 أو 50*50

والآن قم بالبحث عن هذا الكود :

]]></b:skin>

ثم ضع هذا الكود قبله ثم إحفظ القالب

.icocat img{padding: 0; float: right; border: none; margin: 0 10px 10px 0;}

أتمنى أن تكونوا قد إستفدتم من هذا الدرس ، ولأي إستفسار المرجوا ترك تعليقك

اكمل القراءة...

كيفية إستبدال كلمة " إرسال تعليق" بصورة على مدونات بلوجر

السلام عليكم ورحمة الله تعالى وبركاته في هذه الفقرة ،سوف نتعلم كيفية إستبدال كلمة " إرسال تعليق " بصورة أو بكلمة أخرى أو هما معا وتوجد هذه الكلمة فوق مستطيل التعليقات للمدونة ،فهناك بعض المدونات يجعل موضع نموذج التعليق عبارة عن نافذة منبثقة مما يجعل كلمة " إرسال تعليق " غير مرئية للزائر في بعض الأحيان .
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F).

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

وإبحث عن هذا الكود أيضا :

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

والآن ما عليك سوى إستبدال ما لون بالأحمر في الكودين معا بما تريد :

إستبدال " إرسال تعليق " بنص مثلا : أضف تعليقك،أضف رد،أضف إستفسار...

إستبدال " إرسال تعليق " بصورة :

<img src="https://sites.google.com/site/lightbox007/photo/addcommentblogger.png" title="أضف تعليق" alt="أضف تعليق"/>

إستبدال " إرسال تعليق " بصورة ونص معا

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwPB54-tleGs12oABUaaD3QsT1ezREtbvCCgRoSttGyz0NxiS08TMRK1jyh8lJcMkICxOEaMVMSGuxSIrkCUwP5tTYCPXLdOm2wNF556K5KAafye6CT6u2BYnK_zuBeIddYGLJOIR6yos/s320/comments_new.jpeg' alt='Commentaires' title="Commentaires" />أضف تعليقك

يمكنك إستبدال الرابط الأخضر برابط الصورة التي تريد .
وهذا مثال للصورة التي أضعها مكان كلمة "إرسال تعليق " في مدونتي

والآن قم بحفظ القالب وتوجه لمعاينة النتيجة فوق مسيطيل التعليقات

اكمل القراءة...

إضافة سحابة ألبوم الصور ثلاتي الأبعاد لمدونات بلوجر

السلام عليكم ورحمة الله تعالى وبركاته نستهل موضوعنا اليوم بإضافة جميلة لألبومات الصور من موقع picasaweb وذلك بعرض الصور على شكل سحابة ثلاتية الأبعاد مما يكسبها جمالية أثناء معاينتها ,حيث تقوم بالدوران على حساب تحريك الماوس ولتطبيق هذه العملية سوف نلجأ إلى موقع roytanck الذي سيكسبها هذه الخاصية .

المرحلة الأولى :

نقوم بالدخول لموقع picasaweb وذلك بحساب جوجل لديك (كما لو أنك تدخل مدونتك),ثم قم بالضغط على Transfererلإنشاء ألبوم جديد كما هو موضح في الصورة

ثم بعد ذلك قم بإنشاء ألبوم جديد ،أو إختيار أحد الألبومات لديك اذا توفر عندك .

وبعد ذلك تقوم بإدخال إسم الألبوم ووصف له إدا أردت .

ثم بعد ذلك نقوم برفع الصور ،ثم نقوم بالضغط على كلمة RSS كما هو موضح في الصورة ،ثم قم بنسخ رابط هذه الصفحة والذي سوف نستعمله في المرحلة الثانية

المرحلة الثانية :

نقوم بالدخول لموقع .roytanck وذلك بلصق رابط الخلاصات RSS الذي حصلنا عليه في المستطيل المسمى Feed URL ,ثم نختار طول وعرض الأداة ، ثم قم بالضغط على Generate code snippet للحصول على الكود.

وعند لسق الكود المحصل عليه في التدوينة من رسالة ثم تحريرHtml تكون النتيجة على هذا الشكل .

Get this widget at roytanck.com

أتمنى أن تكون قد أعجبتكم في إنتظار اقتراحاتكم ، دمتم بخير

اكمل القراءة...

طريقة تغيير أيقونة Favicon على مدونات بلوجر (شرح بالصور)

مرحبا بكم جميعا ، في هذه الفقرة سوف نقوم بتغيير الأيقونة الجانبية لرابط المدونة Favicon،وهي التي على شكل مربع صغير يرمز الى شعار بلوجر , بهذه الطريقة ،يمكنك استعمال ايا من الصيغ التالية للصورة *.jpg, *.PNG, *.gif, *.ico ،لكن المتصفح أنترنت إكسبلورر Internet Explorer لا يقبل سوى الصيغة *.ico لذلك سوف نقوم باستعمال موقعين اثنين :

1.موقع Favicon from Pics لتحويل جميع صيغ الصور الى ico.
2. موقع MyDataNest. لرفع الصورة (الأيقونة ) المحصل عليها من الموقع الاول والحصول على رابط مباشر لها,وهذه الصورة تبين لك النتيجة .

ملاحظة :

الموقع الثاني يمَكِّن من رفع عدة أنواع من الملفات مثل : js, css, ico, pdf, mp3, .... jpg, png, gif ...لذلك يمكن استعماله لأغراض اخرى غير هذه .
يمكنك استعمال موقع Google site بدلا منه وذلك بانشاء موقع ثم صفحة جديدة ثم رفع الصورة فيه والحصول على الرابط .

المرحلة الأولى :

1.سوف نقوم بالدخول لهذا الموقع Favicon from Pics ,ثم نقوم برفع الصورة المراد ادراجها على شكل أيقونة Favicon .
2.نقوم بتحميل الايقونة بالضغط على كلمة Download كما هو موضح في الصورة .3.سوف يتم تحميل الأيقونة داخل ملف مضغوط ،لذلك يجب فكه وذلك بكليك يمين على المجلد ثم Extrere here .
الآن حصلنا على أيقونة Favicon ،مازال ينقصنا سوى الحصول على الرابط المباشر لها.

المرحلة الثانية :

1..سوف نقوم بالدخول لهذا الموقع MyDataNest ثم نقوم بالتسجيل وذلك بملء الاستمارة وادخال المعلومات المطلوبة .
بعد التسجيل ،وادخال الاسم و الكلمة السر ،سوف نقوم برفع الايقونة من خلال كلمة Upload ، ثم بعد ذلك تضغط على Select Files، انتظر قليلا حتى يتم رفع الايقونة , بعدها تضغط على My files لمعاينة ما تم رفعه .
.ثم كليك يمين ونسخ رابط الايقونة ،ثم قم بلصقه على note pad مثلا او اي محرر نصوص اخر لاستعماله في المرحلة الاخيرة.

الآن قمنا بالحصول على الرابط المباشر لأيقونة على هذا الشكل مثلا :

http://www.mdn.fm/files/179913_py0mc/favicon.ico

المرحلة الثالثة :

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرhtml, ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي :لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء.

</head>

ثم قم بوضع الكود التالي فوقه :

<link href="http://www.mdn.fm/files/179913_py0mc/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon"></link>

ولا تنسى أن تقوم بتبديل الرابط ذا اللون الاحمر بالرابط المحصل عليه من الموقع الثاني والذي قمنا بلصقه على Note pad .
وأخيرا بعد عناء طويل

تم الحصول على أيقونة Favicon الخاصة بك مما يجعل مدونتك جد مميزة ،واتمنى ان اكون قد وفقت في شرح الموضوع بشكل بسيط ،ولاي استفسارات واقتراحات انا رهن الاشارة

اكمل القراءة...

إضافة أداة مواضيع ذات صلة للبلوجر

السلام عليكم إخواني الكرام في هذه الفقرة سوف نتعلم كيفيية إضافة أداة "مواضيع ذات صلة' و هي عبارة عن روابط لمقالات مقترحة من نفس المدونة يتم إضافتها تحت المواضيع حيث أن هذه العناوين تكون ذات صلة بالموضوع الذي يقرؤه الزائر مما يسهل عليه الإطلاع على مواضيع أخرى.و الجميل في ذلك أن هذه الروابط تكون مصحوبة بصور الموضوع, بدون إطالة عليك إتباع التعليمات التالية:

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F).
تذكير:لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء.

</head>

ثم ضع الكود التالي فوقه :

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdS5ltAKlYeMwAFzYE6ojn7igbi7iffxFSWuBXiC4RG7d0V1RP8oOp43KVTx27p5AxmQbWJrcUl1LP-CrJl70VRrvlxKTHebr4A-yGye6zc69wvS7Hpx33iAp8kVpx4qvRCJKEeCSEflQ/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="مواضيع ذات صلة ";
</script>
<script src='http://sites.google.com/site/lightbox007/abuiyad/related-posts-with-thumbnails-for-blogger-pro.js.txt' type='text/javascript'/>
</b:if>

ملاحظة : يمكنك تغيير كلمة "مواضيع ذات صلة" بأي جملة تريد .
ثم قم بالبحث عن الكود التالي :

<div class='post-footer-line post-footer-line-1'>

فإن لم تجده إبحث عن هذا الكود :

<p class='post-footer-line post-footer-line-1'>

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

<b:if cond='data:blog.pageType == "item"'><div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://abu-iyad.blogspot.com/2010/07/related-postssimilar-posts-widget-for.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://abu-iyad.blogspot.com/' ><img style="border: 0" alt="Blogger Widgets" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
</b:if></b:if>

ملاحظة : يمكنك تغيير الرقم 5، وهو يدل على عدد المواضيع ذات الصلة التي سيتم عرضها.
أخيرا قم بحفظ القالب و إذهب للمعاينة
أنتظر تشجيعاتكم

اكمل القراءة...

إضافة شريط الصور المتحركة لتدوينات بلوجر

مرحبا بكم من جديد ،هذه المرة سوف أقوم بشرح كيفية إضافة الصور المتحركة في أعلى صفحة المدونة ،حيث تمثل هذه الصور مجموع المواضيع الذي تحتوي عليها المدونة ،حيث أنها تعطي جمالية أكثر للمدونة ولها دور مهم في عرض محتويات المدونة وتسهل البحث على الزوار ،بدون إطالة عليكم ،لنذهب إلى التطبيق :

المعاينة

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).
تذكير:لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء.

]]></b:skin>

ثم ضع الكود التالي فوقه :

#myslides{

background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgfP7ULNKM-RiA0iR9d3VibJlRl55oq5tTxUH6eCo5UCP3dRBbdpmiv2xL-mwbzishoRs6fMFIG0wumnZwQr89T_6EAXVQ1XqNrIqdtVr2wxzwbZrzcOktUX-g2UaO_QVg6-ZdzM6BRA/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;

}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;

}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/

}

.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}

.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}

لتغير الخلفية،قم بتغير الرابط باللون الاحمر حسب رغبتك
والآن قم بالبحث عن الكود التالي:

</head>

ثم ضع الكود التالي فوقه :

<script src='http://sites.google.com/site/mohamedabuiyad/slid-move1/abu-iyad.js' type='text/javascript'/>
<script src='http://sites.google.com/site/mohamedabuiyad/slid-move1/abu-iyad2.js' type='text/javascript'/>


<script type='text/javascript'>
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:1500, wraparound:true, persist:true},
autostep: {enable:true, moveby:1, pause:1000},
defaultbuttons: {enable: true, moveby: 4, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhop9bBRDIxuviQQcPrQpRPtR4-Fi-0vT_YeRNngC9JK-VQOC0bCwGZmbEQSoa8BwX7q5wAZ2bDBlGzLBguETkjk71skS3J1zGHDsQ5ZNs8OiX7buT7g6x1a04O8drXjQw3K9K6CbaJ-z8/s400/left.jpg', -48, 0], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt3M9s_npxaNuRJyJvjfWx6Zc49HzHEFhAexThyphenhyphenQUfOaYLqCmuwEfpKVcUEzsB_LOMLiRcpQgZnzpalsVkz7wiMbQlbeK-FBvfWUhVXqQ18syh70f55gF67lK4PnFxuCQ-jXyw3k8pmS0/s400/right.jpg', 0, 0]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']

})

</script>

الروابط ذات اللون الاحمر تمثل صورة السهم الى اليسار و اليمين
Speed:1500 : سرعة تحرك الصور
moveby:1 : عدد الصور التي يتخطاها عند تحرك الصور
هذه القيم يمكنك تغييرها حسب رغبتك
قم بحفظ القالب ثم انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript
ولآن الصق الكود التالي :

<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">


<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D9%86%D8%B5%D8%A7%D8%A6%D8%AD%20%D9%84%D9%84%D9%85%D8%B3%D8%AA%D9%87%D9%84%D9%83?&max-results=5" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="http://pics.imagup.com/ano1/1278000007.png" height="110" /> </a>
</div>



<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D9%83%D9%8A%D9%81%20%D8%AA%D8%B5%D9%86%D8%B9?&max-results=5" target="blank" title="Simple Blog Writing Template"> <img width="160" alt="Simple Blog Writing Template" src="http://pics.imagup.com/ano1/1278001914.png" height="110" /> </a>
</div>



<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1?&max-results=5" target="blank" title="Lenomag Blogger Template"> <img width="160" alt="Lenomag Blogger Template" src="http://pics.imagup.com/ano1/1278001116.jpg" height="110" /> </a>
</div>



<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%BA%D8%B1%D8%A7%D8%A6%D8%A8%20%D9%88%20%D8%B9%D8%AC%D8%A7%D8%A6%D8%A8?&max-results=5" target="blank" title="Money Blogger Template"> <img width="160" alt="Money Blogger Template" src="http://pics.imagup.com/ano1/1278001691.png" height="110" /> </a>
</div>



<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%BA%D8%B1%D8%A7%D8%A6%D8%A8%20%D9%88%20%D8%B9%D8%AC%D8%A7%D8%A6%D8%A8?&max-results=5" target="blank" title="Digital Statement Blogger Template"> <img width="160" alt="Digital Statement Blogger Template" src="http://pics.imagup.com/ano1/1278002070.jpg" height="110" /> </a>
</div>



<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%A7%D9%84%D8%B1%D8%A8%D8%AD%20%D9%85%D9%86%20%D8%A7%D9%84%D8%A5%D9%86%D8%AA%D8%B1%D9%86%D8%AA?&max-results=5" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278002754.png" height="110" /> </a>
</div>



<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1?&max-results=5" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278003649.png" height="110" /> </a>
</div>



<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%A7%D9%84%D8%AA%D8%BA%D8%B0%D9%8A%D8%A9%20%D9%88%D8%A7%D9%84%D8%B5%D8%AD%D8%A9?&max-results=5" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278003860.png" height="110" /> </a>
</div>



<div class="panel">
<a href="http://abu-iyad.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278004864.png" height="110" /> </a>
</div>



<div class="panel">
<a href="http://abu-iyad.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278094671.png" height="110" /> </a>
</div>



<div class="panel">
<a href="http://abu-iyad.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278094825.png" height="110" /> </a>
</div>



<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%A7%D9%84%D8%A3%D8%AB%D8%A7%D8%AB%20%D9%88%D8%A7%D9%84%D8%AF%D9%8A%D9%83%D9%88%D8%B1?&max-results=5" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278095024.png" height="110" /> </a>
</div>


</div></div></div>

وأخيرا قم بتبديل الروابط ذات اللون الاحمر بروابط مدونتك والروابط ذات اللون الازرق بروابط الصور اتمنى ان تنال اعجابكم

اكمل القراءة...

كيفية تعديل الكلمات رسائل أقدم, رسائل أحدث, و"الصفحة الرئيسية, لمدونات بلوجر

أهلا و سهلا و مرحبا بكم اخواني أخواتي قراء مدونة أبو إياد ، في هذه الفقرة سوف نتطرق الى معرفة كيفية تعديل أو تبديل الكلمات " رسائل أقدم" ،" رسائل أحدث" و"الصفحة الرئيسية " لمدونات بلوجر ،سواء بكلمات أخرى أو بصور, والتي تكون في أسفل الصفحة
.انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).
تذكير:لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء

<data:newerPageTitle/>

ثم بعد ان تجد الكود حدده واستبدله بهذا الكود

<img alt='رسالة أحدث ' src='رابط صورة الرسائل الاحدث'/>

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

<data:olderPageTitle/>

ثم بعد ان تجد الكود حدده واستبدله بهذا الكود

<img alt='رسالة أحدث ' src='رابط صورة رسائل اقدم'/>

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

<data:homeMsg/>

ثم بعد ان تجد الكود حدده واستبدلهما بهذا الكود

<img alt='الصفحة الرئيسية' src='رابط صورة الرئيسية'/>

وذلك مع تحديد رابط كل صورة على حدى ,ولتبديل هذه الكلمات مثل مدونتي استعمل هذه الاكواد بدلا من التي قبلها

<img alt='رسالة أحدث ' src='http://pics.imagup.com/ano1/1278122376.png'/>

<img alt='رسالة أقدم ' src='http://pics.imagup.com/ano1/1278121913.png'/>

<img alt='الصفحة الرئيسية' src='http://pics.imagup.com/ano1/1278122546.png'/>

فإذا اعجبك الموضوع ،فقم بنشره على الازرار المفضلات الاجتماعية اسفله و لك جزيل الشكر في انتظار تشجيعاتكم

اكمل القراءة...

مدونة خدمات بلوجر

إضافة تأثيرات حركية على الصور لمدونات بلوجر

كيفية إنشاء معرض للصور على مدونات بلوجر

إضافة بنرات إعلانية بتأثيرات jQuery على مدونات بلوجر

إضافة أيقونات بجانب العناوين لتصنيف المواضيع حسب أقسام المدونة

كيفية إستبدال كلمة " إرسال تعليق" بصورة على مدونات بلوجر

إضافة سحابة ألبوم الصور ثلاتي الأبعاد لمدونات بلوجر

طريقة تغيير أيقونة Favicon على مدونات بلوجر (شرح بالصور)

إضافة أداة مواضيع ذات صلة للبلوجر

إضافة شريط الصور المتحركة لتدوينات بلوجر

كيفية تعديل الكلمات رسائل أقدم, رسائل أحدث, و"الصفحة الرئيسية, لمدونات بلوجر

اقسام المدونة

ارشيف المدونة