Uygulama İndirme Butonları (APP Store - Play Store)

<!DOCTYPE html> <html> <head> <title>Uygulama İndirme Butonları (APP Store - Play Store)</title> <style type="text/css"> /*<![CDATA[*/ .app_down_btn { margin:16px 0 16px; text-align:center } .app_down_btn a { padding:10px 20px; border-radius:25px; text-align:center; background:#e9e9e9; margin:0 5px 0 5px; transition:all 150ms ease-out; border-bottom:2px solid #d15241; display:inline-block } a.play_store_btn:after{ content:''; background:no-repeat url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG7zvrIf1N7mDXNnBGMYy4epERQPTP4i8ny8Pgn6FuVSfmX27xm5MTI__-mk04YmTXHZV7bnivc0yXvKz0citqj-JSjp1kzyh60acuoTCJK0PRMRBNu9zcEAXjiD64hRNSBIhgQdH5z3E/s1600/googleplay.png); display:inline-block; background-size:90px 20px; width:90px; height:20px; margin:0; vertical-align:middle } a.app_store_btn:after{ content:''; background:no-repeat url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcOKoMHxveDYnFgBiXeR13fhvrCuXpDio65yXiTh8iKIOVZ5DPfYIleNGAJ6Jv56RO1NypkxsAKJcLMB8vIwT9AM2fVPu5nnZM8WOPc3X_7VUaWvNv0TUFGuNSg9QW1nt5xykcow2F8oU/s1600/appstore.png); display:inline-block; background-size:90px 20px; width:90px; height:20px; margin:0; vertical-align:middle } .app_down_btn a:hover { background:#f9f9f9; border-bottom:2px solid #eee } /*]]>*/ </style> </head> <body> <div class="app_down_btn"> <a class="play_store_btn" href="#" target="_blank" title="Play Store" rel="nofollow noopener"></a> <a class="app_store_btn" href="#" target="_blank" title="APP Store" rel="nofollow noopener"></a> </div> </body> </html>

Blogger AB Çerez Bildirim Çubuğu

<!DOCTYPE html> <HTML> <head> <title>Blogger AB Çerez Bildirim Çubuğu</title> <style type='text/css'> /*<![CDATA[*/ @import url('https://fonts.googleapis.com/css?family=Roboto'); body{ background-color:#f5f5f5; font-family:'Roboto', sans-serif; margin:0; padding:0 } * { margin:0; padding:0 } a{ text-decoration:none } .cookie-choices-info{ background-color:#fff!important; position:fixed!important; line-height:normal!important; left:0!important; right:0!important; bottom:0!important; font-family:inherit!important; box-shadow:0 -3px 16px -3px rgba(0,0,0,.75); -webkit-transform:translateZ(0) } #cookieChoiceInfo .cookie-choices-inner{ margin:auto!important; padding:16px!important; text-align:center!important } .cookie-choices-info .cookie-choices-text{ font-size:12px!important; color:#222!important; margin-bottom:16px; line-height:1.5 } .cookie-choices-buttons{ margin-left:0!important; text-transform:uppercase } .cookie-choices-info .cookie-choices-button{ color:#fff!important; font-size:13px!important; margin-left:5px!important; padding:3px 6px!important; background-color:#438afe!important; border-radius:2px; transition:all .6s linear } .cookie-choices-info .cookie-choices-button:nth-child(2){ background-color:#ef690f!important; transition:all .6s linear } .cookie-choices-info .cookie-choices-button:hover,.cookie-choices-info .cookie-choices-button:focus{ background-color:#3c7ce5!important; text-decoration:none!important; transition:all .1s linear } .cookie-choices-info .cookie-choices-button:nth-child(2):hover,.cookie-choices-info .cookie-choices-button:nth-child(2):focus{ background-color:#d65f00!important } @media only screen and (max-width:640px){ .cookie-choices-info .cookie-choices-text{ display:block } .cookie-choices-buttons{ margin-left:0!important } .cookie-choices-info .cookie-choices-button{ margin-left:0!important } .cookie-choices-info .cookie-choices-button:nth-child(2){ margin-left:5px!important } } /*]]>*/ </style> </head> <body> <div id="cookieChoiceInfo" class="cookie-choices-info singleton-element"> <div class="cookie-choices-inner"> <span class="cookie-choices-text">This site uses cookies to help deliver services. By using this site, you agree to the use of cookies.</span><span class="cookie-choices-buttons"><a href="https://www.blogger.com/go/blogspot-cookies" target="_blank" class="cookie-choices-button" rel="nofollow noopener" title="Learn More">Learn More</a><a id="cookieChoiceDismiss" href="#" class="cookie-choices-button">Got it!</a></span> </div> </div> </body> </HTML>

Sayfa Ön Yükleme Eklentisi - 14

<!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 14 (PreLoader)</title> <style type='text/css'> /*<![CDATA[*/ #PreLoader{background:#f5f5fa;overflow:hidden;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #loader-status{width:50px;height:30px;position:fixed;left:50%;top:50%;margin:-25px 0 0 -15px} .spinner{margin:0 auto;width:50px;height:30px;text-align:center;font-size:10px} .spinner > div{background-color:#4267b3;height:100%;width:6px;display:inline-block;-webkit-animation:stretchdelay 1.2s infinite ease-in-out;animation:stretchdelay 1.2s infinite ease-in-out} .spinner .rct2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s} .spinner .rct3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s} .spinner .rct4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s} .spinner .rct5{-webkit-animation-delay:-0.8s;animation-delay:-0.8s} @-webkit-keyframes stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1.0)}} @keyframes stretchdelay{0%,40%,100%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}} /*]]>*/ </style> </head> <body> <div id='PreLoader'> <div id='loader-status'> <div class='spinner'> <div class='rct1'></div> <div class='rct2'></div> <div class='rct3'></div> <div class='rct4'></div> <div class='rct5'></div> </div> </div> </div> </body> </html>

Sayfa Ön Yükleme Eklentisi - 13

<!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 13 (PreLoader)</title> <style type='text/css'> /*<![CDATA[*/ #PreLoader{background:#ecf0f2;overflow:hidden;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .loader{border-radius:50%;margin:0 auto;position:absolute;top:40%;left:0;right:0;height:50px;width:50px} .gge{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:0 solid transparent;border-bottom:60px solid #00b5ff;width:0;z-index:2} .gge2{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:0 solid transparent;border-bottom:40px solid #ffde16;width:0;z-index:1} .gge3{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:40px solid #1da159;border-bottom:0 solid transparent;width:0;z-index:1} .gge4{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:60px solid #ea344f;border-bottom:0 solid transparent;width:0;z-index:2} .circa{border:30px solid rgba(255,255,255,0.1)} .circa2{margin-top:30px;border:25px solid #fff;box-sizing:border-box;box-shadow:0 2px 1px rgba(0,0,0,0.15),0 -2px 1px rgba(0,0,0,0.15),-2px 0 1px rgba(0,0,0,0.15),2px 0 1px rgba(0,0,0,0.15);z-index:90} @-webkit-keyframes translateRotation{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}} /*]]>*/ </style> </head> <body> <div id='PreLoader'> <div class='spinner'> <div class='loader gge'></div> <div class='loader gge2'></div> <div class='loader gge3'></div> <div class='loader gge4'></div> <div class='loader circa'></div> <div class='loader circa2'></div> </div> </div> </body> </html>

Sayfa Ön Yükleme Eklentisi - 12

<!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 12 (PreLoader)</title> <style type='text/css'> /*<![CDATA[*/ #PreLoader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{position:absolute;top:50%;left:50%;z-index:1;height:40px;width:40px;transform:translate(-50%,-50%)} [class^="balls-"]{position:absolute;display:block;left:30px;width:12px;height:12px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0} @keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}} .balls-1{z-index:-1;background-color:#2196F4;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)} .balls-2{z-index:-2;background-color:#03A9F5;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)} .balls-3{z-index:-3;background-color:#00BCD5;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)} .balls-4{z-index:-4;background-color:#009689;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)} .balls-5{z-index:-5;background-color:#4CAF51;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)} .balls-6{z-index:-6;background-color:#8BC35A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)} .balls-7{z-index:-7;background-color:#CDDC38;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)} .balls-8{z-index:-8;background-color:#FFEB4B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)} /*]]>*/ </style> </head> <body> <div id='PreLoader'> <div class='spinner'> <span class='balls-1'></span> <span class='balls-2'></span> <span class='balls-3'></span> <span class='balls-4'></span> <span class='balls-5'></span> <span class='balls-6'></span> <span class='balls-7'></span> <span class='balls-8'></span> </div> </div> </body> </html>

Sayfa Ön Yükleme Eklentisi - 11

<!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 11 (PreLoader)</title> <style type='text/css'> /*<![CDATA[*/ #PreLoader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .loader{position:absolute;top:50%;left:50%;width:200px;height:200px;margin-top:-100px;margin-left:-100px} .loader > .steps{position:absolute;top:50%;left:50%;z-index:10;width:160px;height:100px;margin-top:-50px;margin-left:-80px;border-radius:5px;background-color:#1e3f57;transform-type:preserve-3d;animation:steps1 3s cubic-bezier(.55,.3,.24,.99) infinite} .loader > .steps:nth-child(2){z-index:11;width:150px;height:90px;margin-top:-45px;margin-left:-75px;border-radius:3px;background-color:#3c617d;animation-name:steps2} .loader > .steps:nth-child(3){z-index:12;width:40px;height:20px;margin-top:50px;margin-left:-20px;border-radius:0 0 5px 5px;background-color:#6bb2cd;animation-name:steps3} @keyframes steps1{3%,97%{width:160px;height:100px;margin-top:-50px;margin-left:-80px}30%,36%{width:80px;height:120px;margin-top:-60px;margin-left:-40px}63%,69%{width:40px;height:80px;margin-top:-40px;margin-left:-20px}} @keyframes steps2{3%,97%{width:150px;height:90px;margin-top:-45px;margin-left:-75px}30%,36%{width:70px;height:96px;margin-top:-48px;margin-left:-35px}63%,69%{width:32px;height:60px;margin-top:-30px;margin-left:-16px}} @keyframes steps3{3%,97%{width:40px;height:20px;margin-top:50px;margin-left:-20px}30%,36%{width:8px;height:8px;margin-top:49px;margin-left:-5px;border-radius:8px}63%,69%{width:16px;height:4px;margin-top:-37px;margin-left:-8px;border-radius:10px}} /*]]>*/ </style> </head> <body> <div id='PreLoader'> <div class='loader spinner'> <div class='steps'></div> <div class='steps'></div> <div class='steps'></div> </div> </div> </body> </html>

Sayfa Ön Yükleme Eklentisi - 10

<!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 10 (PreLoader)</title> <style type='text/css'> /*<![CDATA[*/ #PreLoader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner-wrap{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center} .loader-balls{height:20px;width:250px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto} .moving-ball{animation-name:loader-balls;animation-timing-function:ease-in-out;animation-duration:3s;animation-iteration-count:infinite;height:20px;width:20px;border-radius:100%;background-color:black;position:absolute;border:2px solid white} .moving-ball:first-child{background-color:#8cc759;animation-delay:0.5s} .moving-ball:nth-child(2){background-color:#8c6daf;animation-delay:0.4s} .moving-ball:nth-child(3){background-color:#ef5d74;animation-delay:0.3s} .moving-ball:nth-child(4){background-color:#f9a74b;animation-delay:0.2s} .moving-ball:nth-child(5){background-color:#60beeb;animation-delay:0.1s} .moving-ball:nth-child(6){background-color:#fbef5a;animation-delay:0s} @keyframes loader-balls{15%{transform:translateX(0)}45%{transform:translateX(230px)}65%{transform:translateX(230px)}95%{transform:translateX(0)}} /*]]>*/ </style> </head> <body> <div id='PreLoader'> <div class='spinner-wrap'> <div class='loader-balls'> <div class='moving-ball'></div> <div class='moving-ball'></div> <div class='moving-ball'></div> <div class='moving-ball'></div> <div class='moving-ball'></div> <div class='moving-ball'></div> </div> </div> </div> </body> </html>

Sayfa Ön Yükleme Eklentisi - 9

<!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 9 (PreLoader)</title> <style type='text/css'> /*<![CDATA[*/ #PreLoader{background:#fff;position:fixed;overflow:hidden;left:0;right:0;top:0;bottom:0;z-index:9999} .spinner-wrap{position:absolute;list-style:none;margin:0;padding:0;top:50%;left:50%;transform:translate(-50%,-50%);} .loading.reversed li{list-style:none;border:3px solid #2b8ccd;animation:LOADING 2s infinite} .loading.reversed li:nth-child(1n){animation-delay:0s} .loading.reversed li:nth-child(2n){animation-delay:0.2s} .loading.reversed li:nth-child(3n){animation-delay:0.4s} .loading li{position:absolute;height:0;top:50%;left:0;width:0;margin:0;height:10px;width:10px;border:3px solid #2b7ccd;border-radius:100%;transform:transformZ(0);animation:LOADING 2s infinite} .loading li:nth-child(1n){left:-20px;animation-delay:0s} .loading li:nth-child(2n){left:0;animation-delay:0.2s} .loading li:nth-child(3n){left:20px;animation-delay:0.4s} @keyframes LOADING{0%{transform:scale(0.5);background:#2b8ccd}50%{transform:scale(1);background:#fff}100%{transform:scale(0.5);background:#2b9ccd}} /*]]>*/ </style> </head> <body> <div id='PreLoader'> <div class='spinner-wrap'> <ul class='loading reversed'> <li></li> <li></li> <li></li> </ul> </div> </div> </body> </html>

Sayfa Ön Yükleme Eklentisi - 8

<!DOCTYPE html> <html> <head> <title>Sayfa Ön Yükleme Eklentisi - 8 (PreLoader)</title> <style type='text/css'> /*<![CDATA[*/ #PreLoader{overflow:hidden;background:#000;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #loader-container{margin:-45px -60px;width:120px;height:90px;position:absolute;top:50%;left:50%} #loader-do{background:#fff;border-radius:50%;width:30px;height:30px;position:absolute;bottom:30px;left:27px;transform-origin:center bottom;animation:loader-do .6s ease-in-out infinite} @-webkit-keyframes loader-do{0%{transform:scale(1,.7)}20%{transform:scale(.7,1.2)}40%{transform:scale(1,1)}50%{bottom:100px}46%{transform:scale(1,1)}80%{transform:scale(.7,1.2)}90%{transform:scale(.7,1.2)}100%{transform:scale(1,.7)}} .loader-step{position:absolute;width:30px;height:30px;border-top:2px solid #FFF;top:0;right:0} @-webkit-keyframes anim{0%{opacity:0;top:0;right:0}50%{opacity:1}100%{top:90px;right:90px;opacity:0}} #step-1{animation:anim 1.8s linear infinite} #step-2{animation:anim 1.8s linear infinite -.6s} #step-3{animation:anim 1.8s linear infinite -1.2s} /*]]>*/ </style> </head> <body> <div id='PreLoader'> <div id='loader-container' class='spinner-inner'> <div id='loader-do'></div> <div class='loader-step' id='step-1'></div> <div class='loader-step' id='step-2'></div> <div class='loader-step' id='step-3'></div> </div> </div> </body> </html>