Blogger Sosyal Medya Widget

Biz site sahipleri için sosyal medya eklentileri olmazsa olmazlardandır.Şık ve kullanışlı eklentiler kullanmak isteriz.İşte bu yüzden bende size bu kriterlere uyan iki adet eklenti buldum ve sizlere sunmak istiyorum.

Umuyorum ki çok işinize yarayacak ve çok beğeneceksiniz.

-------------------------------------------------------------------------------------------

<div id="mbl-social-hover"> <div class="tota2"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIcFHLOVNwSqJIzihUYk2o8LWD5W3Ql2LV27n55aaBvFj66MgDRdSQ11OALx6N9exuptFlRKnaBhw33tDf8L6o8OWcao3mA1_mBcxoOeDTZh1xXejwFnDLDDPm6CVqgUB1kw9k8eh_foQ/s1600/SUB-BAN.png" /></div> <div id="links"> <a href="http://twitter.com/Mcahitp" class="twitter" title="Twitter" target="_blank"><div class="tota"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLJUMCxomHNBc4It60kfD42-qz4Wo0mRlt1S87ljnCl1dMgbpfqcg6xpNzdMOcYhSYJxXx4d9ZgQ3AhlcptTAfJ9AHvAClj1LYTNAK6L1tDIRZhSQsWpLeDG5UGJLG6WypoVoZKcvHYtc/s1600/twitter.png" /></div> </a> <a href="http://www.facebook.com/408085549280135" class="facebook" title="Facebook" target="_blank"><div class="tota"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLqNfsOt02zew0NaC6bWU_qRjLk-qnhGPLCercB3sOU3hB8p2H_7n3juHrBfyJux9V8UXSTU7h5Nh1GFk5LWJgfY4KhH7i0eLzo1fe1y5FUbEDSH92XhEhKM-hElhwr8Z2qr04fQnxUFU/s1600/FB.png" /></div> </a> <a href="https://plus.google.com/u/0/+MücahitPolat1992" class="google" title="Google Plus" target="_blank"><div class="tota"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKjF3cqAS0rFOhvaaSVyBojfUctaxDNDU8HAc-zzlXSP0CNl8li8LvcOGQ3T8O9Alu87gsktpkutbWRBjYFuVysDgyHHFj2MU80j9DvvFyC9Nx_et91OHHm2L0mmDY4WpAi_7qKQZ79X4/s1600/google.png" /></div> </a> <a href="http://pinterest.com/mcahitpolat/" class="pinterest" title="Pinterest" target="_blank"><div class="tota"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGqvVQa8RrkhKIuqEFYmK7L4xUG_cqX4U83bmUS9PU5NNLK9yGCa6LIf-S1A-VhI67O3LkjPINdyoLRUgZRlhNA2wYWbblZq9LYF5pZvJbU7Ms6yxKKc1GbarU3kZbsZ5r8yh6SzBUvWI/s1600/pin.png" /></div> </a> <a href="http://feeds.feedburner.com/BilgiHakkndaAradnzHerey" class="rss" title="Feedburner" target="_blank"><div class="tota"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKQ2UpysB3o8Fp2HW0bOZlR8PjY6llKdSWlVe_S-dEurs0gOYgikbnu_s3bq5MdrNFwauLthuRYwOH5Ngkl-c6BkOhCGfrLCTnU59s5ycboeMyoX27BBIuJx-4o8ItHdvkfRWZtBvQUs4/s1600/rss.png" /></div> </a> </div> </div> <style>.tota2 { margin-left:15px; margin-top:10px;}.tota { margin-top:7px; }#mbl-social-hover{position:relative;width:240px;height:400px;background:#554e4c url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPfd6H1mgrxnTu6s7PkMN6e30_5o9ZX4O1PKWO6xkonwixc2hyphenhyphenBlhJteLx3CQM0HZBBboVz9ZVvCqxrUu4mYdNsJXIBNPmOifXxEhMCxbm_ORPwV4dcsvhcqUJ90z___HzLwWXyEKimM/s1600/vintage.png");}#mbl-social-hover #title{font-family:'Open sans';font-size:28px;color:#fff;font-weight:600;margin:30px 20px 0;text-align:center;line-height:1.1em;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}#mbl-social-hover #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;}#mbl-social-hover #links{position:absolute;bottom:0;width:100%;}#mbl-social-hover a{display:block;padding:0 20px;height:42px;line-height:42px;color:#fff;font-size:12px;background:rgba(0,0,0,0.08);border-top:1px solid #4c4644;border-top:1px solid rgba(0,0,0,0.1);-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}#mbl-social-hover a:hover{background:rgba(0,0,0,0.15);text-decoration:none;}#mbl-social-hover a.twitter:hover{background:#79dbff;}#mbl-social-hover a.facebook:hover{background:#6e9bee;}#mbl-social-hover a.google:hover{background:#00be00;}#mbl-social-hover a.pinterest:hover{background:#cb2027;}#mbl-social-hover a.rss:hover{background:#ffae42;}#mbl-social-hover a span{height:15px;line-height:15px;width:15px;text-align:center;margin-right:20px;font-size:13px;padding:5px;border-radius:99px;background:rgba(0,0,0,0.1);}#home-tagline{text-align:center;font-size:32px;color:#000;font-weight:300;margin:60px 0 40px;}#home-tagline strong{color:#ff5421;font-weight:300;}#home-highlights{margin-bottom:40px;}.home-highlight{float:left;width:142px;padding:30px 0;margin-right:21px;text-align:center;font-size:13px;display:block;opacity:0.9;color:#796f6c;font-size:40px;background:#e2e0df;background:rgba(0,0,0,0.04);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight p{margin:0;}.home-highlight:hover{color:#3a3534;text-decoration:none;background:rgba(0,0,0,0.1);}.home-highlight-title{font-size:13px;margin:7px 0 0;text-align:center;color:#796f6c;cursor:pointer;font-weight:900;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight:hover .home-highlight-title{color:#3a3534;}#home-featured{min-height:400px;margin-bottom:37px;}#home-featured .home-divider{margin-top:0;}#home-featured h2{text-align:center;font-size:32px;color:#161414;font-weight:300;margin:0 0 40px;}#home-featured h2:after{display:block;content:"";width:342px;margin:0 auto;height:1px;background:#161414;margin-top:5px;}.featured-theme-entry-content{font-size:16px;float:left;width:430px;font-weight:300;}.featured-theme-entry-content h3{font-size:21px;line-height:1.4em;margin:0;font-weight:400;}.featured-theme-entry-content .button{margin-top:15px;}.featured-theme-entry-content .button:hover{background:#f5634a;opacity:1;}.featured-theme-entry-img{display:block;float:right;margin-right:5px;}.featured-theme-entry-img a{display:block;padding:6px;background:#fff;border-radius:2px;}#featured-theme-slider .flex-control-nav{position:absolute;top:-20px;left:-54px;}#featured-theme-slider .flex-direction-nav{margin:0;}#featured-theme-slider .flex-direction-nav li a{background:#312d2c;cursor:pointer;display:block;height:70px;line-height:70px;width:30px;color:#fff;text-align:center;margin:-30px 0 0;position:absolute;top:50%;-moz-transition:background 0.3s ease-in-out 0s;opacity:0.15;border-radius:4px;}#featured-theme-slider .flex-direction-nav li .flex-prev{left:-90px;}#featured-theme-slider</style>

