إضافة أداة أو أداتين فوق ( أسفل ) صندوق رسائل المدونة في مدونات بلوجر

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

لذلك أود اليوم  أن أقوم بشرح سهل و بسيط عن كيفية إضافة عمودين أو أداتين Sections "إضافة أداة" فوق صندوق رسائل المدونة و / أو تحته. بعد ذلك يمكنك إضافة ادوات جافا سكريبت HTML/Javascript كما تشاء.

كالعادة و قبل أن نبدأ يجب علينا أخذ نسخة إحتياطية من القالب لتجنب أي خطأ قد يحصل .

نذهب إلى قالب --> تحرير HTML --> باستعمال F3 أو ctrl+F نبحث عن الكود التالي :

<b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='false' title='Post sul blog' type='Blog'/> </b:section>

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

<div id='Widget1A' style='width: 47%; float: left; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-1a' preferred='yes' style='float:left;'/> </div> <div id='Widget1B' style='width: 47%; float: right; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-1b' preferred='yes' style='float:right;'/> </div> <div style='clear:both;'/>

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

<div id='Widget2A' style='width: 47%; float: left; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-2a' preferred='yes' style='float:left;'/> </div> <div id='Widget2B' style='width: 47%; float: right; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-2b' preferred='yes' style='float:right;'/> </div> <div style='clear:both;'/>

النسبة المئوية لعرض الأدواة يمكن أن يكون بأي نسبة تريدون أي بالقياسات التي تريدونها، المهم أن يكون مجموعهما أقل من 100%.

إذا ظهرت الأداتان فوق بعض فقم بتنقيص أو تصغير النسب المائوية / قياسات الأداتين حتى يظهرا جنبا إلى جنب.

أما إذا أردتم إضافة 3 أدوات "أضافة أداة" فيمكنكم الإعتماد على الكود التالي.

<div id='Widget2A' style='width: 31%; float: left; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-2a' preferred='yes' style='float:left;'/> </div> <div id='Widget2B' style='width: 31%; float: left; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-2b' preferred='yes' style='float:left;'/> </div> <div id='Widget2C' style='width: 31%; float: right; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-2c' preferred='yes' style='float:right;'/> </div> <div style='clear:both;'/>

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

باقي التفاصيل »

مُحول كود إعلانات أدسنس Adsense Code Converter

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

باقي التفاصيل »

إضافة أداة محول أكواد html للبلوجر

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

باقي التفاصيل »

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

العروض الديناميكية للمدونات هي طريقة جديدة من موقع بلوجر تمكنك من عرض مدونتك بعدة طرق جديدة ومثيرة.

لتفعيل هذه الطريقة على مدونتك يجب توافر الشروط الآتية :

1- أن تكون المدونة عامة ، فلا يحتاج القراء إلى تسجيل الدخول لعرض مدونتك .

2- أن يتم تمكين الخلاصات في مدونتك بشكل كامل ، في علامة التبويب إعدادات | خلاصة موقع الويب، يمكنك تمكين إما الكل أو الفاصل لخلاصة المشاركات .

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

يمكن لمستخدمي مدونات البلوجر عرض مدوناتهم بالثيمات الخمس ، وهي :

1.  طريقة العرض الأولى flipcard

 لعرض المواضيع كأيقونات صغيرة ، ضع الكود التالي بعد عنوان مدونتك
view/flipcard#!/
مثال : 

 http://makeactionblogger.blogspot.com/view/flipcard#!/

2.  طريقة العرض الثانية mosaic

لعرض المواضيع كمستطيلات عشوائية ، ضع الكود التالي بعد عنوان مدونتك
view/mosaic#!/

مثال : 

http://makeactionblogger.blogspot.com/view/mosaic#!/

3.  طريقة العرض الثالثة sidebar

عرض المواضيع في شريط جانبي ، ضع الكود التالي بعد عنوان مدونتك
view/sidebar#!/
مثال :

http://makeactionblogger.blogspot.com/view/sidebar#!/

4.  طريقة العرض الرابعة snapshot

عرض المواضيع بمربعات كبيرة مقسمة ، ضع الكود التالي بعد عنوان مدونتك
view/snapshot#!/
مثال :

makeactionblogger.blogspot.com/view/snapshot#!/

5.  طريقة العرض الخامسة timeslide

عمل مزج بين صور المواضيع و القائمة المنسدلة للشريط الجانبي و اقرأ المزيد

