<!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>
×
İletişim Formu
HTML etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
HTML etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blogger AB Çerez Bildirim Çubuğu
CSS HTML<!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
CSS3 HTML jQuery<!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
CSS3 HTML jQuery<!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
CSS3 HTML jQuery<!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
CSS3 HTML jQuery<!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
CSS3 HTML jQuery<!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
CSS3 HTML jQuery<!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
CSS3 HTML jQuery<!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>
Sayfa Ön Yükleme Eklentisi - 7
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 7 (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-inner{
position:absolute;
top:calc(50% - 20px);
left:calc(50% - 20px);
animation:rotator 1.4s linear infinite
}
@keyframes rotator{
0%{
transform:rotate(0deg)
}
100%{
transform:rotate(270deg)
}
}
.path{
stroke-dasharray:187;
stroke-dashoffset:0;
transform-origin:center;
animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite
}
@keyframes colors{
0%{
stroke:#4285f4
}
25%{
stroke:#ea4335
}
50%{
stroke:#f7c223
}
75%{
stroke:#1b9a59
}
100%{
stroke:#4285f4
}
}
@keyframes dash{
0%{
stroke-dashoffset:187
}
50%{
stroke-dashoffset:46.75;
transform:rotate(135deg)
}
100%{
stroke-dashoffset:187;
transform:rotate(450deg)
}
}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<svg class='spinner-inner' height='48px' viewBox='0 0 66 66' width='48px'><circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='6'/></svg>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 6
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 6 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:#fff;
z-index:1000
}
.loader-balls{
width:30px;
height:30px;
position:absolute;
background-color:#ccc;
top:45%;
border-radius:50%
}
.loader-balls:nth-child(1){
background-color:#2196F3;
animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)
}
.loader-balls:nth-child(2){
background-color:#F44336;
animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)
}
.loader-balls:nth-child(3){
background-color:#FFC107;
animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)
}
.loader-balls:nth-child(4){
background-color:#4CAF50;
animation:move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23)
}
@keyframes move{
0%{
left:0%
}
100%{
left:100%
}
}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<div class='loader-balls'></div>
<div class='loader-balls'></div>
<div class='loader-balls'></div>
<div class='loader-balls'></div>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 5
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 5 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(#1f3a47,#0b1114);z-index:1000}
.loader-spinner{position:relative;margin:180px auto auto;box-sizing:border-box;background-clip:padding-box;width:200px;height:200px;border-radius:100px;border:4px solid rgba(255,255,255,0.1);-webkit-mask:linear-gradient(rgba(0,0,0,0.1),black 90%);transform-origin:50%60%;transform:perspective(200px)rotateX(66deg);animation:loader-spinner-wiggle 1.2s infinite}
@keyframes loader-spinner-wiggle{30%{transform:perspective(200px)rotateX(66deg)}40%{transform:perspective(200px)rotateX(65deg)}50%{transform:perspective(200px)rotateX(68deg)}60%{transform:perspective(200px)rotateX(64deg)}}
.loader-spinner:before,.loader-spinner:after{content:"";position:absolute;margin:-4px;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:.05;border:inherit;border-color:transparent;animation:loader-spinner-spin 1.2s cubic-bezier(0.6,0.2,0,0.8)infinite,loader-spinner-fade 1.2s linear infinite}
.loader-spinner:before{border-top-color:#66e5ff}
.loader-spinner:after{border-top-color:#f0db75;animation-delay:0.3s}
@keyframes loader-spinner-spin{100%{transform:rotate(360deg)}}
@keyframes loader-spinner-fade{20%{opacity:.1}40%{opacity:1}60%{opacity:.1}}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<div class="loader-spinner"></div>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 4
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 4 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:1000}
.loader-juggle{width:300px;height:300px;position:absolute;top:50%;margin-top:-150px;left:50%;margin-left:-150px}
.loader-juggle div{position:absolute;width:21px;height:21px;border-radius:10.5px;background:#4285f4;margin-top:150px;margin-left:150px;animation:juggle 2.1s linear infinite}
.loader-juggle div:nth-child(1){background:#34a853;animation-delay:-0.7s}
.loader-juggle div:nth-child(2){background:#fbbc05;animation-delay:-1.4s}
@keyframes juggle{0%{transform:translateX(0px) translateY(0px)}12.5%{transform:translateX(25px) translateY(-55px) scale(1.1);background:#ea4335}25%{transform:translateX(50px) translateY(0px);animation-timing-function:ease-out}37.5%{transform:translateX(25px) translateY(55px)}50%{transform:translateX(0px) translateY(0px)}62.5%{transform:translateX(-25px) translateY(-55px) scale(1.1);animation-timing-function:ease-in}75%{transform:translateX(-50px) translateY(0px);animation-timing-function:ease-out}87.5%{transform:translateX(-25px) translateY(55px)}100%{transform:translateX(0px) translateY(0px)}}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<div class='loader-juggle'>
<div class='loader-ball'></div>
<div class='loader-ball'></div>
<div class='loader-ball'></div>
</div>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 3
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 3 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:#000;
color:#eaf8ff;
z-index:999;
font-family:Verdana,sans-serif!important
}
@-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 loader-bg{
0%{
background-color:#306f99
}
50%{
background-color:#19470f
}
90%{
background-color:#734a10
}
}
@-moz-keyframes loader-bg{
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
}
}
.loader-wrap{
font-size:18px;
font-weight:700;
left:25%;
letter-spacing:5px;
margin-left:-80px;
margin-top:-40px;
position:absolute;
top:50%;
width:68%
}
.loader-bg{
padding:30px 30px 30px 0;
background:#306f99;
-moz-animation:loader-bg 1.5s linear infinite;
-webkit-animation:loader-bg 1.5s linear infinite;
animation:loader-bg 1.5s linear infinite;
-moz-box-shadow:inset 0 0 45px 30px #000;
-webkit-box-shadow:inset 0 0 45px 30px #000;
box-shadow:inset 0 0 45px 30px #000
}
.pre-loading{
position:relative;
text-align:right;
text-shadow:0 0 6px #bce5ff;
height:20px;
width:150px;
margin:0 auto
}
.pre-loading span{
display:block;
position:absolute;
right:30px;
height:20px;
width:400px;
line-height:20px
}
.pre-loading span:after{
content:"";
display:block;
position:absolute;
top:-2px;
right:-21px;
height:20px;
width:16px;
background:#eaf6ff;
-moz-box-shadow:0 0 15px#bce4ff;
-webkit-box-shadow:0 0 15px #bce5ff;
box-shadow:0 0 15px #bce5ff;
-moz-animation:blink 3.4s infinite;
-webkit-animation:blink 3.4s infinite;
animation:blink 3.4s infinite
}
.pre-loading span.title{
-moz-animation:title 3.4s linear infinite;
-webkit-animation:title 3.4s linear infinite;
animation:title 3.4s linear infinite
}
.pre-loading 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>
</head>
<body>
<div id='PreLoader'>
<div class="loader-wrap">
<div class="loader-bg">
<div class="pre-loading">
<span class="title">Yükleniyor...</span>
<span class="text">Kodeks Editör</span>
</div></div></div></div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 2
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 2 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(10,10,10,1);
z-index:1000
}
.loader-spinner{
position:fixed;
width:100%;
top:70%;
height:30px;
text-align:center;
font-size:10px
}
.loader-spinner,.loader-spinner-inner{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
border:9px solid white;
border-color:transparent white;
margin:auto
}
.loader-spinner{
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
}
.loader-spinner-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>
</head>
<body>
<div id="PreLoader">
<div class="loader-spinner">
<div class="loader-spinner-inner"></div>
</div>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 1
CSS3 HTML javaScript<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 1 (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{
list-style:none;
margin:0;
padding:0;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
.loader{
display:inline-block;
width:30px;
height:30px;
position:relative;
border:4px solid #f44336;
top:50%;
animation:loader 2s infinite ease
}
.loader-inner{
vertical-align:top;
display:inline-block;
width:100%;
background-color:#f44336;
animation:loader-inner 2s infinite ease-in
}
@keyframes loader{
0%{
transform:rotate(0deg)
}
25%{
transform:rotate(180deg)
}
50%{
transform:rotate(180deg)
}
75%{
transform:rotate(360deg)
}
100%{
transform:rotate(360deg)
}
}
@keyframes loader-inner{
0%{
height:0%
}
25%{
height:0%
}
50%{
height:100%
}
75%{
height:100%
}
100%{
height:0%
}
}
/*]]>*/
</style>
</head>
<body>
<div id='preloader'>
<div class='spinner'>
<span class='loader'><span class='loader-inner'></span></span>
</div>
</div>
</body>
</html>
Tanıtım Reklamları İçin Reklam Kutusu Oluşturma
CSS CSS3 HTML HTML5<!DOCTYPE html>
<HTML>
<head>
<title>Tanıtım Reklamları İçin Reklam Kutusu Oluşturma</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
body {font-family: 'Fira Sans Condensed', sans-serif}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.banner_box_ads{background:#efefef;width:300px;margin:0 auto;text-align:center;padding:16.6666666667px}
.banner_box{background:#ddd;height:125px;width:125px;display:inline;margin:0;padding:0;float:left;position:relative;}
.banner_box:nth-child(1),.banner_box:nth-child(3){margin-right:16.6666666667px}
.banner_box:nth-child(1),.banner_box:nth-child(2){margin-bottom:16.6666666667px}
.banner_box a{position:relative;display:block;z-index:2}
.banner_box img{object-fit:cover}
.banner_box:before{content:"125x125";line-height:1.2;position:absolute;top:0;left:0;width:100%;height:100%;color:#444;font-size:20px;display:flex;flex-direction:column;justify-content:center;z-index:1;}
.banner_300{width:300px;height:250px;}
.banner_box.banner_box-300:nth-child(1){margin-right:0;margin-bottom:0;}
.banner_box_ads.box_widget{padding:0;}
.banner_300:before{content:"300x250";}
.clear{clear:both;}
</style>
</head>
<body>
<div class="banner_box_ads box_widget">
<div class="banner_box banner_300">
<!-- 300x250 banner alanı -->
<a href="https://bloggereklentileri.blogspot.com.tr/2018/04/blogger-sayfalar-widget-ile-sabit.html" target="_blank" rel="nofollow noopener" title="Blogger Sayfalar Widget'ı ile Sabit Sayfaları Otomatik Numaralandırma">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH33ajFvMNVgyJpv50DHzxYqUtyDrHGQ1ra8O2nPY6XMRuifSM1aFLdpVKaBHUc_w2irPXZlijGywV_BY6olQZkDcj365GXgcMnldwvY8V74iFC-bUrKpGqKj7QXJk-FeLeZxj-5s8I1Ni/s1600/sabit-sayfa-navigasyonu.png" alt="Blogger Sayfalar Widget'ı ile Sabit Sayfaları Otomatik Numaralandırma" title="Blogger Sayfalar Widget'ı ile Sabit Sayfaları Otomatik Numaralandırma" height="250" width="300"/></a>
</div>
<div class="clear"/>
</div>
<div class="banner_box_ads">
<div class="banner_box">
<!-- 125x125 banner alanı -->
<a href="https://bloggereklentileri.blogspot.com.tr/2018/03/blog-metinlerini-css-ile-renklendirme.html" target="_blank" rel="nofollow noopener" title="Blog Metinlerini CSS ile Renklendirme">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMPQvrkk9O7Evxa8unsVVj3hiioTRgpW2u8BVaT58eN3-ADyueTlwWuepDnE0bqqXeBg4h5fsBdUz5qEY-yIXytogV___paj4vDrhDH23B9JcCT5Cqdzj1ClDo5PuTxpCu8QuQ7qB2BdM8/s1600/css-gradients.png" alt="Blog Metinlerini CSS ile Renklendirme" title="Blog Metinlerini CSS ile Renklendirme" height="125" width="125"/></a>
</div>
<div class="banner_box">
<!-- 125x125 banner alanı -->
<a href="https://bloggereklentileri.blogspot.com.tr/2018/02/blogger-yldz-derecelendirme-widget.html" target="_blank" rel="nofollow noopener" title="Blogger Yıldız Derecelendirme Widget Eklentisi Nasıl Kurulur?">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM1OOAj8h4Sn4zU-iOCnwhm6q5EkjMe3YbHl60QARhyUfTLuFDx4M1M4bB-CnBLbfmTGGfgiT3hcYBybUDN30rI95mhuCUQ64gwkHlzEDaIJ-fjLny12Ki8sMbEVI7erPrnf0LddCMFeFP/s1600/yildiz+derecelendirme.png" alt="Blogger Yıldız Derecelendirme Widget Eklentisi Nasıl Kurulur?" title="Blogger Yıldız Derecelendirme Widget Eklentisi Nasıl Kurulur?" height="125" width="125"/></a>
</div>
<div class="banner_box">
<!-- 125x125 banner alanı -->
<a href="https://bloggereklentileri.blogspot.com.tr/2018/02/blogger-css-ve-svg-sosyal-paylasm.html" target="_blank" rel="nofollow noopener" title="Blogger CSS ve SVG Sosyal Paylaşım Butonları">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjZe1M-qs3RHZFqwpMZwu_qtIYZ0hJwtGXx_p4STeNjIEGXJcPJeuhk7h-d476s6L032nSggNUNxCQB30I44ol7d06w5190YzdJrgZbQNEzPhedY4-_wq5diNmoawHkog8e2DvVASBqTD_/s1600/sosyal-paylasim.png" alt="Blogger CSS ve SVG Sosyal Paylaşım Butonları" title="Blogger CSS ve SVG Sosyal Paylaşım Butonları" height="125" width="125"/></a>
</div>
<div class="banner_box">
<!-- 125x125 banner alanı -->
<a href="https://bloggereklentileri.blogspot.com.tr/2018/02/blogger-ozel-adstxt-icerigi-nasl.html" target="_blank" rel="nofollow noopener" title="Blogger Özel Ads.txt İçeriği Nasıl Etkinleştirilir?">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy7BP_6rkQdpg8v3REagUFHAluUq9IObdGuZ4PN3k5giZRZrCbmp07kvDZh3tmtQNMJqRgiHYw39GrRAOcbpQ8lt_EJ3qOSUctVAqaE3gtbaHtjBgNzXlM9hVDSbB6MbLQPYHVpUbJof22/s1600/ads.png" alt="Blogger Özel Ads.txt İçeriği Nasıl Etkinleştirilir?" title="Blogger Özel Ads.txt İçeriği Nasıl Etkinleştirilir?" height="125" width="125"/></a>
</div>
<div class="clear"/>
</div>
</body>
</HTML>
Blog Yayınlarını Sayfalara Ayrıma Eklentisi
CSS HTML jQuery<HTML>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
body {font-family: 'Fira Sans Condensed', sans-serif;padding:20px}
.post-body-nav{padding-top:20px}
.post-body-nav button{background:transparent;cursor:pointer}
.post-body-nav button{padding:6px 12px;display:inline-block;color:#222;border:2px solid #eee;margin:4px;transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out}
.post-body-nav button.active {border:2px solid #888}
.post-body-nav button:hover,.post-body-nav button:focus{border:2px solid #888;color:#222}
img{width:100%;height:auto}
a:-webkit-any-link {color:#2e9fff;cursor:pointer;text-decoration:none}
</style>
</head>
<body>
<div class='post-body entry-content'>
<div itemprop='articleBody'>
<h2>Blog Yayınlarını Sayfalara Ayrıma</h2>
<div class="post-body-page">
<div class="separator" style="clear: both; text-align: center;">
<img alt="Blog Sitesini Google Aramalarında Üst Sıralara Çıkarmanın En İyi Yolları" border="0" data-original-height="450" data-original-width="800" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2b5XM_Dxvb4AENJwUoKifyacPEWeWq1v0lRmOAh-bkFRlj9u8_mQTH7zirFl4g6CG7UMZ8a-uFkH1mROHfE57wR5ZVZH26s87KUVRNQvIYxEFFh281qR6L7GgBXSrhO20XpjnmuYveEpW/s1600/Google-Search.png" title="Blog Sitesini Google Aramalarında Üst Sıralara Çıkarmanın En İyi Yolları"></div>
<br>
Tüketicilerin internet alış-veriş yapma tutumları çok değişti. Özellikle son zamanlarda tüketiciler bir ürünü satın almadan önce internet üzerinden araştırma ve karşılaştırma yapmadan kesinlikle satın almıyor.<br>
<br>
Arama motorları aracılığıyla web sitelerini sorgulamak bir alışkanlık haline geldi. Bu nedenle, Google ve diğer arama motorlarının blog yayınlarınızı daha iyi sıralayarak blog sitenizin iyi bir durumda gelmesi için SEO (Arama Motoru Optimizasyonu) tekniklerini nasıl kullanacağınızı bilmek çok önemlidir.<br>
<br>
Blog ve blog yayınları arama motorlarının ilk üç sayfasında görünür olması veya olmaması durumu, blog performansının başarılı veya başarısız olduğunu belirler. Blog için önemli olan uygulanacak SEO teknikleri ve izlenecek yol, organik ziyaretçi çekmeye yardımcı olacak faktörleri de içermelidir.<br>
<br>
SEO tekniklerini uygulayarak, arama sonuçları ile alakalı içeriklerin görüntülenme sayısını artırmak mümkün. SEO ile çalışmanın en büyük avantajı, teknik bilgiler için herhangi bir ücret ödenmemesi ve organik olarak uygulanmasıdır.<br>
<br>
<h2><b>Google Arama Sonuçlarında Üst Sıralara Çıkmanın Yolları Nelerdir?</b></h2>
<br>
Google ve diğer arama motorlarında sıralama iyileştirmeye yönelik bazı önemli faktörler aşağıda belirtilmiştir.
</div>
<div class="post-body-page">
<b>Anahtar kelimeleri araştırma</b>
<br>
<br>
Arama motorlarında blog konumunu teyit edebilmek için, anahtar kelşmelerin alaka düzeyini araştırmanız ve anlamanız gerekir. Bu tetikleyiciler üzerinde çalışmak blogun arama sonuçlarındaki sırasını çok belirgin bir şekilde yükseltir. Google, en iyi şartları bulmaya yardımcı olmak için ücretsiz araçları kullanma olanağı sağlıyor.<br>
<br>
Google Trendler veya Google AdWords gibi planlayıcı araçlar sayesinde, yayın içeriğine en uygun anahtar kelimeleri bulabilirsiniz. Anahtar kelimeler, Google'da sıralama yükseltmek için kullanılan SEO tekniklerinden biridir. Anahtar kelimeler ile arama yapmadan blog içeriğinizin ziyaret edilmesi ile dikkate değer bir TO elde etmek imkansızdır.<br>
<br>
<b>İçerik başlığının oluşturulması</b><br>
<br>
Belirgin ve ilk ipucu olan anahtar kelimenin yayın başlığına eklenmesi gerekir. Google kısa başlıkları daha iyi sıralar, çekici olması ve 50 ile 67 karakter uzunluğunda olması gerekir. Başlığı oluşturacak kelimelerin seçimini düşünmek, blog içeriğinin arama motorlarında yerini belirlemek için gereklidir.<br>
<br>
İçerik alaka düzeyini tanımlayan ve sıralayan Google algoritması, yayını Google aramalarının en üstüne koymanın başlıca faktörlerinden biri olarak başlığı alır. Bir arama yapılırsa ve tarafınızca seçilen anahtar kelimeyle ilgili herhangi bir sonuç bulunmazsa, Google'da sıralanmak için hiç bir yarar sağlamaz ve arama motorlarındaki optimizasyon işe yaramaz olacaktır.<br>
<br>
İyi bir başlık oluşturmak arama motoru konumunu iyileştirerek içeriği daha hızlı bir şekilde çekmenize ve bulmanıza yardımcı olur. Eğer, kötü bir başlık konumlandırılmışsa pek fazla tıklama almaz. Bu nedenle, anahtar kelimeyi ve başlığı düşünmek içeriği daha iyi sıralamaktadır.
</div>
<div class="post-body-page">
<b>Meta açıklama etiketleri kullanma</b><br>
<br>
Meta açıklama etiketleri, sayfa içeriğinin kısa bir tanımlamasıdır ve maksimum 153 karaktere sahip olmalıdır ve içerik hakkında kısaca açıklama olacak şekilde oluşturmalısınız. Kısa metnin ortasına anahtar kelimenizi koymanız çok önemlidir.<br>
<br>
Özellikle Blogger bloglarında arama açıklaması Google'ın en üst sıralamasındaki faktörlerden birini oluşturur. Aynı durumu WordPress blogları için söyleyemeyiz. İçerikle alakalı özetlenme, odaklanma ve sıralama yerleşimi gibi faktörleri pek etkilemez. Fakat, Blogger blogları için, arama motorlarından daha fazla ziyaretçi çekebilmek için arama açıklaması ve meta etiketleri en önemli faktörlerdir. Meta açıklamaları olabildiğince ilgi çekici ve en önemli anahtar kelimelerinizden olmalıdır.<br>
<br>
Bknz: <a href="https://bloggereklentileri.blogspot.com/2017/03/blogspot-sitesinde-neden-iki-acklama.html" target="_blank" title="Blogspot Sitesinde Neden İki Açıklama Alanı Bulunuyor?" rel="noopener">Blogspot Sitesinde Neden İki Açıklama Alanı Bulunuyor?</a>
<br>
<br>
<b>Arama ve bağlantı oluşturmaya önem verme</b>
<br>
<br>
Bağlantı kurma bir sanattır. Bir SEO çalışmasının her zaman en zor kısmıdır, aynı zamanda <u>başarı için kritik önem taşıyan noktası</u>dır. Bu çalışma, sayfanıza bağlantılar oluşturarak arama sonuçlarında görüntülenen ilgili sitelere dahil edilmenizi sağlar. Faydalı olabilecek iki türlü bağlantı oluşturma tekniği vardır.
<br>
<br>
<ul style="text-align: left;">
<li>Dahili bağlantılar (İç linkleme yani iç bağlantılar)</li>
<li>Harici bağlantılar (Dış bağlantılar)</li>
</ul>
<br>
<b>Dahili bağlantılar</b><br>
<br>
Blog kullanıcılarının genelde iç linkleme olarak bilgdiği, sitenizdeki başka bir sayfaya yönlendiren bu tür bağlantılar çok önemlidir. Sitenize ait bağlantılardan oluştuğu ve tam yetki sahibi olduğunuz için sitede bulunan sayfara bağlantılar ekleyebilir veya kaldırabilirsiniz.<br>
<br>
Dahili bağlantılar ile sayfalarınızın alaka düzeyini artırabilir ve ziyaretçilerin sitede daha fazla zaman geçirmesini sağlayabilirsiniz. Bu tekniği dikatlice kullanmanın, bir içeriğe aşırı bağlantı eklemek ters etki gösterebilir, bu da içerik bütünlüğünün kaybolmasına neden olur ve ziyaretçiler sayfayı terk etmek zorunda kalabilir.<br>
<br>
<b>Harici bağlantılar</b><br>
<br>
İçerikle olan ilişkiye göre, yalnızca bir konuda karşılıklı olarak bağlantıların paylaşıldığı teknik türüdür. Daha basit anlatmak gerekise, bu tür ortaklıklardan oluşan ve kazanılan bağlantılara harici bağlantı denir.<br>
<br>
Bu tekniği kullanmanın en kolay ve doğru yolu, içeriğinizle ilgilenenlerle bilgi alışverşinde bulunmak ve her iki içeriğin ilgisini artıran <u>karşılıklı açıklama taktiği</u>ni uygulamak üzere harici bağlantılar kazanmak için ortaklıklar oluşturmaktır.
</div>
<div class="post-body-page">
<b>Kullanılabilirlik ve erişilebilirlik gibi faktörleri düşünün</b>
<br>
<br>
Kullanılabilirliği ve erişebilirliği iyi olan bir web sitesinin arama motorlarında bulunması kolaydır. Bunun için, web sitenizin oluşturulması sırasında iyi bir düzen (site içi planlaması) oluşturmanız ve pratik olarak birlikte SEO üzerinde çalışmanız gerekir.<br>
<br>
Sonuçta, ziyaretçilerin sitenizi tercih etmemesi veya kullanmaması, düzenli ve işlevsel olmadığı için iyi bir web sitesi izlenimi vermez. Aynı şekilde, kullanılabilir ve erişilebilir bir düzene sahip olmayan ve arama motoru optimizasyonu yapılmayan bir web sitesinin iyi durumda olması mantıklı değildir.<br>
<br>
Google'da iyi bir sıralama elde etmek için bir ipucu, sitenizin tıklanma sonucunda sayfalarınızın kısa sürede yüklenmesi ve içeriğinize kolaylıkla erişebilmesi için, web sitenizin yüklenmesini engelleyen unsurların avantajları ve dezavantajları düşünün. Çünkü, bir web sitesinin sadece dizine eklenmesini önemli bir faktör olarak gören daha iyi bir sıralamayı engelleyebilir.<br>
<br>
Bknz: <a href="https://bloggereklentileri.blogspot.com/2017/09/blogger-sitelerinin-krk-baglantlarn.html" target="_blank" title="Blogger Sitelerinin Kırık Bağlantılarını Bulma ve Yönlendirme" rel="noopener">Blogger Sitelerinin Kırık Bağlantılarını Bulma ve Yönlendirme</a><br>
<br>
<b>İçerik boyutu</b><br>
<br>
Google, kısa metinleri çok iyi derecelendirmiyor, içeriğin arama motorlarında daha üst sıralara çıkması için en az 300 kelime olmalıdır. 500, 1000 yada daha fazla kelimeyle yazılmış metinler daha iyi bir sıralamaya sahip olur. Çünkü, kapsanan konular hakkında daha detaylı bilgiler sunar.
</div>
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}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}('b 2(){c d=4.a("f");d.g="7:9/8;e,k+m+n+h",4.l.i(d)}0.3?0.3("j",2,!1):0.5?0.5("6",2):0.6=2;',24,24,'window||downloadJSAtOnload|addEventListener|document|attachEvent|onload|data|javascript|application|createElement|function|var||base64|script|src|IiksJCgiLnBvc3QtYm9keS1wYWdlIikuaGlkZSgwKSwkKCIucG9zdC1ib2R5LXBhZ2UiKS5maXJzdCgpLmZhZGVJbigpLCQoIi5wb3N0LWJvZHktbmF2IGJ1dHRvbiIpLmZpcnN0KCkuYWRkQ2xhc3MoImFjdGl2ZSIpfQ0KJCgiLnBvc3QtYm9keS1uYXYgYnV0dG9uIikuY2xpY2soZnVuY3Rpb24oKXtpZighJCh0aGlzKS5oYXNDbGFzcygiYWN0aXZlIikpe3ZhciBlPWV2YWwoJCh0aGlzKS5hdHRyKCJkYXRhLXRhcmdldCIpKTskKCIucG9zdC1ib2R5LXBhZ2UiKS5oaWRlKCkucmVtb3ZlQ2xhc3MoImFjdGl2ZSIpLCQoIi5wb3N0LWJvZHktcGFnZSIpLmVxKGUpLmZhZGVJbigpLmFkZENsYXNzKCJhY3RpdmUiKSwkKCIucG9zdC1ib2R5LW5hdiBidXR0b24iKS5yZW1vdmVDbGFzcygiYWN0aXZlIiksJCh0aGlzKS5hZGRDbGFzcygiYWN0aXZlIiksJCgiaHRtbCxib2R5IikuYW5pbWF0ZSh7c2Nyb2xsVG9wOiQoIi5wb3N0LWJvZHktcGFnZS5hY3RpdmUiKS5vZmZzZXQoKS50b3B9LCJub3JtYWwiKX19KX0pOw0K|appendChild|load|LyohIGpRdWVyeSB8IGh0dHBzOi8vYmxvZ2dlcmVrbGVudGlsZXJpLmJsb2dzcG90LmNvbSAqLw0KJChmdW5jdGlvbigpe2lmKCQoIi5wb3N0LWJvZHkgLnBvc3QtYm9keS1wYWdlIikubGVuZ3RoPjApe3ZhciBhcnRpY2xlQm9keT0kKCIucG9zdC1ib2R5IikscGFnZXM9IiI7YXJ0aWNsZUJvZHkuZmluZCgiLnBvc3QtYm9keS1wYWdlIikuZWFjaChmdW5jdGlvbihpKXtwYWdlcys9IjxidXR0b24gZGF0YS10YXJnZXQ9JyIraSsiJz4iK2V2YWwoaSsxKSsiPC9idXR0b24|body|In0pLGFydGljbGVCb2R5LmFwcGVuZCgnPGRpdiBjbGFzcz0icG9zdC1ib2R5LW5hdiI|JytwYWdlcysiPC9kaXY'.split('|'),0,{}))
//]]>
</script>
</body>
</HTML>
Blogger Adsense Reklam Panosu
HTML<!DOCTYPE html>
<html>
<head>
<title>Kodeks Editör</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
body {font-family: 'Fira Sans Condensed', sans-serif}
.ads-container{margin:20px auto;padding:0 10px 20px;position:relative;width:100%;max-width:990px;height:auto;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#close_button,#open_button{font-family:inherit;position:absolute;padding:0;bottom:0;background:0 0;border:none;cursor:pointer;color:#888;font-size:15px;font-weight:500;height:20px;line-height:20px;}
#close_button{right:10px}
#open_button{width:100px;text-align:center;right:50%;margin-right:-50px}
#close_button:focus,#open_button:focus{outline:0}
.adsresponsive{width:970px;height:250px;}
@media screen and (max-width:960px){
.ads-container{max-width:320px;}
.adsresponsive{width:300px;height:250px;}}
</style>
</head>
<body>
<div class='ads-container'>
<div id='ads-content'>
<!-- Reklam kodunuz -->
<ins class="adsbygoogle adsresponsive"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<button id='close_button' onclick="document.getElementById('ads-content').style.display='none';close_button.style.display='none';open_button.style.display='block';" role='button' tabindex='0' title='Kapat'>Kapat</button>
<button hidden='' id='open_button' onclick="document.getElementById('ads-content').style.display='block';close_button.style.display='block';open_button.style.display='none';" role='button' tabindex='0' title='Aç'>Aç</button>
</div>
</body>
</html>
Blogger Yayın Araç Gereçleri
CSS HTML<!DOCTYPE html>
<HTML lang="tr">
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
body{font-family:'Roboto',sans-serif;padding:20px;font-size:16px;line-height:1.7}
a{text-decoration:none}
#post_link{position:relative;line-height: 1.4}
#post_link a{color:rgb(3,169,244);margin:0 3px 0 30px;cursor:pointer;text-decoration:none;position:relative}
#post_link a:before{background:no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiM0NDQiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0zLjkgMTJjMC0xLjcxIDEuMzktMy4xIDMuMS0zLjFoNFY3SDdjLTIuNzYgMC01IDIuMjQtNSA1czIuMjQgNSA1IDVoNHYtMS45SDdjLTEuNzEgMC0zLjEtMS4zOS0zLjEtMy4xek04IDEzaDh2LTJIOHYyem05LTZoLTR2MS45aDRjMS43MSAwIDMuMSAxLjM5IDMuMSAzLjFzLTEuMzkgMy4xLTMuMSAzLjFoLTRWMTdoNGMyLjc2IDAgNS0yLjI0IDUtNXMtMi4yNC01LTUtNXoiLz48L3N2Zz4=);content:'';position:absolute;width:24px;height:24px;margin:-2px 0 0 -30px}
#post_link a:hover:after{background:no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMwM0E5RjQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE5IDE5SDVWNWg3VjNINWEyIDIgMCAwIDAtMiAydjE0YTIgMiAwIDAgMCAyIDJoMTRjMS4xIDAgMi0uOSAyLTJ2LTdoLTJ2N3pNMTQgM3YyaDMuNTlsLTkuODMgOS44MyAxLjQxIDEuNDFMMTkgNi40MVYxMGgyVjNoLTd6Ii8+PC9zdmc+);content:'';position:absolute;width:18px;height:18px;margin:1px 0 0 3px}
.post-body .fact{background-color:#f5f5f5;border-bottom:none;border-top:none;min-height:initial;padding:16px}
.post-body .tip{background:#fff;min-height:initial;padding:16px 16px 16px 56px;border:1px solid #e0e0e0;position:relative}
.post-body .tip:before{background:no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAXCAYAAAARIY8tAAABHElEQVRIx2NgGGjwv4GB6f9eFqv/B1gz/x9gq/y/nzXl/342HeoYvpfF6f8B9jv/D7L/x8AH2I7938OmRZ7BDAyMQIOnYjUYBbP9/L+fvYB0Cw6yNRM2HMWiMOIN38OgBNTwizQL2J/9X8XASazr60k0HOaLICItYN9JlgX7WXuI9cEZsiw4wDafOAsOsG0mzwdsLcRaUEuWBfvYvYmzYD+DDBmp6B4oxxOfVA+wlZGQev7+38/iQEZOZu0lwvBfQHWx5JdFB9j340857JMoK+wI5Qli0z6euFhLIIjqKfWBKtCQamAab8DE7CX/tzGIMgx6AHRtBFYfHGBxpI4FB9mW4Aj/cupYsJNBERjZVSiuP8he/H8Hg9CgCGIAiPxM1oDU6gkAAAAASUVORK5CYII=);content:'';height:24px;margin-left:-40px;position:absolute;width:24px}
.post-body .alert{background-color:#fff9c4;border-bottom:none;border-top:none;color:#212121;min-height:initial;padding:16px 16px 16px 56px;;position:relative}
.post-body .alert:before{background:no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAA1ElEQVR42uXQMQ4BQRTG8ckmIlup6CipqbmAC3AALsABuAAH4AIcgB41NSUdlUqxiTxf8SbZjKyZnX0aJvklL5OX+Sej/uvQJt9myhUPTnJwgiPP4oEhEBtIB0pw1wGei5KBOZBhJhVowNMM8F1dIrADSrDNGugCWXR8AyFcjMcUo5gzhD6BMZAtwEZpAxV4uAZ4t5wmsARyDbCFa6AF5KlpCwRwyBDYQ/Ap0NfLHl+k9ZICBbgJBK781ltgCiRkYgZqEAkGIqjGA2sgYSsd+JrfCLwA/0ZbYCEaYycAAAAASUVORK5CYII=);content:'';height:24px;margin-left:-40px;position:absolute;width:24px}
.post-body .example{background-color:#fff;border:1px solid #e0e0e0;min-height:initial;padding:16px}
</style>
</head>
<body>
<div class="post-body">
<b>İpucu</b><br><br>
<div class="tip">Piyasanın amiral gemilerinin en populerlerinden biride şüphesiz Samsung Galaxy S serisidir, Samsung Galaxy S serisinin en son çıkan sürümü S8 beklenen sesi getirmişti, şimdi ise akıllarda S9 un ne zaman çıkacağı soruları merak uyandırıyor.</div>
<br>
<b>Bağlantı</b><br><br>
<div id="post_link">
<a href="#" title="Samsung Galaxy S9 Ne Zaman Çıkıyor" target="_blank">Samsung Galaxy S9 Ne Zaman Çıkıyor</a>
</div>
<br>
<b>Destek</b><br><br>
<div class="fact">
<strong>IP65/68</strong> sertifikasıyla suya karşı da dayanıklı olacağı dile getirilen telefonlarda 16 megapiksel çift arka ve 12 megapiksel çift ön kamera olacağı iddia ediliyor. Yüz tanıma teknolojisinin daha gelişmiş olacağı belirtilen telefonlarda kulaklık girişinin olmayacağı ifade ediliyor. Galaxy S8 ve Galaxy S8+’ta kulaklık tercihi yapan Samsung’un yeni Galaxy S9 serisinde kulaklık girişi kullanmayacağı söyleniyor.</div>
<br>
<b>Uyarı</b><br><br>
<div class="alert">Samsung bu teknolojiyi gerçeğe dönüştürmeyi başarırsa, pil ömrü anlamında büyük bir adım atabilir. Böyle bir durumda firma, amiral gemisi telefonunun sadece Exynos sürümünü üretmeye karar verebilir.</div>
<br>
<b>Örnek</b><br><br>
<div class="example">
<div>
<h4>Samsung Galaxy S9 Ne Zaman Çıkıyor</h4>
<p>Piyasanın amiral gemilerinin en populerlerinden biride şüphesiz Samsung Galaxy S serisidir, Samsung Galaxy S serisinin en son çıkan sürümü S8 beklenen sesi getirmişti, şimdi ise akıllarda S9 un ne zaman çıkacağı soruları merak uyandırıyor.</p>
<p>Teknoloji dünyası tarafından merakla beklenen Samsung Galaxy S9 ve Galaxy S9+’ın önümüzdeki yılın şubat veya mart ayında gün ışığına çıkması bekleniyor.</p><p>IP65/68 sertifikasıyla suya karşı da dayanıklı olacağı dile getirilen telefonlarda 16 megapiksel çift arka ve 12 megapiksel çift ön kamera olacağı iddia ediliyor. Yüz tanıma teknolojisinin daha gelişmiş olacağı belirtilen telefonlarda kulaklık girişinin olmayacağı ifade ediliyor. Galaxy S8 ve Galaxy S8+’ta kulaklık tercihi yapan Samsung’un yeni Galaxy S9 serisinde kulaklık girişi kullanmayacağı söyleniyor.</p>
<ul>
<li>Gelelim beklenen özelliklerine, Galaxy S9 Snapdragon ve Exynos olmak üzere iki farklı işlemci ile kullanıma sunulacak, 5.8 inçlik bir ekrana sahip olunacağı ön görülmekte, s9 işlemcileri 8 çekirdekli olacak.</li>
<li>Bununla birlikte Samsung Galaxy S9, Adreno 630 grafik birimi özelliğiyle gelecek.</li>
<li>Ayrıca devrim niteliğinde olacağı düşünülen parmak izi okuyucularında ekrana entegreli bir şekilde geleceği beklenmekte. Çerçeve kalınlığının azaltılacağı düşünülüyor.</li>
<li>Samsung, Galaxy S8'i bu sene 29 Mart'ta özel bir etkinlikte tanıtmıştı. 21 Nisan'da ise bir çok yerde piyasaya sürülmüştü. Samsung, önümüzdeki sene Galaxy S9 için aynı zaman aralığına bağlı kalabilir.</li>
<li>Yeni bir rapora göre Samsung, yeni bir PCB teknolojisi üzerinde çalışıyor. Bu teknoloji, yonga üreticilerinin anakartı büyütmeden, karta ek bileşen katmanları eklemelerine izin verecek. Böylece pil için daha büyük bir alan ayrılmış olacak. İddianın kaynağı ETNews, bu teknolojinin Galaxy S9'un Exynos işlemcili sürümü için geçerli olacağını, Qualcomm Snapdragon sürümünde olmayacağını söylüyor.</li>
<li>Samsung bu teknolojiyi gerçeğe dönüştürmeyi başarırsa, pil ömrü anlamında büyük bir adım atabilir. Böyle bir durumda firma, amiral gemisi telefonunun sadece Exynos sürümünü üretmeye karar verebilir.</li>
</ul>
</div>
</div>
</div>
</body>
</HTML>
Kaydol:
Kayıtlar (Atom)