Sitelerdeki Yazı Fontu Nasıl Tespit Edilir?

herhangi-sitenin-yazı-fontunu-bulma
 
  İnternette yüzlerce farlı yazı fontu bulmanız mümkün. En iyilerini ve en uygun olanlarını kendi sayfanızda değerlendirmek istersiniz sanırım. Bazen sitelerde yazılar okurken ne güzel yazı tipi var deyip iç geçirdiğiniz olmuştur. Vereceğim eklentiyle sitelerdeki yazı tipini kolaylıkla tespit etmeyi göstermek istiyorum. Öncelikle font çeşitlerini görmek için https://fonts.google.com/ adresine girerek araştırma yapabilirsiniz. Burada beğendiğiniz fontu kendi temanıza kolaylıkla uygulayabilirsiniz.

Yazı Fontu Nasıl Tespit Edilir?

  Google chrome için WhatFont eklentisini kurarak istediğiniz sitenin hangi yazı tipini kullandığını öğrenebilirsiniz. Eklentiyi kurduğunuzda kısayol olarak bir simge eklenir.

whatfont-eklentisi-kullanımı

  Simgeye tıkladığınızda hangi yazının üstüne getirirseniz o yazıya ait fontu öğreniyorsunuz. Böylece beğendiğiniz siteler hangi fontu kullanıyor hemen haberiniz oluyor. Bu eklenti aynı zamanda kendi fontunuzu tespit etmek ve değiştirmek içinde kullanılabilir.

Blog Sayfamın Fontunu Nasıl Değiştiririm?

  WhatFont eklentisini kullanarak kullandığınız fontu belirledikten sonra tema alanınızda Ctrl+F yardımıyla o fontu aratın. Yukarıdaki görselde "Open Sans" fontunu kullandığım görülüyor. Bunu değiştirmek için open sans olarak arama yapıyorum ve değiştirmek istediğim alana geldikten sonra istediğim başka bir fontu örneğin "Roboto" yazarak kaydediyorum. Böylece bir kaç dakika içinde font işleminizi tamamlıyorsunuz.

Font Seçiminde Nelere Dikkat Edilmelidir?

1) Türkçe karakter uyumlu olmasına dikkat edin.
2) Okunabilir boyutta olmasına ve gözü yormamasına özen gösterin.
3) İçeriklerin kategorisine uygun kurumsal veya hareketli fontlar seçilebilir.
4) Ana sayfanızda farklı fontlar kullanılabilir ancak birbiri ile uyumlu olmasına özen gösterin. Başlıklarda ve açıklamalarda site genelinde bütünlük sağlamak daha profesyonel görüntü verir.

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 ⤵

Blog Sayfanıza Hava Katacak E-Mail Abone Kodu

email-abone-eklentisi

  Blog sayfalarının kaliteli ve faydalı içerik üretme zorunluluğu kalıcı takipçi kazanmaları içindir. Sosyal ağ hesaplarınızla, GFC gibi blog servislerinin sağladığı imkanlarla veya Feedburner aracılığı ile takipçi hedefleyebilirsiniz. Diğer takip yöntemleri sizin yeni içerik girmenizden çok ziyaretçinin sizi ziyaret etmek istemesinden kaynaklanır. Feedburner ile her yani yazı yayınladığınızda otomatik olarak abonenin mail adresine gönderilir. Böylece yeni yazınızı okuması ve geri dönüş yapması daha muhtemel olur.

  Feedburner aboneliği istenildiği takdirde çıkabileceğiniz bir yöntemdir. Bu nedenle başkalarını takip etmek için mail adresinizi eklemeyi dert etmeyin. Özellikle yazılarını başarılı bulduğunuz ve size faydasını olacağını düşündüğünüz bloglar için abone olmanız sizin yararınızadır. Ürettiğiniz içerikleri daha çok kitleye ulaştırmak içi her yol mübahtır. Blog sayfanıza eklediğiniz abonelik formlarını kendi sayfanıza göre düzenleyip ilgi çekici hale getirerek bazı bilgiler ekleyebilirsiniz.

  Formlarda bilgi olarak kaç takipçiniz olduğunu veya ilgili olduğunuz kategorileri vererek abone olmaları için ziyaretçileri yönlendirebilirsiniz. Aşağıda görselini gördüğünüz eklenti üzerine gelindiğinde hareket eden şık bir formdur. Renkleri ve boyutlarıyla dilediğiniz gibi oynayabilirsiniz.

