Adsense Pin Kodu Nedir? Pin Nasıl Alınır?

adsense-pin-nasıl-alınır

 Google adsense web dünyasında olan herkesin ilk hedefi olan para kazanma şeklidir. Bu kadar popüler olunca da bir çok kriteri yerine getirmek zorunda kalıyorsunuz. Sitenize adsense kodunu eklemeniz yetmiyor kazancınız 40 tl sınırını aşınca Google tarafından pin kodu gönderiliyor. Bu pin kodu size özel oluyor ve hesabınızdaki parayı çekebilmeniz için doğrulama işlemini yapmanız gerekiyor.

Google Adsense Pin Nedir? Ne İşe Yarar?

 Pin doğrulama işlemi tarafınıza mektupla gönderilen 4-6 haneli şifredir. Gönderilen şifre maksimum 3-4 hafta içinde elinize ulaşır. Eğer ulaşmazsa tekrar yeni pin isteme hakkında sahipsiniz. 3 kere de pin ulaşmazsa google adsense ile pin sorun giderici üzerinden bağlantıya geçerek doğrulama işlemini tamamlayabilirsiniz. Google, pin doğrulaması ile hesap sahibinden emin olmayı amaçlayarak çoklu hesap açılmasını önlemek ister.

Pin Doğrulaması Nasıl Yapılır?

adsense-pin-kodu

 Biriken kazancınız 10$ sınırını aştığında size yukarıdaki gibi bir uyarı gelir. İşleme tıkladığınızda pin kodunun gönderildiğini ve ülke şartlarına göre 3-4 hafta içinde geleceği belirtilir. Zarf elinize ulaştığında size özel pin kodunuzu girerek son aşamayı da tamamlayabilirsiniz. Zarf 15x20 cm boylarında ince bir döküman şeklindedir. Belirli bir süre bekledikten sonra dağıtıcıya kendiniz ulaşmanız faydalı olur. Kaybolma ihtimalini göz önünde bulundurarak işinizi sağlama alın.

Adsense Pin Kodum Ulaştı!

 Uzun zamandı bende bu pin kodunu bekliyordum. İlk pin kodu gönderildiğinde İstanbul'daki eski adresim sistemde kayıtlı kaldığından oraya gönderilmişti. Tanıdıkları bu konuda uyarsam da 3 hafta bekledikten sonra gelmeyeceğini anladım ve yeni pin istedim. Pin kodunu istemeden önce adresimi güncelleyerek işimi garantiye aldım. Eğer adresinizde hata varsa güncellemek için Google adsense ana sayfasından Ödemeler sekmesine tıklayın. Oradan Ayarlar alanında "Ayarları Yönet" butonuna tıklayın ve ödeme profilinden adres güncelleme işlemini yapın.

Pin ile ilgili sorunlarınız için buradan detaylı bilgi alabilirsiniz.

Bu yazı Seo Teknikleri ve Blog İpuçları | DHY tarafından yazılmıştır.
✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵

Türkiye Kart Nedir? Ne Zaman Kullanılmaya Başlanacak?

Türkiye-kart-kullanım-tarihi

 Türkiye genelinde geçerli ortak ödeme platformu Türkiye Kart nedir? Türkiye kart ile amaçlanan kolaylıklar nelerdir ve ne zaman kullanmaya başlanacak? Ana hatlarıyla tüm bilgileri bu yazımda bulabilirsiniz.

 Destek veren PTT, Turkcell, Denizbank, Türk Telekom, Vakıf Katılım ve İBB BELBİM kurumları ile ortak ödemeyi kapsayan teknoloji geliştirildi. Başbakan Binali Yıldırım tarafından  "Türkiye kartla her yere tek ödeme" olarak özetlenen ve büyük kolaylıklar sağlayacağına inanılan iyi bir proje. Böylesi bir teknoloji Dünyada sadece 3-4 ülkede kullanılıyor ve sistem hesabı olmayanları da kapsıyor.

 Türkiye'nin hangi il ve ilçesinde olursanız olun kullanabileceğiniz ve tüm işlemlerinizi yapabileceğiniz bir kolaylıktan bahsediliyor. Ulaşımda, alışverişte ve para transferinde tüm ihtiyaçlarınızı Türkiye Kart ile halledebileceksiniz. En önemli özelliklerinden biri de herhangi bir banka hesabı olmayanlarında kullanmasıdır.

