×

İletişim Formu


javaScript etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
javaScript etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Yapışkan ve Duyarlı Kenar Çubuğu (Sidebar) Oluşturma

Yapışkan ve Duyarlı Kenar Çubuğu (Sidebar) Oluşturma

5/17/2019 0 Yorum
<!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'> &#10140; <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'> &#169;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 Ripple Dalga Efekti

5/16/2019 0 Yorum
<!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 ile Tam Oluşturma Eklentisi

5/12/2019 0 Yorum
<!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'>&#169;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 ile Kaydırma Göstergesi Oluşturma

5/11/2019 0 Yorum
<!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'>&#169;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

CSS ve Javascript Kodu ile Zamanlı Popup Afiş Reklam Alanı Oluşturma

5/07/2019 0 Yorum
<!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>
Sayfa Ön Yükleme Eklentisi - 1

Sayfa Ön Yükleme Eklentisi - 1

9/02/2018 0 Yorum
<!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>
Blogger Yeni Yayınlar Widget'ı

Blogger Yeni Yayınlar Widget'ı

8/09/2018 0 Yorum
<!DOCTYPE html> <html> <head> <title>Blogger Son Yayınlar Widget'ı</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700'); body {font-family:'Roboto', sans-serif;line-height:1.5} #recent_article .widget-content,#recent_article ul{max-width:300px;padding:0;margin:0 auto;display:block} #recent_article a:link,#recent_article a:visited{font-weight:normal} #recent_article ul li{background:#fff;margin:0 auto!important;padding:8px 10px!important;list-style:none;position:relative;border:1px solid #d6dee4;border-top-width:0;border-left-width:4px;border-left-color:#fe8f04;font-size:92%;text-align:left!important} #recent_article ul li:nth-child(1){border-top-width:1px!important} #recent_article ul li a{font-weight:400!important;display:block;color:#444!important;text-decoration:none!important;line-height:1.4em!important;padding-right:8px!important} #recent_article ul li a:hover{color:#028271!important} #recent_article ul li:before,#recent_article ul li .item-title a{font-weight:400;font-size:12px;color:inherit;text-decoration:none} </style> </head> <body> <div id='recent_article' class='recent_article'><ul id="recent-posts"></ul></div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ numPosts = 10;function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");ct.async=true;for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.async=true;rcp.src='https://bloggereklentileri.blogspot.com/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp); //]]> </script> </body> </html>
JavaScript Akordeon Tablo

JavaScript Akordeon Tablo

