مدونة إضافات

قائمة أفقية ثابتة لمدونات بلوجر

2014-03-02T22:46:00.000+00:00

قائمة أفقية ثابتة لمدونات بلوجر

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

- كما نلاحظ ان القائمة تحتوي على سهم يقوم بإصعادنا الى الاعلى واخر اتجاهه الى الأسفل يقوم بإنزالنا وبعدها نرى 5 ازرار يمككنا وضع روابطنا فيها ويمكننا زيادة العدد او العكس، ايضا نرى مربع بحث في الاضافة الأصل الغير المعربة مربع البحث لا يعمل وانا جعلته يعمل وبشكل جيد كما ينبغي,عندما ننزل القائمة تصبح شفافة نوعا ما وعندما نضع المؤشر عليها تصبح عادية كما كانت في السابق

الأن حان وقت عرض الاكواد لوضع هذه القائمة الرائعة في مدونتنا:

الخطوات:

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

</head>

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

link href='https://abuiyad.googlecode.com/svn/Ayoub-Etmaiti-menu-fixed-abu-i.css' rel='stylesheet'/>

$(function() {

$(window).scroll(function(){

var scrollTop = $(window).scrollTop();

if(scrollTop != 0)

$('#nav').stop().animate({'opacity':'0.2'},400);

else

$('#nav').stop().animate({'opacity':'1'},400);

});

$('#nav').hover(

function (e) {

var scrollTop = $(window).scrollTop();

if(scrollTop != 0){

$('#nav').stop().animate({'opacity':'1'},400);

}

function (e) {

var scrollTop = $(window).scrollTop();

if(scrollTop != 0){

$('#nav').stop().animate({'opacity':'0.2'},400);

}

);

});

</script>

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

</body>

ثم قم بلصق الكود التالي قبله، مع تعديل ما يناسب مدونتك :

<ul>

<li><a href='الرابط-1'><span>عنوان الرابط 1</span></a></li>

<li><a href='الرابط-2'><span>عنوان الرابط 2</span></a></li>

<li><a href='الرابط-3'><span>عنوان الرابط 3</span></a></li>

<li><a href='الرابط-4'><span>عنوان الرابط 4</span></a></li>

<li><a href='الرابط-5'><span>عنوان الرابط 5</span></a></li>

</form>

</li>

</ul>

</div>

نقوم بتغير الكلمات :
الرابط-1 ، 2 ، 3 ، 4 و 5 بروابطنا التي نريد ان يتم التوجيه اليها بعد الظغط على الزر ، ونغير العناوين : عنوان الرابط 1
، 2 ، 3 ، 4 و 5 بالكلمة التي ستظهر على زر

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

أزرار التنقل عائمة لصفحات بلوجر

2013-09-29T21:05:00.001+01:00

أزرار التنقل عائمة لصفحات بلوجر

السلام عليكم ورحمة الله اليوم أقدم لكم اضافة جميلة تحتوي على الازرار التالية : زر مشاركات اقدم ، زر مشركات احدث ، زر مقالة عشوائية {يقوم باختيار مقالة من عنده} ، زر العودة الى الرئيسية واخيرا زر الصعود الى الأعلى..

صورة لهذه الإضافة على مدونتي التجريبية:

- كما نلاحظ أن هذه الإضافة لا تأخذ مكان كبيرة في المدونة وهي ذات شكل جميل ومفيدة ايضا.

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

الخطوات:

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

</head>

لتركيب الإضافة على الجهة اليسرى :

لتركيب الإضافة على الجهة اليمنى :

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

<b:includable id='main' var='top'>

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

<div id='float-menu'>
<ul>
<li id='menu-right'>
<b:if cond='data:olderPageUrl'>
<b:if cond='data:olderPageUrl != data:blog.url'>
<a expr:href='data:olderPageUrl' rel='prev' expr:title='data:olderPageTitle'></a>
</b:if>
</b:if>
</li>
<li id='menu-left'>
<b:if cond='data:newerPageUrl'>
<b:if cond='data:newerPageUrl != data:blog.url'>
<a expr:href='data:newerPageUrl' rel='next' expr:title='data:newerPageTitle'></a>
</b:if>
</b:if>
</li>
<li id='menu-random'>
<script type='text/javaScript'>//<![CDATA[
var rdp_current=0;total_posts=0;function totalposts(json){total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){rdp_current=1+Math.round(Math.random()*(total_posts-1))};
//]]></script>
<script type='text/javaScript'>//<![CDATA[
function rdp(json){var dw='';entry=json.feed.entry[0];for(var i=0;i<entry.link.length;i++){if(entry.link[i].rel=='alternate'){rdp_posturl=entry.link[i].href}};dw+='<a href="'+rdp_posturl+'" title="مقالة عشوائية" rel="nofollow"></a>';document.getElementById('menu-random').innerHTML=dw;};getvalue();document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current+'&max-results=1&callback=rdp\"><\/script>');
//]]></script>
</li>
<li id='menu-home'>
<a expr:href='data:blog.homepageUrl' title='الرئيسية'/>
</li>
<li id='menu-top'>
<a href='#' title='إلى الأعلى' rel="nofollow"/>
</li>
</ul>
</div>

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

قائمة مسندلة لوضع الفيديوهات على بلوجر

2013-09-07T20:21:00.000+01:00

قائمة مسندلة لوضع الفيديوهات على بلوجر

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

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

<script type="text/javascript">
function MostrarVideo(idYouTube)
{
var contenedor = document.getElementById('divInnerVideo');
if(idYouTube == "")
{
contenedor.innerHTML = "";
}
else
{
var dimensiones = "width='420' height='315' frameborder='0'";
var url = "http://www.youtube.com/embed/" + idYouTube;
contenedor.innerHTML = "<iframe " + dimensiones + " src='"+ url +"'></iframe>";
}
}
</script>
<div style="margin:20px 0px;">
<select id="sVideos" onchange="MostrarVideo(this.value);">
<option value="" selected="selected">[إختر الفيديو المراد عرضه...]</option>
<option value="BlggrIdaft6579">عنوان الفيديو</option>
<option value="BlggrIdaft6579">-عنوان الفيديو-</option>
</select>
</div>
<div id="divInnerVideo"></div>

1-قم بتغيير عنوان الفيديو الذي سيظهر به في القائمة المنسدلة وذلك بتغيير العبارة "عنوان الفيديو"
2-قم بتغيير القيمة BlggrIdaft6579 في الكود بالقيمة التي سوف تجدها برابط الفيديو ،مثلا لو كان رابط الفيديو على هذا الشكل :
http://www.youtube.com/watch?v=BlggrIdaft6579 ,سوف تستبدلها بالقيمة الموجودة في آخر الرابط ،اي ما لون باللون البرتقالي
3-الجملة " إختر الفيديو المراد عرضه" هي عنوان القائمة المنسدلة ويمكنك تغييره بأي جملة أخرى تريد

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

أزرار تابعني على يوتوب،فيسبوك،تويتر و الخلاصة

2013-03-21T09:21:00.000+00:00

أزرار تابعني على يوتوب،فيسبوك،تويتر و الخلاصة

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

- ونلاحظ من الصورة عمل الإضافة عند المرور بمؤشر الفأرة على احد الأيقونات، لاحظ ايقونة اليوتوب كيف هي مختلفة بحدود مربعة عن باقي الأيقونات.

الأن حان وقت عرض الاكواد لوضع هذه الإضافة الرائعة في مدونتنا.
الخطوات:

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

]]></b:skin>

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