türkiye-kart-görsel

Türkiye Kart Kullanım Alanları Nelerdir?

1) En beğendiğim özelliği ulaşımda kullanılıyor olmasıdır. Memleketinizden İstanbul veya İzmir gibi Büyük şehirlere gittiğinizde ulaşım araçlarını kullanabilmek için geçerli kartlardan edinmeniz gerekir. Kartınız olsa bile doldurmak için uzun kuyruklara girmeniz gerekebilir. Türkiye kart burada devreye girerek her ulaşım aracında kullanıma açık olacak ve sizi türlü türlü stresten kurtaracak. Ayrıca taksi ve dolmuş gibi serbest çalışan esnaflarda sisteme dahil olarak vatandaşa hizmette bulunabilecek.

2) İşte güzel bir haber daha. Bu kartı online alışverişlerinizde kullanabilir ve limitini kendiniz ayarlayabilirsiniz. Alışveriş ödemelerinizde kullanabilmeniz için tüm pos cihazlarında kullanım hakkına sahip olacak. Burada dikkat edilmesi gereken nokta bilinçli tüketici olabilmek. Çünkü eğer limiti kendimiz belirliyorsak ihtiyaç olmayan giderler ortaya çıkabilir veya bütçemizden fazlasını harcayarak zor duruma düşebiliriz.

3) Para transfer işlemlerinde kullanılması işleriniz çok kolaylaştıracak. Çünkü tüm Atm'lerde kullanılırken işlemlerden dolayı hiçbir ücret alınmayacak. Kredi kartı özelliği olmadığı için nakit avans dışında para aktarma ve yatırma işlemlerinizi nakit olarak yapabilirsiniz. Banka hesabı olmayanlar herhangi bir atm aracılığı ile kartlarına para yükleyebilecek.

Önemli: Türkiye kart bu işlemler dışında müzelerde kullanılabilir olacak ve temini için PTT'ye başvurulacak. Kartı edindikten sonra dolum işlemleri de yine Ptt şubelerinden yapılacak. Türkiye genelinde kartın kullanılması için verilen tarih 2018 yılının Temmuz ayı. Bu tarihten itibaren kartınızı Ptt'den edinebilir ve kolaylıklarından faydalanabilirsiniz.

 Hayatın hızlı akışına kolaylıklar getiren tüm yenilikleri destekliyorum. Bu tür projeler Türkiye gibi alışverişte ve para işlemlerinde aktif ülkelerin çok işine yarayacaktır. Diğer bankalar bu konuda neler düşünüyor veya nasıl hamleler yapacaklar bilmiyorum ama altyapısı ile ilgili sorunlar yaşanmadığı sürece iyi bir proje olarak görüyorum. Umarım daha büyük atılımları peşinden getirir.

Bu yazı Seo Teknikleri ve Blog İpuçları | DHY tarafından yazılmıştır.
✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵

Blogger Renkli Etiketler Eklentisi

blogger-renkli-kategoriler-kodu

 Blogger renkli etiketler eklentisi - Blog sayfamda kullandığım ve bir kaç kişinin sorduğu bir eklentiydi. Etiketler liste halinde sıralandığında her etiket için ayrı bir renk vererek şık bir görünüm katar. Etiketlerin üzerinde mause ile gezince renklerin harekete geçtiğini göreceksiniz. Eğer her etiketteki kayıt sayısını göster derseniz kayıt sayısı verilen renge bürünür. Blog sayfanızda etiketleri kullanıyorsanız bu eklenti hoşunuza gidecektir. Sadece etiketlerin hepsini seçmek yerine belli başlı en fazla 10 etiket seçerek kategorilemek daha iyi görünecektir.

