.jpg)
هذا الكود يعمل على عرض الصور + رابط الزيارة ، و يمكن أيضا عرض الفلاش (بشكل عشوائي) أي يتغير مع كل تحديث للصفحة.
آخر المقالات إطلع على آخر مقالاتنا عن طريق الاشتراك في هذا الموقع
كود جافا لعرض الصور + الرابط + الفلاش
هذا الكود يعمل على عرض الصور + رابط الزيارة ، و يمكن أيضا عرض الفلاش (بشكل عشوائي) أي يتغير مع كل تحديث للصفحة.
ثلاثة بنرات تتبدل بشكل جميل
معاينة
<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
نسخ الكود السابق ولصقه بالنافذة
الدخول على التصميم ثم إضافة أداة
Html,Javascript
نسخ الكود السابق ولصقه بالنافذة
كود عرض الصور بالتناوب و التحكم بسرعة ظهورها .
بواسطة هذا الكود يمكنك عمل بانر أو إعلان أو تضيف صورك بعدة صور مختلفة تظهر بالتناوب , و تستطيع بواسطة الكود تغيير عدد الصور حسب رغبتك و التحكم بسرعتها و يمكنك تركيب الإضافة أينما تشاء .
أداة آخر المواضيع مع مصغرات الصور - متحركة
هذه الأداة عبارة عن سكريبت آخر المواضيع وهو مهم جدا ليبقى الزائر أطول مدة ممكنة فى موقعك لأنه يتيح لعرض عدد من آخر المواضيع التى تحددها بطريقة متحركة وجميلة .
مربعات بحث متنوعة للبلوجر
يوجد عدة نماذج متنوعة و ببساطة تامة بإمكانك و ضع الأكواد بواسطة لوحة التحكم في التخطيط و اختيار الأداة التي تناسبك .
1. مربع البحث الأول :
<form id="searchthis" action="/search" style="display:inline;" method="get"></form>
<input id="search-box" name="q" size="25" type="text"/>
<input id="search-btn" value="Search" type="submit"/>
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. مربع البحث الخامس :
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) ويمكنك التسجيل بهم وإختيار ما يناسب موقعك .
هذه الأكواد من موقعى (Add this) ، (share this) ويمكنك التسجيل بهم وإختيار ما يناسب موقعك .
شرح رفع اكواد الجافا على حسابك فى جوجل كود google code لحمايتها من الحذف 2013
فقط كيف نستفيد منها لحفظ ملفات الجافا java scripts ، وبالتالي عند تركيب أي إضافة لمدونتك تحتوي على ملف جافا مستضاف عند صاحب الإضافة – يمكننا نقله إلى حسابنا في قوقيل كود واستخدامه، وبهذا تكون ملفات الجافا في مأمن أي نضمن عمل الإضافات في مدونتك بدون توقف مفاجئ إذا قام صاحب الإضافة بحذف ملف الجافا أو غير فيه. اتبع معي هذه الخطوات البسيطة :
سجل دخولك في حساب قوقيل الخاص بك، عليك أن تنشئ حساب إذا لم يكن لديك!
http://code.google.com/hosting/createProject
توجه لهذه الصفحة لإنشاء مشروع جديد
، أكتب بيانات مشروعك ثم اضغط Create Project
، ستنتقل بعدها مباشرة لواجهة مشروع الذي بالطبع ستكون فارغة.
من القائمة العلوية لواجهة مشروعك اضغط على علامة التبويب Source ، ثم اختر Upload .. ستفتح لك نافذة جديدة خاصة بملف المشروع الذي سترفعه.
لنسخ الرابط اضغط على الملف المطلوب .. ستفتح نافذة الملف
اضغط بالزر الأيمن على المشار إليه ، ثم انسخ الرابط من القائمة المنسدلة.
الآن أنت تملك رابط مباشر لملف الجافا سكريبت استخدمه كيفما تشاء، وبإذن الله لن تواجه مشاكل في مدونتك بسبب فقدان روابط الجافا سكريبت، بقي أن نقول الحمد لله ثم شكراً قوقيل !
.jpg)