/*sus code by Blogger Idafat */
.Azrar-Blogger-Idafat {
border-radius: 50%; /* الحدود الدائرية */
box-shadow: 0px 0px 15px #000; /* الظل*/
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.Blogger-Idafat:hover {
box-shadow: 0; /* لحذف الحدود الدائرية عند مرور المأشر */
border-radius: 0; /*لحذف الظل عند مرور المأشر */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.Blogger-Idafat-center {
text-align: center /*لتوسيط الأزرار */
}
/*sus code by Blogger Idafat */

قم بحفظ القالب

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

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

روابط الخلاصات RSS لمدونات بلوجر وجميع المواقع

2013-01-25T17:19:00.003+00:00

روابط الخلاصات RSS لمدونات بلوجر وجميع المواقع

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

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

http://idafat.blogspot.com/feeds/posts/default
http://idafat.blogspot.com/feeds/posts/default?alt=rss

حيث يمثل الرابط الأول خلاصات Atom والرابط الثاني خلاصات RSS
ولعرض المواضيع على شكل تدوينات مختصرة ،ماعليك سوى إضافة المتغير Summary حيث يصبح الرابط على هذا الشكل.

http://idafat.blogspot.com/feeds/posts/summary

ولعرض التدوينات كاملة ،نستعمل المتغير Full ليصبح على هذا الشكل .

http://idafat.blogspot.com/feeds/posts/Full

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

http://idafat.blogspot.com/feeds/posts/default/-/name widget
http://idafat.blogspot.com/feeds/posts/default?alt=rss/-/name widget

مع تغيير ما لون بالأحمر بإسم القسم أو التسمية ومالون باللون الأزرق برابط مدونتك,

خلاصات التعليقات :

هذه الروابط مسؤولة عن إظهار آخر التعليقات المدونة وهي تكون على هذا الشكل.

http://idafat.blogspot.com/feeds/comments/default
http://idafat.blogspot.com/feeds/comments/default?alt=rss

مع تغييرمالون بالأحمر برابط مدونتك.

خلاصات التعليقات لموضوع محدد.

http://idafat.blogspot.com/feeds/postID/comments/default
http://idafat.blogspot.com/feeds/postID/comments/default?alt=rss

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

وأخيرا أتمنى أن تنال هذه الإضافة إعجابكم.

إضافة نوافذ المفضلات الإجتماية الجانبية لمدونات بلوجر

2013-01-25T12:34:00.001+00:00

إضافة نوافذ المفضلات الإجتماية الجانبية لمدونات بلوجر

السلام عليكم ورحمة الله تعالى وبركاته سوف نتطرق في هذه التدوينة إلى كيفية إضافة الأزرار الجانبية للمواقع الإجتماعية : الفيسبوك ،جوجل بلس ، تويتر ،والبريد RSS ,وهي عبارة عن إضافة واحدة تحتوي على 4 إضافات في آن واحد حيث أنها تتميز في كونها لا تأخذ حيزا كبيرا في تنسيق المدونة .
والآن أترككم مع كيفية تطبيق هذه الإضافة على مدونكم .

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

]]></b:skin>

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

