<!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>
×
İletişim Formu
CSS3 etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
CSS3 etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
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 Yayınlarında Başlık Listesi veya İçindekiler Tablosu Oluşturma
CSS3 HTML5 jQuery<!DOCTYPE html>
<html>
<head>
<title>Blogger Yayınlarında Başlık Listesi veya İçindekiler Tablosu Oluşturma</title>
<style type='text/css'>
/*<![CDATA[*/
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
body {font-family:'Fira Sans Condensed', sans-serif;margin:16px;line-height:1.5}
a {color:#000;cursor:pointer;text-decoration:none}
a:hover {color:#2196f3;cursor:pointer;text-decoration:none}
h4{font-size:18px;}
#light-contents{background:#fff0da;padding:10px 20px;border-radius:3px}
#contents_list{font-weight:700;cursor:pointer;margin:10px 0}
#contents_list:focus,#contents li:focus,.back_contents:focus{outline:none}
#contents_list svg{width:18px;height:18px;fill:#000;vertical-align:middle}
#contents li{background:transparent;margin:.2em 0 .2em 1em;cursor:pointer}
#contents ol li:before{left:-2em}
#contents li a{color:#000}
#contents li a:hover{color:#1e80ff}
#contents{display:block}
.back_contents{background:#2196F3;color:#fff;display:inline-block;text-align:right;float:right;margin:15px auto;font-size:14px;padding:2px 12px;cursor:pointer;border-radius:99em;transition:all .3s}
.back_contents:hover{background:#2d3435;color:#fff}
:target::before{content:';';display:block;height:40px;margin-top:-40px;visibility:hidden}
/*]]>*/
</style>
</head>
<body>
<div class='post-body'>
<div id="light-contents">
<div id="contents_list" onclick="if (document.getElementById('contents').style.display === 'none') { document.getElementById('contents').style.display = 'block'; } else { document.getElementById('contents').style.display = 'none'; }" role="button" tabindex="0">İçindekiler <svg viewBox="0 0 24 24"><path d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="contents">
<ol>
<li><a href="#article_head_1" title="Çocuklarda Mahremiyet Eğitiminde Nelere Dikkat Edilmeli?">Çocuklarda Mahremiyet Eğitiminde Nelere Dikkat Edilmeli?</a></li>
<li><a href="#article_head_2" title="Çocuğunuzun Konuşma Becerisini Geliştirecek Öneriler">Çocuğunuzun Konuşma Becerisini Geliştirecek Öneriler</a></li>
</ol>
</div>
</div>
<br />
<h4 id="article_head_1">Çocuklarda Mahremiyet Eğitiminde Nelere Dikkat Edilmeli?</h4>
<p>Çocukların gelişim sürecinde mahremiyet eğitimi önemli bir yer tutar. Çocuğun kendisinin, vücudunun ve özel alanlarının farkına varması, hem kendisinin sınırlarını hem de diğer insanların sınırlarının farkına varmasını sağlar. Bu aynı zamanda, çocuğun kendisini zihnen ve bedenen koruması açısından da oldukça önemlidir.</p>
<ul>
<li>Küçük yaştaki çocuklara mahremiyet eğitimi verilirken ayıp, yasak, günah gibi kelimeler yerine ‘mahrem’ kavramının kullanılması çocukların duygusal gelişimi için önemlidir.</li><li>Çocuklara mahremiyet eğitimi, korku ve endişe yaratmadan, günlük yaşam içinde doğal olarak verilmelidir.</li><li>Yetişkinlerin 4 yaşından itibaren çocuğa dokunacağı durumlarda ona nedenini açıklayarak yaklaşması, çocuğun kendi beden imgesinin oluşmasına yardımcı olur.</li><li>Ebeveynlerin sevmek, öpmek, yıkamak gibi sebeplerle çocuğa isteği dışında, zorlayıcı yaklaşımlarının onun korunma reflekslerini zedeleyeceği unutulmamalıdır.</li><li>Çocuklara vücutlarındaki mahrem alanlar tanıtılmalıdır. Bu alanlara sadece ihtiyaç durumlarında anne, nene, dadı gibi birincil bakım vericilerin yaklaşabileceği 2 yaşından itibaren anlatılmalıdır.</li><li>Çocuklara erken yaşlarda vücut temizliği ve giyinme gibi öz bakım becerileri kazandırılarak mahremiyetlerini korumaları kolaylaştırılmalıdır.</li><li>Çocuklara ‘mahrem’ bölgeleri ile ilgili şaka yapmaktan ve onları teşhire teşvikten kaçınılmalıdır.</li><li>Ebeveynler veya akrabalar çocukları severken ya da onlarla oynarken orantısız güç kullanmamalıdır.</li><li>Çocuklar özellikle dış alanlarda çıplak kalmamalı, giyinme ve mahremiyet ilişkisi neden ve sonuçlarıyla çocuğa yaşına uygun bir dille anlatılmalıdır.</li><li>Ebeveynler çocuklarının yanında kendi mahremiyetlerini koruyarak örnek olmalılardır.</li><li>Çocukların odaları gibi kişisel alanlarına girerken haber verilerek rızaları gözetilmelidir.</li><li>Çocuklara başkalarının odalarına girerken izin almaları gerektiği öğretilmelidir.</li><li>Kız ve erkek kardeşlerin ilkokul çağından itibaren kişisel alanlarının olması teşvik edilmelidir.</li><li>Kıyafet ve aksesuarların çocukların yaşlarına ve cinsiyetlerine uygun olmasına, giysilerinin mahrem bölgelerini ön plana çıkarmamasına dikkat edilmelidir.</li><li>Çocuklara ebeveynlerinden izinsiz olarak tanıdığı veya tanımadığı kişilerle bir yere gitmemeleri ve onlardan bir şey almamaları gerektiği öğretilmelidir.</li><li>Çocuklara mahremiyetlerinin ihlal edildiği durumlarda tepki vermeleri, bağırmaları, kaçmaları veya yardım istemeleri gerektiği öğretilmelidir.</li><li>Çocuklar mahremiyetlerine yönelik kendilerini rahatsız hissettikleri durumları ebeveynleriyle veya güvendikleri bir yetişkinle paylaşmaya teşvik edilmelidir.</li><li>Çocukların izledikleri TV programları ve videolar, okudukları yayınlar, ziyaret ettikleri web siteleri ile kullandıkları sosyal medya platformları kontrol edilmelidir. Farklı mecralarda karşılaşabilecekleri mahremiyet ihlalleriyle ilgili bilgilendirilmelidirler.</li><li>Ebeveynler çocuklarının yer aldığı görüntüleri internette herkesin erişimine açık şekilde paylaşmamalıdır.</li><li>Çocuklara internette fotoğraf, isim-soyad, adres, konum gibi özel bilgileri paylaşmamaları gerektiği öğretilmelidir.</li><li>Çocuklara telefon numaranız, adresiniz ile 155 Polis İmdat, 156 Jandarma, 112 Acil gibi önemli numaralar mutlaka öğretilmelidir.</li>
</ul>
<div class="back_contents" onclick="document.getElementById('contents_list').scrollIntoView(true);" role="button" tabindex="0">İçerik Listesine Dön</div>
<br /><br />
<h4 id="article_head_2">Çocuğunuzun Konuşma Becerisini Geliştirecek Öneriler</h4>
<p>Başarılı bir iletişimin, duygu ve düşünceleri net ifade etmenin yolu güzel ve etkili konuşmaktan geçer. Güzel ve etkili konuşmak için temel olarak seslerin doğru çıkarılması, ifadelerin en kolay şekilde ve doğrudan anlaşılabilir olması gereklidir. Peki nasıl güzel konuşulur? Çocukların diksiyon bozuklukları nasıl giderilir?</p>
<b>Çocuğa güzel konuşmanın önemi anlatılmalı</b><br />
<br />
Öncelikle çocukları güzel konuşmanın, etkili bir iletişim için çok önemli olduğuna ikna etmeliyiz. Bu şekilde, duygularımızı ve düşüncelerimizi en kolay ve en etkili şekilde ifade edebileceğimizi anlatmalıyız. Daha küçük yaştaki çocuklar için de bunu günlük hayatta kullandığımız konuşmaya dikkat ederek, ona örnek olarak yapabiliriz.<br />
<br />
<b>Televizyon ve dijital oyunlar dil gelişimini etkiliyor</b><br />
<br />
Televizyon izlemenin ve dijital oyunlarla vakit geçirmenin dil gelişimine olumlu ve olumsuz etkileri olduğu biliniyor. Uzun süre ekran karşısında kalan çocuk, güçlü bir izleme alışkanlığını elde ediyor. Bu durum beraberinde, çocuğun dil gelişimiyle ilgili bir takım olumsuzlukları, televizyon veya tabletle tek yönlü iletişim kurmaktan kaynaklanan çok yönlü iletişimde zayıflık, göz teması kurma süresinin azalması, konuşma bozukluğu, sözel ifade edici dil becerisinin zayıflaması, cümle kuramama, cümle tamamlayamama, seslenildiğinde tepki vermeme, duygusal iletişim kuramama olarak sıralayabiliriz.<br />
<br />
Bunun yanında televizyon ve oyunlar, belirli bir süre konularak, ebeveyn gözetiminde ve içeriğinde seçici olunduğu sürece, çocuğun dil gelişimine olumlu katkıda bulunabilir. Çocuk, temiz ve duru bir Türkçe ile hazırlanan, diyaloğa teşvik eden, çok yönlü iletişimi güçlendiren içeriklerle karşılaştığında, dil ve motor becerilerini geliştirebilir.<br />
<br />
<b>Çocukla göz teması kurmak önemli</b><br />
<br />
Güzel ve etkili konuşmada en önemli kural, konuştuğumuz kişiyle göz teması kurmaktır. Göz teması, verilen mesajı güçlendirir ve odağın tek noktada toplanmasına yardımcı olur. Çocukla iletişim kurarken göz temasına mutlaka dikkat edilmeli. Ayrıca söylediklerimizi jest ve mimiklerimizle destekleyebilmeliyiz.<br />
<br />
<b>Güzel konuşma egzersizleri için pratik uygulamalar</b><br />
<br />
Çocuklar bazı sesleri çıkarmakta zorlanabilir. Bu tarz durumlarda ağız ve çene kaslarını geliştirmek için şarkı söylemek, tekerlemeler ve sözcük çalışmaları etkili sonuçlar verebilir. Yine ağız ve çene kaslarını geliştirmek küçük egzersizler de yapılabilir. Örneğin: Yatay bir şekilde, ısırılır gibi iki diş arasına alınan temiz bir çubuk veya kalemle birlikte tekerleme veya şarkı söylenebilir.<br />
<br />
Bu durum başta çocuk için zor olacaktır. Hatta ağız kaslarını yoracaktır ancak kalemle yapılan birkaç alıştırmadan sonra o tekerlemeyi çok daha rahat okuyacaktır. Yine çocuğumuzda dudak tembelliği olabilir, yani bazı harfleri yutarak okuma sorunuyla karşılaşmış olabiliriz. Bunu aşmak için çocuğa sesli şiir, masal, fıkra okutmalıyız ve onun okuduğu her metinde onu övmeli, teşvik etmeliyiz. Sesli okuma çalışmaları bu tip sorunları aşmakta başat araçtır. Eğer çocuğumuz bir metin okurken kelimeleri yutuyorsa ona acele etmemesi gerektiğini hatırlatmalıyız. Onu sabırla dinlemeliyiz.<br />
<br />
<b>Evde oynanabilecek konuşma egzersizi oyunları</b><br />
<br />
Ebeveynler, evde oynayacakları aşağıdaki gibi konuşma egzersizi oyunlarıyla güzel konuşmayı geliştirmeyi ödev ve sorumluluk noktasından uzaklaştırıp eğlenceli hale getirebilir.<br />
<br />
<b>Yanlışımı düzelt</b><br />
<br />
Bunun için evde çocuğunuzun sevdiği bir kitabı önce güzel konuşma kurallarına aykırı bir şekilde okuyup, çocuğunuzun yanlışları bulmasını sağlayabilirsiniz. Bu hem aranızdaki ilişkiyi güçlendirecek hem de keyifli zaman geçirmenizi sağlayacaktır. Ayrıca oyun sonunda çocuk yaptığı doğru ve yanlışları görebilecektir.<br />
<br />
<b>Gözüm sende</b><br />
<br />
Çocuğunuzla göz teması kurmadan, jest ve mimiklerinizi kullanmadan onun ilgisini çekebilecek bir konuda konuşma yapabilirsiniz. Çocuğunuz buna şaşıracak ve kendiliğinden yanlışları fark edecektir. Bu yanlış gösterimden sonra doğrusunun nasıl olması gerektiğini çocuğunuzdan göstermesini isteyebilirsiniz. Sevdiği bir filmi, okuduğu kitabı, bir gözlemini vb. anlattırabilirsiniz.<br />
<br />
<b>Anlat dinlet</b><br />
<br />
Güzel konuşmada en önemli noktalardan birinin dinleme olduğunu kavratmak için çocuğunuzla eğlenceli başka bir etkinlik daha yapabilirsiniz. Bunun için çocuğunuzdan gün içinde yaptıklarını size kurallara uygun bir şey anlatmasını isteyin. O anlatırken siz onu dinlemeyin ve ikide bir sözünü kesin. Çocuğunuz buna hem gülecek hem de sinirlenecektir. Kendiliğinden bunun yanlış olduğunu görecek ve sosyal hayatında da buna dikkat edecektir.<br />
<br />
<b>Tekerleme</b><br />
<br />
Tekerlemeleri güzel konuşma etkinliklerinize katabilirsiniz. Örneğin akşam yemeği için üç tekerleme belirleyip gün içinde çocuğunuzdan bu tekerlemeleri alıştırma yapmasını isteyebilirsiniz. Akşam olunca tekerlemeleri takılmadan ve düzgünce söyleyebildiği takdirde ona küçük bir ödül verebilirsiniz.<br />
<br />
<b>Unutmayın: En güzel yöntem örnek olmaktır</b><br />
<br />
İyi veya kötü her davranışımızla çocuklarımıza örnek oluruz. Evde, dışarıda yani her yerde bizler güzel konuşmaya dikkat edersek çocuğumuz da gördüğünü yapacaktır.
<br />
<div class="back_contents" onclick="document.getElementById('contents_list').scrollIntoView(true);" role="button" tabindex="0">İçerik Listesine Dön</div>
<br /><br />
<p><em><strong>Önemli Hatırlatma:</strong> 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.</em></p>
</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(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]>
</script>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 14
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 14 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{background:#f5f5fa;overflow:hidden;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#loader-status{width:50px;height:30px;position:fixed;left:50%;top:50%;margin:-25px 0 0 -15px}
.spinner{margin:0 auto;width:50px;height:30px;text-align:center;font-size:10px}
.spinner > div{background-color:#4267b3;height:100%;width:6px;display:inline-block;-webkit-animation:stretchdelay 1.2s infinite ease-in-out;animation:stretchdelay 1.2s infinite ease-in-out}
.spinner .rct2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}
.spinner .rct3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}
.spinner .rct4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}
.spinner .rct5{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}
@-webkit-keyframes stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1.0)}}
@keyframes stretchdelay{0%,40%,100%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<div id='loader-status'>
<div class='spinner'>
<div class='rct1'></div>
<div class='rct2'></div>
<div class='rct3'></div>
<div class='rct4'></div>
<div class='rct5'></div>
</div>
</div>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 13
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 13 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{background:#ecf0f2;overflow:hidden;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.loader{border-radius:50%;margin:0 auto;position:absolute;top:40%;left:0;right:0;height:50px;width:50px}
.gge{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:0 solid transparent;border-bottom:60px solid #00b5ff;width:0;z-index:2}
.gge2{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:0 solid transparent;border-bottom:40px solid #ffde16;width:0;z-index:1}
.gge3{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:40px solid #1da159;border-bottom:0 solid transparent;width:0;z-index:1}
.gge4{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:60px solid #ea344f;border-bottom:0 solid transparent;width:0;z-index:2}
.circa{border:30px solid rgba(255,255,255,0.1)}
.circa2{margin-top:30px;border:25px solid #fff;box-sizing:border-box;box-shadow:0 2px 1px rgba(0,0,0,0.15),0 -2px 1px rgba(0,0,0,0.15),-2px 0 1px rgba(0,0,0,0.15),2px 0 1px rgba(0,0,0,0.15);z-index:90}
@-webkit-keyframes translateRotation{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<div class='spinner'>
<div class='loader gge'></div>
<div class='loader gge2'></div>
<div class='loader gge3'></div>
<div class='loader gge4'></div>
<div class='loader circa'></div>
<div class='loader circa2'></div>
</div>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 12
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 12 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:50%;left:50%;z-index:1;height:40px;width:40px;transform:translate(-50%,-50%)}
[class^="balls-"]{position:absolute;display:block;left:30px;width:12px;height:12px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0}
@keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}}
.balls-1{z-index:-1;background-color:#2196F4;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)}
.balls-2{z-index:-2;background-color:#03A9F5;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)}
.balls-3{z-index:-3;background-color:#00BCD5;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)}
.balls-4{z-index:-4;background-color:#009689;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)}
.balls-5{z-index:-5;background-color:#4CAF51;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)}
.balls-6{z-index:-6;background-color:#8BC35A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)}
.balls-7{z-index:-7;background-color:#CDDC38;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)}
.balls-8{z-index:-8;background-color:#FFEB4B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<div class='spinner'>
<span class='balls-1'></span>
<span class='balls-2'></span>
<span class='balls-3'></span>
<span class='balls-4'></span>
<span class='balls-5'></span>
<span class='balls-6'></span>
<span class='balls-7'></span>
<span class='balls-8'></span>
</div>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 11
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 11 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.loader{position:absolute;top:50%;left:50%;width:200px;height:200px;margin-top:-100px;margin-left:-100px}
.loader > .steps{position:absolute;top:50%;left:50%;z-index:10;width:160px;height:100px;margin-top:-50px;margin-left:-80px;border-radius:5px;background-color:#1e3f57;transform-type:preserve-3d;animation:steps1 3s cubic-bezier(.55,.3,.24,.99) infinite}
.loader > .steps:nth-child(2){z-index:11;width:150px;height:90px;margin-top:-45px;margin-left:-75px;border-radius:3px;background-color:#3c617d;animation-name:steps2}
.loader > .steps:nth-child(3){z-index:12;width:40px;height:20px;margin-top:50px;margin-left:-20px;border-radius:0 0 5px 5px;background-color:#6bb2cd;animation-name:steps3}
@keyframes steps1{3%,97%{width:160px;height:100px;margin-top:-50px;margin-left:-80px}30%,36%{width:80px;height:120px;margin-top:-60px;margin-left:-40px}63%,69%{width:40px;height:80px;margin-top:-40px;margin-left:-20px}}
@keyframes steps2{3%,97%{width:150px;height:90px;margin-top:-45px;margin-left:-75px}30%,36%{width:70px;height:96px;margin-top:-48px;margin-left:-35px}63%,69%{width:32px;height:60px;margin-top:-30px;margin-left:-16px}}
@keyframes steps3{3%,97%{width:40px;height:20px;margin-top:50px;margin-left:-20px}30%,36%{width:8px;height:8px;margin-top:49px;margin-left:-5px;border-radius:8px}63%,69%{width:16px;height:4px;margin-top:-37px;margin-left:-8px;border-radius:10px}}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<div class='loader spinner'>
<div class='steps'></div>
<div class='steps'></div>
<div class='steps'></div>
</div>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 10
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 10 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner-wrap{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center}
.loader-balls{height:20px;width:250px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}
.moving-ball{animation-name:loader-balls;animation-timing-function:ease-in-out;animation-duration:3s;animation-iteration-count:infinite;height:20px;width:20px;border-radius:100%;background-color:black;position:absolute;border:2px solid white}
.moving-ball:first-child{background-color:#8cc759;animation-delay:0.5s}
.moving-ball:nth-child(2){background-color:#8c6daf;animation-delay:0.4s}
.moving-ball:nth-child(3){background-color:#ef5d74;animation-delay:0.3s}
.moving-ball:nth-child(4){background-color:#f9a74b;animation-delay:0.2s}
.moving-ball:nth-child(5){background-color:#60beeb;animation-delay:0.1s}
.moving-ball:nth-child(6){background-color:#fbef5a;animation-delay:0s}
@keyframes loader-balls{15%{transform:translateX(0)}45%{transform:translateX(230px)}65%{transform:translateX(230px)}95%{transform:translateX(0)}}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<div class='spinner-wrap'>
<div class='loader-balls'>
<div class='moving-ball'></div>
<div class='moving-ball'></div>
<div class='moving-ball'></div>
<div class='moving-ball'></div>
<div class='moving-ball'></div>
<div class='moving-ball'></div>
</div>
</div>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 9
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 9 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{background:#fff;position:fixed;overflow:hidden;left:0;right:0;top:0;bottom:0;z-index:9999}
.spinner-wrap{position:absolute;list-style:none;margin:0;padding:0;top:50%;left:50%;transform:translate(-50%,-50%);}
.loading.reversed li{list-style:none;border:3px solid #2b8ccd;animation:LOADING 2s infinite}
.loading.reversed li:nth-child(1n){animation-delay:0s}
.loading.reversed li:nth-child(2n){animation-delay:0.2s}
.loading.reversed li:nth-child(3n){animation-delay:0.4s}
.loading li{position:absolute;height:0;top:50%;left:0;width:0;margin:0;height:10px;width:10px;border:3px solid #2b7ccd;border-radius:100%;transform:transformZ(0);animation:LOADING 2s infinite}
.loading li:nth-child(1n){left:-20px;animation-delay:0s}
.loading li:nth-child(2n){left:0;animation-delay:0.2s}
.loading li:nth-child(3n){left:20px;animation-delay:0.4s}
@keyframes LOADING{0%{transform:scale(0.5);background:#2b8ccd}50%{transform:scale(1);background:#fff}100%{transform:scale(0.5);background:#2b9ccd}}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<div class='spinner-wrap'>
<ul class='loading reversed'>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 8
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 8 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{overflow:hidden;background:#000;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#loader-container{margin:-45px -60px;width:120px;height:90px;position:absolute;top:50%;left:50%}
#loader-do{background:#fff;border-radius:50%;width:30px;height:30px;position:absolute;bottom:30px;left:27px;transform-origin:center bottom;animation:loader-do .6s ease-in-out infinite}
@-webkit-keyframes loader-do{0%{transform:scale(1,.7)}20%{transform:scale(.7,1.2)}40%{transform:scale(1,1)}50%{bottom:100px}46%{transform:scale(1,1)}80%{transform:scale(.7,1.2)}90%{transform:scale(.7,1.2)}100%{transform:scale(1,.7)}}
.loader-step{position:absolute;width:30px;height:30px;border-top:2px solid #FFF;top:0;right:0}
@-webkit-keyframes anim{0%{opacity:0;top:0;right:0}50%{opacity:1}100%{top:90px;right:90px;opacity:0}}
#step-1{animation:anim 1.8s linear infinite}
#step-2{animation:anim 1.8s linear infinite -.6s}
#step-3{animation:anim 1.8s linear infinite -1.2s}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<div id='loader-container' class='spinner-inner'>
<div id='loader-do'></div>
<div class='loader-step' id='step-1'></div>
<div class='loader-step' id='step-2'></div>
<div class='loader-step' id='step-3'></div>
</div>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 7
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 7 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{
overflow:hidden;
background:#fff;
left:0;
right:0;
top:0;
bottom:0;
position:fixed;
z-index:9999
}
.spinner-inner{
position:absolute;
top:calc(50% - 20px);
left:calc(50% - 20px);
animation:rotator 1.4s linear infinite
}
@keyframes rotator{
0%{
transform:rotate(0deg)
}
100%{
transform:rotate(270deg)
}
}
.path{
stroke-dasharray:187;
stroke-dashoffset:0;
transform-origin:center;
animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite
}
@keyframes colors{
0%{
stroke:#4285f4
}
25%{
stroke:#ea4335
}
50%{
stroke:#f7c223
}
75%{
stroke:#1b9a59
}
100%{
stroke:#4285f4
}
}
@keyframes dash{
0%{
stroke-dashoffset:187
}
50%{
stroke-dashoffset:46.75;
transform:rotate(135deg)
}
100%{
stroke-dashoffset:187;
transform:rotate(450deg)
}
}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<svg class='spinner-inner' height='48px' viewBox='0 0 66 66' width='48px'><circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='6'/></svg>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 6
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 6 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:#fff;
z-index:1000
}
.loader-balls{
width:30px;
height:30px;
position:absolute;
background-color:#ccc;
top:45%;
border-radius:50%
}
.loader-balls:nth-child(1){
background-color:#2196F3;
animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)
}
.loader-balls:nth-child(2){
background-color:#F44336;
animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)
}
.loader-balls:nth-child(3){
background-color:#FFC107;
animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)
}
.loader-balls:nth-child(4){
background-color:#4CAF50;
animation:move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23)
}
@keyframes move{
0%{
left:0%
}
100%{
left:100%
}
}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<div class='loader-balls'></div>
<div class='loader-balls'></div>
<div class='loader-balls'></div>
<div class='loader-balls'></div>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 5
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 5 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(#1f3a47,#0b1114);z-index:1000}
.loader-spinner{position:relative;margin:180px auto auto;box-sizing:border-box;background-clip:padding-box;width:200px;height:200px;border-radius:100px;border:4px solid rgba(255,255,255,0.1);-webkit-mask:linear-gradient(rgba(0,0,0,0.1),black 90%);transform-origin:50%60%;transform:perspective(200px)rotateX(66deg);animation:loader-spinner-wiggle 1.2s infinite}
@keyframes loader-spinner-wiggle{30%{transform:perspective(200px)rotateX(66deg)}40%{transform:perspective(200px)rotateX(65deg)}50%{transform:perspective(200px)rotateX(68deg)}60%{transform:perspective(200px)rotateX(64deg)}}
.loader-spinner:before,.loader-spinner:after{content:"";position:absolute;margin:-4px;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:.05;border:inherit;border-color:transparent;animation:loader-spinner-spin 1.2s cubic-bezier(0.6,0.2,0,0.8)infinite,loader-spinner-fade 1.2s linear infinite}
.loader-spinner:before{border-top-color:#66e5ff}
.loader-spinner:after{border-top-color:#f0db75;animation-delay:0.3s}
@keyframes loader-spinner-spin{100%{transform:rotate(360deg)}}
@keyframes loader-spinner-fade{20%{opacity:.1}40%{opacity:1}60%{opacity:.1}}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<div class="loader-spinner"></div>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 4
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 4 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:1000}
.loader-juggle{width:300px;height:300px;position:absolute;top:50%;margin-top:-150px;left:50%;margin-left:-150px}
.loader-juggle div{position:absolute;width:21px;height:21px;border-radius:10.5px;background:#4285f4;margin-top:150px;margin-left:150px;animation:juggle 2.1s linear infinite}
.loader-juggle div:nth-child(1){background:#34a853;animation-delay:-0.7s}
.loader-juggle div:nth-child(2){background:#fbbc05;animation-delay:-1.4s}
@keyframes juggle{0%{transform:translateX(0px) translateY(0px)}12.5%{transform:translateX(25px) translateY(-55px) scale(1.1);background:#ea4335}25%{transform:translateX(50px) translateY(0px);animation-timing-function:ease-out}37.5%{transform:translateX(25px) translateY(55px)}50%{transform:translateX(0px) translateY(0px)}62.5%{transform:translateX(-25px) translateY(-55px) scale(1.1);animation-timing-function:ease-in}75%{transform:translateX(-50px) translateY(0px);animation-timing-function:ease-out}87.5%{transform:translateX(-25px) translateY(55px)}100%{transform:translateX(0px) translateY(0px)}}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<div class='loader-juggle'>
<div class='loader-ball'></div>
<div class='loader-ball'></div>
<div class='loader-ball'></div>
</div>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 3
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 3 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:#000;
color:#eaf8ff;
z-index:999;
font-family:Verdana,sans-serif!important
}
@-webkit-keyframes title{
0%{
opacity:0;
right:130px
}
48%{
opacity:0;
right:130px
}
52%{
opacity:1;
right:30px
}
70%{
opacity:1;
right:30px
}
100%{
opacity:0;
right:30px
}
}
@-moz-keyframes title{
0%{
opacity:0;
right:130px
}
48%{
opacity:0;
right:130px
}
52%{
opacity:1;
right:30px
}
70%{
opacity:1;
right:30px
}
100%{
opacity:0;
right:30px
}
}
@-webkit-keyframes fade{
0%{
opacity:1
}
100%{
opacity:0
}
}
@-moz-keyframes fade{
0%{
opacity:1
}
100%{
opacity:0
}
}
@-webkit-keyframes loader-bg{
0%{
background-color:#306f99
}
50%{
background-color:#19470f
}
90%{
background-color:#734a10
}
}
@-moz-keyframes loader-bg{
0%{
background-color:#306f99
}
50%{
background-color:#19470f
}
90%{
background-color:#734a10
}
}
@-webkit-keyframes blink{
0%{
opacity:0
}
5%{
opacity:1
}
10%{
opacity:0
}
15%{
opacity:1
}
20%{
opacity:0
}
25%{
opacity:1
}
30%{
opacity:0
}
35%{
opacity:1
}
40%{
opacity:0;
right:-21px
}
45%{
opacity:1;
right:80px
}
50%{
opacity:0;
right:-21px
}
51%{
right:-21px
}
55%{
opacity:1
}
60%{
opacity:0
}
65%{
opacity:1
}
70%{
opacity:0
}
75%{
opacity:1
}
80%{
opacity:0
}
85%{
opacity:1
}
90%{
opacity:0;
right:-21px
}
95%{
opacity:1;
right:80px
}
96%{
right:-21px
}
100%{
opacity:0;
right:-21px
}
}
@-moz-keyframes blink{
0%{
opacity:0
}
5%{
opacity:1
}
10%{
opacity:0
}
15%{
opacity:1
}
20%{
opacity:0
}
25%{
opacity:1
}
30%{
opacity:0
}
35%{
opacity:1
}
40%{
opacity:0;
right:-21px
}
45%{
opacity:1;
right:80px
}
50%{
opacity:0;
right:-21px
}
51%{
right:-21px
}
55%{
opacity:1
}
60%{
opacity:0
}
65%{
opacity:1
}
70%{
opacity:0
}
75%{
opacity:1
}
80%{
opacity:0
}
85%{
opacity:1
}
90%{
opacity:0;
right:-21px
}
95%{
opacity:1;
right:80px
}
96%{
right:-21px
}
100%{
opacity:0;
right:-21px
}
}
.loader-wrap{
font-size:18px;
font-weight:700;
left:25%;
letter-spacing:5px;
margin-left:-80px;
margin-top:-40px;
position:absolute;
top:50%;
width:68%
}
.loader-bg{
padding:30px 30px 30px 0;
background:#306f99;
-moz-animation:loader-bg 1.5s linear infinite;
-webkit-animation:loader-bg 1.5s linear infinite;
animation:loader-bg 1.5s linear infinite;
-moz-box-shadow:inset 0 0 45px 30px #000;
-webkit-box-shadow:inset 0 0 45px 30px #000;
box-shadow:inset 0 0 45px 30px #000
}
.pre-loading{
position:relative;
text-align:right;
text-shadow:0 0 6px #bce5ff;
height:20px;
width:150px;
margin:0 auto
}
.pre-loading span{
display:block;
position:absolute;
right:30px;
height:20px;
width:400px;
line-height:20px
}
.pre-loading span:after{
content:"";
display:block;
position:absolute;
top:-2px;
right:-21px;
height:20px;
width:16px;
background:#eaf6ff;
-moz-box-shadow:0 0 15px#bce4ff;
-webkit-box-shadow:0 0 15px #bce5ff;
box-shadow:0 0 15px #bce5ff;
-moz-animation:blink 3.4s infinite;
-webkit-animation:blink 3.4s infinite;
animation:blink 3.4s infinite
}
.pre-loading span.title{
-moz-animation:title 3.4s linear infinite;
-webkit-animation:title 3.4s linear infinite;
animation:title 3.4s linear infinite
}
.pre-loading span.text{
-moz-animation:title 3.4s linear 1.7s infinite;
-webkit-animation:title 3.4s linear 1.7s infinite;
animation:title 3.4s linear 1.7s infinite;
opacity:0
}
/*]]>*/
</style>
</head>
<body>
<div id='PreLoader'>
<div class="loader-wrap">
<div class="loader-bg">
<div class="pre-loading">
<span class="title">Yükleniyor...</span>
<span class="text">Kodeks Editör</span>
</div></div></div></div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 2
CSS3 HTML jQuery<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 2 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(10,10,10,1);
z-index:1000
}
.loader-spinner{
position:fixed;
width:100%;
top:70%;
height:30px;
text-align:center;
font-size:10px
}
.loader-spinner,.loader-spinner-inner{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
border:9px solid white;
border-color:transparent white;
margin:auto
}
.loader-spinner{
width:85px;
height:85px;
-webkit-animation:spin 2.2s linear 0s infinite normal;
-moz-animation:spin 2.2s linear 0s infinite normal;
animation:spin 2.2s linear 0s infinite normal
}
.loader-spinner-inner{
width:40px;
height:40px;
-webkit-animation:spinback 1.2s linear 0s infinite normal;
-moz-animation:spinback 1.2s linear 0s infinite normal;
animation:spinback 1.2s linear 0s infinite normal
}
@-webkit-keyframes spin{
from{
-webkit-transform:rotate(0)
}
to{
-webkit-transform:rotate(360deg)
}
}
@-moz-keyframes spin{
from{
-moz-transform:rotate(0)
}
to{
-moz-transform:rotate(360deg)
}
}
@keyframes spin{
from{
transform:rotate(0)
}
to{
transform:rotate(360deg)
}
}
@-webkit-keyframes spinback{
from{
-webkit-transform:rotate(0)
}
to{
-webkit-transform:rotate(-360deg)
}
}
@-moz-keyframes spinback{
from{
-moz-transform:rotate(0)
}
to{
-moz-transform:rotate(-360deg)
}
}
@keyframes spinback{
from{
transform:rotate(0)
}
to{
transform:rotate(-360deg)
}
}
/*]]>*/
</style>
</head>
<body>
<div id="PreLoader">
<div class="loader-spinner">
<div class="loader-spinner-inner"></div>
</div>
</div>
</body>
</html>
Sayfa Ön Yükleme Eklentisi - 1
CSS3 HTML javaScript<!DOCTYPE html>
<html>
<head>
<title>Sayfa Ön Yükleme Eklentisi - 1 (PreLoader)</title>
<style type='text/css'>
/*<![CDATA[*/
#preloader{
overflow:hidden;
background:#fff;
left:0;
right:0;
top:0;
bottom:0;
position:fixed;
z-index:9999
}
.spinner{
list-style:none;
margin:0;
padding:0;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
.loader{
display:inline-block;
width:30px;
height:30px;
position:relative;
border:4px solid #f44336;
top:50%;
animation:loader 2s infinite ease
}
.loader-inner{
vertical-align:top;
display:inline-block;
width:100%;
background-color:#f44336;
animation:loader-inner 2s infinite ease-in
}
@keyframes loader{
0%{
transform:rotate(0deg)
}
25%{
transform:rotate(180deg)
}
50%{
transform:rotate(180deg)
}
75%{
transform:rotate(360deg)
}
100%{
transform:rotate(360deg)
}
}
@keyframes loader-inner{
0%{
height:0%
}
25%{
height:0%
}
50%{
height:100%
}
75%{
height:100%
}
100%{
height:0%
}
}
/*]]>*/
</style>
</head>
<body>
<div id='preloader'>
<div class='spinner'>
<span class='loader'><span class='loader-inner'></span></span>
</div>
</div>
</body>
</html>
Sekmeli Modal Tasarımı
CSS3 HTML5 jQuery<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,blog-table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}blog-table{border-collapse:collapse;border-spacing:0}
html{width:100%;height:100%}
body{font-family:"Roboto",sans-serif;color:rgba(0,0,0,0.6);font-size:14px;line-height:1.6em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
[ripple]{z-index:1;position:relative;overflow:hidden}
[ripple] .ripple{position:absolute;background:#fff;width:12px;height:12px;border-radius:100%;-webkit-animation:ripple 1.6s;animation:ripple 1.6s}
@-webkit-keyframes ripple{0%{-webkit-transform:scale(1);transform:scale(1);opacity:0.2}100%{-webkit-transform:scale(40);transform:scale(40);opacity:0}}
@keyframes ripple{0%{-webkit-transform:scale(1);transform:scale(1);opacity:0.2}100%{-webkit-transform:scale(40);transform:scale(40);opacity:0}}
.blog-tabs{z-index:15;position:relative;background:#fff;width:600px;border-radius:4px;box-shadow:0 0 30px rgba(0,0,0,0.1);box-sizing:border-box;margin:100px auto 10px;overflow:hidden}
.blog-tabs-header{position:relative;background:#4285F4;overflow:hidden}
.blog-tabs-header .blog-tabs-border{position:absolute;bottom:0;left:0;background:#F4B142;width:auto;height:2px;transition:0.3s ease}
.blog-tabs-header ul{display:flex;flex-direction:row;flex-wrap:wrap;width:calc(100% - 68px)}
.blog-tabs-header li{transition:0.3s ease}
.blog-tabs-header a{z-index:1;display:block;box-sizing:border-box;padding:15px 20px;color:#fff;font-weight:500;text-decoration:none;text-transform:uppercase}
.blog-tabs-nav{position:absolute;top:0;right:0;background:#4285F4;display:flex;align-items:center;height:100%;padding:0 10px;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.blog-tabs-nav:before{content:'';z-index:1;position:absolute;top:0;left:0;height:100%;box-shadow:0 0 20px 10px #4285F4}
.blog-tabs-nav span{border-radius:100%;cursor:pointer}
.blog-tab-prev-icons{background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M15.41,16.59L10.83,12l4.58-4.59L14,6l-6,6l6,6L15.41,16.59z'/%3E%3Cpath fill='none' d='M0,0h24v24H0V0z'/%3E%3C/svg%3E%0A");display:inline-block;width:28px;height:28px}
.blog-tab-next-icons{background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8.59,16.59L13.17,12L8.59,7.41L10,6l6,6l-6,6L8.59,16.59z'/%3E%3Cpath fill='none' d='M0,0h24v24H0V0z'/%3E%3C/svg%3E");display:inline-block;width:28px;height:28px}
.blog-tabs-content{position:relative;padding:15px 20px;transition:0.3s ease;overflow:hidden}
.blog-tabs-content:after{content:'';position:absolute;bottom:-1px;left:0;display:block;width:100%;height:1px;box-shadow:0 0 20px 10px #fff}
.blog-tabs-content .blog-tab{display:none}
.blog-tabs-content .blog-tab.active{display:block}
</style>
</head>
<body>
<div class="blog-tabs">
<div class="blog-tabs-header">
<div class="blog-tabs-border"></div>
<ul>
<li class="active"><a href="#blog-tab-1" blog-tab-id="1" ripple="ripple" ripple-color="#fff">tab 1</a></li>
<li><a href="#blog-tab-2" blog-tab-id="2" ripple="ripple" ripple-color="#fff">tab 2</a></li>
<li><a href="#blog-tab-3" blog-tab-id="3" ripple="ripple" ripple-color="#fff">tab 3</a></li>
<li><a href="#blog-tab-4" blog-tab-id="4" ripple="ripple" ripple-color="#fff">tab 4</a></li>
<li><a href="#blog-tab-5" blog-tab-id="5" ripple="ripple" ripple-color="#fff">tab 5</a></li>
</ul>
<nav class="blog-tabs-nav">
<span class="blog-tab-prev-icons" id="prev" ripple="ripple" ripple-color="#fff"></span>
<span class="blog-tab-next-icons" id="next" ripple="ripple" ripple-color="#fff"></span>
</nav>
</div>
<div class="blog-tabs-content">
<div class="blog-tab active" blog-tab-id="1"><b>The Incredible Hulk (2008)</b><br>Edward Norton'ın Hulk olduğu zamanları hatırlar mıyız? İşte The Incredible Hulk, bizim bu yufka yürekli yeşil devle ilk buluşmamızdı. Fena da değildi sanki, ne dersin?<br><br><b>Spider-Man: Homecoming (2017)</b><br>Sony'nin "klasikleşmiş" Örümcek Adam yorumlarının sona ermesiyle yepyeni ve taze bir Spider-Man arayışı içine giren MARVEL, beyazperdenin Peter Parker'ını üçüncü kez değiştirerek 15 yıl içinde ilk defa "sıkmayan" bir Örümcek Adam filmi üretmeyi başardı. Hem "teenager" havası, hem Iron Man göndermeleri, hem de Örümcek Adam'ın bir "çocuk" olduğunu daha fazla hissetmemiz, Homecoming'i iyi bir Spider-Man filmi haline getirdi.</div>
<div class="blog-tab" blog-tab-id="2"><b>Thor (2011)</b><br>İskandinav sinemaseverlerin bağrına bastığı MARVEL karakteri Thor'un (Chris Hemsworth tarafından başarıyla canlandırılıyor) ilk sinema filmi de olmazsa olmazlardan. Tıpkı Hulk'ın ilk filmi gibi ilk Thor filmi de kalplerde özel bir yere sahip.</div>
<div class="blog-tab" blog-tab-id="3"><b>Iron Man 2 (2010)</b><br>İlk Iron Man filmi seyirci tarafından heyecanla karşılanmış ve gişede beklentileri yerine getirmişti ama asıl olarak Robert Downey Jr.'ın ikinci baharını yaşamasına önayak olan film olarak akıllarda yer ediyor. İlkinin başarısı üzerine yeşil ışık yakılan Iron Man 2 ise ilk film kadar ses getirmese de görevini yaptı ve üçüncü film için de yolu açmış oldu.</div>
<div class="blog-tab" blog-tab-id="4"><b>Ant-Man (2015)</b><br>Ant-Man, MARVEL evrenine ve beyazperde uyarlamalarına bakınca fazla mütevazı görünüyor olabilir, ancak Paul Rudd'ın canlandırdığı Karınca Adam o kadar sempatik ve tatlı ki, onu bu listeye almasaydık kendimizi kötü hissederdik!</div>
<div class="blog-tab" blog-tab-id="5"><b>Captain America: The First Avenger (2011)</b><br>Steve Rogers, askere kabul edilmediği için umudunu bir seruma bağlamıştır ve bu serumun bir dozuyla Kaptan Amerika'ya dönüşür. Ancak yeni gelen güç ve kuvvetin bir bedeli olacaktır... Chris Evans'ın başarılı performansıyla da adından söz ettiren "kıvamında" bir beyazperde uyarlaması.</div>
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>
<script>
$(document).ready(function(){var t=$(".blog-tabs-header .active").position();function e(){t=$(".blog-tabs-header .active").position(),$(".blog-tabs-border").stop().css({left:t.left,width:$(".blog-tabs-header .active").width()})}e();var a=$(".blog-tab.active").height();function i(){a=$(".blog-tab.active").height(),$(".blog-tabs-content").stop().css({height:a+"px"})}function s(){var t=$(".blog-tabs-header .active a").attr("blog-tab-id");$(".blog-tab").stop().fadeOut(300,function(){$(this).removeClass("active")}).hide(),$(".blog-tab[blog-tab-id="+t+"]").stop().fadeIn(300,function(){$(this).addClass("active"),i()})}i(),$(".blog-tabs-header a").on("click",function(t){t.preventDefault();var a=$(this).attr("blog-tab-id");$(".blog-tabs-header a").stop().parent().removeClass("active"),$(this).stop().parent().addClass("active"),e(),n=c.filter(".active"),$(".blog-tab").stop().fadeOut(300,function(){$(this).removeClass("active")}).hide(),$('.blog-tab[blog-tab-id="'+a+'"]').stop().fadeIn(300,function(){$(this).addClass("active"),i()})});var c=$(".blog-tabs-header ul li"),n=c.filter(".active");$("#next").on("click",function(t){t.preventDefault();var a=n.next();n.removeClass("active"),n=a.length?a.addClass("active"):c.first().addClass("active"),e(),s()}),$("#prev").on("click",function(t){t.preventDefault();var a=n.prev();n.removeClass("active"),n=a.length?a.addClass("active"):c.last().addClass("active"),e(),s()}),$("[ripple]").on("click",function(t){var a=$('<div class="ripple" />'),e=$(this).offset(),i=t.pageY-e.top,s=t.pageX-e.left,c=$(".ripple");a.css({top:i-c.height()/2,left:s-c.width()/2,background:$(this).attr("ripple-color")}).appendTo($(this)),window.setTimeout(function(){a.remove()},1500)})});
</script>
</body>
</html>
CSS3 Duyarlı Izgara Oluşturma
CSS3<!DOCTYPE html>
<html>
<head>
<title>CSS3 Duyarlı Izgara Oluşturma</title>
<style type="text/css">
button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}
*{box-sizing:border-box}
html{font-family:sans-serif;line-height:1.6}
body {font-family:monospace,monospace;}
.container{display:flex;flex-wrap:wrap;max-width:960px;margin:auto}
.item{width:calc(25% - 2em);margin:1em;padding:0 1em;background:#eee;font-size:.8em;flex-grow:1;min-width:214px}
.item__full{width:calc(100% - 2em);font-size:1em}
.item__half{width:calc(50% - 2em);flex-shrink:1}
h1,h2,h3,h4,h5,h6{margin:1rem 0;line-height:1.1}
</style>
</head>
<body>
<div class="container">
<div class="item item__full">
<h1>İş ve Ev Arasındaki Zorlu Denge: Çalışan Anne Olmak</h1>
<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.</p>
</div>
<div class="item">
<p>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.</p>
</div>
<div class="item">
<p>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.</p>
</div>
<div class="item">
<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. Ç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.</p>
</div>
<div class="item">
<p>Ç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.</p>
</div>
<div class="item">
<p>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.</p>
</div>
<div class="item item__half">
<h4>Ebeveyn Olmak</h4>
<ul>
<li>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.</li>
<li>Ç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.</li>
<li>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…</li>
</ul>
</div>
<div class="item">
<p>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.</p>
</div>
<div class="item">
<p>Ç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!</p>
</div>
<div class="item">
<p>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…</p>
</div>
<div class="item">
<p>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.</p>
</div>
<div class="item">
<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>
</div>
</body>
</html>
JavaScript Akordeon Tablo
CSS3 javaScript<!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>
Kaydol:
Kayıtlar (Atom)