7/23/2018 0 Yorum
<!DOCTYPE html> <html> <head> <title>JavaScript Akordeon Tablo</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700'); body {font-family:'Roboto', sans-serif;line-height:1.5} .gs_list_box_container{border:solid 5px #dad8d7;box-sizing:border-box} .gs_list_box_container *{box-sizing:border-box} .gs_card_header{display:block;width:100%;background-color:#f2f2f2;line-height:40px;height:40px;font-size:18px;font-weight:bold;cursor:pointer;border-bottom:solid 1px #ddd;padding:0 20px;position:relative} .gs_card_body{padding:0;display:none} .gs_card_body a,.gs_card_body p{background-color:#fff;color:#333;display:block;width:100%;font-size:16px;margin:0;padding:10px 20px;border-bottom: 1px solid #ddd} .gs_card_body a{font-style:italic;text-decoration:none;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out} .gs_card_body a:hover{background-color:#eee;color:#f08221;} .gs_card_arrow{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAIVBMVEVHcEx4WgVVQAMcFQEeFgF3WARYQgNWQAN6YAMuJAFjSgD0PZHsAAAAC3RSTlMANsD7+jq6vSbyH6nxLOIAAABRSURBVCjPzc9BDoAwCETRAYq2vf+BFWOIkelaZ/lfWAB8ub7KY2NdB6QR0SZgcnUidy+SPWSn/RRLUZPnecqrp5QOeIia16fclPYQ3oE58ZMdOgEBCuqhN+oAAAAASUVORK5CYII=) no-repeat center;width:24px;height:24px;position:absolute;display:block;right:20px;top:10px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;background-size:16px} .gs_active .gs_card_arrow{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg)} .gs_active .gs_card_header{color:#f08221} .gecmis-sorular-menu li a{font-size:14px} </style> </head> <body> <div class="gs_list_box_container"> <div class="gs_card gs_active"> <div class="gs_card_header">CSS3<span class="gs_card_arrow"></span></div> <div class="gs_card_body"><a href="//bloggereklentileri.blogspot.com/2018/06/blogda-css3-ve-html5-tasarml-bildirim.html" title="Blog'da CSS3 ve HTML5 Tasarımlı Bildirim Uyarı Kutusu Oluşturma" target="_blank" rel="nofollow noopener">Blog'da CSS3 ve HTML5 Tasarımlı Bildirim Uyarı Kutusu Oluşturma</a> </div> </div> <div class="gs_card"> <div class="gs_card_header">HTML5<span class="gs_card_arrow"></span></div> <div class="gs_card_body"><a href="//bloggereklentileri.blogspot.com/2018/06/blogger-html5-meta-etiketleri.html" title="Blogger HTML5 Meta Etiketleri" target="_blank" rel="nofollow noopener">Blogger HTML5 Meta Etiketleri</a></div> </div> <div class="gs_card"> <div class="gs_card_header">Blogger İpuçları<span class="gs_card_arrow"></span></div> <div class="gs_card_body"><a href="//bloggereklentileri.blogspot.com/2018/05/blogger-2018de-yeni-guncellemeler.html" title="Blogger 2018'de Yeni Güncellemeler Yapacak" target="_blank" rel="nofollow noopener">Blogger 2018'de Yeni Güncellemeler Yapacak</a></div> </div> <div class="gs_card"> <div class="gs_card_header">Blogger Temaları<span class="gs_card_arrow"></span></div> <div class="gs_card_body"> <a href="//bloggereklentileri.blogspot.com/2018/05/blogger-teknoloji-ve-magazin-temas.html" title="Blogger Teknoloji ve Magazin Teması" target="_blank" rel="nofollow noopener">Blogger Teknoloji ve Magazin Teması</a> <a href="//bloggereklentileri.blogspot.com/2018/05/blogger-weblog-temas-haber-magazin-ve.html" title="Blogger WeBlog Teması (Haber, Magazin ve Dergi)" target="_blank" rel="nofollow noopener">Blogger WeBlog Teması (Haber, Magazin ve Dergi)</a> <a href="//bloggereklentileri.blogspot.com/2018/05/blogger-mahmure-temas.html" title="Blogger Mahmure Teması" target="_blank" rel="nofollow noopener">Blogger Mahmure Teması</a> </div> </div> <div class="gs_card"> <div class="gs_card_header">İş Ve Ev Arasındaki Zorlu Denge: Çalışan Anne Olmak <span class="gs_card_arrow"></span></div> <div class="gs_card_body"><p>Annelik ve iş yaşamı arasındaki dengeyi kurmak için suçluluk duygusundan da uzaklaşmanız gerek. Önemli olan çocukla 24 saat değil, “nitelikli” vakit geçirmek. <br><br> Günümüzde anneler daha önce hiç olmadığı kadar çalışma hayatının içinde. Kuşkusuz bu büyüyen Türkiye ile uyumlu bir olgu. Ancak çalışan annelerin iş ve ev yaşamları arasındaki dengeyi kurmaları bazen oldukça güç oluyor. Çoğu zaman suçluluk duygusu yaşayabiliyorlar ve bu da stres düzeylerini artırıyor. Yapılması gereken şey, annelik ve iş yaşamı arasında bir denge oluşturmak ve daha sonra düzenli ve disiplinli bir biçimde bu dengeyi korumak. <br><br> Bu dengeyi koruyabilmek için çalışan annelerin hayatına girmesi ve bir daha çıkmaması gereken bazı kavramlar var: İş planı, program, takvim ve disiplin… Önemli olan günü doğru planlamak ve uygulayabilmek. Program veya disiplin kadar önemli olan diğer şey de sınır koyabilmek. Bazı insanlar işine tutkuyla bağlıdır ve gece gündüz ayrımı yapmaz. Ancak anne olduysanız artık sınır koymanın vakti gelmiş demektir. İşyerinde de iyi bir planlama yapmalısınız ve mesai saatlerini verimli geçirerek mümkün olduğu kadar işi işte bitirmelisiniz. <br><br> Annelik ve iş yaşamı arasındaki dengeyi kurmak için suçluluk duygusundan da uzaklaşmanız gerek. Önemli olan çocukla 24 saat değil, “nitelikli” vakit geçirmek. Çalışan anneler bir kere televizyonu yaşamlarından çıkarmalıdır. Burada da bulabileceğiniz “çocuğunuzla oynayabileceğiniz oyunlar” tarzı makale ve yazılar size TV karşısında zaman geçirmektense, çocuğunuzla nitelikli zaman geçirmenizi sağlayacak etkinlik ve oyunlar konusunda size fikir verecektir. <br><br> Çalışan annedeki suçluluk duygusunu azaltmak için çocuğun kime emanet edildiği de önem taşır. Çok şükür, ülkemizde hala geleneksel dayanışma devam ediyor ve anneanneler, babaanneler ve dedeler Hızır gibi imdada yetişiyor! Ama böyle bir imkânı olmayanlar için bakıcı seçimi hayati önem taşıyor. Bakıcı seçiminden önce, evvela bir çocuğun sağlıklı bir bağlanma süreci yaşayabilmesi için annesiyle en azından ilk birkaç ayı birlikte geçirmesi hayati önem taşıyor. Anne adaylarının planlaması gereken en önemli şeylerin başında bu konu geliyor. Bakıcı seçimiyle ilişkili olaraksa, ince eleyip sık dokuyup bir bakıcıya karar vermek ve daha sonra bu bakıcıdan vazgeçmemek gerekiyor. Çocuğun güven duygusunun gelişimi bakımından bu konuya özen gösterilmeli. <br><br> Gün içinde annelerin hem bakıcıyla hem de çocukları ile ara fotoğraf ve video paylaşımında bulunarak irtibat halinde olması önemli. <br><br> Eve iş getirmemek ve vakti organize bir biçimde kullanmak bir diğer önemli konu. Çocuk uyuduktan sonraki zamanı da iş için değil, kişisel ilgi ve hobiler için ve eşlerle birlikte değerlendirmek gerek. Eşlerle geçirilen zamanı da nitelikli kılmakta fayda var. Örneğin, çocuklar olmadan baş başa yemek veya kahve ritüelleri oluşturulabilir. Çoğu insan evliliği olduğu gibi yaşıyor ve böylece heyecanını yitiriyor. Hâlbuki evlilik de herhangi bir organizma misali beslenmek, ilgi ve sevgiyle büyütülmek ister. Çalışan bir anne, programlı ve organize yaşam tarzı içinde evliliğine de yatırım yapmanın yollarını bulacaktır. <br><br> Çalışan annelerin bazı şeylerden feragat etmesinde fayda var. Kıyafetlerin jilet gibi ütülü olması arzu edilen bir şeydir ama en azından bir süre nevresimleri ütülemeseniz de olur. Yani ev işlerinde eski alışkanlıklarından bir kısmını terk etmeniz gerekecek. Bu noktada, ev işlerinin eşler arasında adilane paylaşımı önemli. Bunu da birbirini kırmadan yapmanın yolu, iyi bir işbölümü yapmaktan geçiyor. Kimin hangi işten sorumlu olacağı birlikte kararlaştırılmalı ve centilmenlik anlaşmasını kimse ihlal etmemeli! <br><br> Feragat edilmesi gereken bir diğer büyük alışkanlık ise mükemmeliyetçilik! Kusursuz yemekler yapamayabilirsiniz. Akşam yemeğinde masayı birbirinden leziz ve çeşitli yemeklerle donatamayabilirsiniz. Ev biraz dağılabilir. Misafirlerinize mahcup olabilirsiniz. Mükemmeli bu konularda aramamalısınız. Asıl mükemmel olan şey, sizin bir anne olmanız ve İlahî bir emanet olan yavrularınızın olması. Mükemmeliyetçi değil, affedici olun… Öncelikle de kendinizi affedin… Affetmek çok iyi gelecek size… <br><br> Bırakın yılları, günler geçtikçe, çocuğunuzun eskiyen hallerini özlediğinizi fark edeceksiniz. Öyleyse, önemli olan onunla geçirdiğiniz zamanın mahiyeti ve niteliği. <br><br> Titizlik takıntısından da kurtulmak gerek. Ülkemizde hala pek çok salon “misafir odası” olarak ayrılmakta ve koltuk takımlarının üzeri örtülerle kapatılmakta. Misafire bir “görüntü” sunmak yerine her ânı yaşama dâhil etmeyi seçmek gerek. Koltuk takımlarınız ilk günkü gibi gıcır gıcır olsa bile, önünde sonunda, modası geçecek! Üzerindeki lekelerde ise anılarınız yaşayacak. <br><br> Yetersizlik duygusuyla baş edebilmek için çalışan anneler biraz da kendilerini şımartabilirler. Çalışan anne olmak zordur ama herkes çalışan bir anneyi parmağı ile gösterir. Çalışan bir anne, çocuğu için de iyi bir rol modeldir aynı zamanda. İş disiplini ve ahlâkı ile rol modeldir her şeyden evvel. Çalışan bir annenin çocuğu bilir ki, annesi çalışkandır ve sorumluluk sahibidir. <br><br> Çalışan bir anne esnek ve spontandır. Öyle uzun uzun düşünmeye vakti yoktur ve bundan dolayı, pratiktir. Anlık çözümler üretebilir. Katı tutumları yoktur, kolay uyum sağlar. Bu esneklik ve uyum kabiliyeti, çalışan annenin örgütleme becerilerini de geliştirir. <br><br> Sonuç olarak, her güçlükle birlikte bir kolaylık vardır. Bize güç gelen şeyler aslında biz farkına bile varmadan bizi güçlendirir. Çalışan bir anne olmayı, yaşamı tek bir ânda hissedebilme fırsatına dönüştürün. Çalışan anneler aslında, sadece iş ile ev arasında bir denge kurmuyor, hayatın her alanını ve ânını bir dengeye oturtuyor. Bu açıdan düşünüldüğünde, çalışan anneler yaşadıkları güçlüklere rağmen, ruhsal bakımdan bir bütünlük hissine oldukça yakınlar. Yeter ki bunun farkında olsunlar… <br><br> Önemli Hatırlatma: Bu içerik ilgili uzman danışman tarafından izleyicilerimizi bilgilendirme amaçlı hazırlanmıştır. Kendinizin veya çocuğunuzun sağlığı ile ilgili her konuda, bir tıp doktoruna veya çocuk eğitimi ve psikolojisi alanında çalışan uzmanlara danışmanızı tavsiye ederiz.</p></div> </div> </div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){$('.gs_active .gs_card_body').slideDown();$('.gs_card_header').click(function(){var cbody=$(this).parent().find('.gs_card_body');if(cbody.css('display')=='block'){cbody.slideUp();$(this).parent().removeClass('gs_active');} else{$('.gs_list_box_container .gs_card').removeClass('gs_active');$(this).parent().addClass('gs_active');$('.gs_card_body').slideUp();cbody.slideDown();}});}); //]]> </script> </body> </html>
Blogger Yapışkan (Sticky) Sidebar Eklentisi