• Kod içerisindeki benim sosyal medya hesaplarım yerine kendi sosyal medya hesaplarınızı yazmayı sakın unutmayınız.

---------------------------------------------------------------------------------

Metro Tarzı Sosyal Medya Widget

<div class="metro-social"> <br /> <br /> <li><a class="fb" href="http://www.facebook.com/Faceebook Idniz" rel="nofollow"></a></li> <li><a class="tw" href="http://twitter.com/Twetter Idniz"></a></li> <li><a class="gp" href="https://plus.google.com/Google+ Idniz"></a></li> <li><a class="pi" href="http://pinterest.com/Pintrest Idniz"></a></li> <li><a class="in" href="https://www.linkedin.com/in/Linkedin Idniz"></a></li> <li><a class="yt" href="http://www.youtube.com/Youtube Idniz"></a></li> <li><a class="fd" href="http://feeds.feedburner.com/Feedburner Idniz"></a></li> </div> <style> .metro-social{width:285px} .metro-social li{position:relative;cursor:pointer;padding:0;list-style:none} .metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block} .metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px} .metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px} .metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38} .metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px} .metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px} .metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px} .metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px} .metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3} .metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5} .metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38} .metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532} .metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd} .metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41} .metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c} </style>

• Yine aynı şekilde kodun içerisindeki sosyal medya hesaplarınızı ayarlamayı unutmayınız.

Blogger {E- Posta Abonelik Kutusu}

Okuyucularınızı yeni makalelerinizden haberdar etmek mi istiyorsunuz.Onlara bilgiyi en kısa yoldan sunmak mı istiyorsunuz? İşte tam size göre bir eklenti ile bu soruların cevaplarından kurtulabilirsiniz.Okuyuculara en kısa yoldan ulaşmanın yolu e-posta aboneliğidir.Bu yüzden bu eklenti sayesinde en kısa yoldan onlara ulaşabileceksiniz.

Hiç uzatmadan hemen kodlara geçmek istiyorum.Uygulanması çok basittir.Yerleşim-Gadget Ekle - Html/Javascript yolunu takip ederek kodları ekliyoruz.




