<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<title>Untitled Document</title>
<style>
body{background:#ccc;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;color:#555;}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.content-wrapper{width:100%;max-width:960px;margin:0 auto;padding:0;background:#f2f2f2;}
.head-wrap {
position: -webkit-sticky;
position: sticky;
top: -30px;
margin: 0;
z-index: 9999
}
.announcement {
width: 100%;
font-weight: 300;
line-height: 30px;
background: #ffeb71;
text-align: center;
color: #333;
}
.announcement a {
font-size: 16px;
font-weight: 700;
color: #333;
text-decoration: none;
}
.header{background:#033;padding:0;height:55px;line-height:55px;width:100%;}
header .content-wrapper{background:0 0;padding:0 20px;}
header h1{float:left;margin:0 40px 0 0;width:210px;color:#fff;height:55px;line-height:55px;}
.content{width:calc(100% - 300px);margin:0;padding:20px 20px 0;background:#fff;float:left}
.content h2{margin:0 0 20px;padding:0;font-size:28px;text-align:center;text-transform:capitalize;}
.content .in{position:relative;padding:30px 20px 0 0;float:left}
.content p{margin:0 0 20px;padding:0;font-size:16px;}
footer .content-wrapper{background:#666;color:#CCC;text-align:center;padding:10px 20px;font-size:90%;}
.clear{display:block;clear:both;}
.sidebar{width:300px;padding:20px;float:left}
.sidebar h2{font-size:20px;padding:0;margin:0 0 20px}
.sidebar ul{margin:0;padding:0 0 0 20px}
.sidebar li{margin:0 0 10px;padding:0}
.sidebar li a{display:block;text-decoration:none}
input.check-sidebar{position:fixed;top:-100px;opacity:0}
.toggle-label-sidebar{position: -webkit-sticky;position:sticky;top:70px;z-index:16;margin-right:-30px;margin-top:-40px;font-size:12px;color:#fff;cursor:pointer;display:flex;align-items:center;float:right}
.toggle-label-sidebar:focus,.toggle-label-sidebar:active{outline:0}
.toggle-label-icon,.toggle-label-title{display:flex;align-items:center;box-shadow:0 10px 20px -5px rgba(0,0,0,.25);background:#2B0C93;border-radius:4px;height:28px;padding:5px}
.toggle-label-title{border-radius:4px 0 0 4px;margin-right:-5px;padding-right:10px}
.toggle-label-sidebar svg{vertical-align:middle}
input.check-sidebar:checked~.sidebar{display:none}
input.check-sidebar:checked~.content{width:100%}
input.check-sidebar:checked~.content .in .toggle-label-sidebar svg{transform:rotate(180deg)}
.menu-kompiajaib{float:left;width:calc(100% - 250px);display: flex;}
.menu-kompiajaib .menu {
position: relative;
display: flex;
align-items: center;
margin: 0 18px;
}
.menu-kompiajaib .menu .btn-menu {
display: flex;
align-items: center;
padding: 0;
border: 0;
background: 0 0;
color: #fff;
font-size: 16px;
text-decoration: none;
font-weight: 700;
line-height: 55px;
cursor: pointer;
}
.menu-kompiajaib .menu .btn-menu:focus,
.menu-kompiajaib .menu .btn-menu:active,
.open-menu:focus,
.open-menu:active {
outline: none;
}
.menu-kompiajaib .menu .btn-menu .arrow-menu {
display: flex;
margin-left: 5px;
box-sizing: initial;
justify-content: center;
}
.menu-kompiajaib .menu .btn-menu .arrow-menu svg {
width: 15px;
height: 15px;
vertical-align: middle;
}
.menu-kompiajaib .menu .btn-menu .arrow-menu svg path {
fill: #fff;
}
.menu-kompiajaib .menu .sub-menu {
box-shadow: 0 10px 25px 0 rgba(0,0,0,.2);
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 8px 0;
pointer-events: none;
opacity: 0;
list-style: none;
background: #fff;
border-radius: 0 0 4px 4px;
transition: opacity .2s cubic-bezier(.25,.1,.25,1);
}
.menu-kompiajaib .menu .sub-menu li {
position: relative;
width: 180px;
}
.menu-kompiajaib .menu .sub-menu li a {
padding: 8px 15px;
font-weight: 700;
font-size: 16px;
color: #555;
display: block;
text-decoration: none;
line-height: 1;
}
.menu-kompiajaib .menu .btn-menu:hover~.sub-menu, .menu-kompiajaib .menu .btn-menu:focus~.sub-menu, .menu-kompiajaib .menu .sub-menu:hover, .menu-kompiajaib .menu .sub-menu:focus-within {
opacity: 1;
pointer-events: all;
transition: opacity .2s cubic-bezier(.25,.1,.25,1);
visibility: visible;
}
.menu-kompiajaib .menu .btn-menu:hover, .menu-kompiajaib .menu .sub-menu li a:hover {
color: #39F
}
input.check-menu {
position: fixed;
top: -100px;
opacity: 0
}
.open-menu,.mobile {
display: none;
visibility: hidden;
}
@media screen and (max-width:960px){
.menu-kompiajaib {
display: none;
}
.open-menu {
display: block;
visibility: visible;
float: right;
line-height: 55px;
margin: 0;
padding: 0 10px;
cursor: pointer;
}
.open-menu.mobile {
position: absolute;
top: 0;
right: 10px;
z-index: 2
}
.open-menu.mobile svg path {
fill: #333;
}
.open-menu svg {
vertical-align: middle;
}
.open-menu svg path {
fill: #fff;
}
input.check-menu:checked~.menu-kompiajaib {
display: block;
width: 100%;
background: #fff;
position: fixed;
top: 0;
left: 0;
height: 100vh;
overflow-y: visible;
padding-top: 10px;
scrollbar-width: none;
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
z-index: 999;
}
input.check-menu:checked~.menu-kompiajaib::-webkit-scrollbar {
display: none
}
input.check-menu:checked~.menu-kompiajaib .menu {
position: relative;
align-items: unset;
margin: 0 18px;
display: block;
text-align: left;
z-index: 1
}
input.check-menu:checked~.menu-kompiajaib .btn-menu {
align-items: unset;
display: block;
color: #333;
line-height: 35px;
width: 100%;
text-align: left;
}
input.check-menu:checked~.menu-kompiajaib .menu .btn-menu .arrow-menu {
display: inline;
}
input.check-menu:checked~.menu-kompiajaib .menu .btn-menu .arrow-menu svg path {
fill: #333;
}
.menu-kompiajaib .menu .btn-menu:hover~.sub-menu, .menu-kompiajaib .menu .btn-menu:focus~.sub-menu, .menu-kompiajaib .menu .sub-menu:hover, .menu-kompiajaib .menu .sub-menu:focus-within {
position: relative;
padding-top: 0;
box-shadow: none;
}
@-webkit-keyframes slideInLeft {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
visibility: visible;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideInLeft {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
visibility: visible;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.content, .sidebar {
width: 100%;
}
.toggle-label-sidebar {
display: none;
}
.content .in {
padding: 0;
}
}
</style>
</head>
<body>
<div class='head-wrap'>
<div class='announcement'>
➜ <a href='https://www.arlinadesign.com/2019/05/javascript-ripple-effect.html' title='Javascript ile Ripple (Dalgalanma) Efekti Oluşturma'>Javascript ile Ripple (Dalgalanma) Efekti Oluşturma</a>
</div>
<header class="header" role="banner">
<div class='content-wrapper'>
<h1>Başlık</h1>
<input class='check-menu' hidden='' id='check-menu' name='checkmenu' type='checkbox'/>
<label class='open-menu' for='check-menu' role='open-menu' tabindex='0'><svg width="24" height="24" viewBox="0 0 24 24"><path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /></svg></label>
<nav class="menu-kompiajaib">
<label class='open-menu mobile' for='check-menu' role='open-menu' tabindex='0'><svg width="24" height="24" viewBox="0 0 24 24"><path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /></svg></label>
<div class="menu">
<button class="btn-menu">Menü 1<div class="arrow-menu"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg></div></button>
<ul class="sub-menu">
<li><a href="#">Alt Menü 1</a></li>
<li><a href="#">Alt Menü 2</a></li>
<li><a href="#">Alt Menü 3</a></li>
<li><a href="#">Alt Menü 4</a></li>
</ul>
</div>
<div class="menu">
<button class="btn-menu">Menü 2<div class="arrow-menu"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg></div></button>
<ul class="sub-menu">
<li><a href="#">Alt Menü 1</a></li>
<li><a href="#">Alt Menü 2</a></li>
<li><a href="#">Alt Menü 3</a></li>
<li><a href="#">Alt Menü 4</a></li>
</ul>
</div>
<div class="menu">
<button class="btn-menu">Menü 3<div class="arrow-menu"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg></div></button>
<ul class="sub-menu">
<li><a href="#">Alt Menü 1</a></li>
<li><a href="#">Alt Menü 2</a></li>
<li><a href="#">Alt Menü 3</a></li>
<li><a href="#">Alt Menü 4</a></li>
</ul>
</div>
<div class="menu">
<button class="btn-menu">Menü 4<div class="arrow-menu"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg></div></button>
<ul class="sub-menu">
<li><a href="#">Alt Menü 1</a></li>
<li><a href="#">Alt Menü 2</a></li>
<li><a href="#">Alt Menü 3</a></li>
<li><a href="#">Alt Menü 4</a></li>
</ul>
</div>
<div class="menu"><a class="btn-menu" href="#">Menü 5</a></div>
<div class="menu"><a class="btn-menu" href="#">Menü 6</a></div>
</nav>
<div class="clear"></div>
</div>
</header>
</div>
<div class="clear"></div>
<div class='content-wrapper'>
<input class='check-sidebar' hidden='' id='check-sidebar' name='checksidebar' type='checkbox'/>
<div class='content'>
<h2>E-ticaret Nedir?</h2>
<div class="in">
<label class='toggle-label-sidebar' for='check-sidebar' role='toggle-sidebar' tabindex='0'>
<span class='toggle-label-title' id='toggle-label-title'>Kenar Çubuğu Gizle</span>
<span class='toggle-label-icon'><svg height='18' viewBox='0 0 24 24' width='18'><path d='M12.08,4.08L20,12L12.08,19.92L10.67,18.5L16.17,13H2V11H16.17L10.67,5.5L12.08,4.08M20,12V22H22V2H20V12Z' fill='#fff'/></svg></span></label>
<div class="post">
<p>E-ticaret kelime anlamı olarak, sanal ticaret yani sanal ortamda insanların alışveriş yapma eylemleridir. E-ticaret'in çok uzun tarihi bir geçmişi olmamasına rağmen kısa zamanda çok büyük bir gelişim süreci geçirmiş, ve kullanıcıların profesyonelce kullanımına açılmıştır. E-ticaret günümüzde gelebileceği son noktaya gelmiş bulunmakla beraber, gerek kullanıcılara gerekse firma veya site sahiplerine bir çok özellik ve fırsat tanımaktadır. E-ticaretin sanal ortamda yapılması için çeşitli sistemler geliştirilmiştir. Bu sistemlere genel anlamda e-ticaret sistemleri denilmektedir. E-ticaret sistemlerinin işlevleri hemen hemen günlük hayatta yapabileceğiniz tüm alışveriş işlemlerini kapsayacak düzeydedir. Peki bu e-ticaret sistemlerinde hangi özellikler mevcut? Biraz bu konuya değinelim.</p>
<h2>E-Ticaret Sistemlerinin Genel Özellikleri</h2>
<p>E-ticaret sistemlerinin sanal ortam üzerinden alışverişe aracı olan, ödeme konusunda alıcıya çeşitli imkanlar sunan yazılımlar olduğunu bilmeyenimiz yoktur herhalde. Zira hemen hemen hepimiz mutlaka sanal ortam üzerinden küçük veya büyük farketmez bir ürün siparişi vermişizdir. Buna dayanarak çok uzatmadan e-ticaret sistemlerinin genel özellikleri, kullanıcıya, alıcıya ve satıcıya sunduğu imkanlardan ve genel özelliklerinden bahsetmek istiyorum.</p>
<ul>
<li>E-ticaret sistemleri kolay alışveriş yapabilme imkanı</li>
<li>Ürün seçimi ve araması konusunda kolay kullanıma göre dizayn edilmiş olması özelliği</li>
<li>Aradığınız ürün dışında benzer ürünleri bulmanızda kolaylık sağlaması</li>
<li>Alışverişi kredi kartı, havale ile yapabilme imkanı sunması</li>
<li>Kredi kartı çeşitliliği ile ödeme kolaylığı sağlaması</li>
<li>Üyelik işlemleri ile ürün inceleme, sepete atma seçenekleri</li>
<li>Ürünlerin detaylı bilgilerini alabilme ve çeşitli resimlerini inceleme özelliği</li>
<li>Facebook, twitter ve diğer sosyal imleme sitelerine entegre edilebilmesi</li>
<li>Ziyaretçi veya müşterilerin demografik incelenebilmesi imkanı</li>
</ul>
<p>E-ticaret sistemleri bugün birçok büyük firma tarafından hemen hemen her alanda kullanılmaktadır. En bilinen internet devleri "gittigidiyor", "hepsiburada", "markafoni", "kitapyurdu", "electroworld" ve sayamadığım daha bir çok site e-ticaret sistemleri kullanmaktadırlar. Geriye dönüp bakıldığında ilk yapılma amaçları sadece ürün tanıtım veya sanal ortamda ürün resimlerinin bir galeri olarak sergilenmesi olan e-ticaret sistemleri büyük bir evrime uğramış ve son haliyle yukarıda belirtilen özellikler dahil, daha birçok özellik ile tanışmıştır. Şaşırtıcı derecede bir değişim geçiren bu e-ticaret yazılımlarını zaman sürecinde ne gibi değişiklikler bekliyor hep birlikte bekleyip göreceğiz.</p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="sidebar">
<h2>Kenar Çubuğu</h2>
<ul>
<li><a href='#' title='Hakkında'>Hakkında</a></li>
<li><a href='#' title='İletişim'>İletişim</a></li>
<li><a href='#' title='Gizlilik'>Gizlilik</a></li>
<li><a href='#' title='Arşiv'>Arşiv</a></li>
<li><a href='#' title='Reklam'>Reklam</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<footer>
<div class='content-wrapper'>
©2019 Arlina Design
</div>
</footer>
<script>
//<![CDATA[
window.addEventListener("scroll", myFunction);
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
if (winScroll != 0) {
document.getElementById("toggle-label-title").style.display = "none"
} else {
document.getElementById("toggle-label-title").style.display = "flex"
}
}
//]]>
</script>
</body>
</html>
Javascript Ripple Dalga Efekti
javaScript<!DOCTYPE html>
<html>
<head>
<title>Ripple Dalga Efekti</title>
<style>
body {
font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;
text-align: center;
}
a{
color:#fff;
text-decoration:none
}
h1 {
font-size:1.5em
}
.button {
font-weight: 500;
color: #fff;
width: 80px;
padding: 0.8em 1em;
margin: 1em 0;
border: none;
outline: none;
cursor: pointer;
text-align: center;
}
.button.red{
background:#F44336;
}
.button.green{
background:#4CAF50
}
.button.black{
background:#444
}
.container{
margin:auto;
text-align:center
}
[ripple]{
position:relative;
overflow:hidden
}
[ripple] .ripple--container{
position:absolute;
top:0;
right:0;
bottom:0;
left:0
}
[ripple] .ripple--container span{
background:#fff;
transform:scale(0);
border-radius:100%;
position:absolute;
opacity:0.75;
animation:ripple 1000ms
}
@-moz-keyframes ripple{
to{
opacity:0;
transform:scale(2)
}
}
@-webkit-keyframes ripple{
to{
opacity:0;
transform:scale(2)
}
}
@-o-keyframes ripple{
to{
opacity:0;
transform:scale(2)
}
}
@keyframes ripple{
to{
opacity:0;
transform:scale(2)
}
}
</style>
</head>
<body>
<h1>Ripple Dalga Efekti</h1>
<div class="container">
<button class="button red" href="#" ripple='ripple'>Buton 1</button>
<button class="button green" href="#" ripple='ripple'>Buton 2</button>
<button class="button black" href="#" ripple='ripple'>Buton 3</button>
</div>
<script>
//<![CDATA[
(function() {
var cleanUp, debounce, i, len, ripple, rippleContainer, ripples, showRipple;
debounce = function(func, delay) {
var inDebounce;
inDebounce = undefined;
return function() {
var args, context;
context = this;
args = arguments;
clearTimeout(inDebounce);
return inDebounce = setTimeout(function() {
return func.apply(context, args);
}, delay);
};
};
showRipple = function(e) {
var pos, ripple, rippler, size, style, x, y;
ripple = this;
rippler = document.createElement('span');
size = ripple.offsetWidth;
pos = ripple.getBoundingClientRect();
x = e.pageX - pos.left - (size / 2);
y = e.pageY - pos.top - (size / 2);
style = 'top:' + y + 'px; left: ' + x + 'px; height: ' + size + 'px; width: ' + size + 'px;';
ripple.rippleContainer.appendChild(rippler);
return rippler.setAttribute('style', style);
};
cleanUp = function() {
while (this.rippleContainer.firstChild) {
this.rippleContainer.removeChild(this.rippleContainer.firstChild);
}
};
ripples = document.querySelectorAll('[ripple]');
for (i = 0, len = ripples.length; i < len; i++) {
ripple = ripples[i];
rippleContainer = document.createElement('div');
rippleContainer.className = 'ripple--container';
ripple.addEventListener('mousedown', showRipple);
ripple.addEventListener('mouseup', debounce(cleanUp, 2000));
ripple.rippleContainer = rippleContainer;
ripple.appendChild(rippleContainer);
}
}());
//]]>
</script>
</body>
</html>
Javascript ile Tam Oluşturma Eklentisi
javaScript<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<title>Başlıksız Belge</title>
<style>
body{background:#eaeaea;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;color:#555;padding-top:55px}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.content-wrapper{width:100%;max-width:900px;margin:0 auto;padding:0;background:#fff}.header{background:#033;padding:0;height:55px;line-height:55px;overflow:hidden;position:fixed;top:0;left:0;width:100%;z-index:999;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transition-property:-webkit-transform;transition-property:transform}.header--hidden{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}header .content-wrapper{background:0 0;padding:0 20px}header h1{float:left;margin:0 40px 0 0;width:210px;color:#fff;height:55px;line-height:55px}.topnav{float:left;width:calc(100% - 280px)}.topnav ul{background:#033;margin:0;padding:0;font-size:0}.topnav li{display:inline-block;margin:0;padding:0;float:left}.topnav li a{font-size:16px;margin:0;padding:0 20px;height:55px;line-height:55px;display:block;text-align:center;text-decoration:none;color:#FFF}.topnav li a:hover{background:#666}.content{margin:0;padding:20px 20px 0;overflow:hidden}.content h2{margin:0 0 20px;padding:0;font-size:28px;text-align:center}.content p{margin:0 0 20px;padding:0;font-size:16px}footer .content-wrapper{background:#666;color:#CCC;text-align:center;padding:10px 20px;font-size:90%}.clear{display:block;clear:both}#openfull,#exitfull{background:0 0;border:none;cursor:pointer;padding:0;margin:0;text-align:center;width:30px;height:55px;line-height:55px;float:left}#openfull:active,#exitfull:active,#openfull:focus,#exitfull:focus{outline:0}#openfull svg,#exitfull svg{vertical-align:middle}#exitfull{display:none}
</style>
</head>
<body>
<header class="header" role="banner">
<div class='content-wrapper'>
<h1>LOGO</h1>
<div class='topnav'>
<ul>
<li><a href='https://www.arlinadesign.com/2019/05/javascript-fullscreen-button.html' title='Hakkımızda'>Hakkımızda</a></li>
<li><a href='https://www.arlinadesign.com/2019/05/javascript-fullscreen-button.html' title='İletişim'>İletişim</a></li>
<li><a href='hhttps://www.arlinadesign.com/2019/05/javascript-fullscreen-button.html' title='Gizlilik'>Gizlilik</a></li>
<li><a href='https://www.arlinadesign.com/2019/05/javascript-fullscreen-button.html' title='Arşiv'>Arşiv</a></li>
<li><a href='https://www.arlinadesign.com/2019/05/javascript-fullscreen-button.html' title='Reklam'>Reklam</a></li>
</ul>
</div>
<button aria-label="Open Fullscreen" id="openfull" onclick="openFullscreen();"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z" /></svg></button>
<button aria-label="Exit Fullscreen" id="exitfull" onclick="closeFullscreen();"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z" /></svg></button>
<div class="clear"></div>
</div>
</header>
<div class="clear"></div>
<div class='content-wrapper'>
<div class='content'>
<h2>Arı ile Papatya Hikayesi</h2>
<p>Sıcak bir yaz günüydü. Her yer çiçeklerle dolu ve hava mis gibi kokuyordu. Çiçek tarlasının üzerinde arı vız vız diyerek neşeli neşeli uçuyordu. Havada o kadar güzel süzülüyordu ki papatya onu hayranlıkla izledi. Uçmaktan yorulan arı papatyanın yanındaki ağaç dalına konar. Papatya, arı ile konuşmak ister ve seslenir:</p>
<p>– Arı kardeş ne kadar güzel uçuyorsun. Oysa benim kanatlarım yok ve ben senin gibi dünyadaki güzellikleri göremiyorum. Sadece etrafımdaki çiçekleri görüyorum. Bir gün beni de alıp gezdirebilir misin? der.</p>
<p>Arı papatyaya kibirli gözlerle bakar ve:</p>
<p>– Ben seni nasıl taşıyım. Seni asla alıp, taşıyamam. Çabucak yorulurum, Hem ne yapacaksın dünyadaki güzellikleri, diyerek papatyayı götürmek istemez ve uçarak gözden kaybolur. Bu duruma oldukça üzülen papatya günlerce ağlar ve kendisine kibirli davranan arı onu çok üzmüştür. Aslında papatyayı alıp, gezdirebilirdi. Fakat o kibirli davranarak onu küçümsemeyi tercih etti.</p>
<p>Aradan aylar geçti ve havalar yavaş yavaş soğudu. Ağaçlar yaprak döküyor ve çiçekler soluyordu. Fakat papatya halen yapraklarını dökmemişti. O gün havada arıyı uçarken görür ve bal yapmak için çiçek aradığını fark eder. Oysa oradaki solmadan kalan tek çiçek papatyaydı. Papatyanın üzerine konmak ister ve papatya arının konmasına izin vermez. Bu duruma oldukça şaşıran arı papatyaya seslenir:</p>
<p>– Neden konmama izin vermiyorsun. Bal yapmam gerek.” der. Papatya aylar önce kendisine kibirli davranan arının yaptıklarını ona hatırlatır. Durumu hatırlayan arı kendine çok kızar ve papatyadan özür diler. Kendisinin kibri yüzünden geri çevirdiği papatyaya, şimdi kendi muhtaç olmuştu. Arının yaptıklarını affeden papatya, arının bal yapmasına izin verir ve bu duruma sevinen arı papatyayı alarak dünyayı gezdirmek için havalanmaya başlarlar.</p>
</div>
</div>
<footer>
<div class='content-wrapper'>©2019 Arlina Design</div>
</footer>
<script>
//<![CDATA[
;(function(document,window,index)
{'use strict';var elSelector='.header',elClassHidden='header--hidden',throttleTimeout=500,element=document.querySelector(elSelector);if(!element)return true;var dHeight=0,wHeight=0,wScrollCurrent=0,wScrollBefore=0,wScrollDiff=0,hasElementClass=function(element,className){return element.classList?element.classList.contains(className):new RegExp('(^| )'+className+'( |$)','gi').test(element.className);},addElementClass=function(element,className){element.classList?element.classList.add(className):element.className+=' '+className;},removeElementClass=function(element,className){element.classList?element.classList.remove(className):element.className=element.className.replace(new RegExp('(^|\\b)'+className.split(' ').join('|')+'(\\b|$)','gi'),' ');},throttle=function(delay,fn)
{var last,deferTimer;return function()
{var context=this,args=arguments,now=+new Date;if(last&&now<last+delay)
{clearTimeout(deferTimer);deferTimer=setTimeout(function(){last=now;fn.apply(context,args);},delay);}
else
{last=now;fn.apply(context,args);}};};window.addEventListener('scroll',throttle(throttleTimeout,function()
{dHeight=document.body.offsetHeight;wHeight=window.innerHeight;wScrollCurrent=window.pageYOffset;wScrollDiff=wScrollBefore-wScrollCurrent;if(wScrollCurrent<=0)
removeElementClass(element,elClassHidden);else if(wScrollDiff>0&&hasElementClass(element,elClassHidden))
removeElementClass(element,elClassHidden);else if(wScrollDiff<0)
{if(wScrollCurrent+wHeight>=dHeight&&hasElementClass(element,elClassHidden))
removeElementClass(element,elClassHidden);else
addElementClass(element,elClassHidden);}
wScrollBefore=wScrollCurrent;}));}(document,window,0));var elem=document.documentElement;function openFullscreen(){if(elem.requestFullscreen){elem.requestFullscreen();}else if(elem.mozRequestFullScreen){elem.mozRequestFullScreen();}else if(elem.webkitRequestFullscreen){elem.webkitRequestFullscreen();}else if(elem.msRequestFullscreen){elem.msRequestFullscreen();}
document.getElementById("openfull").style.display="none";document.getElementById("exitfull").style.display="block";}
function closeFullscreen(){if(document.exitFullscreen){document.exitFullscreen();}else if(document.mozCancelFullScreen){document.mozCancelFullScreen();}else if(document.webkitExitFullscreen){document.webkitExitFullscreen();}else if(document.msExitFullscreen){document.msExitFullscreen();}
document.getElementById("openfull").style.display="block";document.getElementById("exitfull").style.display="none";}
//]]>
</script>
</body>
</html>
Javascript ile Kaydırma Göstergesi Oluşturma
javaScript<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<title>Başlıksız Belge</title>
<style>
body{background:#EAEAEA;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;color:#555;padding-top:55px;}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.content-wrapper{width:100%;max-width:900px;margin:0 auto;padding:0;background:#fff;}
.header{background:#033;padding:0;height:55px;line-height:55px;overflow:hidden;position:fixed;top:0;left:0;width:100%;z-index:999;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transition-property:-webkit-transform;transition-property:transform}
.header--hidden{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}
header .content-wrapper{background:0 0;padding:0 20px;}
header h1{float:left;margin:0 40px 0 0;width:210px;color:#fff;height:55px;line-height:55px;}
.topnav{float:left;width:calc(100% - 250px)}
.topnav ul{background:#033;margin:0;padding:0;font-size:0}
.topnav li{display:inline-block;margin:0;padding:0;}
.topnav li a{font-size:16px;margin:0;padding:0 20px;height:55px;line-height:55px;display:block;text-align:center;text-decoration:none;color:#FFF}
.topnav li a:hover{background:#666}
.content{margin:0;padding:20px 20px 0;overflow:hidden;}
.content h2{margin:0 0 20px;padding:0;font-size:28px;text-align:center;text-transform:capitalize;}
.content p{margin:0 0 20px;padding:0;font-size:16px;}
footer .content-wrapper{background:#666;color:#CCC;text-align:center;padding:10px 20px;font-size:90%;}
.clear{display:block;clear:both;}
.progress-container{width:100%;height:3px;background:#273f4a;position:fixed;top:0;left:0;z-index:9999}
.progress-bar{height:3px;background:#FF5722;width:0%}
</style>
</head>
<body>
<div class="progress-container">
<div class="progress-bar" id="progressbar"></div>
</div>
<header class="header" role="banner">
<div class='content-wrapper'>
<h1>LOGO</h1>
<div class='topnav'>
<ul>
<li><a href='https://www.arlinadesign.com/2019/05/blogger-scrollbar-plugins.html' title='Hakkımızda'>Hakkımızda</a></li>
<li><a href='https://www.arlinadesign.com/2019/05/blogger-scrollbar-plugins.html' title='İletişim'>İletişim</a></li>
<li><a href='https://www.arlinadesign.com/2019/05/blogger-scrollbar-plugins.html' title='Gizlilik'>Gizlilik</a></li>
<li><a href='https://www.arlinadesign.com/2019/05/blogger-scrollbar-plugins.html' title='Arşiv'>Arşiv</a></li>
<li><a href='https://www.arlinadesign.com/2019/05/blogger-scrollbar-plugins.html' title='Reklam'>Reklam</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</header>
<div class="clear"></div>
<div class='content-wrapper'>
<div class='content'>
<h2>Kayıp Karıncalar Vadisi</h2>
<p>Kayıp Karıncalar Vadisi, henüz yumurtadan yeni çıkan yalnız ve yaralı bir uğur böceğinin, tanışıp dost olduğu karıncalarla çıktığı yolculuğu anlatıyor.</p>
<p>Organizasyon, disiplin, dostluk, dayanışma, cesaret ve sorumluluk almayı farklı bir bakış açısıyla gördüğümüz bir şaheser.</p>
<p>Kayıp Karıncalar Vadisi, henüz yumurtadan yeni çıkan yalnız ve yaralı bir uğur böceğinin, tanışıp dost olduğu karıncalarla çıktığı yolculuğu anlatıyor.</p>
<p>Kayıp Karıncalar Vadisi, henüz yumurtadan yeni çıkan yalnız ve yaralı bir uğur böceğinin, tanışıp dost olduğu karıncalarla çıktığı yolculuğu ve bu yolculuğun uğur böceğini adım adım nasıl güçlendirdiğini konu alıyor.</p>
<p>Bir kaza sonucu kanatlarından birini ve ailesini kaybeden yavru uğur böceği, gece yağmurdan korunacak bir yer ararken içi kesme şeker dolu kutuya sığınıyor. Gün aydınlandığında kutu bir grup karınca tarafından fark ediliyor. Uğur böceğinin varlığından habersiz olan karıncalar, kutuyu yuvalarına taşımaya karar veriyorlar. Böylece uğur böceği için zorunlu bir yolculuk başlamış oluyor.</p>
<p>Grubun yolda uğradığı saldırıda kahramanlık gösteren yavru uğur böceği, karıncaların güvenini kazanıyor ve aralarında bir dostluk kuruluyor. O andan itibaren şeker kutusunu karınca yuvasına götürme görevinde birlikte çalışıyorlar. Fakat o an, iki taraf da, şekerleri ele geçirmek için saldıracak olan ateş karıncalarından ve dolayısıyla bu iş birliğinden neler kazanacaklarından habersizdirler.</p>
<p>Sonunda karıncalar, şekerlerini korumayı başarırken, uğur böceği de yaşadığı kayıpların bir bir üstesinden geliyor.</p>
<p>Organizasyonun, disiplinin, dostluğun, dayanışmanın, cesaretin, sorumluluk almanın ve kayıplar acı verse de sahip olduklarımıza ve geleceğe odaklanmanın önemini anlatan bu güzel animasyon filmi, ailenizle birlikte keyifle izleyebilirsiniz.</p>
<p>Hatta belki de hayvanların aralarında kullandığı özel dili çözmeye çalışıp, birbirlerine ne söylediklerini tahmin ederek, filmi daha da eğlenceli hale getirebilirsiniz.</p>
<p><a href="https://www.facebook.com/TRTCocukCizgiFilm/videos/655020418259539/" rel="nofollow noopener" target="_blank">Filmin fragmanını izleyin.</a></p>
<p>İyi seyirler.</p>
</div>
</div>
<footer>
<div class='content-wrapper'>©2019 Arlina Design</div>
</footer>
<script>
//<![CDATA[
;(function(document,window,index)
{'use strict';var elSelector='.header',elClassHidden='header--hidden',throttleTimeout=500,element=document.querySelector(elSelector);if(!element)return true;var dHeight=0,wHeight=0,wScrollCurrent=0,wScrollBefore=0,wScrollDiff=0,hasElementClass=function(element,className){return element.classList?element.classList.contains(className):new RegExp('(^| )'+className+'( |$)','gi').test(element.className);},addElementClass=function(element,className){element.classList?element.classList.add(className):element.className+=' '+className;},removeElementClass=function(element,className){element.classList?element.classList.remove(className):element.className=element.className.replace(new RegExp('(^|\\b)'+className.split(' ').join('|')+'(\\b|$)','gi'),' ');},throttle=function(delay,fn)
{var last,deferTimer;return function()
{var context=this,args=arguments,now=+new Date;if(last&&now<last+delay)
{clearTimeout(deferTimer);deferTimer=setTimeout(function(){last=now;fn.apply(context,args);},delay);}
else
{last=now;fn.apply(context,args);}};};window.addEventListener('scroll',throttle(throttleTimeout,function()
{dHeight=document.body.offsetHeight;wHeight=window.innerHeight;wScrollCurrent=window.pageYOffset;wScrollDiff=wScrollBefore-wScrollCurrent;if(wScrollCurrent<=0)
removeElementClass(element,elClassHidden);else if(wScrollDiff>0&&hasElementClass(element,elClassHidden))
removeElementClass(element,elClassHidden);else if(wScrollDiff<0)
{if(wScrollCurrent+wHeight>=dHeight&&hasElementClass(element,elClassHidden))
removeElementClass(element,elClassHidden);else
addElementClass(element,elClassHidden);}
wScrollBefore=wScrollCurrent;}));}(document,window,0));window.addEventListener("scroll",myFunction);function myFunction(){var winScroll=document.body.scrollTop||document.documentElement.scrollTop;var height=document.documentElement.scrollHeight-document.documentElement.clientHeight;var scrolled=(winScroll / height)*100;document.getElementById("progressbar").style.width=scrolled+"%";}
//]]>
</script>
</body>
</html>
CSS ve Javascript Kodu ile Zamanlı Popup Afiş Reklam Alanı Oluşturma
CSS3 HTML5 javaScript<!DOCTYPE html>
<html>
<head>
<title>Zamanlı Popup Afiş Reklam Alanı</title>
<style>
/*<![CDATA[*/
.is-hide{
display:none;
visibility:hidden;
}
.popup-box{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
z-index:3
}
.popup-box-content{
width:800px;
height:450px;
display:block;
position:absolute;
top:50%;
left:50%;
border-radius:3px;
margin:-225px 0 0 -420px;
box-shadow:0 3px 20px 0 rgba(0,0,0,.5);
z-index:2
}
.popup-content{
background:#fff;
display:block;
width:100%;
height:100%;
border-radius:3px;
overflow:hidden
}
.popup-overlay{
background:#ff5722;
position:absolute;
top:0;
left:0;
bottom:0;
width:100%;
z-index:1
}
.popup-box-close-button {
background: #fff;
position: absolute;
width:2em;
height:2em;
line-height:2em;
text-align: center;
top:-1em;
right: -1em;
box-shadow: 0 -1px 1px 0 rgba(0,0,0,.2);
border: none;
border-radius: 50%;
cursor:pointer;
padding:0;
outline:none
}
.popup-box-close-button svg{
vertical-align:middle
}
.popup-content img{
display:block;
width:100%;
height:100%;
border-radius:3px;
}
.popup-flow-box{
position:relative;
overflow:hidden
}
@media screen and (max-width:800px){
.popup-box-content{
width:90%;
height:auto;
top:20%;
border-radius:3px;
margin:0 0 0 -45%
}
.popup-content img{
border-radius:3px;
height:auto
}
}
/*]]>*/
</style>
</head>
<body>
<div class='popup-box is-hide' id='popup-box'>
<div aria-label='Close' class="popup-overlay" onclick='document.getElementById("popup-box").style.display="none";removeClassonBody();' role="button" tabindex="0"></div>
<div class='popup-box-content'>
<a href='https://www.arlinadesign.com/2019/05/blogger-popup-banner-timeout.html' rel='noopener noreferrer' target='_blank' title='CSS ve Javascript Kodu ile Zamanlı Popup Afiş Reklam Alanı Oluşturma'>
<div class='popup-content'>
<img alt='CSS ve Javascript Kodu ile Zamanlı Popup Afiş Reklam Alanı Oluşturma' height='318' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzPFSAwHP5shR7LovpKwtRy0asC8STwGiMxoHkJ8EU_vBkLs1yP95OQUSad-n6VK6d954OE5n147b7lcfXWvzXrOXPngqmUg__7C4CGc18kNNymMPkoNMAgHgA-YcWZBWup5PSM1WHfJA/s1600/ramazan.webp' title='CSS ve Javascript Kodu ile Zamanlı Popup Afiş Reklam Alanı Oluşturma' width='635'
/>
</div>
</a>
<button aria-label='Close' class='popup-box-close-button' onclick='document.getElementById("popup-box").style.display="none";removeClassonBody();'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#333'></path></svg></button>
</div>
</div>
<script>
//<![CDATA[
setTimeout(function(){
document.getElementById('popup-box').classList.remove('is-hide');
document.body.className+=" popup-flow-box"
}, 4800);
function removeClassonBody(){var element=document.body;element.className=element.className.replace(/\bpopup-flow-box\b/g,"")}
//]]>
</script>
</body>
</html>
Uygulama İndirme Butonları (APP Store - Play Store)
Buton CSS3 HTML<!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
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>
Kaydol:
Kayıtlar (Atom)