ht img{position:absolute;top:-2px;left:-35px}#facebook_right iframe{border:0px solid#3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px}#twitter_right{z-index:10004;border:2px solid#6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px}#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0}#google_plus_right{z-index:10003;background-color:#F2F2F2;border:2px solid#006ec9;border-top:2px solid#0056a0;border-bottom:2px solid#0056a0;border-right:2px solid#0056a0;border-left:hidden;width:152px;height:97px;position:fixed;right:-154px}#google_plus_right_img{position:absolute;top:-2px;left:-33px;border:0}#feedburner_right{z-index:10003;background-color:#fefefe;border:2px solid#5b5b5b;border-top:2px solid#5b5b5b;border-bottom:2px solid#5b5b5b;border-right:2px solid#5b5b5b;border-left:hidden;width:300px;height:97px;position:fixed;right:-303px}#feedburner_right_img{position:absolute;top:-2px;left:-33px;border:0}#kakinetwork_right{z-index:10003;border:2px solid#303030;background-color:#fff;width:300px;height:97px;position:fixed}#kakinetwork_right img{position:absolute;top:-2px;left:-101px}#facebook_left{z-index:10005;border:2px solid#3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px}#facebook_left img{position:absolute;top:-2px;right:-35px}#facebook_left iframe{border:0px solid#3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px}#twitter_left{z-index:10004;border:2px solid#6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0}#google_plus_left{z-index:10003;background-color:#006ec9;border:2px solid#006ec9;border-top:2px solid#0056a0;border-bottom:2px solid#0056a0;border-left:2px solid#0056a0;border-right:hidden;width:152px;height:97px;position:fixed;left:-154px}#google_plus_left_img{position:absolute;top:-2px;right:-33px;border:0}#feedburner_left{z-index:10003;background-color:#fefefe;border:2px solid#5b5b5b;border-top:2px solid#5b5b5b;border-bottom:2px solid#5b5b5b;border-left:2px solid#5b5b5b;border-right:hidden;width:300px;height:97px;position:fixed;left:-303px}#feedburner_left_img{position:absolute;top:-2px;right:-33px;border:0}#kakinetwork_left{z-index:10003;border:2px solid#303030;background-color:#fff;width:300px;height:97px;position:fixed}#kakinetwork_left img{position:absolute;top:-2px;right:-101px}.box-title1{border:1px solid#ddd;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:5px 5px 5px#CCCCCC;-moz-box-shadow:5px 5px 5px#CCCCCC;box-shadow:5px 5px 5px#CCCCCC;padding:10px;margin:10px 0}.enteryouremail{background:#fff!important;border:1px solid#d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:165px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0px}.submitbutton{background:#F2F2F2;border:1px solid#F66303;-webkit-box-shadow:3px 3px 3px#666;box-shadow:3px 3px 3px#666;font:bold 12px Arial,sans-serif;color:#000000;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;-webkit-border-radius:5px;border-radius:5px;cursor:pointer}

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

.render().setUser('###########').start();</script></div></div></div><div id="on"><div id="google_plus_right" style="top: 52%;"><div id="google_plus_div"><img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi93imh_Al4hFtSWnXNQs0UIviQuFDY6fMq2L_R05yCoMkryvMG9ONel-64nXmEZoYNgwphXbsWjGoiVgjr5xK8WLAFirH6hMkEuP-aeXcy_ij40vwtJq1ZnIksRIe9nWejsGZtM72Yg4Nc/s1600/google-plus-icon.png"/><div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone></div></div></div><div id="on"><div id="feedburner_right" style=" top: 69%;"><div id="knfeedburner_div"><center><h4 style="color:#F66303;">سجل إميلك وتوصل بمواضيعنا :</h4><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open ('http://feedburner.google.com/fb/a/mailverify?uri=###########', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="" onblur="if (this.value == '') {this.value = 'أدخل إميلك هنا ...';}" onfocus="if (this.value == 'أدخل إميلك هنا ...') {this.value = '';}" type="text"/><input value="###############" name="uri" type="hidden"/><input value="أرسل" class="submitbutton" type="submit"/></form></center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH8V-HWrdyUCc8KdvNAtJck6F66Xy9q0GFey3b-08NelwVdvkYEgnx9RAR9CfKn-xwcHGI0p-fEkn8wKxDqj1gGMZ0e1VoTHju9JORfuQ7ibtT7JkZUt4EAT81KCEgXf0SH74jTuwGdXQ/s1600/rssfeed.png"/></div></div></div></div>

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

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

2012-12-30T13:39:00.000+00:00

إضافة بنرات إعلانية بتأثيرات 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>

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

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

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

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

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

2012-12-24T23:06:00.000+00:00

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

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

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

]]></b:skin>

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

/*---------- bubble tooltip -----------*/

a.tt{

position:relative;

z-index:24;

color:#3CA3FF;

font-weight:bold;

text-decoration:none;

}

a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/