renkli-kategoriler-görünüşü

 Renkli etiketler eklentisini blog sayfanıza uyarlamak için Tema> HTML'yi Düzenle alanında ctrl+f yardımıyla </head> kodunu aratarak hemen üstüne aşağıdaki kodu ekleyin ve kaydedin. Daha sonra Gadget Ekle üzerinden etiketler eklentisini gerekli ayarları yaparak ekleyin.

<style type="text/css">

/* Renkli Kategori CSS */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:0;}
.label-count {white-space:nowrap;display:inline-block;}
#sidebar-wrapper .Label li{position:relative;background:#fff;color:#444;padding:0;margin:0;text-align:left;width:100%;transition:all .3s}
#sidebar-wrapper .Label li:hover {background:#fff;color:#cf4d35;}
#sidebar-wrapper .Label li:before {content:"";position:absolute;width:2px;height:100%;background:#4fafe9;transition:all .2s ease-in-out;}
#sidebar-wrapper .Label li:hover:before {width:100%;}
#sidebar-wrapper .Label li a{padding:0 0 0 20px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all .3s}
#sidebar-wrapper .Label li a:hover {color:#fff;}
#sidebar-wrapper .Label li span{float:right;height:42px;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}
#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {background:#ca85ca;}
#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {background:#e54e7e;}
#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {background:#61c436;}
#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {background:#f4b23f;}
#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {background:#46c49c;}
#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {background:#607ec7;}
#sidebar-wrapper .label-size{background:#45a2db;position:relative;display:block;float:left;margin:0 1px 1px 0;font-size:11px;transition:all .3s}
#sidebar-wrapper .label-size a{display:inline-block;color:#fff;padding:4px 6px;font-weight:400;transition:all .3s}
#sidebar-wrapper .label-count{display:inline-block;background:#3a91c7;color:#fff;padding:5px 8px;text-align:center;transition:all .3s}
#sidebar-wrapper .label-size a:hover{color:#fff;text-decoration:underline}
#footer-wrapper .label-size{background:#2e2e2e;color:#eee;display:block;float:left;margin:0 1px 1px 0;font-size:11px;transition:initial;}
#footer-wrapper .label-size a{display:inline-block;color:#eee;padding:4px 6px;font-weight:400;transition:all .3s}
#footer-wrapper .label-size a:hover {color:#fff;text-decoration:underline}
#footer-wrapper .label-count{white-space:nowrap;background:#2e2e2e;display:inline-block;color:#eee;padding:5px 8px;text-align:center}
#footer-wrapper .Label li{padding:5px 0;margin:0;text-align:left;border-bottom:1px solid #444;transition:all .3s}
#footer-wrapper .Label li a {color:#eee;transition:all .3s;}
#footer-wrapper .Label li span{background:#2e2e2e;float:right;color:#eee;margin:0;padding:4px 6px;text-align:center;font-size:13px;font-weight:400;transition:all .3s;}
#footer-wrapper .Label li a:hover,#footer-wrapper .Label li:hover,#footer-wrapper .Label li span:hover {color:#fff;text-decoration:underline}
</style>

✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵

Roket Efektli Yukarı Çık Eklentisi

