Web Abisi: Blogger Eklentileri

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqktwVPnTeMG7QEypMxh7tFiYLegElcSwUZ6LesMQRPYwD7jlQMebJcIyHJq-9gcgQ_drkXP2L8A_g4kBn3qx2HmlyU2Ri5REF7SYiiZaIyDsDMNGyEc-i_odhKs6D52FBMFpqdGQHmQjG/s1600/blogger-devamini-oku-blogeklentileri-com.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqktwVPnTeMG7QEypMxh7tFiYLegElcSwUZ6LesMQRPYwD7jlQMebJcIyHJq-9gcgQ_drkXP2L8A_g4kBn3qx2HmlyU2Ri5REF7SYiiZaIyDsDMNGyEc-i_odhKs6D52FBMFpqdGQHmQjG/s1600/blogger-devamini-oku-blogeklentileri-com.png" /></a></div>
 
Çoğu ziyaretçi siteye girdiğinde hızlı ve sade olmasını ister. Bunların içinden hızlı açılmayan bloglar için işe yarayacak bir eklentiye değineceğiz. Ziyaretçi siteye girdiğinde ilk işi istediği şeye ulaşmak olacak ama site yavaş olduğundan ya siteden çıkacak ya da sabırlı bir şekilde bekleyecek. Bu eklentiyi eklediğimizde site %100 hazırlanana kadar açılış animasyonu ekrana çıkıyor. Yani %100'e kadar dolan bir ekran karşılarına çıkacak. 
İlk olarak <b style="-webkit-transition: all 0.5s ease; background: 0px 0px rgb(255, 255, 255); border: 0px; box-sizing: border-box; color: #5e5e5e; font-family: Calibri; font-size: 15px; line-height: 26px; outline: 0px; padding: 0px; transition: all 0.5s ease; vertical-align: baseline;"></head> kodunu temamızdan buluyoruz. Hemen üzerine aşağıdaki kodları yerleştiriyoruz. 
 
 
<blockquote class="tr_bq">
<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/> </blockquote>
<blockquote class="tr_bq">
<script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js' type='text/javascript'/></blockquote>
 
Daha sonra <b style="-webkit-transition: all 0.5s ease; background: 0px 0px rgb(255, 255, 255); border: 0px; box-sizing: border-box; color: #5e5e5e; font-family: Calibri; font-size: 15px; line-height: 26px; outline: 0px; padding: 0px; transition: all 0.5s ease; vertical-align: baseline;"></body> kodunu buluyoruz ve üzerine aşağıdaki kodları yerleştiriyoruz. 
 
<blockquote class="tr_bq">
<script>
QueryLoader.selectorPreload = &quot;body&quot;;
QueryLoader.init(); </script></blockquote>
 
Ve son olarak açılış animasyonumuza şekillendirme vakti geldi. Temamızdan <b style="-webkit-transition: all 0.5s ease; background: 0px 0px rgb(255, 255, 255); border: 0px; box-sizing: border-box; color: #5e5e5e; font-family: Calibri; font-size: 15px; line-height: 26px; outline: 0px; padding: 0px; transition: all 0.5s ease; vertical-align: baseline;">]]></b:skin> kodunu buluyoruz ve hemen üzerine aşağıdaki kodları ekliyoruz. 
 
<blockquote class="tr_bq">
.QOverlay {
 background-color: #000000;
 z-index: 9999;
}

.QLoader {
 background-color: #CCCCCC;
 height: 1px;
}

.QAmt {
 color:#FF530D;
 font-size:50px;
 font-weight:bold;
 line-height:50px;
 height:50px;
 width:100px;
 margin:-60px 0 0 -50px; 
 
 
}</blockquote>
 
Hepsi bu kadar. Eğer eklentinin sitenizi yavaşlattığını düşünüyorsanız kaldırabilirsiniz. Belirtmek isteriz ki script kodları ne kadar küçük boyutta olurlarsa olsunlar siteleri yavaşlatabilirler. Renklendirme gibi ayarları css kodlarıyla oynayarak ayarlayabilirsiniz. 
<pre style="-webkit-transition: all 0.5s ease; background: 0px 0px rgb(38, 41, 43); border: 0px; box-sizing: border-box; color: white; font-size: 15px; line-height: 26px; margin-bottom: 10px; margin-top: 15px; outline: 0px; overflow: hidden; padding: 0px 7px; position: relative; transition: all 0.5s ease; vertical-align: baseline; word-wrap: normal;"><span class="line-number" style="-webkit-transition: all 0.5s ease; background: 0px 0px; border-right-color: rgb(62, 87, 112); border-right-style: solid; border-width: 0px 2px 0px 0px; box-sizing: border-box; color: #ecf0f1; display: block; float: left; margin: 0px 1em 0px -1em; min-width: 2.5em; outline: 0px; padding: 0px; text-align: right; transition: all 0.5s ease; vertical-align: baseline;"></pre>