Blogger Yapışkan (Sticky) Sidebar Eklentisi

7/06/2018 0 Yorum
<!DOCTYPE html> <html> <head> <title>Blogger Yapışkan (Sticky) Sidebar Eklentisi</title> <style> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body {font-family: 'Fira Sans Condensed', sans-serif;line-height:1.7em;text-align:justify;margin:0;padding:0} h1 {font-size:20px} h2 {font-size:18px} .application-main {display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;margin: 0;padding:0} .main {width:66%;padding:0 20px 0} .sidebar {width:32%;padding:20px} .footer{padding:0 20px 0} </style> </head> <body> <div class="application-main"> <div class="main"> <h1>Ebeveynler Çocuğunun Dijital Akıl Hocası Olmalı!</h1> <p>Tarihte belki de ilk defa “büyümüş de küçülmüş” deyimi günümüzde karşılık buluyor. Çocuklar yetişkinlerden teknoloji bağlamında daha fazla şey biliyor; yetişkinler yeni teknolojileri kabaca kullanabilirken, çocuklar en ince detayına kadar kullanabiliyor. Zira çocuklar söz konusu bu yeni teknolojilerin içine doğmuş ve bu atmosfer içerisinde yaşıyorlar.<br><br> Çocukların teknolojiyi bilmesi ve kullanması ne kadar doğalsa, yetişkinlerin teknolojiyi daha az bilmesi de o denli normal. Her iki dönemin değerlendirmesi kendi gerçekliği içerisinde yapılmalı. Başka bir ifadeyle ne çocuklar teknolojiyi kullandıkları için çok şey biliyorlar, ne de yetişkinler teknolojiyi daha az bildikleri için cahiller. Buna rağmen ebeveynlerin teknoloji konusunda kendilerini çocukları karşısında mahcup hissettiklerini belirtmeleri sıklıkla karşılaşılan bir durum. Benzer bir şekilde çocuklar da teknolojiyi daha iyi kullanmaları nedeniyle kibirli davranışlar sergileyebilirler.<br><br> Burada belirtilmesi gereken husus; ebeveynlerin kendi hayat tecrübeleri hakkında özgüven sahibi olmaları gerektiğidir. Yaşadıkları ve tecrübe ettikleri sayısız şeyin gerek kendileri gerekse çocukları için önemli bir sermaye olduğunu bilmeleri gerekiyor. Zira yetişkinlerin sahip olduğu hayat bilgisi, teknolojinin nasıl doğru kullanılacağına dair yol gösterici temel ilkeleri belirleyecek.<br><br> Ebeveynler teknoloji gerçeğini yok saymadan, teknolojiyi öğrenmek ve kullanmak konusunda istekli olmalılar. Yetişkinler çocuklar kadar teknolojinin inceliklerini bilmek zorunda değiller fakat çocuklarıyla sağlıklı iletişim kurabilmek, hayatı birlikte yaşamak ve aile bütünlüğünü sağlamak için de teknolojiyi yok saymadan onunla birlikte yaşamayı öğrenmeleri gerekiyor. Bununla birlikte çocukların kişilik ve kimlik gelişimlerinde dijital ortamın tehlikelerine karşı ebeveynlerin onları korumaları ve birlikte sağlıklı bir teknoloji kullanım pratiği geliştirmek zorundalar. Bu şekilde kurulacak sağlıklı bir zemin, ebeveynin çocuğuyla iletişim kurabilmesinin yanı sıra çocuğun da ebeveynin hayat bilgisinden istifade etme imkânını oluşturacaktır. Bu denge sağlanabildiği ölçüde çocuğun temel dijital akıl hocası çocuğun ebeveyni olabilir.<br><br> Çocuk, kendi başına teknolojiyi yetişkinlerden daha iyi kullanabilir. Ancak hangi amaçla ve ne kadar kullanacağı konusunda ebeveynin sahip olduğu bilgi, birikim ve tecrübe yol gösterici olmalıdır. Aksi halde çocuğun kendi başına teknoloji kullanımı, orantısız kullanımdan dolayı teknoloji bağımlılığına dönüşebilir. Kişilik, kimlik ve aidiyet mekanizmalarının kurulmasında sorunlu ilişkiler doğurabilir, zaman, emek ve sağlık israfına yol açabilir.<br><br> Günümüzde çocuklar da teknolojiyi iyi kullanmanın yanı sıra, yetişkinlerin sahip olduğu hayat bilgisini önemsemeli ve geleceğe taşıyabilmeliler. Yetişkinlerin de sahip oldukları bilgi, birikim ve tecrübe ile geçmişte bırakmayarak, çocukları ile teknoloji dünyası arasında dengeli bir ilişki kurabilecek çabayı mutlaka göstermeleri gerekiyor.</p> </div> <div class="sidebar"> <h2>Çocuk, kendi başına teknolojiyi yetişkinlerden daha iyi kullanabilir</h2> <p>Çocukların teknolojiyi bilmesi ve kullanması ne kadar doğalsa, yetişkinlerin teknolojiyi daha az bilmesi de o denli normal.</p> </div> </div> <div class="footer"> <p><b>Önemli Hatırlatma</b>: Bu içerik ilgili uzman danışman tarafından izleyicilerimizi bilgilendirme amaçlı hazırlanmıştır. Kendinizin veya çocuğunuzun sağlığı ile ilgili her konuda, bir tıp doktoruna veya çocuk eğitimi ve psikolojisi alanında çalışan uzmanlara danışmanızı tavsiye ederiz.</p> </div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script> <script> $(function(){var offset=$(".sidebar").offset();var topPadding=15;$(window).scroll(function(){if($(window).scrollTop()>offset.top){$(".sidebar").stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding});}else{$(".sidebar").stop().animate({marginTop:0});};});}); </script> </body> </html>