ضع الكود التالي بعد عنوان مدونتك
view/timeslide#!/
مثال :

http://makeactionblogger.blogspot.com/view/timeslide#!/

باقي التفاصيل »

كيفية حل مشكلة Scroll Bar في أسفل المدونة

مشكلة السكرول بار  يعاني منها كثير من المدونين في مدونتهم ، وهي بالتالي تسبب ازعاج كبير لزائر المدونة و تعطي إنطباع سئ عنها .

وهنا يوجد الحل بكل سهولة فقط اتبع الخطوات التالية :

إفتح أكواد HTML الخاصه بقالب مدونتك , ثم قم بالبحث عن الكود التالى

]]></b:skin>

 وأضف فوقه هذا الكود

html {
          overflow-x: hidden;
        }
<div style="position:
fixed; bottom: 0px; border: 0px solid ; left: 0px;
 width: 160px; text-align: left;">
    </div>
<End :

احفظ القالب و شاهد النتيجة 

باقي التفاصيل »

أفضل طريقة لإضافة مربع البحث بشكل جميل

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

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

1- الدخول إلى لوحة التحكم الخاصة بمدونتك
2- الذهاب إلى خانة الإضافات
3- نسخ الكود التالي في أداة HTML/Javascript جديدة

<div id='search-wrapper'><style type='text/css'> .form-wrapper { width: 290px; padding: 5px; margin: 10px auto; overflow: hidden; border-width: 1px; border-style: solid; border-color: #dedede #bababa #aaa #bababa; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #f6f6f6; } .form-wrapper #search { width: 210px; height: 12px; padding: 10px 5px; float: right; font: bold 18px 'Arial', 'trebuchet MS', 'Tahoma'; border: 1px solid #ccc; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .form-wrapper #search:focus { outline: 0; border-color: #aaa; } .form-wrapper #search::-webkit-input-placeholder { color: #999; font-weight: normal; } .form-wrapper #search:-moz-placeholder { color: #999; font-weight: normal; } .form-wrapper #search:-ms-input-placeholder { color: #999; font-weight: normal; } .thumb{position:relative;left:4px;top:1px;} .form-wrapper #submit { float: left; border: 1px solid #00748f; height: 32px; width: 60px; padding: 0; cursor: pointer; font: bold 15px Arial, Helvetica; color: #fafafa; text-transform: uppercase; background-color: #0483a0; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .form-wrapper #submit:hover, .form-wrapper #submit:focus { background-color: #91bc1e; } .form-wrapper #submit:active { outline: 0; } .form-wrapper #submit::-moz-focus-inner { border: 0; } </style> <div class='rss'> <form action='/search' class='form-wrapper' method='get'> <input id='search' name='q' placeholder='' type='text'/> <input id='submit' type='submit' value='بحث'/> </form></div>

و الأن ضع الإضافة في المكان المناسب الذي يعجبك ، مع تمنياتنا أن ينال إعجابك

 لا تنس مشاركة الموضوع مع أصدقائك

باقي التفاصيل »

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

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

طريقة تركيب الكود :


اذهب الى تخطيط.
ثم اضغط اضافة أداة HTML\JavaScript
ثم ضع الكود التالي فيه.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" >


var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="http://im33.gulfup.com/pIUN1.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

state: {isvisible:false, shouldvisible:false},

scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},

keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},

togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting. startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},

init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width ()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}

scrolltotop.init()

</script>

يمكنك تغيير ما هو باللون الأحمر برابط الصورة التي تريدها.
اضغط حفظ.

باقي التفاصيل »

طريقة تغيير خطوط المدونة إلى خط عربي إحترافي

تقدم حاليا جوجل خطوط عربية مميزة تزين بها مدونتك بشكل احترافي جميل و مميز , و يلزمك فقط تجربة بعض الخطوات الهامة
لاستكمال و ضع الخط المناسب .

باقي التفاصيل »

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

طريقة  إضافة اشتراك عبر المواقع الإجتماعية بشكل ذهبي

طريقة التركيب :

