U3F1ZWV6ZTQ3MzYzNjcxMDUwX0FjdGl2YXRpb241MzY1NjUwNDQyMjU=
recent
أخبار ساخنة

اضافة زر الصعود لاعلي علي شكل صاروخ بتاثيرات رائعة


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

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

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


اضافة زر الصعود لاعلي علي شكل صاروخ بتاثيرات رائعة
صاروخ الصعود الي الاعلي

نبدأ علي بركة الله شرح تركيب الاضافة:-
قبل اي شئ عليك ان تتاكد ان مدونتك تحتوي علي مكتبة jQuery
بعد ذلك اذهب الي المظهر ثم تعديل html
تقوم بالبحث عن  ]]></b:skin> وتضيف هذا الكود بعده
/* Rocket Back to Top
.ignielRocket svg {width:50px; height:50px; transition:all .3s ease;}
.ignielRocket svg path {fill:#008c5f}
.ignielRocket:hover svg, .ignielRocket.launch svg {transform:rotate(-45deg);}
.ignielRocket:hover svg path, .ignielRocket.launch svg path {fill:#ff5722}
.ignielRocket {visibility:hidden; opacity:0; position:fixed; right:30px; z-index:99; cursor:pointer; border-radius:100px; bottom:-30px;}
.ignielRocket.show {visibility:visible; opacity:1; bottom:30px; transition: all .5s ease;}
.ignielRocket.launch {visibility:visible; opacity:1; bottom:0px; transition: all 0s ease;}
.ignielRocket.launch:after {background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M4,10A1,1 0 0,1 3,9A1,1 0 0,1 4,8H12A2,2 0 0,0 14,6A2,2 0 0,0 12,4C11.45,4 10.95,4.22 10.59,4.59C10.2,5 9.56,5 9.17,4.59C8.78,4.2 8.78,3.56 9.17,3.17C9.9,2.45 10.9,2 12,2A4,4 0 0,1 16,6A4,4 0 0,1 12,10H4M19,12A1,1 0 0,0 20,11A1,1 0 0,0 19,10C18.72,10 18.47,10.11 18.29,10.29C17.9,10.68 17.27,10.68 16.88,10.29C16.5,9.9 16.5,9.27 16.88,8.88C17.42,8.34 18.17,8 19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14H5A1,1 0 0,1 4,13A1,1 0 0,1 5,12H19M18,18H4A1,1 0 0,1 3,17A1,1 0 0,1 4,16H18A3,3 0 0,1 21,19A3,3 0 0,1 18,22C17.17,22 16.42,21.66 15.88,21.12C15.5,20.73 15.5,20.1 15.88,19.71C16.27,19.32 16.9,19.32 17.29,19.71C17.47,19.89 17.72,20 18,20A1,1 0 0,0 19,19A1,1 0 0,0 18,18Z' fill='%23ff5722'/></svg>") no-repeat center center; background-size:30px 30px; content:''; display:block; width:30px; height:30px; transform:rotate(90deg); position:relative; text-align:center; margin:auto;}

ثم بعد ذلك تقوم بالبحث عن </body> وتضيف هذا الكود فوقه

<div class='ignielRocket'>
  <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
    <path d='M2.81,14.12L5.64,11.29L8.17,10.79C11.39,6.41 17.55,4.22 19.78,4.22C19.78,6.45 17.59,12.61 13.21,15.83L12.71,18.36L9.88,21.19L9.17,17.66C7.76,17.66 7.76,17.66 7.05,16.95C6.34,16.24 6.34,16.24 6.34,14.83L2.81,14.12M5.64,16.95L7.05,18.36L4.39,21.03H2.97V19.61L5.64,16.95M4.22,15.54L5.46,15.71L3,18.16V16.74L4.22,15.54M8.29,18.54L8.46,19.78L7.26,21H5.84L8.29,18.54M13,9.5A1.5,1.5 0 0,0 11.5,11A1.5,1.5 0 0,0 13,12.5A1.5,1.5 0 0,0 14.5,11A1.5,1.5 0 0,0 13,9.5Z'/>
  </svg>
</div>

<script> //<![CDATA[
  eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('A a=["\\i\\b\\j","\\j\\b\\c\\g\\i\\g\\b\\k","\\z\\g\\y\\k\\g\\h\\d\\x\\b\\e\\t\\h\\i","","\\e\\c\\c","\\d\\f\\I\\k\\e\\p","\\q\\h\\o\\b\\B\\h\\v\\d\\f\\c\\c","\\c\\e\\q\\b\\d\\d\\H\\b\\j","\\c\\p\\b\\E","\\f\\m\\m\\v\\d\\f\\c\\c","\\c\\e\\q\\b\\d\\d","\\D\\C\\n\\n\\j\\F","\\f\\k\\g\\o\\f\\i\\h","\\n","\\p\\i\\o\\d\\N\\R\\b\\m\\J","\\e\\d\\g\\e\\t"];r U(l){$(w)[a[Q]](r(){$(a[2])[a[1]]()[a[0]]==-K&&$(a[2])[a[6]](a[5])[a[4]]({u:a[3]});O $(w)[a[7]]()>M?$(a[2])[a[9]](a[8]):$(a[2])[a[6]](a[8])}),$(a[2])[a[L]](r(){$(V)[a[9]](a[5])[a[s]]({u:a[P]},l);$(a[T])[a[s]]({S:a[G]},l)})}',58,58,'||||||||||_0x2bf4|x6F|x73|x6C|x63|x61|x69|x65|x74|x70|x6E|_0x1aefx2|x64|x30|x6D|x68|x72|function|12|x6B|top|x43|document|x52|x67|x2E|var|x76|x31|x2D|x77|x78|13|x54|x75|x79|100|15|300|x2C|return|11|10|x62|scrollTop|14|ignielRocket|this'.split('|'),0,{}));
  ignielRocket(750);
//]]> </script>
لعلك تلاحظ الرقم الذي تم التظليل عليه وهو سرعة صعود الصفحة والصاروخ الي أعلي وبامكانك التعديل علي او تركه كما هو.
اذا اردت التعديل عليه فهذا الرقم يعني 0.75 ثانية اي انه محسوب بـ مللي ثانية
ولا تنسي ان تضغط علي حفظ القالب
والي هنا نكون قد انتهينا من شرح اليوم وهو كيفية اضافة زر الصعود
 لاعلي علي شكل صاروخ بتاثيرات رائعة , واذا واجهتك اي مشكلة
 ضعها في تعليق وسيتم الرد عليك في اسرع وقت.
والسلام عليكم ورحمة الله وبركاته
ليست هناك تعليقات
إرسال تعليق

إرسال تعليق

الاسمبريد إلكترونيرسالة