<form <span class="goog-spellcheck-word" id=":14.6" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;"> action</span>="<span class="goog-spellcheck-word" id=":14.7" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">http</span>://<span class="goog-spellcheck-word" id=":14.8" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">feedburner</span>.<span class="goog-spellcheck-word" id=":14.9" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">google</span>.<span class="goog-spellcheck-word" id=":14.10" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">com</span>/fb/a/<span class="goog-spellcheck-word" id=":14.11" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">mailverify</span>" <span class="goog-spellcheck-word" id=":14.12" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">class</span>="<span class="goog-spellcheck-word" id=":14.13" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">login</span>" <span class="goog-spellcheck-word" id=":14.14" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">method</span>="post" <span class="goog-spellcheck-word" id=":14.15" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">onsubmit</span>="<span class="goog-spellcheck-word" id=":14.16" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">window</span>.<span class="goog-spellcheck-word" id=":14.17" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">open</span>('http://<span class="goog-spellcheck-word" id=":14.18" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">feedburner</span>.<span class="goog-spellcheck-word" id=":14.19" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">google</span>.<span class="goog-spellcheck-word" id=":14.20" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">com</span>/fb/a/<span class="goog-spellcheck-word" id=":14.21" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">mailverify</span>?<span class="goog-spellcheck-word" id=":14.22" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">uri</span>=BilgiHakkndaAradnzHerey', 'popupwindow', 'scrollbars=<span class="goog-spellcheck-word" id=":14.23" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">yes</span>,<span class="goog-spellcheck-word" id=":14.24" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">width</span>=70%,<span class="goog-spellcheck-word" id=":14.25" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">height</span>=520');<span class="goog-spellcheck-word" id=":14.26" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">return</span> <span class="goog-spellcheck-word" id=":14.27" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">true</span>" <span class="goog-spellcheck-word" id=":14.28" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">target</span>="<span class="goog-spellcheck-word" id=":14.29" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">popupwindow</span>"> <h1> E-posta Aboneliği</h1> <<span class="goog-spellcheck-word" id=":14.30" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">img</span> <span class="goog-spellcheck-word" id=":14.31" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">align</span>="<span class="goog-spellcheck-word" id=":14.32" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">LEFT</span>" alt="<span class="goog-spellcheck-word" id=":14.33" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">Smiley</span> <span class="goog-spellcheck-word" id=":14.34" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">face</span>" <span class="goog-spellcheck-word" id=":14.35" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">src</span>="<span class="goog-spellcheck-word" id=":14.36" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">http</span>://<span class="goog-spellcheck-word" id=":14.37" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">png</span>.<span class="goog-spellcheck-word" id=":14.38" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">findicons</span>.<span class="goog-spellcheck-word" id=":14.39" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">com</span>/<span class="goog-spellcheck-word" id=":14.40" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">files</span>/<span class="goog-spellcheck-word" id=":14.41" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">icons</span>/2198/<span class="goog-spellcheck-word" id=":14.42" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">dark</span>_<span class="goog-spellcheck-word" id=":14.43" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">glass</span>/128/mail_<span class="goog-spellcheck-word" id=":14.44" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">appt</span>.<span class="goog-spellcheck-word" id=":14.45" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">png</span>" <span class="goog-spellcheck-word" id=":14.46" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">height</span>="48" <span class="goog-spellcheck-word" id=":14.47" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">width</span>="48" /> <<span class="goog-spellcheck-word" id=":14.48" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">br</span> /> <<span class="goog-spellcheck-word" id=":14.49" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">center</span>> <<span class="goog-spellcheck-word" id=":14.50" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">span</span> <span class="goog-spellcheck-word" id=":14.51" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">style</span>="<span class="goog-spellcheck-word" id=":14.52" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">color</span>: white; font-size: <span class="goog-spellcheck-word" id=":14.53" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">small</span>;"><<span class="goog-spellcheck-word" id=":14.54" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">span</span> <span class="goog-spellcheck-word" id=":14.55" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">style</span>="<span class="goog-spellcheck-word" id=":14.56" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">line</span>-<span class="goog-spellcheck-word" id=":14.57" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">height</span>: 0px;"> E-posta Adresini yaz en yeni içeriklerden haberin olsun...  </<span class="goog-spellcheck-word" id=":14.58" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">span</span>></<span class="goog-spellcheck-word" id=":14.59" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">span</span>></<span class="goog-spellcheck-word" id=":14.60" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">center</span>> <<span class="goog-spellcheck-word" id=":14.61" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">input</span> name="<span class="goog-spellcheck-word" id=":14.62" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">uri</span>" <span class="goog-spellcheck-word" id=":14.63" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">type</span>="<span class="goog-spellcheck-word" id=":14.64" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">hidden</span>" <span class="goog-spellcheck-word" id=":14.65" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">value</span>="<span class="goog-spellcheck-word" id=":14.66" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">BilgiHakkndaAradnzHerey</span>" /> <<span class="goog-spellcheck-word" id=":14.67" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">input</span> <span class="goog-spellcheck-word" id=":14.68" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">autofocus</span>="" <span class="goog-spellcheck-word" id=":14.69" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">class</span>="<span class="goog-spellcheck-word" id=":14.70" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">login</span>-<span class="goog-spellcheck-word" id=":14.71" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">input</span>" name="<span class="goog-spellcheck-word" id=":14.72" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">email</span>" <span class="goog-spellcheck-word" id=":14.73" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">placeholder</span>="E-mail Adresiniz..." <span class="goog-spellcheck-word" id=":14.74" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">type</span>="<span class="goog-spellcheck-word" id=":14.75" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">email</span>" /> <<span class="goog-spellcheck-word" id=":14.76" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">input</span> name="<span class="goog-spellcheck-word" id=":14.77" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">loc</span>" <span class="goog-spellcheck-word" id=":14.78" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">type</span>="<span class="goog-spellcheck-word" id=":14.79" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">hidden</span>" <span class="goog-spellcheck-word" id=":14.80" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">value</span>="en_US" /> <<span class="goog-spellcheck-word" id=":14.81" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">input</span> <span class="goog-spellcheck-word" id=":14.82" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">class</span>="<span class="goog-spellcheck-word" id=":14.83" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">login</span>-<span class="goog-spellcheck-word" id=":14.84" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">submit</span>" <span class="goog-spellcheck-word" id=":14.85" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">type</span>="<span class="goog-spellcheck-word" id=":14.86" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">submit</span>" <span class="goog-spellcheck-word" id=":14.87" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">value</span>="Gönder" /> </form> <<span class="goog-spellcheck-word" id=":14.88" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">style</span>> a.tt{ <span class="goog-spellcheck-word" id=":14.89" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">position</span>:<span class="goog-spellcheck-word" id=":14.90" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">relative</span>; z-<span class="goog-spellcheck-word" id=":14.91" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">index</span>:24; <span class="goog-spellcheck-word" id=":14.92" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">color</span>:#3CA3FF; font-<span class="goog-spellcheck-word" id=":14.93" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">weight</span>:<span class="goog-spellcheck-word" id=":14.94" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">bold</span>; <span class="goog-spellcheck-word" id=":14.95" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">text</span>-<span class="goog-spellcheck-word" id=":14.96" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">decoration</span>:<span class="goog-spellcheck-word" id=":14.97" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">none</span>; } a.tt <span class="goog-spellcheck-word" id=":14.98" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">span</span>{ <span class="goog-spellcheck-word" id=":14.99" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">display</span>: <span class="goog-spellcheck-word" id=":14.100" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">none</span>; } a.tt:<span class="goog-spellcheck-word" id=":14.101" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">hover</span>{ z-<span class="goog-spellcheck-word" id=":14.102" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">index</span>:25; <span class="goog-spellcheck-word" id=":14.103" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">color</span>: #<span class="goog-spellcheck-word" id=":14.104" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">aaaaff</span>; <span class="goog-spellcheck-word" id=":14.105" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>:;} a.tt:<span class="goog-spellcheck-word" id=":14.106" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">hover</span> <span class="goog-spellcheck-word" id=":14.107" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">span</span>.<span class="goog-spellcheck-word" id=":14.108" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">tooltip</span>{ <span class="goog-spellcheck-word" id=":14.109" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">display</span>:<span class="goog-spellcheck-word" id=":14.110" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">block</span>; <span class="goog-spellcheck-word" id=":14.111" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">position</span>:<span class="goog-spellcheck-word" id=":14.112" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">absolute</span>; top:0px; <span class="goog-spellcheck-word" id=":14.113" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">left</span>:0; <span class="goog-spellcheck-word" id=":14.114" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">padding</span>: 15px 0 0 0; <span class="goog-spellcheck-word" id=":14.115" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">width</span>:200px; <span class="goog-spellcheck-word" id=":14.116" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">color</span>: #993300; <span class="goog-spellcheck-word" id=":14.117" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">text</span>-<span class="goog-spellcheck-word" id=":14.118" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">align</span>: <span class="goog-spellcheck-word" id=":14.119" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">center</span>; <span class="goog-spellcheck-word" id=":14.120" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">filter</span>: <span class="goog-spellcheck-word" id=":14.121" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">alpha</span>(<span class="goog-spellcheck-word" id=":14.122" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">opacity</span>:90); <span class="goog-spellcheck-word" id=":14.123" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">KHTMLOpacity</span>: 0.90; <span class="goog-spellcheck-word" id=":14.124" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">MozOpacity</span>: 0.90; <span class="goog-spellcheck-word" id=":14.125" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">opacity</span>: 0.90; } a.tt:<span class="goog-spellcheck-word" id=":14.126" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">hover</span> <span class="goog-spellcheck-word" id=":14.127" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">span</span>.top{ <span class="goog-spellcheck-word" id=":14.128" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">display</span>: <span class="goog-spellcheck-word" id=":14.129" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">block</span>; <span class="goog-spellcheck-word" id=":14.130" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">padding</span>: 30px 8px 0; <span class="goog-spellcheck-word" id=":14.131" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>: <span class="goog-spellcheck-word" id=":14.132" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">url</span>(<span class="goog-spellcheck-word" id=":14.133" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">bubble</span>.<span class="goog-spellcheck-word" id=":14.134" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">gif</span>) <span class="goog-spellcheck-word" id=":14.135" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">no</span>-<span class="goog-spellcheck-word" id=":14.136" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">repeat</span>; } a.tt:<span class="goog-spellcheck-word" id=":14.137" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">hover</span> <span class="goog-spellcheck-word" id=":14.138" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">span</span>.<span class="goog-spellcheck-word" id=":14.139" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">middle</span>{ /* <span class="goog-spellcheck-word" id=":14.140" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">different</span> <span class="goog-spellcheck-word" id=":14.141" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">middle</span> <span class="goog-spellcheck-word" id=":14.142" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">bg</span> <span class="goog-spellcheck-word" id=":14.143" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">for</span> <span class="goog-spellcheck-word" id=":14.144" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">stretch</span> */ <span class="goog-spellcheck-word" id=":14.145" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">display</span>: <span class="goog-spellcheck-word" id=":14.146" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">block</span>; <span class="goog-spellcheck-word" id=":14.147" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">padding</span>: 0 8px; } a.tt:<span class="goog-spellcheck-word" id=":14.148" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">hover</span> <span class="goog-spellcheck-word" id=":14.149" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">span</span>.<span class="goog-spellcheck-word" id=":14.150" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">bottom</span>{ <span class="goog-spellcheck-word" id=":14.151" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">display</span>: <span class="goog-spellcheck-word" id=":14.152" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">block</span>; <span class="goog-spellcheck-word" id=":14.153" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">padding</span>:3px 8px 10px; <span class="goog-spellcheck-word" id=":14.154" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">color</span>: #548912; } ::-moz-focus-inner { <span class="goog-spellcheck-word" id=":14.155" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">padding</span>: 0; border: 0; } :-moz-<span class="goog-spellcheck-word" id=":14.156" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">placeholder</span> { <span class="goog-spellcheck-word" id=":14.157" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">color</span>: #bcc0c8 !important; } ::-webkit-<span class="goog-spellcheck-word" id=":14.158" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">input</span>-<span class="goog-spellcheck-word" id=":14.159" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">placeholder</span> { <span class="goog-spellcheck-word" id=":14.160" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">color</span>: #bcc0c8; } :-ms-<span class="goog-spellcheck-word" id=":14.161" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">input</span>-<span class="goog-spellcheck-word" id=":14.162" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">placeholder</span> { <span class="goog-spellcheck-word" id=":14.163" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">color</span>: #bcc0c8 !important; } .<span class="goog-spellcheck-word" id=":14.164" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">input</span> { font: 12px/20px "Lucida Grande", Verdana, sans-serif; <span class="goog-spellcheck-word" id=":14.165" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">color</span>: #404040; <span class="goog-spellcheck-word" id=":14.166" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>: #ebc9a2; } .<span class="goog-spellcheck-word" id=":14.167" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">input</span> { font-family: inherit; font-size: 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .<span class="goog-spellcheck-word" id=":14.168" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">login</span> { <span class="goog-spellcheck-word" id=":14.169" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">padding</span>: 18px 20px; <span class="goog-spellcheck-word" id=":14.170" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">width</span>: 80%; <span class="goog-spellcheck-word" id=":14.171" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>: #3f65b7; <span class="goog-spellcheck-word" id=":14.172" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>-clip: <span class="goog-spellcheck-word" id=":14.173" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">padding</span>-box; border: 1px solid #172b4e; border-<span class="goog-spellcheck-word" id=":14.174" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">bottom</span>-<span class="goog-spellcheck-word" id=":14.175" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">color</span>: #142647; border-radius: 5px; <span class="goog-spellcheck-word" id=":14.176" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>-image: -webkit-radial-gradient(cover, #437dd6, #3960a6); <span class="goog-spellcheck-word" id=":14.177" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>-image: -moz-radial-gradient(cover, #437dd6, #3960a6); <span class="goog-spellcheck-word" id=":14.178" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>-image: -o-radial-gradient(cover, #437dd6, #3960a6); <span class="goog-spellcheck-word" id=":14.179" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>-image: radial-gradient(cover, #437dd6, #3960a6); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5); } .<span class="goog-spellcheck-word" id=":14.180" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">login</span> > h1 { margin-<span class="goog-spellcheck-word" id=":14.181" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">bottom</span>: 20px; font-size: 20px; font-<span class="goog-spellcheck-word" id=":14.182" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">weight</span>: <span class="goog-spellcheck-word" id=":14.183" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">bold</span>; <span class="goog-spellcheck-word" id=":14.184" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">text</span>-<span class="goog-spellcheck-word" id=":14.185" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">align</span>: <span class="goog-spellcheck-word" id=":14.186" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">center</span>; <span class="goog-spellcheck-word" id=":14.187" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">color</span>: #fff; <span class="goog-spellcheck-word" id=":14.188" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">text</span>-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135; } .<span class="goog-spellcheck-word" id=":14.189" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">login</span>-<span class="goog-spellcheck-word" id=":14.190" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">input</span> { <span class="goog-spellcheck-word" id=":14.191" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">display</span>: <span class="goog-spellcheck-word" id=":14.192" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">block</span>; <span class="goog-spellcheck-word" id=":14.193" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">width</span>: 90%; <span class="goog-spellcheck-word" id=":14.194" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">height</span>: 37px; margin-<span class="goog-spellcheck-word" id=":14.195" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">bottom</span>: 20px; <span class="goog-spellcheck-word" id=":14.196" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">padding</span>: 0 9px; <span class="goog-spellcheck-word" id=":14.197" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">color</span>: white; <span class="goog-spellcheck-word" id=":14.198" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">text</span>-shadow: 0 1px black; <span class="goog-spellcheck-word" id=":14.199" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>: #2b3e5d; border: 1px solid #15243b; border-top-<span class="goog-spellcheck-word" id=":14.200" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">color</span>: #0d1827; border-radius: 4px; <span class="goog-spellcheck-word" id=":14.201" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)); <span class="goog-spellcheck-word" id=":14.202" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)); <span class="goog-spellcheck-word" id=":14.203" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)); <span class="goog-spellcheck-word" id=":14.204" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>-image: linear-gradient(to <span class="goog-spellcheck-word" id=":14.205" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">bottom</span>, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2); } .<span class="goog-spellcheck-word" id=":14.206" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">login</span>-<span class="goog-spellcheck-word" id=":14.207" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">input</span>:focus { outline: 0; <span class="goog-spellcheck-word" id=":14.208" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>-<span class="goog-spellcheck-word" id=":14.209" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">color</span>: #32486d; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6); } .lt-ie9 .<span class="goog-spellcheck-word" id=":14.210" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">login</span>-<span class="goog-spellcheck-word" id=":14.211" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">input</span> { <span class="goog-spellcheck-word" id=":14.212" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">line</span>-<span class="goog-spellcheck-word" id=":14.213" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">height</span>: 35px; } .<span class="goog-spellcheck-word" id=":14.214" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">login</span>-<span class="goog-spellcheck-word" id=":14.215" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">submit</span> { <span class="goog-spellcheck-word" id=":14.216" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">display</span>: <span class="goog-spellcheck-word" id=":14.217" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">block</span>; <span class="goog-spellcheck-word" id=":14.218" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">width</span>: 100%; <span class="goog-spellcheck-word" id=":14.219" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">height</span>: 37px; margin-<span class="goog-spellcheck-word" id=":14.220" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">bottom</span>: 15px; font-size: 14px; <span class="goog-spellcheck-word" id=":14.221" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">line</span>-<span class="goog-spellcheck-word" id=":14.222" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">height</span>: 10px; font-<span class="goog-spellcheck-word" id=":14.223" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">weight</span>: <span class="goog-spellcheck-word" id=":14.224" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">bold</span>; <span class="goog-spellcheck-word" id=":14.225" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">color</span>: #294779; <span class="goog-spellcheck-word" id=":14.226" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">text</span>-<span class="goog-spellcheck-word" id=":14.227" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">align</span>: <span class="goog-spellcheck-word" id=":14.228" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">center</span>; <span class="goog-spellcheck-word" id=":14.229" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">text</span>-shadow: 0 1px rgba(255, 255, 255, 0.3); <span class="goog-spellcheck-word" id=":14.230" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>: #adcbfa; <span class="goog-spellcheck-word" id=":14.231" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>-clip: <span class="goog-spellcheck-word" id=":14.232" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">padding</span>-box; border: 1px solid #284473; border-<span class="goog-spellcheck-word" id=":14.233" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">bottom</span>-<span class="goog-spellcheck-word" id=":14.234" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">color</span>: #223b66; border-radius: 4px; cursor: pointer; <span class="goog-spellcheck-word" id=":14.235" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed); <span class="goog-spellcheck-word" id=":14.236" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed); <span class="goog-spellcheck-word" id=":14.237" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>-image: -o-linear-gradient(top, #d0e1fe, #96b8ed); <span class="goog-spellcheck-word" id=":14.238" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>-image: linear-gradient(to <span class="goog-spellcheck-word" id=":14.239" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">bottom</span>, #d0e1fe, #96b8ed); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15); } .<span class="goog-spellcheck-word" id=":14.240" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">login</span>-<span class="goog-spellcheck-word" id=":14.241" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">submit</span>:active { <span class="goog-spellcheck-word" id=":14.242" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">background</span>: #a4c2f3; -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1); } .<span class="goog-spellcheck-word" id=":14.243" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">login</span>-help { <span class="goog-spellcheck-word" id=":14.244" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">text</span>-<span class="goog-spellcheck-word" id=":14.245" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">align</span>: <span class="goog-spellcheck-word" id=":14.246" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">center</span>; } .<span class="goog-spellcheck-word" id=":14.247" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">login</span>-help > a { font-size: 11px; <span class="goog-spellcheck-word" id=":14.248" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">color</span>: #d4deef; <span class="goog-spellcheck-word" id=":14.249" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">text</span>-<span class="goog-spellcheck-word" id=":14.250" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">decoration</span>: <span class="goog-spellcheck-word" id=":14.251" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">none</span>; <span class="goog-spellcheck-word" id=":14.252" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">text</span>-shadow: 0 -1px rgba(0, 0, 0, 0.4); } .<span class="goog-spellcheck-word" id=":14.253" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">login</span>-help > a:<span class="goog-spellcheck-word" id=":14.254" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">hover</span> { <span class="goog-spellcheck-word" id=":14.255" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">text</span>-<span class="goog-spellcheck-word" id=":14.256" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">decoration</span>: underline; } </<span class="goog-spellcheck-word" id=":14.257" tabindex="-1" role="menuitem" aria-haspopup="true" style="background: yellow;">style</span>>