blogger-roket-yukarı-çık-düğmesi

 Roket efektli yukarı çık eklentisi - Blog sayfalarında eklenti kullanılacaksa en işe yarayanlardan biri yukarı çık eklentisidir. Çoğu blog sayfasında farklı fikirlerle yukarı çıkma eklentisi kullanıldığını görmüştüm. Bu tür eklentiler hem göze hoş gelir hem de sayfayı ziyaret etmek için kolaylık sağlar. Roket şeklindeki bu eklenti ziyaretçilerin çok hoşuna gidecektir. Eklenti aşağı indikçe ortaya çıkıyor ve siyah beyaz bir görünümde oluyor. Mause ile üzerine geldiğinizde renkleniyor ve tıkladığınızda ateşlenerek yukarı çıkıyor.


 Ziyaretçilerinize sayfanızı kolay gezdirmek adına roket efektli bu eklentiyi nasıl kuracağınıza geçelim. İki yere ekleyeceğiniz kod ile hemen kullanabilirsiniz. Öncelikle ]]></b:skin> kodunun üstüne aşağıdaki kodu ekleyin.

/* Back to Top Roket Efektli */
#scrolltop{display:none}
#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#rocketmeluncur i{display:block;margin-top:48px;height:14px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0}
#rocketmeluncur:hover{background-position:50% -62px}
#rocketmeluncur:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1}
#rocketmeluncur.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#rocketmeluncur.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}

Daha sonra ikinci aşamada </body> kodunun üstüne aşağıdaki kodu ekleyin ve kaydedin.

<a href="javascript:void(0);" id="rocketmeluncur" class="showrocket" ><i></i></a>
<script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketmeluncur").slideUp(500):jQuery("#rocketmeluncur").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketmeluncur"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,t.style.left=n+l+"px"}else t.style.left="auto",t.style.right="10px"}),jQuery("#rocketmeluncur").click(function(){jQuery("html, body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)});
//]]>
</script>

✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵

Blogger Detaylı Kullanım Ayarları #1

blogger-bilinmesi-gereken-ayarlar

 Blogger detaylı kullanım ayarları - Blogger kullanıcıları için sunulmuş bir çok kolaylık mevcuttur. Çoğu blog yazarı genel anlamda ayarları yapılandırabilir ve kullanım için yeterli bilgiye sahiptir. Ancak tam anlamıyla ayarları bilmeyenler epey kalabalık sayıdadır. Çok önemli özellikleri ve kullanım kolaylıklarını gözden kaçırmış olanlar için önemli ve fayda sağlayacak blog ayarlarını derlemek istedim. Umarım işinize yarayacak bilgiler bulabilirsiniz.

 1)  Kayıt Şablonu Ne İşe Yarar?

kayıt-şablonu-doldurma


  Ayarlar/ Yayınlar, yorumlar ve paylaşım sekmelerini takip ettiğinizde Kayıt Şablonu göreceksiniz ve Ekle diyerek kullanmaya başlayabilirsiniz. Blogger servisinin en önemli özelliklerinden biridir. Buraya ekleyeceğiniz her şey her yeni yayında görünür olacaktır. Bu nedenle bu alana yazının size ait olduğunu gösteren bir imza atabilirsiniz.
Bu yazı <b><a href="https://dogushakanyilmaz.blogspot.com/" target="_blank">Doğuş Hakan Yılmaz</a></b> tarafından yazılmıştır.
  Bu şekilde ekleyeceğiniz kod yazı alanında "Bu yazı Doğuş Hakan Yılmaz tarafından yazılmıştır." olarak görünür. Bu tür bilgi istemiyorsanız adsense reklamınızı buraya ekleyebilirsiniz. Böylece her yazının sonunda reklamınız görüntülenir. Boyutunu seçtiğiniz reklam kodunu kopyaladıktan sonra kayıt şablonuna yapıştırarak kaydettiğinizde her yazının sonunda reklamınız görüntülenir. Bunların dışında da yorum yapmayı ihmal etmeyin, beğendiyseniz yazıyı paylaşın veya yazılarıma abone olun gibi tavsiyeler eklenebilir.