ادخل مدونتك .
ثم التخطيط .
ثم اختر اداة جديده HTML/JavaScript .
اخيرا انسخ الكود مع استبدال الروابط والصور بما يلزم .

      <style>/*Social Networks Widget Dev By (www.add-b.blogspot.com */
    .Social-Networks-Sherif{padding:0px;margin:1px;text-align:center;direction:rtl;}.Social-Networks-Sherif:hover{padding:0px;margin:1px;text-align:center;direction:rtl;transform:rotate(360deg);-ms-transform:rotate(360deg); /* IE 9 */-moz-transform:rotate(360deg); /* Firefox */-webkit-transform:rotate(360deg); /* Safari and Chrome */-o-transform:rotate(360deg); /* Opera */transition: all 1s;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}.sherif {text-align:center;background:rgb(216, 230, 235);border:1px solid rgb(159, 150, 250);-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;-ms-border-radius:10px;border-radius:10px;}.sherif1 {font-family:tahoma;text-align:right;margin:2px;background:none repeat scroll 0% 0% rgb(235, 235, 235);border:1px solid rgb(200, 200, 200);-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;-ms-border-radius:10px;border-radius:10px;}/*Social Networks Widget Dev By (add-b.blogspot.com */</style>

    <div class='sherif'><a rel='nofollow' href="GPLUS_URL" rel="nofollow" target="_blank"><img  class='Social-Networks-Sherif' title="تابعنى عبر جوجل بلس"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9vMcCuo83D18n6YK5ogfTLpceclWDH_ZkGEAmI0SzzzCDWFTJ4eG3ucgzRttf04F52Rdbf7SzFmkQpwKXfU9aZD3JAxV0PXKcgp1M8GSGlfdvtTVYImRhcPYz0afRDjuaZcP5xl_-drYw/s1600/google-plus-icon.png"  /></a>
    <a rel='nofollow' href="FACEBOOK_URL" rel="nofollow" target="_blank"><img  class='Social-Networks-Sherif' title="تابعنى عبر الفيس بوك"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDRdW9km7JAFV17VBYg2RC9iGzUHklq9IL77PTV8aIo9kL5CvIPyOa9OhG6lRV6cvIyWaPK1NusRSXFQ5WduPSJapeVyI3nfZOArv9uVAzSmB75np3uLyLiylQRQVOJ-rIzFOpY3Z53JXt/s1600/facebook-icon.png"  /></a>
    <a rel='nofollow' href="TWITTER_URL" rel="nofollow" target="_blank"><img  class='Social-Networks-Sherif' title="تابعنى على تويتر"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyS57wmzy6ho06bjI71pkAYPNWw0xvGK6ACHfUaFatCS-mhYFrswVHy1sOvV3O7ZTHKidpb2CVoLwOj5yA7tsqEPHHKwld9yxpJzxu5TVmL8HF8EAKMgAYpPn1-zXv1l97EivKzLupKqPP/s1600/twitter-icon.png"  /></a>
    <a rel='nofollow' href="FEED_URL" rel="nofollow" target="_blank"><img  class='Social-Networks-Sherif' title="تابعنى عبر الخلاصة"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGMpF7KeHPmVrtl-lTd0OzZ1ijSxSlx14MXfez-9PKMfxDIy4TBFWQIbCb9iZV1BPMGIJ3qIfei8lzYyHPJxmpjk6FQQJLieBLDzc98B90ouEQ7uZN-h8UWHrWSYN4DmE0TsgfRnco3HWL/s1600/feed-icon.png"  /></a>
    <div class='sherif1'><small><a rel='dofollow' href='http://th3techniques.blogspot.com/search/label/blogger'>إضافات بلوجر</a></small></div></div>

ثم قم بتغيير ما باللون الأحمر برابط كامل  :

Gplus_Url رابط حسابك فى جوجل بلس
Facebook_Url رابط صفحتك او حسابك على الفيس بوك
Twitter_Url رابط حسابك فى تويتر
FEED_URL رابط خلاصات موقعك او رابط حسابك فى feedburner

وفي الختام اشكركم على تواصلكم عبر موقعنا

باقي التفاصيل »

في خطوات بسيطة.. اصنع مدوّنتك بنفسك

فى هذا الدرس سوف تتعلم كيفية إنشاء مدونة مجانية على بلوجر

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

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

متطلبات عمل مدونة مجانية على بلوجر :

1- لابد أن يكون لديك بريد إلكترونى على جوجل (Gmail) .
2- بعد عمل الإيميل على جوجل يمكنك الأن عمل مدونة على بلوجر .

خطوات إنشاء إيميل على جوجل Gmail