a.tt:hover{ z-index:25; color: #aaaaff; background:;}

a.tt:hover span.tooltip{

display:block;

position:absolute;

top:0px; left:0;

padding: 15px 0 0 0;

width:200px;

color: #993300;

text-align: center;

filter: alpha(opacity:90);

KHTMLOpacity: 0.90;

MozOpacity: 0.90;

opacity: 0.90;

}

a.tt:hover span.top{

display: block;

padding: 30px 8px 0;

background: url(http://img132.imageshack.us/img132/4946/bubblethumb.gif)

no-repeat top;

}

a.tt:hover span.middle{ /* different middle bg for stretch */

display: block;

padding: 0 8px;

background: url(http://img571.imageshack.us/img571/2558/bubblefillerthumb1.gif)

repeat bottom;

}

a.tt:hover span.bottom{

display: block;

padding:3px 8px 10px;

color: #548912;

background: url(http://img132.imageshack.us/img132/4946/bubblethumb.gif)

no-repeat bottom;

}

ثم قم بحفظ القالب .
نتحكم في موضع الفقاعة بالتعديل على القيم :top:0px و left:0
والآن لتطبيق هذه الأداة على صورة ،نقوم بلصق الكود التالي في مشاركة جديدة Html مع التعديل عليه وذلك بإستبدال ما لون باللون الأحمر بالرابط الذي سوف تتوجه إليه عند الضغط على الصورة وإستبدال ما لون باللون الأخضر برابط الصورة ،وما لون بالون الأزرق بنص التلميح :

<a class="tt" href="http://www.bloggeridafat.blogspot.com" target="_blank"><img class="tt" src="http://www.m5zn.com/img/?img=57570f59ab6edac.png" /><span class="tooltip"><span class="top"></span><span class="middle">مرحبا بكم على مدونة إضـافـات الـبـلـوجـر </span><span class="bottom"></span></span></a>

ولتطبيق نفس العملية علي نص (كلمة أو جملة ) نستعمل هذا الكود :

<a class="tt" href="http://www.bloggeridafat.blogspot.com" target="_blank"> مدونة إضـافـات الـبـلـوجـر<span class="tooltip"><span class="top"></span><span class="middle">مرحبا بكم على مدونة إضـافـات الـبـلـوجـر</span><span class="bottom"></span></span></a>

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

إضافة الإبتسامات Onion Emoticons على مدونات بلوجر

2012-12-22T12:39:00.000+00:00

إضافة الإبتسامات Onion Emoticons على مدونات بلوجر

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

وهذه بعض الأمثلة :

ما عليك سوى تتبع المراحل الآتية :

قم بفتح المتصفح فاير فوكس ، فإن لم يكن لديك ، حمله من هنا
الآن سوف نقوم بتثبيت برنامج Grease monkey على فايرفوكس وذلك بالضغط على add toFirefox .

3.بعد أن ينتهي التحميل و التثبيت وافق على إعادة تشغيل الفايرفوكس,وسوف تظهر أيقونة رأس قرد فوق ساعة الكومبيوتر في الأسفل.

4.أما الآن يجب تثبيت الكود java script في البرنامج Grease monkey بالضغط هنا .

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

]]></b:skin>

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

img.emoticon {
padding: 0;
margin: 0;
border: 0;

}

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

وأخيرا، أتمنى أن تنال هذه الإضافة إعجابكم.

حل مشكلة خطأ فتح صفحة تحريرHtml لمنصة بلوجر الجديدة

2012-12-20T13:06:00.000+00:00

حل مشكلة خطأ فتح صفحة تحريرHtml لمنصة بلوجر الجديدة

السلام عليكم ورحمة الله تعالى وبركاته، اليوم سوف أقدم لكم حل حصري لمشكلة عدم فتح صفحة "تحرير Html للمدونة "

تتمثل هذه المشكلة في أن هناك كود جافا سكريبت يقوم بحذف خاصية Ifram ولذلك يجب حذفها.

الآن لنتوجه لتطبيق الطريقة ،(تعتمد هذه الطريقة أولا على السرعة في عميلة النقر بمؤشر الماوس)

1.توجه على حسابك بموقع بلوجر
2.توجه للمدونة المراد فتح القالب الخاص بها وذلك من خلال الزر "قالب"
3.قبل فتح صفحة القالب بثواني قم بالضغط على الزر "نسخ إحتياطي/إستعادة" بأقصي سرعة ممكنة ثم إختيار "تنزيل النموذج الكامل" وذلك بعدة نقرات لفتحها بسرعة قبل إكتمال فتح صفحة القالب .(من الممكن أن لا تنجح من المحاولة الأولى ،لكن حاول أن تكون سريعا في عملية النقر على الزرين "نسخ إحتياطي/إستعادة" و "تنزيل النموذج الكامل")
4.سوف يتم تحميل نسخة القالب، وهذا لا يهمنا الآن، قم بإغلاق النافذة ثم إضغط على زر "تحرير Html" ثم "متابعة"، وسوف تلاحظ أنك قد تمكنت من فتح تحرير Html الخاصة بقالب مدونتك.
5.الآن قم بحذف كود الجافا سكريبت المسبب لهذه المشكلة وذلك بالبحث عن هذا الكود وحذفه :

if (top != self) {

top.location.href = location.href;

}

</script>

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

طريقة التعديل على قالب بلوجر في صفحة المعاينة

2012-12-19T10:55:00.000+00:00

طريقة التعديل على قالب بلوجر في صفحة المعاينة

السلام عليكم ورحمة الله وبركاته ، أحببت أن أشارككم بهذه التدوينة الصغيرة والتي أجدها مهمة بالنسبة للذين يقومون بالتعديل على قوالب بلوجر وذلك بإستعمال الأداة firebug ،وهي كما نعلم أنها تتيح لك إمكانية التعديل على خصائص CSS للقالب من دون التعديل المباشر ، لكن المشكلة التي تصادفنا هي عند عمل معاينة للقالب حيث يظهر لك الشريط العلوي في اليسار به العبارة "معاينة" ، حينها الأداة Firebug لن تعمل معك ولن تتمكن من التأشير على خصائص CSS للقالب مما يجعلك تقوم بالعملية التعديل مباشرة على تحريرHTML , مما يجعل العملية متعبة بعض الشئ ، الحل بسيط جدا ،وهو ما سوف نراه الآن في هذا الدرس ، سوف نقوم بتفعيل إمكانية التعديل وذلك بإتباع الآتي :

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

]]></b:skin>

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

