إضافة زر إلى أعلى ألمدونة في 19 شكل وبنصوص مختلفة ألألوان
Tweet
بسم ألله ألرحمن ألرحيم
سنتعلم أليوم أضافة رائعة للمدونة فإذا كان لدينا في ألصفحة ألعديد من ألرسائل فعلى ألزائر متابعة التدوينات إلى أسفل ألصفحة وربما يود العودة إلى أعلى ألصفحة لذلك سنسهل عليه ألأمر بإضافة ( زر أعلى الصفحة ) ، وسنقوم بإذنه تعالى شرح نموذجين لهذه ألأضافة
ألأول : نموذج الصور وألذي يتكون من 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>
والآن وبعد إضافة الكود نقوم بإضافة روابط الصور في مكان
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>
ثم نضع هذا الكود بعده مباشرة
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'></script>
<script language="javascript">
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>
ثم نقوم بحفظ القالب
ألنموذج الثاني
نموذج النصوص والذي سنتحكم بالوانه كيفما نشاء
ألخطوة ألأولى نبحث عن الكود
]]></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نغير
</body>
نضع قبله مباشرة الكود التالي
<a href="#" id="backtotop">Back to top</a>
إلى أية كلمة نشاء backtotop نغير كلمة
ألخطوة ألثالثة نبحث عن الكود
ألخطوة ألثالثة نبحث عن الكود
<head>
نضع بعده مباشرة الكود التالي
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'></script>
<script language="javascript">
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>
ثم نعمل حفظ للقالب
|
تم تجربتها بنجاح شكرا جزيلا وبارك الله فيك
لزيارة مدونتي
http://ramzi-alshaabi.blogspot.com/#