قم بالضغط على الرابط التالى لإنشاء بريد إلكترونى على جوجل >> Gmail <<  ثم قم بإتباع الخطوات التالية :

1- First Name : أكتب إسمك الأول .
2- Last Name : أكتب إسم العائلة .
3- Choose Your User Name : إختر إسم إيميلك المراد عمله .
4- Create a Password : أكتب كلمة السر الخاصه بحسابك .
5- Confirm Your Password : قم بكتابة كلمة السر مرة أخرى للتأكيد.
6- Birthday : إختر تاريخ ميلادك .
7- Gender :  إختر نوعك سواء ذكر أو أنثى .
8- Mobile Number : أكتب رقم الهاتف الخاص بك أو يمكنك تركه الأن وكتابته لاحقا.
9- Your current email address : أكتب البريد الإلكترونى الحالى مثلا على شركة ياهو أو هوتميل .
10- Prove you're not a robot : أكتب الحروف الموجوده فى الصورة فى المربع التالى .
11- Location : إختر الدولة الموجود بها .
12- قم بوضع علامة صح على المربعين التاليين للموافقة على شروط خدمة جوجل .
13- Next Step : إضغط على الخطوة التالية لإكمال التسجيل .

الأن مبروك عليكم الإيميل .الأن قد أنهينا أول خطوة فى درس اليوم .نأتى إلى الخطوة الأهم وهى إنشاء مدونة مجانية على بلوجر .قم بمتابعة الخطوات التالية .

قم بالضغط على الرابط التالى >> إنشاء مدونة على بلوجر <<  تابع الصور والخطوات التالية:

قم بالدخول لحسابك فى جوجل ثم إضغط على تسجيل الدخول أو على حسب لغتك "Sign In "

قم بعمل ملفك الشخصى فى Google+  أو إنشاء ملف شخصى فى Blogger .سأختار أنا الخيار الثانى "إنشاء ملف شخصى فى Blogger"

الإسم المعروض : قم بكتابة الإسم الذى سيظهر لك فى بلوجر ثم إضغط على متابعة إلى بلوجر Blogger  .

لعمل مدونة جديدة قم بالضغط على كلمة مدونة جديدة ثم تابع الخطوات التالية .

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

الأن قد أنشأت أول مدونة مجانية لك على بلوجر .تهانينا

باقي التفاصيل »

أساسيات التدوين على بلوجر

هذا الدرس يتحدث عن كيفية إختيار مجال الكتابة فى المدونة .

باقي التفاصيل »

كود جافا لعرض الصور + الرابط + الفلاش

هذا الكود يعمل على عرض الصور + رابط الزيارة ، و يمكن أيضا عرض الفلاش  (بشكل عشوائي) أي يتغير مع كل تحديث للصفحة.

باقي التفاصيل »

ثلاثة بنرات تتبدل بشكل جميل

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

معاينة

<table width="470" height="90" dir="ltr"><tr><td>
<script>

var slideurl=new Array()
var slidecomment=new Array()
var slidelink=new Array()
var slidetarget=new Array()


// EDIT-ZONE STARTS HERE  // BY : WWW.elahmad.COM/

// Set the URLs of your slides (images) // مسار الصور
slideurl[0]="http://www.elahmad.com/images/banare.gif "
slideurl[1]="http://www.elahmad.com/images/banner468x60.gif"
slideurl[2]="http://www.elahmad.com/images/banare.gif"

// Add a link for each slide //
// If you don't want to link a slide type "#" instead (see middle-sample below)
// روابط البنرات على الترتيب
slidelink[0]="http://www.elahmad.com"
slidelink[1]="http://www.elahmad.com/pagerank.php"
slidelink[2]="http://elahmad.com"

// Add a target for each link
// Allowed values are: "_blank", "_top", "_parent", "_self" or the name of a frame
slidetarget[0]="_blank"
slidetarget[1]="_blank"
slidetarget[2]="_blank"

// Add a comment for each slide // الوصف
slidecomment[0]="وصف البانر رقم  - 1 -"
slidecomment[1]="وصف البانر رقم  - 2 - "
slidecomment[2]="وصف البانر رقم  - 3 -"

// Set the font for the comments
var slidefont="TAHOMA" // نوع الخط

// Set the fontcolor for the comments
var slidefontcolor="black" // لون الخط

// Set the fontsize for the comments (HTML-values ranging form 1 - 6)
var slidefontsize=2 // حجم الخط