.blogger-clickTrap { display: none; }

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

إضافة ملفات Microsoft office و PDF على مدونات بلوجر

2012-12-17T18:34:00.000+00:00

إضافة ملفات Microsoft office و PDF على مدونات بلوجر

سلام الله عليكم إخواني أخواتي الكرام، موضوعنا اليوم ،سوف نقوم بمعرفة طريقة إضافة ملفات ميكروسوفت اوفيس (Microsoft office) بصيغة (doc, docx, ppt, pptx, pps xls, xlsx, ps, odt, odp, sxw, sxi, txt, rtf) وكذلك الملفات بصيغة PDF داخل مواضيع مدونات بلوجر ،هناك طريقتان لعمل ذلك ،وسوف نقوم بشرح كل واحدة على حدى باذن الله تعالى .

الطريقة الاولى :

1.قم بالتسجيل في موقع Scribd ثم قم بإيداع الملف المراد اظهاره في التدوينة بالضغط على زر Upload .

.عند انتهاء ايداع الملف ،قم انضغط على الزر Share كما هو موضح في الصورة أسفله .

3..بعد ذلك سوف يظهر لك الكود الذي سوف تقوم بلصقه في أي مكان داخل موضوع التدوينة من خلال تحرير Html الرسائل.

وهذا مثال للملف الذي تم ايداعه في الموقع بصيغةPDF ،حيث يدعم خاصية الطباعة وكذلك يمكن للزائر تحميله و نشره على المفضلات الاجتماعية .

الطريقة الثانية :

هذه الطريقة تعتمد على Google Docs Viewer. ويمكنك اظهار الملفات ذات الصيغة (PDF ,PowerPoint,TIFF) وذلك بادخال رابط الملف في الكود التالي ولصقه في موضوع التدوينة من خلال تحرير Html مشاركة جديدة، وللحصول على رابط الملف يمكنك استعمال الموقع MyDataNest.com, ثم قم بتبديل القيم width:550px; height:500px للتعديل على طول و عرض الملف.

<iframe src="http://docs.google.com/gview?url=ادخل رابط المستند هنا&embedded=true" style="width:550px; height:500px;" frameborder="0"></iframe>

وهذا مثال على الملف بصيغة PDF .

أتمنى أن تنال هذه الإضافة إعجابكم.

إضافة زر الطباعة لمدونات بلوجر

2012-11-14T22:19:00.000+00:00

إضافة زر الطباعة لمدونات بلوجر

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

تذكير: لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء.

إذا وجدت 2 من هذا الكود فالثاني هو المقصود :

<data:post.body/>

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

<span class='noprint'><data:post.body/></span>
<b:if cond='data:blog.pageType == "item"'>
<a href='javascript:window.print()'><img src='http://www.alphastat.org/images/shared/printer.gif'/></a>
</b:if>

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

إضافة أزرار صدى Google Buzz في مدونات بلوجر

2012-11-14T20:59:00.000+00:00

إضافة أزرار صدى Google Buzz في مدونات بلوجر

السلام عليكم ورحمة الله تعالى وبركاته، نستهل موضوعنا اليوم في شرح كيفية إضافة زر Google Buzz في مدونات بلوجر وما مدى أهميته و كيفية إستعمالة، أولا نبدأ بتعريف الخدمة :
تتيح لك خدمة نبضات Google مشاركة آخر المعلومات والصور والروابط بل ومشاركة أي شيء آخر تريد مشاركته مع جهات اتصال Gmail، كما أنها طريقة سهلة لمتابعة أصدقائك أيضًا. عند النقر على الرابط نبضات Google في حساب Gmail، سترى مجموعة من مشاركات الأشخاص الذين تتابعهم، كما سيظهر مربع لنشر التحديثات.
ثانيا ،كيفية إضافة زر الى مدونة بلوجر ؟ :

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

والآن قم بإختيار أحد الأكواد التالية حسب رغبتك في نوعية الزر,ثم قم بإضافة أحد الأكواد بعده

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

<data:post.body/>