Not: Kayıt şablonu için vereceğiniz bilgilere link vermeyi bilmiyorsanız yazı alanına eklemek istediğiniz açıklamayı girin ve gerekli linkleri verdikten sonra Oluştur/HTML kısmında HTML sekmesine tıklayarak açıklamanın kodlu halini kopyalayarak kayıt şablonuna ekleyin.

 2)  Yorum Formu Şablonu Nasıl Kullanılır?

yorum-formu-iletisi


  Sayfanızdaki yazıyı ziyarete gelen kişilerin yorum bırakmadan önce göreceği alandır. Bu iletiyi okuduktan sonra yorum yapılacağı için önemli derecede kullanılması gereken bölümdür.
Ayarlar sekmesinde Kayıt şablonu ile aynı alanda alt tarafta yer alan "Yorum formu iletisi" bölümüne ekle diyerek ziyaretçilere bazı ipuçları ve bilgiler verebilirsiniz. Hatta uyarılar yaparak nasıl yorumlar yapmaları gerektiğini söyleyebilirsiniz. Bu uyarı ile olumlu veya olumsuz da olsa sizin istediğiniz şekilde olacaktır. Yorumlara link bırakılmamasını, küfür edilmemesini söyleyebilirsiniz. Burada önemli olan denetleme yapmaktır. Gelen yorumları denetleyerek yayına alırsanız daha kesin çözüm sağlamış olursunuz. Benim yorum formu iletim şöyle;

YORUM YAPARAK KATKIDA BULUNABİLİRSİNİZ...
1) Yaptığınız yorumun, yazıyla alakalı olmasına özen gösteriniz.
2) Yazım ve dil bilgisi kurallarına mümkün olduğunca dikkat ediniz.
3) Kullandığınız üslubun sizi yansıttığını unutmayınız.
4) Yorumunuza ikon eklemek için Emoticon butonuna tıklayın. 

 3)  E-Posta ile Yazı Gönderme

eposta-yazı-ayarı


  Özellikle kişisel blog yazarları gibi anlık paylaşımlarda bulunma ihtimali yüksek sayfalarda çok işe yarar. Önemli bir anı veya fikri paylaşmak istediğinizde bilgisayarınız yanınızda olmasa bile ayarladığınız e-posta adresi ile hemen yazı yayınlayabilirsiniz. Bu ayarı aktifleştirmek için Blogger kumanda panelinizde Ayarlar/ E-Posta bölümüne tıklayın.
En üstte dogushakanyilmaz @blogger.com Yapmanız gereken secretWords yazan yere sadece sizin bildiğiniz bir kelime eklemeniz. Bu şekilde ayarladıktan sonra yazılarınızı oluşturduğunuz mail aracılığı ile kolayca yayınlayabilirsiniz. Yazıların hemen yayınlanması için E-postayı hemen yayınla seçeneğini işaretlemeyi unutmayın. 

 4)  İçerikleri Yedekleyin veya Aktarın Ayarları


blog-yazılarını-kopyalama


  Blogger kullanıpta bu özelliği bilmeyen çoktur. Aslında o kadar önemlidir ki blog sayfanızın başına birşey geldiğinde kıymetini anlıyorsunuz. Bu ayara erişmek için Ayarlar/ Diğer sekmesini tıklamalısınız. En azından hafta da bir kere blog sayfanızın yedeğini almayı ihmal etmeyin. Aynı şekilde daha önce yedeğini aldığınız ve başka bir blog sayfasında kullanmak istediğiniz yazılar için de aktarma yapabilirsiniz. Düzenli aralıklarla blog sayfanızın yedeğini alarak sayfanızı garantiye alın derim. 

 5)  Yazı Yayınlamak İçin Program Yapma


