زوون أراب

‏إظهار الرسائل ذات التسميات اضافات بلوجر. إظهار كافة الرسائل

الاثنين، 13 فبراير 2017

التسميات: اضافات بلوجر

اضافة Preloader بشكل رائع الى مدونتك

شرح طريقة التركيب

1. حرر القالب >> ابحث بالاستعانة بـ Ctrl+F عن <body>

2. ضع الشكل المختار أسفله

اضغط هنا لمعاينة الأشكال

الشكل 1

<style>#zonearab-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#060606;z-index: 99999; opacity: .95;}.zonearab-spinner { text-align: center; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -40px; width: 40px; height: 40px; background-color: #fff; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; }@-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes sk-rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }</style> <script type="text/javascript"> $(window).load(function () { setTimeout(function () { $(".zonearab-spinner").fadeOut("slow"); setTimeout(function () { $("#zonearab-loader").fadeOut("slow") }, 1000) }, 1000) }); </script><div id="zonearab-loader"> <div class="zonearab-spinner"></div></div>

الشكل 2

<style>#zonearab-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#060606;z-index: 99999; opacity: .95;}.zonearab-spinner { text-align: center; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -40px; width: 40px; height: 40px;}.zonearabcube1, .zonearabcube2 { background-color: #fff; width: 15px; height: 15px; position: absolute; top: 0; left: 0; -webkit-animation: sk-zonearabcubemove 1.8s infinite ease-in-out; animation: sk-zonearabcubemove 1.8s infinite ease-in-out; } .zonearabcube2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } @-webkit-keyframes sk-zonearabcubemove { 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) } 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) } 100% { -webkit-transform: rotate(-360deg) } } @keyframes sk-zonearabcubemove { 25% { transform: translateX(42px) rotate(-90deg) scale(0.5); -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); } 50% { transform: translateX(42px) translateY(42px) rotate(-179deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); } 50.1% { transform: translateX(42px) translateY(42px) rotate(-180deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); } 75% { transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } 100% { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); } }</style> <script type="text/javascript"> $(window).load(function () { setTimeout(function () { $(".zonearab-spinner").fadeOut("slow"); setTimeout(function () { $("#zonearab-loader").fadeOut("slow") }, 1000) }, 1000) }); </script><div id="zonearab-loader"> <div class="zonearab-spinner"> <div class="zonearabcube1"></div> <div class="zonearabcube2"></div></div></div>

الشكل 3

<style>#zonearab-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#060606;z-index: 99999; opacity: .95;}.zonearab-spinner { text-align: center; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -40px; width: 40px; height: 40px; -webkit-animation: sk-rotate 2.0s infinite linear; animation: sk-rotate 2.0s infinite linear; }.zonearabdot1, .zonearabdot2 { width: 60%; height: 60%; background-color: #fff; display: inline-block; position: absolute; top: 0; border-radius: 100%; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; }.zonearabdot2 { top: auto; bottom: 0; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } }</style> <script type="text/javascript"> $(window).load(function () { setTimeout(function () { $(".zonearab-spinner").fadeOut("slow"); setTimeout(function () { $("#zonearab-loader").fadeOut("slow") }, 1000) }, 1000) }); </script><div id="zonearab-loader"><div class="zonearab-spinner"><div class="zonearabdot1"></div><div class="zonearabdot2"></div></div></div>

الشكل 4

<style>#zonearab-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#e24a37;z-index: 99999; opacity: .95;}.zonearableft{position:absolute; left:0; width:50%; height:100%;}.zonearabright{position:absolute; right:0; width:50%; height:100%;}.s-zonearab{position:absolute; text-align:center; padding:0 10px; margin:0; top:50%; left:50%; width:100%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%)}.s-zonearab >div{width:18px; height:18px; background-color:#fff; border-radius:100%; display:inline-block; -webkit-animation:bouncezonearabdelay 1.4s infinite ease-in-out; animation:bouncezonearabdelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode:both; animation-fill-mode:both}.s-zonearab .bouncezonearab1{-webkit-animation-delay:-.32s; animation-delay:-.32s}.s-zonearab .bouncezonearab2{-webkit-animation-delay:-.16s; animation-delay:-.16s}@-webkit-keyframes bouncezonearabdelay{0%,80%,100%{-webkit-transform:scale(0.0)}40%{-webkit-transform:scale(1.0)}}@keyframes bouncezonearabdelay{0%,80%,100%{transform:scale(0.0); -webkit-transform:scale(0.0)}40%{transform:scale(1.0); -webkit-transform:scale(1.0)}}</style> <script type="text/javascript"> $(window).load(function () { setTimeout(function () { $('.s-zonearab').fadeOut("slow"); setTimeout(function () { $('#zonearab-loader').fadeOut("slow") }, 1000) }, 1000) }); </script> <div id='zonearab-loader'><div class='zonearableft'></div><div class='zonearabright'></div><div class='s-zonearab'><div class='bouncezonearab1'></div><div class='bouncezonearab2'></div><div class='bouncezonearab3'></div></div></div>