Nasıl Eklerim?
hareketli-eposta-eklentisi

 Hemen aşağıdaki kodu "Gadget Ekle" yöntemiyle JavaScript olarak ekleyin. Kırmızı ile belirttiğim dogushakayilmaz kısmını kendinize göre düzenlemeyi unutmayın.

<div id='subscribe-css'>
<p class='subscribe-note'><span>ABONE OLUN</span> <span class='itatu'>ve</span> Yeni Yazıları Yakından Takip Edin</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=dogushakanyilmaz' class='subscribe-form' method='post' onsubmit='window.open (&apos;https://feedburner.google.com/fb/a/mailverify?uri=dogushakanyilmaz&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='dogushakanyilmaz'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='E-mail Adresinizi Giriniz'/><input class='subscribe-css-email-button' title='' type='submit' value='Gönder'/></form>
</div>
</div>
</div>

  Aşağıdaki kodu da tema kodlarının içindeki ]]></b:skin> kodunun hemen üstüne ekleyerek kaydedin. Abone formunun renkleriyle ilgili değişiklikleri buradan yapacaksınız. Kırmızı ile belirttiğim #374760 kodu arka plan rengini, #3cc091 ise "Gönder" butonu rengini temsil eder. Dilediğiniz renk kodu ile değiştirebilirsiniz.

/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#374760;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:52%;border:0}
.subscribe-css-email-button{background:#3cc091;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#37b185;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}

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 ⤵

Video İndirme Eklentileri ile Hızlı Kullanım

hızlı-video-indirme

 Beğendiğiniz videoları kaydetmek için ücretsiz sitelerini, indirme programlarını ve tarayıcılar için eklentileri kullanabilirsiniz. Daha önce ücretsiz ve online olarak video indirme sitelerini yazmıştım. Eklentiler her zaman daha avantajlıdır çünkü her an ulaşabileceğiniz kolaylıktadır. Tarayıcınızın uygun bir köşesinde kullanmanız için sizi bekler. Bir video beğendiğinizde nasıl indiririm diye araştırmanıza gerek kalmadan bir tıkla indirmenizi sağlar. Eklentilerin kolaylığından faydalanmak için bir kaç seçenek sunarak seçimi size bırakıyorum. Her tarayıcı için farklı eklentiler olduğundan yazıyı ona göre hazırladım.

Google Chrome İçin

1) Video Downloader Professional

 Bu eklenti sayesinde video indirmek sizin için çok kolay olacak. Siz sayfalarda gezinirken video yakaladığında size işaret vererek indirmeye hazır olacak. Eklentiyi tarayıcınıza kurmak için buraya tıklayarak yükleme işlemini tamamlayın. İşlemi tamamladığınızda aşağıdaki görselde olduğu gibi ikon gözükecek. Bu ikon video yakalamadığını gösteriyor aynı zamanda.

video-indirme

 Çünkü yeni bir video yakaladığında indirilebilir olduğunu anlamanız için aşağıdaki gibi ikon beliriyor. Böylece indirilebilir bir video olduğunu anlıyorsunuz.

video-download


 Yeşil oku gördüğünüzde indirmek için tıkladığınızda küçük bir uyarı penceresi açılacak. Orada "Waiting for Server" butonuna tıkladığınızda indirme işlemi başlayacak.

Mozilla Firefox İçin

2) Video DownloadHelper

 Mozilla Firefox tarayıcısı için hazırlanmış güzel bir eklenti. Eklentiyi tarayıcınıza kurmak için buraya tıklayın. Ulaştığınız sayfada "Add to Firefox" butonuna tıklayarak yükleme işlemini tamamlayın. Sitelerde gezinirken video yakalarsa eklenen gri tondaki ikon renklenerek dönmeye başlayacak. Böylece isterseniz indirmek için hazır olduğunu bildirecek. Bundan sonrası sizin kullanımın tecrübenizle devam edecek.

video-eklentisi
3) SaveFrom.net 

 Bu araç online olarak video indirmenize olanak tanıyan iyi bir tarayıcı eklentisidir. Videonun bulunduğu sayfayı açtığınızda indirmek için uzantının düğmesine tıklamanız yeterli. Açılan liste içinde savefrom.net'e git sekmesine tıklayarak istediğiniz format ve boyutta video indirme işlemini başlatabilirsiniz. Bu eklentinin en büyük avantajı Chrome, Firefox, Safari ve Opera ile kullanılabiliyor olmasıdır. Yani bu eklentiyi kurduğunuzda yukarıda saydığım tarayıcıların hepsiyle kullanabileceksiniz.

Google Chrome
Mozilla Firefox
Opera
Safari

tüm-tarayıcılar-için-video-indirme

✔ 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 ⤵