Kod içerisinde değiştirilmesi gereken yerler:

• Kod içerisinde yer alan iki adet BilgiHakkndaAradnzHerey bölümü vardır.Bunları silip o bölümlere kendi FeedBurner adresini yazıp kaydedin.
• Başka bir işlem yapmanıza gerek yoktur.

Google Drive Dosya Nasıl Yüklenir ?

Google Drive'ın bize ücretsiz olarak sunduğu dosya paylaşma sistemi ile dosyalarımızı,fotoğraflarımızı,dokümanlarımızı ve diğer verilerimizi paylaşabildiğimiz bir bulut sistemidir.

Biz google drive dosya paylaşma özelliğini kullanıp önceki makale de anlattığım sıkıştırmış olduğumuz javascript ve Css kodlarını google drive a yükleyip hem sitemizi hızlandırmış olacağız hemde dosyaların silinme derdinden kurtulmuş olacağız.

Javascript ve Css Dosyaları Google Drive a Nasıl Yüklenir ?

Aşağıdaki adımları dikkatle uygulayınız.

• Google drive adresine girip google hesabınızla oturum açın.
• Daha sonra sol tarafta bulunan Yeni butonuna tıklıyoruz ve Dosya yükleme seçeneğini seçiyoruz.
• Javascript veya Css dosyasını seçiyoruz.
• Kısa bir süre içerisinde yüklenecektir.
• Yükleme işlemi tamamlandığında sağ alt köşede bildirim alacaksınız.Aynı bildirim kutusunun içerisinde ''Paylaş'' seçeneğine tıklıyoruz.
• Çıkan ekran da ''Gelişmiş'' butonuna tıklıyoruz.
• Karşımıza aşağıdaki gibi bir görüntü çıkacak.Bu bölümde ''Değiştir'' butonuna tıklıyoruz.
  