الشكل 5

<style>#zonearab-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#060606;z-index: 99999; opacity: .95;}.zonearab-spinner { text-align: center; position: absolute; top: 50%; left: 50%; width: 80px; height: 60px; margin: -30px 0 0 -40px; }.zonearab-spinner > div { background-color: #fff; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .zonearab-spinner .zonearab-rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .zonearab-spinner .zonearab-rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .zonearab-spinner .zonearab-rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .zonearab-spinner .zonearab-rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }</style> <script type="text/javascript"> $(window).load(function () { setTimeout(function () { $(".zonearab-spinner").fadeOut("slow"); setTimeout(function () { $("#zonearab-loader").fadeOut("slow") }, 1000) }, 1000) }); </script><div id="zonearab-loader"> <div class="zonearab-spinner"> <div class="zonearab-rect1"></div> <div class="zonearab-rect2"></div> <div class="zonearab-rect3"></div> <div class="zonearab-rect4"></div> <div class="zonearab-rect5"></div></div></div>

الشكل 6

<style>#zonearab-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#060606;z-index: 99999; opacity: .95;}.zonearab-circle { text-align: center; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -40px; width: 40px; height: 40px; }.zonearab-circle .sk-child { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }.zonearab-circle .sk-child:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #fff; border-radius: 100%; -webkit-animation: zonearab-circleBounceDelay 1.2s infinite ease-in-out both; animation: zonearab-circleBounceDelay 1.2s infinite ease-in-out both; }.zonearab-circle .zonearab-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); }.zonearab-circle .zonearab-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } .zonearab-circle .zonearab-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .zonearab-circle .zonearab-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } .zonearab-circle .zonearab-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); } .zonearab-circle .zonearab-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .zonearab-circle .zonearab-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); } .zonearab-circle .zonearab-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); } .zonearab-circle .zonearab-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .zonearab-circle .zonearab-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); } .zonearab-circle .zonearab-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); } .zonearab-circle .zonearab-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .zonearab-circle .zonearab-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; } .zonearab-circle .zonearab-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .zonearab-circle .zonearab-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .zonearab-circle .zonearab-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .zonearab-circle .zonearab-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .zonearab-circle .zonearab-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .zonearab-circle .zonearab-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .zonearab-circle .zonearab-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .zonearab-circle .zonearab-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .zonearab-circle .zonearab-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes zonearab-circleBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes zonearab-circleBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } }</style> <script type='text/javascript'> $(window).load(function () { setTimeout(function () { $(".zonearab-circle").fadeOut("slow"); setTimeout(function () { $("#zonearab-loader").fadeOut("slow") }, 1000) }, 1000) }); </script><div id='zonearab-loader'><div class="zonearab-circle"> <div class="zonearab-circle1 sk-child"></div> <div class="zonearab-circle2 sk-child"></div> <div class="zonearab-circle3 sk-child"></div> <div class="zonearab-circle4 sk-child"></div> <div class="zonearab-circle5 sk-child"></div> <div class="zonearab-circle6 sk-child"></div> <div class="zonearab-circle7 sk-child"></div> <div class="zonearab-circle8 sk-child"></div> <div class="zonearab-circle9 sk-child"></div> <div class="zonearab-circle10 sk-child"></div> <div class="zonearab-circle11 sk-child"></div> <div class="zonearab-circle12 sk-child"></div></div></div>

الشكل 7

<style>#zonearab-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#060606;opacity: .95;z-index: 99999;}.zonearab-fading-circle {width: 40px; height: 40px; text-align: center; position: absolute; top: 50%; left: 50%; margin: 0 auto}.zonearab-fading-circle .sk-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .zonearab-fading-circle .sk-circle:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #fff; border-radius: 100%; -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; } .zonearab-fading-circle .sk-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .zonearab-fading-circle .sk-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } .zonearab-fading-circle .sk-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .zonearab-fading-circle .sk-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } .zonearab-fading-circle .sk-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); } .zonearab-fading-circle .sk-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .zonearab-fading-circle .sk-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); } .zonearab-fading-circle .sk-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); } .zonearab-fading-circle .sk-zonearab-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .zonearab-fading-circle .sk-zonearab-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); } .zonearab-fading-circle .sk-zonearab-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); } .zonearab-fading-circle .sk-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .zonearab-fading-circle .sk-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; } .zonearab-fading-circle .sk-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .zonearab-fading-circle .sk-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .zonearab-fading-circle .sk-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .zonearab-fading-circle .sk-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .zonearab-fading-circle .sk-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .zonearab-fading-circle .sk-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .zonearab-fading-circle .sk-zonearab-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .zonearab-fading-circle .sk-zonearab-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .zonearab-fading-circle .sk-zonearab-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } @keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } </style> <script type='text/javascript'> $(window).load(function () { setTimeout(function () { $(".zonearab-fading-circle").fadeOut("slow"); setTimeout(function () { $("#zonearab-loader").fadeOut("slow") }, 1000) }, 1000) }); </script><div id='zonearab-loader'><div class='zonearab-fading-circle'> <div class='sk-zonearab-circle1 sk-circle'/> <div class='sk-circle2 sk-circle'/> <div class='sk-circle3 sk-circle'/> <div class='sk-circle4 sk-circle'/> <div class='sk-circle5 sk-circle'/> <div class='sk-circle6 sk-circle'/> <div class='sk-circle7 sk-circle'/> <div class='sk-circle8 sk-circle'/> <div class='sk-circle9 sk-circle'/> <div class='sk-zonearab-circle10 sk-circle'/> <div class='sk-zonearab-circle11 sk-circle'/> <div class='sk-zonearab-circle12 sk-circle'/></div></div>