// Set the width of the pictures (pixels)
var slidewidth=468 // عرض الصورة بالبكسل

// Set the height of the pictures (pixels)
var slideheight=60 // طول الصورة بالبكسل

// Set the pause between the pictures (seconds)
var pause=5 // المدة الفاصلة بين كل صورة

// EDIT-ZONE ENDS HERE

var preloadedimages=new Array()
for (i=0;i<slideurl.length;i++){
    preloadedimages[i]=new Image()
    preloadedimages[i].src=slideurl[i]
}

var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0
var ie=document.all?1:0

var imgpreload=new Array()
for (i=0;i<=slideurl.length-1;i++) {
    imgpreload[i]=new Image()
    imgpreload[i].src=slideurl[i]
}

var pos_left=0
var pos_top=0
var speed=20
var step=10
var i_loop=0
var i_image1=0
var i_image2=1
var i_space=""
var all_space=""
var max_space=20
var content=""
var i_slide=0
pause*=1000

function stretchimage() {
    if (i_loop<=slidewidth) {
        if (ie) {
            imgcontainer1.innerHTML="<a href='"+slidelink[i_image1]+"' target='"+slidetarget[i_image1]+"'><img width='"+i_loop+"' height='"+slideheight+"' src='"+slideurl[i_image1]+"' border='0'></a>"
            document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft+i_loop
           
            imgcontainer2.innerHTML="<a href='"+slidelink[i_image2]+"' target='"+slidetarget[i_image2]+"'><img width='"+(slidewidth-i_loop)+"' height='"+slideheight+"' src='"+slideurl[i_image2]+"' border='0'></a>"
        }
        if (ns6) {
            document.getElementById('imgcontainer1').innerHTML="<a href='"+slidelink[i_image1]+"' target='"+slidetarget[i_image1]+"'><img width='"+i_loop+"' height='"+slideheight+"' src='"+slideurl[i_image1]+"' border='0'></a>"
            document.getElementById('imgcontainer2').style.left=parseInt(document.getElementById('imgcontainer1').style.left)+i_loop
           
            document.getElementById('imgcontainer2').innerHTML="<a href='"+slidelink[i_image2]+"' target='"+slidetarget[i_image2]+"'><img width='"+(slidewidth-i_loop)+"' height='"+slideheight+"' src='"+slideurl[i_image2]+"' border='0'></a>"
        }
        i_loop=i_loop+step
        var timer=setTimeout("stretchimage()",speed)
      }
    else {
        clearTimeout(timer)
        var imgcontent="<a href='"+slidelink[i_image1]+"' target='"+slidetarget[i_image1]+"'><img width='"+i_loop+"' height='"+slideheight+"' src='"+slideurl[i_image1]+"' border='0'></a><br><center><font face='"+slidefont+"' size="+slidefontsize+" color='"+slidefontcolor+"'>"+slidecomment[i_image1]+"</font></center>"
        if (ie) {
            imgcontainer1.innerHTML=imgcontent
            document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft+i_loop   
            imgcontainer2.innerHTML=""
        }
        if (ns6) {
            document.getElementById('imgcontainer1').innerHTML=imgcontent
    document.getElementById('imgcontainer2').style.left=parseInt(document.getElementById('imgcontainer1').style.left)+i_loop   
            document.getElementById('imgcontainer2').innerHTML=""
       
        }
        changeimage()
    }
}

function changeimage() {
    i_loop=0
    i_image1++
    if (i_image1>slideurl.length-1) {i_image1=0}
    i_image2=i_image1-1
    if (i_image2>slideurl.length-1) {i_image2=0}
    if (i_image2<0) {i_image2=slideurl.length-1}
    if (ie) {
        document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft
    }
    if (ns6) {
        document.getElementById('imgcontainer2').style.left=parseInt(document.getElementById('imgcontainer2').style.left)
    }
       var timer=setTimeout("stretchimage()",pause)
}


function simpleslideshow() {
    i_slide++
    if (i_slide>=slideurl.length) {i_slide=0}
    document.slideimage.src=preloadedimages[i_slide].src
    simpleslideshowcomment()
    var fadetimer=setTimeout("simpleslideshow()",pause)
}

