الرئيسية »

إضافة زر إلى أعلى ألمدونة في 19 شكل وبنصوص مختلفة ألألوان

الخميس، 19 مايو 2011 1 التعليقات




بسم ألله ألرحمن ألرحيم


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

ألخطوة ألأولى : نبحث عن الكود التالي بإستخدام خاصية ( Ctrl + F )


]]></b:skin>
نضع الكود التالي قبله مباشرة
#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}
ألخطوة ألثانية نبحث عن هذا ألكود 
</body>
نضع قبله مباشرة هذا ألكود
<a href="#" id="backtotop"><img src="Image-Url" alt="back to top" /></a>
والآن وبعد إضافة الكود نقوم بإضافة روابط الصور في مكان
ألملون باللون ألأحمر كما تشاهدون  Image-Url
 


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigjaBEYYq646rZ7IuU4rNID780zfM0MTOmejX9aVifOaP0Sa_r3pvSTxk5dnRAQYaJkhszJlAAb1iyL-u8UyfdhGmf7E39lBOeEMa0yS_a8m95vw26E3c9IfzUEHi4nQRHwKeCHMAiowrC/s1600/bttp-5.png

 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjP7Fb0wMWMuhatuuVoC8f2cjnkCKFALVgqEpY-vktNoghEKyeJbPsIXDLifc-piCa4qpVwc35OJNIW2oYUe8PHon2TeK6OJ-K6xP7S__TKaa2d9uYiwUc932xZSX2ZRBP4WCYA3qVmGUC/s1600/bttp-4.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR1lQeLw9ZHjsA-wxrjmN3udTRNV4ZF5JSqwaNuG5eWtr12BQIIAqy5yNxxajmpN41-i9t07FlmVV-BN8oGIRF1ghEYO67JCzF-_I9Z8aqpvnVuMNE7kX4slALcyNsZDcvjiGq_YyJXn_4/s1600/bttp-3.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioNs1JmIWVN_QQUTJ_zBHPMUax43ARU_fp76o5j0guIuPAeujTKeEUrZPP5vYeeWLFFOA7TZSGJK2jB7I913g3BAGmt5-pk7ssYfe9KiViM6EmwKSNtqzoXFfWA1Cbn5_f_reoqLTvFRAX/s1600/bttp-1.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFzHHYUGZfDivoLyRuv4jT6iU44rzUkq36cRvJoNEhk_CvsWB78LJR5_-n6nyPEHfNEl_TH_D-LMwv6dIo73JRtpN4QjBqP20hAIXn-3tQS8sLq7rUmPor-sWKH_RGnprn96lPMzqD6qXl/s1600/bttp-2.png




http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-6.png0/bttp-7.png




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggbsvNbK_cFl_d6BdkSwElOhq7sB-Q1SuXr1lLXVQ4Av7dVrstyVNin0RNuzOgT4_OAwVyt5zQDJfn_7RVohXdhXol1mLQf8x_cN8pejhBJWCXqi18QDtAf7SmGcjl8j_XAjCTrQ0WRg_s/s400/bttp-9.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj_i2YcSuYl9Yjaat26slWO1Iar1dmfk7mEUsb9NtbPAtJwD8bjrRq751fuEn7-UKgtHu1aAkt_nna_WAf76Y33rtWrX0Uu7nSELcqYfK7ihENherrY5MZ2hbPbB9YoCaS4ui85GBH7JRW/s400/bttp-8.png




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoWRw_nJ0uJPsfUI4fEd0JLa9uO3fWrLLe1A8QvTiVLAkygzn257cOpoOIrdXkiYFGPwDr0OiqG9syEnYs_DePq4FT24VqyKe7MKEcuyZh5Og_UbV21UHjNv30-Z5qcuefQ8GK87EpzUOq/


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb-DIg77nyZQSzYir-FVbHF8vyf3RJaIBMX1y2fJZEzVNFXGRsBzDCgyYUSQhKqz_4MXZia9fP21VmkKhya9Bu-Zy-ipJ8YIToxbP44_ChyphenhyphenRdVt-0YxdHKS0OzqBAiY9IeUpNKMBmnV2Zx/s400/bttp-11.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcuQob8z-hpxI7ZJ8JwtK6lesuzQbvuMJqzW9tFqsDQrzj8TP7at54DrMCxwNSesbCCmG3qzCLpRN6XTrGBDawBxlHnVS25igpNGMxBX-Y5EPA0oU2hjtAZXLHNBpuOLqqEfoy46Hnk7QA/s400/bttp-12.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbCkdUwEfbmTMMNpchdRqOMdRJxXiwNYbh6BUt3p46cNqPkGtnzNBrs13fd3aPqUSZXjekB_5Zwt7J5xx-jPeEj6nFX4GrwBjieBmp5jAd51MYT5ApTnlrFXbLflFROsCMSUTlprPke2Hw/s400/bttp-13.png





 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixoC5GAoctFwFdkxZ-s1cMnWblfBQAZMT0DbfRx2RecUmcl9Sj7QJjjpM7bYhgWUtTmtfjEvQPr1tBq3KTz8e6QRsUPnjRGuj4WU3eeTkj01bDab4MqzoHPTLF-kUNYDyyXCdGf9vnjic7/s400/bttp-14.png




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh298pjkAmvkuUmhw4NknDIA1e6MYDR5Ba2UdLHBRkB2NKS3M3jygIO_hndtO5hOsi2yCN3-5fStF6Lv7I06Y50vIa20XGsyN-I5pRJit_XUDN9asprIrMQvsUyax9lSQ50BQPOem-zWaKP/s400/bttp-15.png