ثم قم بإضافة أحد الأكواد التالية قبله
إذا كنت تريد مكان الزر أسفل التدوينة قم بإضافة أحد الأكواد بعده
1- الزر + العداد مع إضهار المشاركات في الأعلى :

2- الزر + العداد مع إضهار المشاركات في على الجانب :

3-الزر فقط بالحجم العادي :

<a title="نشر على نبضات Google" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-button" data-locale="ar"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

4- الزر فقط بالحجم صغير :

5-الزر عبارة على رابط :

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

طريقة فلترة الكلمات المسيئة لتعليقات الزوار على مدونات بلوجر

2012-11-09T16:29:00.001+00:00

طريقة فلترة الكلمات المسيئة لتعليقات الزوار على مدونات بلوجر

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

1.قم بالبحث عن الوسم :

<body>

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

إن وجدت أكثر من واحد فالكود الأول هو المقصود :

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

<p>
<div expr:id='data:comment.id' style='display:none;'>
<data:comment.body/>
</div>
<script type='text/javascript'>badwordfilter("<data:comment.id/>");</script>
</p>

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

حل مشكل إختفاء أداة الصفحات في بلوجر

2012-11-08T20:13:00.001+00:00

حل مشكل إختفاء أداة الصفحات في بلوجر

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

نتجه إلى تحرير Html ← بالضغط على Control+F نبحث عن:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>

نستبدله بالكود التالي { نمسحه ونضيف الكود التالي مكانه } :

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>
</b:section>

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

إضافة قائمة منزلقة لآخر المواضيع لمدونات بلوجر

2012-11-07T21:37:00.001+00:00

إضافة قائمة منزلقة لآخر المواضيع لمدونات بلوجر

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

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

]]></b:skin>

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