• Yine karşımıza aşağıdaki gibi görüntü gelecektir.Burada ise resimde gördüğünüz gibi ''Herkese açık'' olarak işaretleyip Kaydet butonuyla kaydediyoruz.Not:Herkese açık olarak işaretlemeyi sakın unutmayın.

• Daha sonra karşımıza çıkan bölümde fotoğrafta gördüğünüz gibi bir bağlantı verecek.Biz bu bağlantıyı kopyaladıktan sonra ''Tamamlandı'' butonu ile işlemleri tamamlıyoruz.Kopyalamış olduğumuz linki tarayıcının adres çubuğuna yapıştırıyoruz ve kodlarımız ekrana gelecektir.

• Adres çubuğunda yer alan linkin aşağıdaki örnekteki gibi sadece renkli kısmını seçip kopyalıyoruz.

Örnek: https://drive.google.com/file/d/0B4Q42-BNPzjKVHljcTYtQWs3Z2c/view  sadece renkli kısımdaki kodu kopyalıyoruz.Sizdeki kodlar farklı olabilir.

• Şimdi aşağıda verdiğim kodların içerisine uygun yere kopyaladığımız kodu yapıştırıyoruz.

Eğer bir Css kod ise aşağıdaki renkli kısıma kopyaladığınız kodu yapıştırıp Şablon>>Html yi düzenle yolunu takip edip <head> kodunun hemen altına yapıştırın.