function simpleslideshowcomment() {
    if (i_space>=0){
        all_space=""
        content=""
        for (i=0;i<i_space;i++) {
            all_space+=" "
        }
        for (i=0;i<slidecomment[i_slide].length;i++) {
            var thisletter=slidecomment[i_slide].substring(i,i+1)
            thisletter=thisletter+all_space
            content+=thisletter
        }
        window.status=content
        i_space--
        var fadetimer=setTimeout("simpleslideshowcomment()",20)
    }
    else {
        clearTimeout(fadetimer)
        i_space=max_space
    }
}

function simpleslideshowjump() {
    if (slidetarget[i_slide]=="_self") {
        document.location.href=slidelink[i_slide]
    }
    else if (slidetarget[i_slide]=="_blank") {
        codepopup=window.open(slidelink[i_slide], "code", "status=yes,location=yes,toolbar=yes,menubar=yes,resizable=yes,scrollbars=yes,width=780,height=580,top=10,left=10");
    }
    else if (slidetarget[i_slide]=="_top") {
        top.location.href=slidelink[i_slide]
    }
   
    else if (slidetarget[i_slide]=="_parent") {
        parent.location.href=slidelink[i_slide]
    }
    else {
        var jumpto=eval("parent."+slidetarget[i_slide])
        jumpto.location.href=slidelink[i_slide]
    }
}

if (ie || ns6) {
    var slideh=slideheight+30
    document.write("<div style=\"position:relative;width:"+slidewidth+"px;height:"+slideh+"px;overflow:hidden\">")
    document.write("<div id=\"imgcontainer1\" style=\"position:absolute;width:"+slidewidth+"px;height:"+slideh+"px;top:0px;left:0px\"><img src=\""+slideurl[0]+"\"></div>")
        document.write("<div id=\"imgcontainer2\" style=\"position:absolute;width:"+slidewidth+"px;height:"+slideh+"px;top:0px;left:0px\"><img src=\""+slideurl[1]+"\"></div>")
    document.write("</div>")
    window.onload=stretchimage
}
else {
    document.write("<a href=\"javascript:simpleslideshowjump()\"><img name=\"slideimage\" src=\""+slideurl[0]+"\" border=0></a>")
    window.onload=simpleslideshow
}
</script>
</td></tr></table>

طريقة التركيب:

 الدخول على التصميم ثم إضافة أداة

Html,Javascript

نسخ الكود السابق ولصقه بالنافذة

باقي التفاصيل »

كود عرض الصور بالتناوب و التحكم بسرعة ظهورها .

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

باقي التفاصيل »

أداة آخر المواضيع مع مصغرات الصور - متحركة

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

باقي التفاصيل »

مربعات بحث متنوعة للبلوجر

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

يوجد عدة نماذج متنوعة و ببساطة تامة بإمكانك و ضع الأكواد بواسطة لوحة التحكم في التخطيط و اختيار الأداة التي تناسبك .

1. مربع البحث الأول :

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text"/>
<input id="search-btn" value="Search" type="submit"/>

</form>

 الجزء الملون بالأحمر قابل للتغيير بما يناسبك و حسب رغبتك .

2.مربع البحث الثاني :

 

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #585858; border: 1px solid #E0ECF8"/>
<input id="search-btn" value="Search" type="submit"/>

</form>

  الجزء الملون بالأحمر قابل للتغيير بما يناسبك و حسب رغبتك .

3.  مربع البحث الثالث :

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #A9D0F5; border: 1px solid #2E2EFE"/>
<input id="search-btn" value="Search" type="submit" style="background: #2E2EFE; border: 1px outset #01DF01; color: #ffffff; font-weight: bold;"/>
</form>

  الجزء الملون بالأحمر قابل للتغيير بما يناسبك و حسب رغبتك .

4.  مربع البحث الرابع :

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="cari di blog ini..."/>
<input id="search-btn" value="Search" type="submit"/>
</form>

الجزء الملون بالأحمر قابل للتغيير بما يناسبك و حسب رغبتك .

5.  مربع البحث الخامس :

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="Cari artikel disini..."/>
<input id="search-btn" value="Search" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilinclga4t_lCjbI70xYR_A1rpDBBDLS14vzUvbe2tCI77yeNWqPjQwFiumYi4OZsi9_-LR040UJp_8xYJo4qSG2mQkSpDSIUw5uc3-gRAv_k9QBMoaEJ6DWwY6RE3VnjaoCDrhXHZ037t/s1600/1zehw2f_th.jpg.png" style="margin-left: 5px; margin: 3px 0 0 5px;"/>
</form>