.accordion {

width: 620px;

text-align: center;

border-bottom: solid 1px #c4c4c4;}

.accordion h3 {

background: #e9e7e7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBouAvKIAuZF-6V_iO308c88spEbGxhyphenhyphenvFZdhVVotSTk9SowvYC7fqDQaWnDsV87or7r5JuRqeuWuWNAB68TQ4ZO8yHQYde5dDIYGCEGz_4NDtm-xzZXUuOPJs0-ZxPyPMbJHPY-Hd4XWD/s320/arrow-square.gif) no-repeat right -51px;

padding: 7px 15px;

margin: 0;

font: bold 120%/100% Arial, Helvetica, sans-serif;

border: solid 1px #c4c4c4;

border-bottom: none;

cursor: pointer;}

.accordion h3:hover {

background-color: #e3e2e2;}

.accordion h3.active {

background-position: right 5px;}

.accordion p{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7juuQUQxLkckqj_bWRcGbln_Yb1hWNSeWuPcU-d9PnI5IwDFKxkwHfQ_0bdpGtRuclUY5_zca6BrzffKrwm4_H_LdRfAbfB_72vinzgFEY_LbDudHs16CbotD8hdFdxzrAlaLK9YAxBo/) ;

margin: 0;

padding: 10px 15px 20px;

border-left: solid 1px #c4c4c4;

border-right: solid 1px #c4c4c4;}

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

</head>

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

$(document).ready(function(){

$(".accordion h3:first").addClass("active");

$(".accordion p:not(:first)").hide();

$(".accordion h3").click(function(){

$(this).next("p").slideToggle("slow")

.siblings("p:visible").slideUp("slow");

$(this).toggleClass("active");

$(this).siblings("h3").removeClass("active");

});

</script><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>

قم بالبحث عن الكود التالي (إذا وجدت إثنين فالكود الثاني هو المقصود) :

<data:post.body/>

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

<b:if cond='data:blog.pageType == "item"'>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAzwqVRfjdTDIdIVZRJFJl0qG7ABYXrqQ2rxvV9TUKn3BFMT5RWLJKfjX4KGvfAUjO1iH_ALiJFBXiuCdyUNrEIohHawbik2g_X96tuW5zquAsa2w0iO-swkVEhoMCRGUnIkNKazGWzY4/s128/no-image.blogspacetech.jpeg";
showRandomImg = true;
jimgwidth = 80;
jimgheight = 80;
jfntsize = 12;
jacolor = "#E67C15";
jaBold = true;
jtext = "التعليقات";
jshowPostDate = true;
jsummaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";
numposts = 10;
label = "إضافات بلوجر";
home_page = "http://www.idafat.blogspot.com/";
</script>
<div class='accordion'>
<script src='http://blogspacetech.googlecode.com/files/new.recent-posts.js' type='text/javascript'/>
</div>
</b:if>

width: 620pxقم تغيير هذه القيمة على حسب عرض الإضافة التي تريد

إضافات بلوجر : قم تغيير هذه التسمية بأحد التسميات الخاصة بمدونتك

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

إضافة أزرار التنقل لصفحات بلوجر

2012-11-07T20:30:00.002+00:00

إضافة أزرار التنقل لصفحات بلوجر

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

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

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

<a class='blog-pager-top-link' href='#' title='إلى الأعلى'>إلى الأعلى</a>

</span>

<a class='blog-pager-bottom-link' href='#bottom' title='إلى الأسفل'>إلى الأسفل</a>

</span><font size="0"><a href="http://www.siege--auto.org"></a></font>

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

</body>

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

وأخيرا قم بالبحث عن الوسم :

]]></b:skin>

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

#blog-pager {
position: fixed;
bottom: 10px;
right: 50px;
width: 120px;
height: 120px;
display: block;
overflow: hidden;
background: #fff;
border: 1px solid #ccc;
-moz-box-shadow: 1px 1px 3px #666666;
-webkit-box-shadow: 1px 1px 3px #666666;
box-shadow: 1px 1px 3px #666666;
border-radius: 60px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
z-index: 9;
}
#blog-pager a {
display: block;
width: 30px;
height: 30px;
overflow: hidden;
text-indent: -99999px;
position: absolute;
padding: 5px;
}
a.blog-pager-top-link {
background: url(https://lh5.googleusercontent.com/-hSHWhg9kGg0/T2MugFnRreI/AAAAAAAAHw8/Htfa78EMsoQ/s30/arrow_up2.png) no-repeat center center;
top: 0px;
left: 40px;
}
a.blog-pager-bottom-link {
background: url(https://lh6.googleusercontent.com/-YBE6uU6Hs9A/T2Muc7lPfII/AAAAAAAAHw8/MEwsNC6GORY/s30/arrow_down2.png) no-repeat center center;
top: 80px;
left: 40px;
}
a.blog-pager-newer-link {
background: url(https://lh3.googleusercontent.com/-x2iM_Ehd97o/T2Muc2KIN9I/AAAAAAAAHw8/NsKA5zQvepo/s30/arrow_left2.png) no-repeat center center;
top: 40px;
left: 0px;
}
a.blog-pager-older-link {
background: url(https://lh4.googleusercontent.com/-yHMoNLjW5Eg/T2MudH-o1FI/AAAAAAAAHw8/kmXGiY_ztZI/s30/arrow_right2.png) no-repeat center center;
top: 40px;
left: 80px;
}
a.home-link {
background: url(https://lh4.googleusercontent.com/-Ud-NZ0D_WgI/T2MvUcqLnXI/AAAAAAAAHw8/5aeH4DguMgc/s30/home.png) no-repeat center center;
top: 40px;
left: 40px;
}
.blog-mobile-link {
display: none;
}

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

النشر في الفيس بوك تزامنا مع النشر في البلوجر

2012-11-07T19:03:00.000+00:00

تعرف على كود الألوان بكبسة زر... برنامج capture couleur

2012-11-07T18:00:00.003+00:00

تعرف على كود الألوان بكبسة زر... برنامج capture couleur

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

عند تحديدك للون سوف يلزمك نسخ الكود الخاص به من البرنامج ،لذلك يجب الضغط على زر التثبيت الذي يمكنك إختياره من الزر Touche ثم إختر الزر الذي تريد من F2 حتى الزرF12 ،فمثلا إذا إخترت F2،قم بالضغط على الزر F2من لوحة مفاتيح جهازك لتثبيت الكود ولمعاودة تشغيل البرنامج مرة ،أخرى إضغط علي الزر Remise à Zero الموجودة تحت اللون في الإطار المربع.

لتحميل البرنامج

أتمنى أن تستفيدو من هذا البرنامج رغم بساطته ،لكنه يختصر عليك الكثير من الوقت والجهد.

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

2012-11-07T17:08:00.001+00:00

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

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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحرير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- درجة الميلان عند وضع مؤشر الماوس على الصورة .

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

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

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

2012-11-07T14:58:00.000+00:00

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

السلام عليكم ورحمة الله وبركاته ،اليوم سوف نتعرف على كيفية إضافة الروابط الأوتوماتيكية لتدوينات بلوجر تحت كل موضوع ،حيث يُعرض على شكل جدول أسفل كل تدوينة ويتضمن روابط المقال على شكل 3 صيغ : URL,HTML,BBCODE
والان نترككم مع كيفية تطبيق الإضافة ,

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

]]></b:skin>

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

#table {

font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;

font-size: 13px;

margin: 10px -12px;

width: 580px;

text-align: left;

border-collapse: collapse;

direction:ltr;

}

#table th {

font-size: 13px;

font-weight: normal;

padding: 8px;

background: #b9c9fe url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMZgxgFW3H4NfuZzzsrifHUFUCpBkwwDhxzsrSEhbgTpztAI2yIiidFnVW0HGDGmeejUrmq59BdlhyphenhyphencG0J20rWIDhDNx5ZFtC8o6L6gNF9g5rh9OXTaIY0ETWF0XqvwIaCAA3M4kirgj8Y/s1600/gradhead.png') repeat-x;

border-top: 2px solid #d3ddff;

border-bottom: 1px solid #fff;

color: #039;

}

#table td {

padding: 8px;

border-bottom: 1px solid #fff;

color: #4c4c4c;

border-top: 1px solid #fff;

background: #e8edff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSK7xudJ18cGkDe2fJynr4GjyUb0xfXSMBQ64D_N_QRoIzWM4zH_utRUrdDUTPM9VdkJVJuOa9ez6F2QMxHMcXb6FZ2Kc5EpuNhCZVfuQ7YDABeamMVB_fNY9RQvh-_RvjjGKBcf9t-HMI/s1600/gradback.png') repeat-x;

}