<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/kopyalanan kod buraya gelecek" />

Eğer bir javascript kod ise yine aşağıdaki renkli yere kodu yapıştırıp Şablon>>Html yi düzenle yolunu takip edip </head> kodunun hemen üzerine yapıştırın.

<script type="text/javascript" src="https://googledrive.com/host/kopyalanan kod buraya gelecek"></script>

                         

Bütün işlemler bu kadar.Biraz zor görünse de bir kaç defa yapınca alışacaksınız.Bu yöntemin faydalı yönleri hem kodların silinme derdinden kurtulmuş olduk hemde kodları sıkıştırarak daha hızlı yüklenmesini yani sitenin açılış hızını yükseltmiş olduk.

Önemli Not:Bu işlemleri google pagespeed aracında sitenizin hızını değerlendirip çıkan sonuçlarda ''sıkıştırmayı etkinleştirin'' bölümündeki bütün javascript dosyaları için yapabilirsiniz.

Bu konuyu öğrendiğimize göre Site hızlandırma teknikleri adlı makaleyi okuyabilirsiniz.

Denemekten Korkmayın !! Ama yine de Bu işlemleri yapmadan önce temanızın yedeğini alsanız hiçde fena olmaz.

Site Hızlandırma Teknikleri (PageSpeed)

Web sitelerinin hızlı açılması kullanıcı memnuniyeti ve arama motorları optimizasyonu açısından oldukça önemlidir.Bütün site sahipleri bende dahil olmak üzere sitelerimize site hızlandırma teknikleri uygularız.