الشكل 8

<style>#zonearab-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#060606;z-index: 99999; opacity: .95;}.zonearab-folding-cube {width: 40px; height: 40px; text-align: center; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -40px; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .zonearab-folding-cube .skzonearab-cube {float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .zonearab-folding-cube .skzonearab-cube:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; animation: sk-foldCubeAngle 2.4s infinite linear both; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } .zonearab-folding-cube .skzonearab-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg); } .zonearab-folding-cube .skzonearab-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg); } .zonearab-folding-cube .skzonearab-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg); } .zonearab-folding-cube .skzonearab-cube2:before { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .zonearab-folding-cube .skzonearab-cube3:before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .zonearab-folding-cube .skzonearab-cube4:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } @-webkit-keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } @keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } }</style> <script type='text/javascript'> $(window).load(function () { setTimeout(function () { $(".zonearab-folding-cube").fadeOut("slow"); setTimeout(function () { $("#zonearab-loader").fadeOut("slow") }, 1000) }, 1000) }); </script><div id='zonearab-loader'><div class="zonearab-folding-cube"> <div class="skzonearab-cube1 skzonearab-cube"></div> <div class="skzonearab-cube2 skzonearab-cube"></div> <div class="skzonearab-cube4 skzonearab-cube"></div> <div class="skzonearab-cube3 skzonearab-cube"></div></div></div>

الشكل 9

<style>#zonearab-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#060606;z-index: 99999; opacity: .95;}.wow-zonearab{position:fixed;width:100%;top:70%;height:30px;text-align:center;font-size:10px}.wow-zonearab,.wow-zonearab-inner{position:absolute;top:0;bottom:0;right:0;left:0;border:9px solid #fff;border-color:transparent #fff;margin:auto}.wow-zonearab{width:85px;height:85px;-webkit-animation:spin 2.2s linear 0s infinite normal;-moz-animation:spin 2.2s linear 0s infinite normal;animation:spin 2.2s linear 0s infinite normal}.wow-zonearab-inner{width:40px;height:40px;-webkit-animation:spinback 1.2s linear 0s infinite normal;-moz-animation:spinback 1.2s linear 0s infinite normal;animation:spinback 1.2s linear 0s infinite normal}@-webkit-keyframes spin{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes spin{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@-webkit-keyframes spinback{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(-360deg)}}@-moz-keyframes spinback{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(-360deg)}}@keyframes spinback{from{transform:rotate(0)}to{transform:rotate(-360deg)}}</style> <script type='text/javascript'> $(window).load(function () { setTimeout(function () { $(".wow-zonearab").fadeOut("slow"); setTimeout(function () { $("#zonearab-loader").fadeOut("slow") }, 1000) }, 1000) }); </script><div id='zonearab-loader'><div class="wow-zonearab"> <div class="wow-zonearab-inner"></div> </div></div>

الشكل 10

