Blogger CSS Modal Kutusu Eklentileri

Blogger CSS Modal Kutusu Eklentileri - Bu yazımızda blog ve web sitelerine CSS modal eklentisi ekleme ile ilgili ipuçlarını paylaşacağım. Dünkü, yazımızda modal ve ipucu kutusu hakkında bilgiler paylaşmıştık. Bu yazımızda da modal bilgileri paylaşacağız, fakat bu kez sadece CSS kodları ile oluşturulmuş olan modal eklentilerini sizlerle paylaşacağım.

Neden CSS Modal Eklentisi Daha Önemli?

Dünkü, yazımızda paylaştığımız modal kutuları javaScript komut dosyaları ile çalışıyordu. Bu yazımızda paylaşacağımız bilgiler çok önemli, çünkü CSS kodları ile neler yapılabileceğinin ipuçlarını paylaşacağım. Bu yazımızda paylaştığım bilgiler ve ipuçları ile blog sitelerinde muhteşem işler yapabilirsiniz.

Bknz: Blogger Animasyonlu 32 Farklı Modal ve İpucu Kutusu

Özellikle şunu belirtmek istiyorum "bu yayın blog sitemizde bulunan en önemli ve faydalı yayınlardan biri", burada paylaşılan kodlar ile blogunuzda bulunan birçok gereksiz javaScript ve jQuery kodarından kurtulabilirsiniz. Biliyorsunuz javaScript ve jQuery kodları blog ve web sitelerinin yavaşlamasına neden olmaktadır.

CSS Kodları ile Modal Kutusu Oluşturma

Aşağıdaki kodları blogunuza ekleyerek CSS modal kutusu eklentilerini kullanabilirsiniz. Kodları eklemek için Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın. Şablon kodları sayfasında aradığınız kodları CTRL+F yardımıyla daha hızlı bulabilirsiniz.

CSS modal kutusu kodları CSS ve HTML kodlardan oluşmaktadır. HTML kodlar arasında modal kutusu kumanda yani komut butonu bulunmaktadır. Şimdi aşağıdaki adımları takip ederek blogunuza uygun olan CSS modal kutusu blogunuza entegre etmeye çalışın.

1- Blogunuzda kullanmak modal kutusunun CSS kodlarını blogunuzun şablon kodları sayfasından bulunan ]]></b:skin> veya </style> kodunu ve CSS kodlarını ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin.

2- Modal kutusu HTML kodlarını hem şablon kodları arasında ekleyerek hem blog yayınlarınızda kullanabilirsiniz. Hatta blogunuzun ana sayfasında özel bir menü de oluşturabilirsiniz.

3- CSS Modal kutusu HTML kodları içerisinde modal komut butonu bulunmaktadır. Zaten aşağıdaki kodlar arasında bu komut butonları belirtilmiştir. Bu butonları kullanmak istediğiniz yani butonun nerede görünmesini istiyorsanız oraya ekleyin.

CSS modal kutusu stil 1