Diğer web sitelerinin aksine biz blogger alt yapısını kullanan site sahipleri için site hızlandırma teknikleri daha azdır.Bu konuda blogger bizlere biraz sınır koymaktadır.Bu konuda bazı özelliklerden yararlanamıyoruz.

Site hızlandırma tekniklerine geçmeden önce sitenizin hızını ölçmek istiyorsanız google'ın aracı olan pagespeed Insights ile Gmetrix araçlarını kullanabilirsiniz.

Eğer sizde sitenizi hızlandırmak ve arama motorlarına optimize etmek istiyorsanız aşağıdaki yöntemleri uygulayınız.

1. Resimleri Optimize Etme

Eğer yukarıda verdiğim sitelerden site hızınızı sorguladıysanız orada ''resimleri optimize edin'' uyarısını görmüşsünüzdür.Bu uyarının çözümü ise resimlerinize ''width'' ve ''height'' etiketlerini yani ''genişlik'' ve ''yükseklik'' etiketlerini mutlaka ekmelisiniz.Çünkü bir web sitesi açılırken resimler orijinal boyutları ile yüklenir.Kullandığınız resimlerin boyutları fazla ise sitenizin açılması oldukça gecikir.

Buna ek olarak resimlerinizi sıkıştırmanız da gerekir.Ben kendi sitemde hem resimleri sıkıştırmak hemde boyutlarını küçültmek için webresizer sitesini kullanıyorum.Size de bu siteyi öneririm.Çok kullanışlı ve iki işi birden halletmiş oluyorsunuz.Bu işlemi hangi resimlerde uyarı alıyorsanız hepsine uygulamanız gerekir.