<style>#loader-zonearab{position:fixed;top:0;left:0;right:0;bottom:0;opacity: .95;background:#060606;color:#eaf7ff;z-index:99999;}@-webkit-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-moz-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-webkit-keyframes fade{0%{opacity:1}100%{opacity:0}}@-moz-keyframes fade{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes bgzonearab{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-moz-keyframes bgzonearab{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-webkit-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}@-moz-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}.zonearab-wrap { font-size: 18px; font-weight: 700; top: 50%; margin: auto; position: absolute; left: 0; right: 0; bottom: 0; }.bgzonearab{padding:30px 30px 30px 0;background:#306f99;-moz-animation:bgzonearab 1.5s linear infinite;-webkit-animation:bgzonearab 1.5s linear infinite;animation:bgzonearab 1.5s linear infinite;-moz-box-shadow:inset 0 0 45px 30px black;-webkit-box-shadow:inset 0 0 45px 30px black;box-shadow:inset 0 0 45px 30px black}.zonearabloading{position:relative;text-align:right;text-shadow:0 0 6px#bce4ff;height:20px;width:150px;margin:0 auto}.zonearabloading span{display:block;text-transform:uppercase;position:absolute;right:30px;height:20px;width:400px;line-height:20px}.zonearabloading span:after{content:"";display:block;position:absolute;top:-2px;right:-21px;height:20px;width:16px;background:#eaf7ff;-moz-box-shadow:0 0 15px#bce4ff;-webkit-box-shadow:0 0 15px#bce4ff;box-shadow:0 0 15px#bce4ff;-moz-animation:blink 3.4s infinite;-webkit-animation:blink 3.4s infinite;animation:blink 3.4s infinite}.zonearabloading span.title{-moz-animation:title 3.4s linear infinite;-webkit-animation:title 3.4s linear infinite;animation:title 3.4s linear infinite}.zonearabloading span.text{-moz-animation:title 3.4s linear 1.7s infinite;-webkit-animation:title 3.4s linear 1.7s infinite;animation:title 3.4s linear 1.7s infinite;opacity:0}</style> <script type='text/javascript'> $(window).load(function () { setTimeout(function () { $(".zonearab-wrap").fadeOut("slow"); setTimeout(function () { $("#loader-zonearab").fadeOut("slow") }, 1000) }, 1000) }); </script><div id='loader-zonearab'><div class="zonearab-wrap"><div class="bgzonearab"><div class="zonearabloading"><span class="title">انتظر لحظة...</span><span class="text"><data:blog.title/></span></div> </div></div></div>

الشكل 11