اذا واجهتكم اي مشاكل اكتبها في رد وان شاء الله نحلها مع بعض ، ولمن لا يعرف كيفيه اضافه اكواد html الي المدونه يتفضل بالضغط هنــا .

باقي التفاصيل »

بنرات اعلانيه متحركه بشكل جميل فى المدونه من ادوات بلوجر

 اليوم جايبلكم هذا الكود الجميل للبنرات الصغيره الاعلانىية .

باقي التفاصيل »

طريقه اضافه اكواد Html الى المدونه

 ( للمبتدئين فقط )

لقد وضعت لكم هذا الموضوع البسيط جدا حتى لا نشتت المبتدئين الجدد على بلوجر وحتى تكون المعلومه كامله .

باقي التفاصيل »

طريقة لإضافة أزرار الفيس بوك وتويتر وجوجل بلس لموقعك

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

 وهناك الكثير من الأشكال سأعرض بعضها ويمكنك إختيار ما يناسب موقعك.


أزرار الإعجاب الأفقية:

 <!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style "> <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_button_tweet"></a> <a class="addthis_button_pinterest_pinit"></a> <a class="addthis_counter addthis_pill_style"></a> </div> <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f756ef243bad71a"></script> <!-- AddThis Button END -->

 أزرار المشاركة الأفقية:

<!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style addthis_32x32_style"> <a class="addthis_button_preferred_1"></a> <a class="addthis_button_preferred_2"></a> <a class="addthis_button_preferred_3"></a> <a class="addthis_button_preferred_4"></a> <a class="addthis_button_compact"></a> <a class="addthis_counter addthis_bubble_style"></a> </div> <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f756ef243bad71a"></script> <!-- AddThis Button END -->

 أزرار الإعجاب الرأسية العائمة:

تظهر بجانب الموضوع عائمة من جهة اليسار

<!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;"> <a class="addthis_button_facebook_like" fb:like:layout="box_count"></a> <a class="addthis_button_tweet" tw:count="vertical"></a> <a class="addthis_button_google_plusone" g:plusone:size="tall"></a> <a class="addthis_counter"></a> </div> <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f756ef243bad71a"></script> <!-- AddThis Button END -->

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

<!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="right:0px;top:320px;"> <a class="addthis_button_facebook_like" fb:like:layout="box_count"></a> <a class="addthis_button_tweet" tw:count="vertical"></a> <a class="addthis_button_google_plusone" g:plusone:size="tall"></a> <a class="addthis_counter"></a> </div> <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f756ef243bad71a"></script> <!-- AddThis Button END -->

  أزرار المشاركة رأسية عائمة:

<!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:50px;top:50px;"> <a class="addthis_button_preferred_1"></a> <a class="addthis_button_preferred_2"></a> <a class="addthis_button_preferred_3"></a> <a class="addthis_button_preferred_4"></a> <a class="addthis_button_compact"></a> </div> <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f756ef243bad71a"></script> <!-- AddThis Button END -->

أزرار الإعجاب أسفل كل موضوع على حدة:

<span id="st_finder"></span><script type="text/javascript" src="http://w.sharethis.com/widget/stblogger2.js"></script><script type="text/javascript">var switchTo5x=true;stBlogger2.init("http://w.sharethis.com/button/buttons.js", {"fblike":["vcount","Facebook Like",""],"fbsend":["vcount","Facebook Send",""],"twitter":["vcount","Tweet",""],"googleplus":["vcount","Google +",""],"delicious":["vcount","Delicious",""],"sharethis":["vcount","ShareThis",""]} , "476ff4f2-24ab-4bcb-aebb-22fe2df9ef0c");var f = document.getElementById("st_finder");var c = f.parentNode.parentNode.childNodes;for (i=0;i<c.length;i++) { try { c[i].style.display = "none"; } catch (err) {}}</script>

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

1.الذهاب إلى لوحة التحكم
2.تخطيط أو تصميم
3.عناصر الصفحة
4.أضف أداة
5.اختار Html/Javascript
 

ثم إنسخ الكود كاملاً وألصقه بالأداة
 
 هذه الأكواد من موقعى (Add this) ، (share this) ويمكنك التسجيل بهم وإختيار ما يناسب موقعك .

باقي التفاصيل »