2. Javascript ve Css Dosyaları Sıkıştırma

Sitelerin bir başka yarası olan javascript dosya sıkıştırma ve Css sıkıştırma işlemi mutlaka yapılması gerekir.Site hızımızı olumlu yönde etkileyen etmenlerden bir tanesidir.Pagespeed İnsights de site hızımızı ölçdüğümüz zaman ''sıkıştırmayı etkinleştirin'' uyarısı alırsınız.

• Resimde gördüğünüz gibi uyarının gösterildiği yazının üstüne gelerek çıkan adresi kopyalıyoruz ve internet satırımızda yeni bir sekmede açıyoruz.
• Çıkan kodların hepsini Ctrl+C yardımı ile kopyalıyoruz.
• Bu siteye girip Ctrl+V yardımı ile yapıştırıyoruz.

• Javascript butonuna tıklıyoruz.Sıkıştırma işlemi tamamdır.
• Çıkan kodları isterseniz indirip kendi hostunuza yükleyebilirsiniz.Zaten kendi hostunuza yüklemeniz gerekir.Yoksa yapılan sıkıştırma işleminin bir anlamı olmaz.
• Eğer bu konuda bilgi sahibi değilseniz google drive dosya nasıl yüklenir? adlı makalemi okuyup bu konuya tekrar dönün.

3. Gereksiz Ögeleri Kaldırın 

Web sitemizde kullandığımız eklentiler çok işimize yarıyor.Ama bu eklentilerde aşırıya kaçmak sitemizi oldukça yavaşlatıyor.Yani diyeceğim o ki işinize en çok yarayan eklentileri seçin ve diğerlerinden kurtulun.İnanın site açılış hızınıza oldukça faydası olacaktır.

4. Ana Sayfadaki Kayıtları Azaltın

Ana Sayfada gösterilen kayıtları azaltmanız hem resimlerin yüklenmesi hemde yazıların yüklenmesi açısından daha aza ineceğinden ana sayfada gösterilen kayıtlarınız örneğin 10 ise bunu 5 e indirdiğiniz zaman sayfanız daha kısa sürede yüklenecektir.

İşte bu kadar.Bu yöntemleri uygulayıp daha sonra sitenizin hızını ölçdüğünüz de arada ki farkı göreceksiniz.

Özel Robot Başlık Etiketi Nasıl Düzenlenir ?

Blogger alt yapısı kullanana biz site sahipleri için önemli ayarlardan bir tanesi olan Özel robots.txt dosyasını oluşturmayı anlatmıştım.O makalemin altına bir okurum neden özel robot başlık etiketleri ayarlamayı anlatmıyorsun diye bir sitemde bulunması üzerine bu isteği kıramadım ve bizim için yine önemli olan ''Özel robot başlık etiketleri'' ayarlarının nasıl yapılması gerektiğini sizlere aktarmaya çalışacağım.

Robot Başlık Etiketleri Ne İşe Yarar ?

Robots.text dosyası veya robot başlık etiketleri kullanarak sitemizi seo dostu hale getirebiliyor olmamız açısından kullanılmasında fayda olduğunu söyleyebilirim.Fakat çok fazla bilginiz yok ise kullanmanızı hiç tavsiye etmem.Aksi takdirde makalelerinizin google tarafından index alamamasına yol açabilirsiniz.

Robot Başlık Etiketleri Nasıl Ayarlanır ??

İlk önce yapmanız gereken blogger yönetim panelinden Ayarlar >> Arama tercihleri >> Özel robot başlık etiketleri sekmesini etkin hale getirmek ve ayarlarını aşağıdaki resme bakarak bire bir aynı yapmak. 

Kodların Açıklaması :

• Yukarıdaki resimde seçmiş olduğumuz ''all'' seçeneği ile Anasayfamız,Yayınlar ve Sayfalar için robotların indexlemesine izin vermiş olduk.
• Diğer seçmiş olduğumuz ''noindex'' seçeneği ile arşiv sayfamızı indexlemesine izin vermemiş oluyoruz.
• ''Noodp'' seçeneği ise açık kaynak kodlu sitelerdeki sitemizin açıklamasını aramalarda baz almamasını sağlamış olduk.

Önemli Not : Bu konuda bilginiz yok ise özel başlık etiketlerini yukarıda ki resme göre ayarlamanız tavsiye edilir.Aksi takdirde içinden çıkılmaz durumlar oluşabilir.