<style>#tahmil-zonearab{width: 100%; height: 100%; overflow: hidden; position: fixed; left: 0; opacity: .95!important; top: 0; background: #47cf73; transition: background 1s , visibility 1s; z-index: 99999; visibility: hidden;}.boxloading_zonearab { width: 50px; height: 50px; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .boxloading_zonearab:before { content: ''; width: 50px; height: 5px; background: #000; opacity: 0.1; position: absolute; top: 59px; left: 0; border-radius: 50%; animation: shadow .5s linear infinite; } .boxloading_zonearab:after { content: ''; width: 50px; height: 50px; background: #D55D3E; animation: animate .5s linear infinite; position: absolute; top: 0; left: 0; border-radius: 3px; } @keyframes animate { 17% { border-bottom-right-radius: 3px; } 25% { transform: translateY(9px) rotate(22.5deg); } 50% { transform: translateY(18px) scale(1, 0.9) rotate(45deg); border-bottom-right-radius: 40px; } 75% { transform: translateY(9px) rotate(67.5deg); } 100% { transform: translateY(0) rotate(90deg); } } @keyframes shadow { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.2, 1); } } #leftzonearab{ left: 0px; position:absolute; width:65%; height:100%; margin-left:-15%; background:rgba(0, 0, 0, 0); transform: skewX(-21deg); -webkit-transform: skewX(-21deg); transition:background 1s linear 1s, left 2s 2s; } #rightzonearab{ right: 0.6px; position:absolute; width:65%; height:100%; margin-right:-15%; background:rgba(0, 0, 0, 0); transform: skewX(-21deg); -webkit-transform: skewX(-21deg); transition:background 1s linear 1s, right 2s 2s; } .loading_zonearab { height: 85px; left: 50%; margin-left: -42.5px; margin-top: -42.5px; position: absolute; top: 50%; -webkit-transform: translateZ(0); transform: translateZ(0); width: 85px; } .loading_zonearab-circle { -webkit-animation: 2291ms loading_zonearab infinite; animation: 2291ms loading_zonearab infinite; background-color: #fff; border-radius: 50%; height: 14px; position: absolute; -webkit-transform: scale(0); transform: scale(0); width: 14px; } .loading_zonearab-circle:nth-child(1) { -webkit-animation-delay: 42ms; animation-delay: 42ms; } .loading_zonearab-circle:nth-child(2) { -webkit-animation-delay: 84ms; animation-delay: 84ms; } .loading_zonearab-circle:nth-child(3) { -webkit-animation-delay: 126ms; animation-delay: 126ms; } .loading_zonearab-circle:nth-child(4) { -webkit-animation-delay: 168ms; animation-delay: 168ms; } .loading_zonearab-circle:nth-child(5) { -webkit-animation-delay: 210ms; animation-delay: 210ms; } .loading_zonearab-circle:nth-child(6) { -webkit-animation-delay: 252ms; animation-delay: 252ms; } .loading_zonearab-circle:nth-child(7) { -webkit-animation-delay: 294ms; animation-delay: 294ms; } .loading_zonearab-circle:nth-child(8) { -webkit-animation-delay: 336ms; animation-delay: 336ms; } .loading_zonearab-circle:nth-child(9) { -webkit-animation-delay: 378ms; animation-delay: 378ms; } .loading_zonearab-circle:nth-child(10) { -webkit-animation-delay: 420ms; animation-delay: 420ms; } .loading_zonearab-circle:nth-child(11) { -webkit-animation-delay: 462ms; animation-delay: 462ms; } .loading_zonearab-circle:nth-child(12) { -webkit-animation-delay: 504ms; animation-delay: 504ms; } .loading_zonearab-circle:nth-child(13) { -webkit-animation-delay: 546ms; animation-delay: 546ms; } .loading_zonearab-row1 { top: 1.3px; } .loading_zonearab-row2 { top: 18.95px; } .loading_zonearab-row3 { top: 36.55px; } .loading_zonearab-row4 { top: 54.2px; } .loading_zonearab-row5 { top: 71.85px; } .loading_zonearab-col1 { left: 1.25px; } .loading_zonearab-col2 { left: 18.85px; } .loading_zonearab-col3 { left: 36.5px; } .loading_zonearab-col4 { left: 54.15px; } .loading_zonearab-col5 { left: 71.8px; } @-webkit-keyframes loading_zonearab { 0% { -webkit-transform: scale(0); transform: scale(0); } 27.28% { -webkit-transform: scale(1); transform: scale(1); } 36.36% { -webkit-transform: scale(0.857); transform: scale(0.857); } 54.55% { -webkit-transform: scale(0.857); transform: scale(0.857); } 63.64% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(0); transform: scale(0); } } @keyframes loading_zonearab { 0% { -webkit-transform: scale(0); transform: scale(0); } 27.28% { -webkit-transform: scale(1); transform: scale(1); } 36.36% { -webkit-transform: scale(0.857); transform: scale(0.857); } 54.55% { -webkit-transform: scale(0.857); transform: scale(0.857); } 63.64% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(0); transform: scale(0); } } #bigloading_zonearab{ width:100%; height:100%; overflow:hidden; position: fixed; left:0; top:0; background: #272727; transition: background 1s 2s , visibility 1s 2s; z-index: 10000000000; visibility: visible; } #tahmil-zonearab.ready { opacity:1; visibility:visible; } #bigloading_zonearab.ready #leftzonearab{ left:-100%; background:rgba(0, 0, 0, 0.8); } #bigloading_zonearab.ready #rightzonearab{ right:-100%; background:rgba(0, 0, 0, 0.8); } #bigloading_zonearab.ready .loading_zonearab{ opacity:0; } #bigloading_zonearab.ready{ background: rgba(255,255,255,0); visibility: hidden; }</style> <script type="text/javascript"> $(window).load(function () { setTimeout(function () { $("").fadeOut("slow"); setTimeout(function () { $("#tahmil-zonearab").fadeOut("slow") }, 1000) }, 1000) }); </script><div id="tahmil-zonearab" class="ready"> <div class="loading_zonearab"> <div class="loading_zonearab-circle loading_zonearab-row1 loading_zonearab-col3"></div> <div class="loading_zonearab-circle loading_zonearab-row2 loading_zonearab-col2"></div> <div class="loading_zonearab-circle loading_zonearab-row2 loading_zonearab-col3"></div> <div class="loading_zonearab-circle loading_zonearab-row2 loading_zonearab-col4"></div> <div class="loading_zonearab-circle loading_zonearab-row3 loading_zonearab-col1"></div> <div class="loading_zonearab-circle loading_zonearab-row3 loading_zonearab-col2"></div> <div class="loading_zonearab-circle loading_zonearab-row3 loading_zonearab-col3"></div> <div class="loading_zonearab-circle loading_zonearab-row3 loading_zonearab-col4"></div> <div class="loading_zonearab-circle loading_zonearab-row3 loading_zonearab-col5"></div> <div class="loading_zonearab-circle loading_zonearab-row4 loading_zonearab-col2"></div> <div class="loading_zonearab-circle loading_zonearab-row4 loading_zonearab-col3"></div> <div class="loading_zonearab-circle loading_zonearab-row4 loading_zonearab-col4"></div> <div class="loading_zonearab-circle loading_zonearab-row5 loading_zonearab-col3"></div> </div> <div id="leftzonearab"></div> <div id="rightzonearab"></div> </div>

الشكل 12