https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-O5QHSLm2dJlZDXqtT3hSqCEysVQq22ZKhZ58AF6gqQijd0Phe9rI4TxsH9aAeu7BumbvWMj33gZzOIwxDkKaoqCML8sosIsI6xPSYAxCNc26zgX3715VJKj-Cn1v_OU1mUdrEmoITmL3/s1600/bttp-16.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgejm1q8j2ZzI78hViCeWRJhxnscZ5xi22jwx_1yKvpyCM9_akP91LDzfyewSW1d8rXDcguKtz0ByRS0KaksFzckY5gt4f3_LslvqJ6uX8E7aunN7n261_kmEln2OXDElZ40GW6ZjMIaJab/s400/bttp-17.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia-ioRlratZt4wMurg7hWGi73iYeLhn-1uzHv7IxJXGtXRtS7MZZBXPQius2Elpr38nauXihEGISq9M2neOLQGH8pilopgsKMFxv2OGwnD4ULf81LR5X58FrNLQl1kvO1SEhRBPGjIhDud/s400/bttp-19.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoa6_GnCfab9o3WgpXjd-fzXPcntR5qlGRNQDJ409yvOU0muLyF9Z-vPuciudKpVf2zPry56O727jtuTBMDx0yDFpSVXLNM3Pk-FkaALSLWZ0_U4yoekmjFBgnrNW20RqJAyBwpIygH2-x/s400/20.png

ليصبح الكود بعد إضافة رابط الصورة بهذا الشكل :

<a href="#" id="backtotop"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoa6_GnCfab9o3WgpXjd-fzXPcntR5qlGRNQDJ409yvOU0muLyF9Z-vPuciudKpVf2zPry56O727jtuTBMDx0yDFpSVXLNM3Pk-FkaALSLWZ0_U4yoekmjFBgnrNW20RqJAyBwpIygH2-x/s400/20.png" alt="back to top" /></a>

 ألخطوة ألثالثة : نبحث عن هذا الكود

<head>
ثم نضع هذا الكود بعده مباشرة

&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;

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

ألنموذج الثاني
نموذج النصوص والذي سنتحكم بالوانه كيفما نشاء
ألخطوة ألأولى نبحث عن الكود
]]></b:skin>
نضع ألكود ألتالي قبله
#backtotop {
width:100px; /* Change Box Width*/
background:#F4FFBF;  /* Change background color*/
border:1px solid #ccc;  /* Change Border Style*/
text-align:center;
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
color:#666; /* Change text color*/
text-decoration:none;
}
والآن يمكننا إجراء ألتغيرات ألتالية
نغير ألرقم 100 إلى ألرقم ألذي نريده لزيادة أو نقصان حجم ألمربع
نغير ألرقم 1إلى ألرقم الذي نريده لتغيير عرض ألحدود
إلى أللون ألذي نريده لتغيير لون ألحد   #cccنغير 
   #666نغيير 
ويمكننا أختيار كود ألألوان من ألرابط ألتالي من هنا 

ألخطوة ألثانية نبحث عن ألكود
</body>
نضع قبله مباشرة الكود التالي
<a href="#" id="backtotop">Back to top</a>

إلى أية كلمة نشاء   backtotop نغير كلمة 


ألخطوة ألثالثة نبحث عن الكود

<head>
نضع بعده مباشرة الكود التالي
&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;

ثم نعمل حفظ للقالب


1 التعليقات »

  • Unknown كتب:  

    تم تجربتها بنجاح شكرا جزيلا وبارك الله فيك
    لزيارة مدونتي
    http://ramzi-alshaabi.blogspot.com/#

  • اكتب تعليقا على الموضوع

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