blog-yazılarını-programlayın


  İçeriğinizi düzenledikten sonra yayınlama aşamasına geldiğinizde kaydederek çıkarsanız taslak olarak eklenir. Siz ne zaman isterseniz Yayınla butonuna basarak paylaşıyorsunuz. Bir başka yol da otomatik değil de program yaparak yazı yayınlamaktır. Yazının yayınlanacağı tarih ve saati elle girerek "Yayınla" butonuna bastığınızda içerik zamanı gelince kendiliğinden yayına alınacaktır. Bu program ne zaman işe yarar? Blog sayfanızla ilgilenemeyeceğiniz zamanlarda yazıları programlayarak kendiliğinden paylaşabilirsiniz. 


google-plus-otomatik-paylaşım


Not: Hatta Ayarlar/ Yayınlar, yorumlar ve paylaşım sekmesinden en altta yayınlar Google+ profilinde otomatik yayınlansın seçeneğini evet olarak ayarlarsanız yazınız aynı zamanda da sosyal medya hesabınızda paylaşılmış olur. 

✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵

Blogger Statik Sayfasına CSS Sıkıştırma Aracı Kurulumu

blogger-statik-sayfasına-css-kodu

Blogger Statik Sayfasına Css Sıkıştırma Aracı Kurulumu - CSS kodunu sıkıştırmak seo açısından çok kıymetli bir hareket. Sayfanız ne kadar hızlı açılırsa o kadar iyi demektir. Hızlı açılması içinde sade eklentiler kullanmalı ve gereksiz kodlardan kurtulmalıyız. CSS sıkıştırma aracı eklentilerin boyutunu küçülterek kapladığı alandan tasarruf sağlıyor. Blogger sabit sayfalarında HTML bölümüne kolaylıkla ekleyerek kullanabileceğiniz şekilde ayarlanmıştır. Eklentilerle sık sık uğraşıyorsanız ve bolca eklenti kullanıyorsanız css kodlarını sıkıştırmak fayda sağlayacaktır.

 Blog sayfanıza bu aracı eklemeniz için yeni bir sayfa açmanız ve HTML bölümüne aşağıdaki kodu ekleyip kaydetmeniz yeterlidir. Sayfanızı açtığınızda kodları sıkıştırmak üzere aracın hazır olduğunu göreceksiniz. Kod içinde kırmızı ile gösterdiğim yerleri Türkçeleştirebilirsiniz.