<style>#load-zonearab{position:fixed;top:0;left:0;right:0;bottom:0;opacity: .95;background:#444;z-index:99999; } .cool-zonearab { position: absolute; top: 50%; left: 50%; width: 80px; height: 60px; margin: -30px 0 0 -40px; } .cool-zonearab .zonearablines { width: 80px; height: 40px; position: absolute; } .cool-zonearab .zonearablines .line { width: 80px; height: 10px; background-color: #fff; position: absolute; clip: rect(0, 0, 20px, 0); } .cool-zonearab .zonearablines .line.line-1 { top: 0; -webkit-animation: slide 2s ease 0s infinite; animation: slide 2s ease 0s infinite; } .cool-zonearab .zonearablines .line.line-2 { top: 15px; -webkit-animation: slide 2s ease 0.25s infinite; animation: slide 2s ease 0.25s infinite; } .cool-zonearab .zonearablines .line.line-3 { top: 30px; -webkit-animation: slide 2s ease 0.5s infinite; animation: slide 2s ease 0.5s infinite; } .cool-zonearab .loading-zonearab { position: absolute; top: 50px; text-align: center; width: 100%; color: #fff; font-size: 13px; height: 10px; -webkit-animation: fade 1s ease 0s infinite; animation: fade 1s ease 0s infinite; font-weight: bold; } @-webkit-keyframes slide { 0% { clip: rect(0, 0, 20px, 0); } 30% { clip: rect(0, 80px, 20px, 0); } 50% { clip: rect(0, 80px, 20px, 0); } 80% { clip: rect(0, 80px, 20px, 80px); } 100% { clip: rect(0, 80px, 20px, 80px); } } @keyframes slide { 0% { clip: rect(0, 0, 20px, 0); } 30% { clip: rect(0, 80px, 20px, 0); } 50% { clip: rect(0, 80px, 20px, 0); } 80% { clip: rect(0, 80px, 20px, 80px); } 100% { clip: rect(0, 80px, 20px, 80px); } } @-webkit-keyframes fade { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }</style><script type="text/javascript"> $(window).load(function () { setTimeout(function () { $(".cool-zonearab").fadeOut("slow"); setTimeout(function () { $("#load-zonearab").fadeOut("slow") }, 1000) }, 1000) }); </script><div id='load-zonearab'><div class='cool-zonearab'><div class='zonearablines'><div class='line line-1'></div><div class='line line-2'></div><div class='line line-3'></div></div><div class='loading-zonearab'>جاري التحميل</div></div></div>

الشكل 13

<style>#zonearab-loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#060606;z-index: 99999; opacity: .95;}.zonearab-cube-grid { width: 40px; height: 40px; text-align: center; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -40px; } .zonearab-cube-grid .sk--zonearabcube { width: 33%; height: 33%; background-color: #fff; float: left; -webkit-animation: sk--zonearabcubeGridScaleDelay 1.3s infinite ease-in-out; animation: sk--zonearabcubeGridScaleDelay 1.3s infinite ease-in-out; } .zonearab-cube-grid .sk--zonearabcube1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .zonearab-cube-grid .sk--zonearabcube2 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .zonearab-cube-grid .sk--zonearabcube3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .zonearab-cube-grid .sk--zonearabcube4 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .zonearab-cube-grid .sk--zonearabcube5 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .zonearab-cube-grid .sk--zonearabcube6 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .zonearab-cube-grid .sk--zonearabcube7 { -webkit-animation-delay: 0s; animation-delay: 0s; } .zonearab-cube-grid .sk--zonearabcube8 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .zonearab-cube-grid .sk--zonearabcube9 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } @-webkit-keyframes sk--zonearabcubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } } @keyframes sk--zonearabcubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } }</style> <script type='text/javascript'> $(window).load(function () { setTimeout(function () { $(".zonearab-cube-grid").fadeOut("slow"); setTimeout(function () { $("#zonearab-loader").fadeOut("slow") }, 1000) }, 1000) }); </script><div id='zonearab-loader'><div class="zonearab-cube-grid"> <div class="sk--zonearabcube sk--zonearabcube1"></div> <div class="sk--zonearabcube sk--zonearabcube2"></div> <div class="sk--zonearabcube sk--zonearabcube3"></div> <div class="sk--zonearabcube sk--zonearabcube4"></div> <div class="sk--zonearabcube sk--zonearabcube5"></div> <div class="sk--zonearabcube sk--zonearabcube6"></div> <div class="sk--zonearabcube sk--zonearabcube7"></div> <div class="sk--zonearabcube sk--zonearabcube8"></div> <div class="sk--zonearabcube sk--zonearabcube9"></div></div></div>

لوضع Preloader مخصص:

ابحث عن ]]></b:skin>

ثم ضع الكود التالي فوقه:

.loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url('######') 50% 50% no-repeat rgb(249,249,249);

مكان ###### ضع رابط الصورة التي تريدها أن تكون Preloader لمدونتك شرط أن تكون بصيغة gif .

ثم ابحث عن <body>

وضع الكود التالي تحته:

<div class="loader"></div>

ثم ابحث عن </head>

وضع الكود التالي فوقه:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript">$(window).load(function() { $(".loader").fadeOut("slow");})</script>

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

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

أقرأ المزيد

Unknown 3:18 م كن أول المعلقين

الأحد، 12 فبراير 2017

التسميات: اضافات بلوجر

اضافة ازرار الشبكات الاجتماعية عائمة

عزيزي المدون هل مللت من الازرار القديمة ؟

هل بحثت عن اضافات مميزة ولم تجدها ؟