#table tfoot tr td {

background: #e8edff;

font-size: 20px;

color: #99c;

text-align:center;

}

#table tbody tr:hover td {

background: #d0dafd url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijH9QaQmTusTECjXudtSX3a83OvCBKHBOIoduHF4K33ZzPFJrUuDbCqX-p__YqVaEiw86fbaP59h9xEfz84xr2YDcX9GmVUgJ7eEoIne4i0Etc6wsJ2mzP6YEcNEkrQ9zZH5YAitNVxExQ/s1600/gradhover.png') repeat-x;

color: #339;

}

#table a:hover {

text-decoration:underline;

}

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

<data:post.body/>

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

<b:if cond='data:blog.pageType == "item"'>

<tfoot>

<tr>

<td colspan='2'>روابط هذه التدوينة قابلة للنسخ واللصق</td>

</tr>

</tfoot>

<tr>

</tr><tr>

<td><input expr:value='"<a href=&quot;" + data:post.canonicalUrl + "&quot; title=&quot;" + data:post.title + "&quot;>" + data:post.title + "</a>"' onclick='this.focus(); this.select();' readonly='readonly' style='width: 560px;' type='text'/></td>

</tr><tr>

<td>BBCode</td>

</tr>

</table> </b:if>

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

إضافة الزر 1+ لجوجل على مدونات بلوجر

2012-11-07T14:37:00.002+00:00

إضافة الزر 1+ لجوجل على مدونات بلوجر

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

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

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

</body>

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

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

<data:post.body/>

ثم قم بلصق الكود التالي بعده ،ليكون الزر أسفل التدوينة ،أو قبله ليكون الزر تحت عنوان التدوينة .

<b:if cond='data:blog.pageType == "item"'>
<g:plusone expr:href='data:post.url' size='tall'/>
</b:if>

ملاحظة : يتوفر زر1+ على 4 قياسات حيث يمكنك إختيار القياس المناسب لك وذلك بإستبدال الكلمة tall من الكود بأحد القياسات الموجودة في الصورة أسفله .

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

معرب قوالب بلوجر

2012-09-15T19:15:00.000+01:00

معرب قوالب بلوجر

لا تحتاج الآن لتعلم لغة html و css لتعريب قوالب بلوجر , مع برنامج معرب قوالب بلوجر ستعرب قالبك بضغطة زر و لن يحتاج منك ذلك سوى بضع ثواني ...
معرب قوالب بلوجر هو برنامج لتحويل قوالب ( أشكال ) بلوجر الأجنبية الى قوالب تتناسب و تتوافق مع المحتوى العربي فمعظم قوالب بلوجر ( أكثر من 90 % ) بالانجليزية , و هذا يعني أن محاذاة الكتابة و العناوين من اليسار الى اليمين , فالبرنامج يقوم بتحويل أكواد القالب ليصبح تنسيق الكتابة من اليمين الى اليسار .

ميزات إضافية :

سحب القوالب Drag & Drop
إمكانية تعريب اضافات بلوجر
امكانية اختيار عدم تعديل ا أكواد السكريبت <script>
نافذة لعرض التعديلات التي طرأت على القالب
حذف المسافات بين الحروف
تحويل الكلمات الإنجليزية إلى العربية
تكبير حجم الخطوط
تغيير ابعاد الحاشية و الحشو Margin - padding
تعديلات أخرى هامة .......

تعريب القوالب بضطة زر

لتعريب قالب كل ما عليك هو الضغط على زر و اختيار القالب الذي تريبد تعريبه

تعريب القالب بسحبه إلى البرنامج

يمكنك تعريب القالب بسحبه إلى البرنامج . فقط قم بسحبه و سيتعرب

إمكانية تعريب اضافات بلوجر

تعريب إضافات و أدوات بلوجر .اضافات مثل صندوق الاشتراك أو التعليقات

تكبير حجم الخطوط

الكلمات العربية ستظهر صغيرة اذا كانت بنفس حجم الكلمات الانجليزية

حذف المسافات بين الحروف

حروف الكلمات العربية متلاصقة على عكس الكلمات الانجليزية

تغيير ابعاد الحاشية و الحشو

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

تعريب الكلمات

ترجمة الكلمات الانجليزية إلى العربية

تعديلات أخرى هامة

و المزيد من التعديلات الأخرى ليتعرب القالب بدون أخطاء

إمكانية إضافة حقوق تعربيك

إضافة رابط مدونتك في الأسفل لحفظ حقوق تعريبك

إختيار عدم تعديل أكواد السكريبت <script>

لا تقلق من حدوث أخطاء في القالب بسبب تغييرات في السكريبت . يمكنك تعريب القالب بدون إحداث أي تغيير على السكريبتات

نافذة لعرض التعديلات التي طرأت على القالب

لمشاهدة جميع التعديلات التي طرأت على القالب بعد تحويله

معلومات :

آخر إصدار: 1.5
أنظمة التشغيل: Windows 2000 / XP / 2003 / Vista / Windows7
اللغات: العربية
الترخيص: مجاني - FREE
تاريخ الإنشاء : 02/11/1432 الموافق ل 29/09/2011
آخر تحديث: 16/04/2012

تحميل :

إضغط هنا