.modal-box{z-index:9}
.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;visibility:hidden;opacity:0;background:rgba(0,0,0,0.8);-webkit-transition:opacity 0.1s ease-in;-moz-transition:opacity 0.1s ease-in;transition:opacity 0.1s ease-in;cursor:default}
.modal-box-content{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);max-width:800px;padding:20px;background:#fff;opacity:0}
.modal-box:target .modal-overlay,.modal-box:target .modal-box-content{opacity:1;visibility:visible}
.modal-box-close{background:#606061;color:#fff;height:30px;line-height:30px;position:absolute;right:-15px;top:-15px;padding:0 10px}

<a href="#modal-box-open">Açma Butonu</a>
<div id="modal-box-open" class="modal-box">
<a href="#modal-box-close" class="modal-overlay"></a>
<div class="modal-box-content">
<a href="#modal-box-close" class="modal-box-close">Kapatma Butonu</a>
<h2>Başlık</h2>
<p>Açıklama</p>
</div>
</div>

Ön İzleme

CSS modal kutusu stil 2

.info-box{opacity:0;visibility:hidden;position:fixed;top:0;right:0;bottom:0;left:0;text-align:left;background:rgba(0,0,0,.9);transition:opacity .25s ease}
.info-content{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer}
.info-state{display:none}
.info-state:checked + .info-box{opacity:1;visibility:visible}
.info-state:checked + .info-box .info-inner{top:0}
.info-inner{transition:top .25s ease;position:absolute;top:-20%;right:0;bottom:0;left:0;width:50%;margin:auto;overflow:auto;background:#fff;border-radius:5px;padding:1em 2em;height:50%}
.info-close{position:absolute;right:1em;top:1em;width:1.1em;height:1.1em;cursor:pointer}
.info-close:after,.info-close:before{content:'';position:absolute;width:2px;height:1.5em;background:#ccc;display:block;transform:rotate(45deg);left:50%;margin:-3px 0 0 -1px;top:0}
.info-close:hover:after,.info-close:hover:before{background:#aaa}
.info-close:before{transform:rotate(-45deg)}
@media screen and (max-width:768px){.info-inner{width:90%;height:90%;box-sizing:border-box}}
.modal-btn{cursor:pointer;background:#27ae60;display:inline-block;padding:.5em 1em;color:#fff;border-radius:3px}
.modal-btn:hover,.modal-btn:focus{background:#2ecc71}
.modal-btn:active{background:#27ae60;box-shadow:0 1px 2px rgba(0,0,0,.2) inset}

<label class="modal-btn" for="info-modal">Açma Butonu</label>
<input class="info-state" id="info-modal" type="checkbox" />
<div class="info-box">
<label class="info-content" for="info-modal"></label>
<div class="info-inner">
<label class="info-close" for="info-modal"></label>
<h2>Başlık</h2>
<p>
Açıklama
</p>
</div>
</div>

Ön İzleme

CSS modal kutusu stil 3

.modal-box{background:dodgerblue;height:1px;overflow:hidden;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:width 0.5s ease 0.5s,height 0.5s ease;transition:width 0.5s ease 0.5s,height 0.5s ease;width:0}
.modal-content{color:transparent;font-family:'Consolas',arial,sans-serif;font-size:2em;position:absolute;top:50%;text-align:center;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);-webkit-transition:color 0.5s ease;transition:color 0.5s ease;width:100%}
label{color:dodgerblue;cursor:pointer;font-family:'Consolas',arial,sans-serif;font-size:2em;position:fixed;left:50%;top:50%;text-transform:uppercase;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:color 0.5s ease 0.5s;transition:color 0.5s ease 0.5s}
input{cursor:pointer;height:0;opacity:0;width:0}
input:focus{outline:none}
input:checked{height:40px;opacity:1;position:fixed;right:20px;top:20px;z-index:1;-webkit-appearance:none;width:40px}
input:checked::after,input:checked:before{border-top:1px solid #FFF;content:'';display:block;position:absolute;top:50%;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:100%}
input:checked::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
input:checked + label{color:#FFF;-webkit-transition:color 0.5s ease;transition:color 0.5s ease}
input:checked ~ .modal-box{height:100%;width:100%;-webkit-transition:width 0.5s ease,height 0.5s ease 0.5s;transition:width 0.5s ease,height 0.5s ease 0.5s}
input:checked ~ .modal-box .modal-content{color:#FFF;-webkit-transition:color 0.5s ease 0.5s;transition:color 0.5s ease 0.5s}

<input id='button' type='checkbox'>
<label for='button'>Buraya Tıkla!</label>
<div class='modal-box'>
<div class='modal-content'>Sadece CSS! JS Yok!</div>
</div>

Ön İzleme

CSS modal kutusu stil 4

.modal-btn{background:#4caf50;color:#fff;padding:.5rem 1rem;display:inline-block;text-decoration:none;border-radius:.2rem;transition:.2s}
.modal-btn:hover{background:#009688}
body.stop-scrolling{height:100%;overflow:hidden}
.awesome-overlay{display:none;background:rgba(0,0,0,.5);position:fixed;top:0;bottom:0;left:0;right:0;z-index:998;overflow:hidden;animation:showOverlay .2s forwards}
.awesome-modal{display:none;background:#fff;padding:1rem;width:450px;max-width:80%;z-index:999;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);overflow:hidden;box-shadow:0 0 26px 0 rgba(0,0,0,.2);border-radius:2px;-webkit-animation:showModal .3s 0s forwards;animation:showModal .3s 0s forwards}
.modal-times{}
.close-modal{position:absolute;top:0.5em;right:0;color:#d6d6d6;cursor:pointer;text-align:right;width:30px;height:30px;}
.close-modal.black::before,.close-modal.black::after{height:8px;margin-top:-4px}
.close-modal::before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.close-modal::after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.close-modal::before,.close-modal::after{content:'';position:absolute;height:3px;width:40%;top:50%;left:0;margin-top:-1px;background:#d6d6d6}
.awesome-modal h1,.awesome-modal h2,.awesome-modal h3,.awesome-modal h4{margin-top:0}
.hide-modal{-webkit-animation:hideModal .2s forwards;animation:hideModal .2s forwards}
.hide-overlay{-webkit-animation:hideOverlay .2s forwards;animation:hideOverlay .2s forwards}
@-webkit-keyframes showOverlay{0%{opacity:0}100%{opacity:1}}
@keyframes showOverlay{0%{opacity:0}100%{opacity:1}}
@-webkit-keyframes showModal{0%{-webkit-transform:translate(-50%,-50%) scale(0.7);transform:translate(-50%,-50%) scale(0.7)}45%{-webkit-transform:translate(-50%,-50%) scale(1.05);transform:translate(-50%,-50%) scale(1.05)}80%{-webkit-transform:translate(-50%,-50%) scale(0.95);transform:translate(-50%,-50%) scale(0.95)}100%{-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}}
@keyframes showModal{0%{-webkit-transform:translate(-50%,-50%) scale(0.7);transform:translate(-50%,-50%) scale(0.7)}45%{-webkit-transform:translate(-50%,-50%) scale(1.05);transform:translate(-50%,-50%) scale(1.05)}80%{-webkit-transform:translate(-50%,-50%) scale(0.95);transform:translate(-50%,-50%) scale(0.95)}100%{-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}}
@-webkit-keyframes hideModal{0%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}100%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(.7);transform:translate(-50%,-50%) scale(.7)}}
@keyframes hideModal{0%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}100%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(.7);transform:translate(-50%,-50%) scale(.7)}}
@-webkit-keyframes hideOverlay{0%{opacity:1}100%{opacity:0}}
@keyframes hideOverlay{0%{opacity:1}100%{opacity:0}}
:target,:target ~ .awesome-overlay{display:block}
.awesome-modal:target{/* -webkit-animation:hideModal .2s forwards;animation:hideModal .2s forwards;*/}
a.awesome-overlay{cursor:default}

<a href="#modal1" class="modal-btn awesome-modal-trigger">Modal-1</a>
<a href="#modal2" class="modal-btn awesome-modal-trigger">Modal-2</a>
<a href="#modal3" class="modal-btn awesome-modal-trigger">Modal-3</a>

<div class="awesome-modal" id="modal1">
<a href="#"><span class="close-modal"></span></a>
<h3>Modal 1</h3>
<p><b>Başlık</b>
<br><br>
Açıklama</p>
<a href="#" class="modal-btn modal-close">Tamam</a>
</div>

<div class="awesome-modal" id="modal2">
<a href="#"><span class="close-modal"></span></a>
<h3>Modal 2</h3>
<p><b>Başlık</b>
<br><br>
Açıklama</p>
<a href="#" class="modal-btn modal-close">Kapat</a>
</div>

<div class="awesome-modal" id="modal3">
<a href="#"><span class="close-modal"></span></a>
<h3>Modal 3</h3>
<p><b>Başlık</b>
<br><br>
Açıklama</p>
<a href="#" class="modal-btn modal-close">Kapat</a>
</div>

<a href="#" class="awesome-overlay"></a>

Ön İzleme

CSS modal kutusu stil 5

input#toggle{display:none}
label.modal-btn{color:#fff;background:#f0c36d;cursor:pointer;padding:0 16px;font-weight:700;line-height:32px;margin:32px;display:block;text-align:center;width:200px}
label.modal-btnlabel.modal-btn:hover,label.modal-btn:active,label.modal-btn:focus{background:#0288D1}
.modal-box{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);min-width:300px;width:50%;background:#eee;box-shadow:0 0 3px rgba(0,0,0,.3);-webkit-filter:blur(100px);filter:blur(100px);-webkit-transition:all 0.2s cubic-bezier(0,0,0.32,1);transition:all 0.2s cubic-bezier(0,0,0.32,1);visibility:hidden;opacity:0;color:#333;padding-bottom:16px}
.modal-box h1{font-weight:100;background-color:#03A9F4;padding:16px;color:#fff;margin:0}
.modal-box h1 label{cursor: pointer;float:right;margin:0;width:15px;line-height:30px;font-size:50px;font-weight:100;top:0;right:0}
.modal-box p{padding:24px}
.modal-box p + p{padding-top:0}
.modal-box label{margin:0 auto;color:#fff}
input:checked ~ .modal-box{-webkit-filter:none;filter:none;visibility:visible;opacity:1}

<input type="checkbox" id="toggle"/>
<label class="modal-btn" for="toggle">Buton</label>
<div class="modal-box">
<h1>Başlık <label for="toggle">&times;</label></h1>
<p>Açıklama</p>
</div>

Ön İzleme

CSS modal kutusu stil 6

.modal-btn{font-family:'Yanone Kaffeesatz',Arial,sans-serif;margin:40px auto;font-size:50px;text-decoration:none;text-shadow:1px 1px 0 #fff;font-weight:400;color:#666;cursor:pointer;padding:20px 20px 20px;position:relative;top:50px;background:#eee;width:300px;display:block;text-align:center;box-shadow:1px 1px 1px #fff;border-radius:2px;transition:all 0.5s ease-out}
.modal-btn:hover{color:#333;background:#eeffff;transition:all 0.5s ease-out}
.modalbg{font-family: Arial, Helvetica, sans-serif;position:fixed;top:0;right:0;bottom:0;left:0;background:transparent;z-index:9;transition:all 2s ease-out;display:block;pointer-events:none}
.modalbg .dialog{width:400px;position:relative;top:-1000px;margin:10% auto;padding:5px 20px 13px 20px;border-radius:10px;background:-webkit-linear-gradient(#fff,#ccc);box-shadow:0 0 10px #000}
.modalbg .dialog{filter:progid:DXImageTransform.Microsoft.Shadow(color='#000',Direction=135,Strength=3)}
.modalbg:target{display:block;pointer-events:auto;background:rgba(0,0,0,0.8);transition:all 0.5s ease-out}
.modalbg:target .dialog{top:-20px;transition:all 0.8s ease-out}
.modal-close{background:#606061;color:#fff;line-height:25px;position:absolute;right:-12px;text-align:center;top:-10px;width:24px;text-decoration:none;font-weight:bold;border-radius:12px;box-shadow:0 0 10px #000;transition:all 0.5s ease-out}
.modal-close{filter:progid:DXImageTransform.Microsoft.Shadow(color='#000',Direction=135,Strength=3)}
.modal-close:hover{background:#00d9ff;transition:all 0.5s ease-out}
.fineprint{font-style:italic;font-size:10px;color:#646}

<a class="modal-btn" href="#openModal">Açma Butonu</a>
<div id="openModal" class="modalbg">
<div class="dialog">
<a href="#close" title="Close" class="modal-close">X</a>
<h2>Başlık</h2>
<p>Açıklama</p>
</div>
</div>

Ön İzleme

CSS modal kutusu stil 7

#target-content{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;-webkit-transition:opacity 200ms;transition:opacity 200ms}
#target-content:target{pointer-events:all;opacity:1}
#target-content #target-inner{position:absolute;display:block;padding:48px;line-height:1.8;width:70%;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);box-shadow:0 12px 24px rgba(0,0,0,0.2);background:white;color:#34495E}
#target-content #target-inner h2{margin-top:0}
#target-content #target-inner code{font-weight:bold}
#target-content a.close{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:#34495E;opacity:0.5;-webkit-transition:opacity 200ms;transition:opacity 200ms}
#target-content a.close:hover{opacity:0.4}
#modal-btn{position:absolute;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);padding:16px 24px;border-radius:1px;text-decoration:none;font-size:24px;display:block;color:white;background-color:#34495E;text-align:center;font-weight:100;-webkit-transition:box-shadow 200ms;transition:box-shadow 200ms;border-radius:4px}
#modal-btn:hover{box-shadow:0 12px 24px rgba(0,0,0,0.2)}

<a href="#target-content" id="modal-btn">Açma Butonu</a>
<div id="target-content">
<a href="#" class="close"></a>
<div id="target-inner">
<h2>Başlık</h2>
Açıklama
</div>
</div>

Ön İzleme

Bu yazımızda blog ve web sitelerinde CSS modal kutusu ekleme ile ilgili bilgiler paylaştık. Bu yazımızda da olduğu gibi özellikle blog siteleri için CSS kodları ile tasarlanmış eklentiler blog sitenizi yavaşlatmaz aksine JS ve jQuery kodlarına göre daha hızlı çalışır. Buradaki amacımız blog sitelerinin bir eklenti çöplüğü olmaktansa kendi içerisindeki CSS kodlarını kullanarak ortak stil dosyası yapabilirsiniz. Bu yayın ile ilgili soru ve görüşleriniz için yorum bırakabilirsiniz. Yüzlerce muhteşem blog eklentileri için bizi takip etmeye devam edin.