هل تحب اضافة جديده وبشكل احترافي ؟

هل تود اضافه متناسقة مع جميع الالوان ؟

كما تعودت دائماً معنا شكل مميز واحترافي + تركيب سهل وبسيط

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

الذهاب الى لوحة التحكم
انقر على تخطيط
اختار اضافة اداة
اختر اداة الـ html/javascript
ضع الكود ادناه

الكود:

<style>.fixedmenu{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0jajpCfk72Px6NlMyr1qSgTQ0uVBZCCx3r7T7Ic_fBwSzdkUcKkGbElV7djYfQ7nUNR9HSBcLI3_4_JgfLj5yfxAmXYDQCQOQPRMV0bsTa9LY5_ruQplRq3mkW2YNsmVQ_hr7J_rx1x4/s1600/facebook.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}.fixedmenu1{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ge7TPaWz-7a3OAfOBQUp7GmgC5gAOs25066Ck0xdSm33ShJy1jcloF_zRHTJTTHpAWbyGMQOzrg4HYA8pslZe6hps91AwkS1ILFqagj9Euu_izEtExl8UJhALsvCXRK21HHwX7ML8xs/s1600/facebook-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}.fixedmenu_1{margin:0px 0 0 43px}.fixedmenutw{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTIS2Eh8HIXsOibfVF_-5AxLL4agQJ2P4-fevTevQMzWuOaEbUwRs70dtB1gU3l28Shsxslh6rzXtvbL1dlB3FDzIGcABFepGh_QFk9in3cJgF8huiDM4N3h0RIk2O2L1sYmjvPOFvFrY/s1600/twitter.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}.fixedmenutw1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDwMi8fbryrl0UUiWqCieBxqVCRUM_C_gEWKVr_O9vxMHy8PyzGZEHF647Mm8xSvsQHWX95NN4UNZuA0oMAbBcYR9RdrLiYzWqcCNmZ_JU3ClRbq1SCJXhOE6kULjA8bsyBL4JcTQbRf0/s1600/twitter_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}.fixedmenutw_1{margin:0px 0 0 43px}.fixedmenufb{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq5WPPAM3Uquk62rZQlGms3JmjpbK6xclxzxPNhk2VH2XItoqiTFeIAOGLzkJolopgZfCDaDmluV17MvS7VyubcepjAOocDQJ77QonVaDqRAAuC70DxrFyx5iFdISkQAegDEoQ8M9x7XY/s1600/Gplus.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}.fixedmenufb1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqqowm_xrxIoxm16Q50i_w8weIZIRmjpAlVgr_KJnB8r8eA0e9j_IAAYi82QTuvELsArNA0aKbp3kfYcpUNOTMbhyphenhyphenF5KZSCTKlO0ICqxmxYAO4qekfJpqyO0F46hyphenhyphenduRx-fOTpu7W56R8/s1600/Gplus_hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}.fixedmenufb_1{margin:0px 0 0 43px}.fixedmenurss{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6haiOd2jd0fzHVwRTYVCpjExCo4yIcqPunD0_Af2J-1lF0_e0wBlx-Qwk5Po3TyVUpSoft_HSmOxEwUhMic6_z1_0QVtr81tiamppJnLdEScN76LXS8Odj3dK1XT8ltqLUhg8SgweCxQ/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}.fixedmenurss1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgiQ9lrWSxjVVmhe9nj_koVJF9irws-LHrTHGpm0DNCmO7ZtyjqGXEnnX7YoeW_lEVSN-oPyQH7rv0i2eEOudk72-CR9xJEr7EIqDQ8vWvTIp3HbGk_xZMOtwvpn-wnsFkbWfKiSWWAjE/s1600/RSS-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}.fixedmenurss_1{margin:0px 0 0 43px}</style><div class='fixedmenu' onmouseout='this.className='fixedmenu'' onmouseover='this.className='fixedmenu1''><div class='fixedmenu_1'><a href='https://www.facebook.com/ZoneArab' target='_blank'><img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm8dmG1ybYy1SLSCCwG2PZ3lK9_ON2AOEc6k9S-ctVyUE2aMT4e9mxO6oNKXhfUXeTmJe6OrLuPb_F2fmY8YkLSFYpTVzGPKlfGza_SXF5sOWcMgC0VgccHww0ZclwJ10XjLekk3L-OvI/s1600/facebook-hover1.png' title='Like us on Facebook'/></a><br/></div></div><div class='fixedmenutw' onmouseout='this.className='fixedmenutw'' onmouseover='this.className='fixedmenutw1''><div class='fixedmenutw_1'><a href='https://twitter.com/' target='_blank'><img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5-UP3Rlh_e0tOaGjeOk6lkMraU9xmkJ9jf5aA7ipzhl1t85y3cXjd-jkBNwWK_Ey4VN3hRvmQsE3cGW4JdaGnsYCV8lV_W313h1mn484CjJpoIPUbmJjtnDqAbzyW3QqMMwzjZn9e_ao/s1600/twitter_hover1.png' title='Follow us on Twitter'/></a><br/></div></div><div class='fixedmenufb' onmouseout='this.className='fixedmenufb'' onmouseover='this.className='fixedmenufb1''><div class='fixedmenufb_1'><a href='https://plus.google.com/' target='_blank'><img alt='Recommend us on Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-SGoGD6f0AH7MrYSpGrztk4_auiVlsyjJW-L_hulEiqb7aSmK9ltPQxNCtt7DDM8pynrYmEV9yjpfqSwNbTCOGOVgBUfghmgBHHCCjXLQV0jcfB-r79PlR0dxCYoqa60xo67KC1WVj5M/s1600/Gplus_hover1.png' title='Recommend us on Google Plus'/></a><br/></div></div><div class='fixedmenurss' onmouseout='this.className='fixedmenurss'' onmouseover='this.className='fixedmenurss1''><div class='fixedmenurss_1'><a href='http://feeds.feedburner.com/' target='_blank'><img alt='Subscribe me on RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPxdiKwRMvUZecGbJHiLEgmaxlZT8bFF6zwApqJRgszDMaYThb8wYH0bOhZgmkHF29vNDNK81G2KOXzhNVYmQ3m0sOQCTAxjmcMoiJ2u3lJXKUi9wINeURCBnLSy5oPobim4BsoC_MfdE/s1600/RSS-hover1.png' title='Subscribe me'/></a><br/></div></div>