<div id="cssminifier">
<style scoped="" type="text/css">
#cssminifier{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgba(0,0,0,0.05)}
#cssminifier textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font:normal 13px 'Courier New',Monospace;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);border-radius:5px 5px 0 0;resize:none}
textarea:focus{background-color:#FFF;color:#303030}
#cssminifier .box{margin:10px auto 30px;color:rgba(255,2255,255,.6);}
#cssminifier .box p{margin:0 0 2px}
#cssminifier button{cursor:pointer;}
#cssminifier .col{width:48%;margin:0 auto 30px}
#cssminifier .left{float:left;margin-left:1%}
#cssminifier .right{float:right;margin-right:1%}
#cssminifier .button-group{background:#2980b9;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px}
#cssminifier button,#cssminifier button[disabled]:active{background:rgba(255,255,255,0.2);text-align:center;color:#fefefe;display:inline-block;padding:6px 12px;font-size:14px;font-weight:400;line-height:1.471;border-radius:4px;margin:0 5px;border:0;transition:all .1s}
#cssminifier button:hover,#cssminifier button:active{background:#fff;color:#2980b9}
#cssminifier button[disabled],#cssminifier button[disabled]:active{background:#fff;}
#cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{display:inline-block;margin:0 0 0 10px;vertical-align:middle;border:none;outline:none}
#cssminifier br{display:none}
</style>
<span class="clear"></span>
<textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea>
<div class="button-group">
<div class="box">
<input class="opt1" id="stripAllComment" type="checkbox" /> 
<label for="stripAllComment">Strip all comments</label>
<input class="opt2" id="superCompact" type="checkbox" /> 
<label for="superCompact">Super compact</label>
<input class="opt3" id="betterIndentation" type="checkbox" /> 
<label for="betterIndentation">Keep indentation</label>
<input checked="" class="opt4" id="keepLastComma" type="checkbox" /> 
<label for="keepLastComma">Remove the last semicolon</label>
</div>
<button onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button>
<button onclick="clearField(&quot;cssField&quot;);">Clear Field</button> 
<button onclick="selectAll(&quot;cssField&quot;);">Select All</button>
</div>
<div class="clear">
</div>
<script type="text/javascript">
function get(e){return document.getElementById(e)}function highlightCode(e){if(hc.checked){var a=e.innerHTML;a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/\'(.*?)\'/g,"<span class='st'>'$1'</span>").replace(/\"(.*?)\"/g,"<span class='st'>\"$1\"</span>").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g,"$1<span class='pr'>$2</span>:<span class='vl'>$3</span>$4").replace(/<span class='pr'>\{/g,"{<span class='pr'>")}),a=a.replace(/&lt;(.*?)('|")(.*?)('|")&gt;/g,function(e){return e.replace(/'(.*?)'/g,"<span class='vl'>'$1'</span>").replace(/"(.*?)"/g,"<span class='vl'>\"$1\"</span>")}),a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/([\(\)\{\}\[\]\:\;\,]+)/g,"<span class='pn'>$1</span>").replace(/\!important/gi,"<span class='im'>!important</span>")}),a=a.replace(/\/\*([\w\W]+?)\*\//gm,"<span class='cm'>/*$1*/</span>"),e.innerHTML="<code>"+a+"</code>",hr.style.display="block",rt.style.display="block"}else hr.style.display="none",rt.style.display="none"}function compressCSS(e){var a=get(e),c=/@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\}/gi,n=a.value,t=n.length;n=sa.checked||sc.checked?n.replace(/\/\*[\w\W]*?\*\//gm,""):n.replace(/(\n+)?(\/\*[\w\W]*?\*\/)(\n+)?/gm,"\n$2\n"),n=n.replace(/([\n\r\t\s ]+)?([\,\:\;\{\}]+?)([\n\r\t\s ]+)?/g,"$2"),n=sc.checked?n:n.replace(/\}(?!\})/g,"}\n"),n=bi.checked?n.replace(c,function(e){return e.replace(/\n+/g,"\n  ")}):n.replace(c,function(e){return e.replace(/\n+/g,"")}),n=bi.checked&&!sc.checked?n.replace(/\}\}/g,"}\n}"):n,n=bi.checked&&!sc.checked?n.replace(/@(media|-w|-m|-o|keyframes)(.*?)\{/g,"@$1$2{\n  "):n,n=cm.checked?n.replace(/;\}/g,"}"):n.replace(/\}/g,";}").replace(/;+\}/g,";}").replace(/\};\}/g,"}}"),n=n.replace(/\:0(px|em|pt)/gi,":0"),n=n.replace(/ 0(px|em|pt)/gi," 0"),n=n.replace(/\s+\!important/gi,"!important"),n=n.replace(/(^\n+|\n+$)/,""),a.value=n,hr.innerHTML="/* "+(t-n.length)+" of "+t+" unused characters has been removed. */\n"+n.replace(/</g,"&lt;").replace(/>/g,"&gt;"),highlightCode(hr)}function clearField(e){var a=get(e);a.value="",a.focus()}function selectAll(e){get(e).focus(),get(e).select()}var hc=get("highlightCode"),sa=get("stripAllComment"),sc=get("superCompact"),cm=get("keepLastComma"),bi=get("betterIndentation"),bs=get("breakSelector"),tt=get("toTab"),to=get("tabOpt").getElementsByTagName("input"),sb=get("spaceBetween"),ip=get("inlineSingleProp"),rs=get("removeLastSemicolon"),il=get("inlineLayout"),si=get("singleBreak"),hr=get("highlightedResult"),rt=document.getElementsByTagName("h2")[1];
</script>
</div>



Kaynak: Arlina Design

✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