يجب عليك تغيير ما هو باللون البرتقالي:

الاول هو صفحة المدونة على الفيس بوك

الثاني صفحة المدونة على تويتر

الثالث حسابك في جوجل بلس

الثالث هوة الخلاصات للمدونة

وقم بتغيير ما هو باللون الأخضر الى ما يناسبك.

اتمنى ان الاضافة نالت اعجابكم واتمنى ان الشرح قد اعجبكم

أقرأ المزيد

Unknown 4:18 ص كن أول المعلقين

التسميات: اضافات بلوجر

كيفية تغيير ستايل السكرول بار في بلوجر

اذا كنت تفكر في امكانية تعديل لون/عرض السكرول بار في مدونتك فهذا الدرس موجه لك.

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

اتبع الخطوات التالية واجعل مدونتك أجمل:

اللون الافتراضي للسكرول بار هو دائماً الرمادي،

بإمكاننا التعديل على السكرول بار بالتعديل على اللون وعرض السكرول بار وطولها...

لعمل ذلك نحتاج الى التعديل على ستايل ال css ، بدون تأخير دعونا نقوم بذلك:

الخطوة الأولى) قم بتسجيل الدخول الى حسابك في بلوجر >> ادخل الى قالب >> تعديل HTML .
الخطوة الثانية) اضغط بأي مكان داخل الصندوق الذي يحتوي على أكواد المدونة واضغط على Ctrl+F من لوحة المفاتيح في ويندوز (Cmd+F من الماك) .
الخطوة الثالثة) قم بالبحث عن الكود التالي ]]></b:skin> واضف أحد الأكواد التالية فوقه:

** سكرول بار أزرق مخطط:

::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 10px;}::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ background-color: #3366FF; border-radius: 10px; background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent)}

** سكرول بار أخضر:

::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); background-color: #F5F5F5; border-radius: 10px;}::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ border-radius: 10px; background-color: #FFF; background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4D9C41), to(#19911D), color-stop(.6,#54DE5D))}

** سكرول بار أحمر وأسود:

::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9); border-radius: 10px; background-color: #444444;}::-webkit-scrollbar{ width: 12px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ border-radius: 10px; background-color: #D62929; background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent)}

** سكرول بار رمادي متدرج:

::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6); background-color: #CCCCCC;}::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ background-color: #FFF; background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 25%, transparent 100%, rgba(0, 0, 0, 1) 75%, transparent)}

**سكرول بار رمادي وأسود متقطع:

::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 10px;}::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ background-color: #AAA; border-radius: 10px; background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .2) 75%, transparent 75%, transparent)}

** سكرول بار برتقالي :

::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ background-color: #F90; background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)}

** سكرول بار أسود:

::-webkit-scrollbar-track{ border: 1px solid black; background-color: #F5F5F5;}::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ background-color: #000000; }

** سكرول بار أزرق متدرج:

::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 10px;}::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ border-radius: 10px; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122,153,217)), color-stop(0.72, rgb(73,125,189)), color-stop(0.86, rgb(28,58,148)));}

** سكرول بار برتقالي (كما في مدونتنا):

::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ background-color: #F90; background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)}

** سكرول بار أزرق غامق وفاتح:

::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ background-color: #0ae; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));}

** سكرول بار أسود :

::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ background-color: #000000; border: 2px solid #555555;}