Pages

tudinilo blog

Binbir Yazı Atölyesi

20 Kasım 2017 Pazartesi

Yorum yok

Blogger ilk yayın sonrası reklam ekleme

Blogger siteniz varsa ve içerik bakımından ne kadar yeterli olursa olsun, her zaman uygun alanlara reklam alanı açın. Google veya diğer reklamları yayın altına eklemek için basit ve kısa bir eklenti. Bu sayede her giriş yapan ziyaretçiler içinde bu kısa ilk yayın altına reklam ekleme eklentisi ile blogspot siteniz göze dolgun ve kaliteli görünecektir.

Nasıl eklenir?

Yayın aralarında reklam gösterimi için blogger eklentilerini biliyorsanız soylenecek pek bir şey yok, bilmiyorsanız tudinilo diğer reklam yayını ekleme konularını inceleyebilirsiniz. Kısaca yayın arası reklam eklentisi nasıl eklenir.


  • İlk olarak blogger kontrol panelinizden (html düzenle) sekmesini tıklayın.
  • CTRL-F yardımı ile  altkısımdaki kodu aratın
  • < b:include data='post' name='post'/ > bu kodun ilk ve son arasındaki boşlukları silerek ekleyin.
  • Bulduğunuz bu kodun altına aşağıda verdiğim eklentiyi yerleştirin ve uygun görülen yere reklam kodunuzu ekleyin.
  • < b:if cond='data:blog.pageType == "index"'>
    < b:if cond='data:post.isFirstPost'>

    buraya reklam

    < /b:if>< /b:if>
    Baştaki küçütür işaretinden sonraki boşlukları silerek eklentiyi kullanın. Eklentiyi uyguladıktan sonra kaydedip görüntüleyin. İlk yayınlarınızdan sonra reklam görüntülenmeye başlayacaktır.
    Devamını Oku »

    1 Kasım 2017 Çarşamba

    Yorum yok

    Bağlantılarda tıklama sayısını belirleyen faktörler

    Bağlantılarla Geçiş

    İnsanlar daima kolay olana meyilli fakat zoru gerçekleştirmeyi sever. Buna örnek verecek olursak elektirik akımının en az direnç sağlayan yerden sızarak olası akımı en çüçlü şekilde aktarmasıdır. Beynimizin kolay algıladığı yönlerde başarı oranı artar, birdan fazla çözüm üretir, çözümü güç olan yerlerde pes etmeyi seçeriz. Bu yeniliklerden uzak kalmamıza neden olur. Diğer yandan başkalarını taklit etmek zamanla bir şeyleri başarmaya yöneltir. Kimi insan için doğru bulmasada, taklid ederek bir yere varılabilir.

    Birbirimize olan bağlantımız elektirik tellerinin geçişi gibi bağlantılı. Kim nereden ne kadar ilgi gördüyse bizide o kadar etkiler o yola sevkeder. Bu mantıklı olan aslında ama biz akımın sızan tarafından değil direncin en büyük olduğu yöne sızmalıyız'ki arkadan gelen elektirik akım gücü, bizi takip etsin. Mümkün olmayanı başarmakla mükemmellik elde edilir. Buna deyimim olağanca bir yol izleyerek bağlantı için en uygun yolu siz kendiniz geliştirin.

    bağlantı

    Başlarda ve En Sonunda

    Bir makalede batı avusturya üniversitesinin 12 web sitesinde yaptığı araştırmada bağlantı linki için en iyi yerleşimin, sayfalarda en alt ile en sonunda verilen linkler olduğu tespit edilmiştir. Bu ayrıca bir makalenin ilk ve son satırlarının sayfa ortalarına göre daha dikkat çekici ve akılda kalıcı olduğunuda gösterdi. 

    Renklerin Cazibesi Var

    Renklerin cazibesi olduğunu çoğumuz biliyoruz. Kullandığınız link ve bağlantı sağlayan butonlarda renk seçiminede dikkat ederek göze çarpan bir bağlantı oluşturabilirsiniz. Renklerin verdiği cazibeyi farklı sayfalardan örnek alarak kendi sayfanızda kullanın. Bu herkesin sevdiği bir renk olmaya bilir fakat tasarımınızla uyumlu ve sayfada kararlı bir şekilde gözükecek bir renk seçebilirsiniz.

    Satırlarda Bağlantı faktörleri

    Makalelerde tıknaz bir biçimde bol yazı olsada ziyaretçiler üzerinden geçip sadece üst taraması yapmaya meyillidir. Satırlar bırakarak daha doğal ve hoş bir görünüm katıp, korkutucu görüntüsünden kurtarın. Satırlar arasında kurduğunuz fantastik cümlelerde ve mülaim kelimelerden sonra verdiğiniz bağlantı linki daha ilgi çekici ve tıklanması muhtemel olur. 

    Aynı sayfa içerisinde birden fazla kullandığınız bağlantı linki olursa bunu aynı satırda kullanmanız diğer Satırlara göre farkındalık yaratıp ilgi çekecektir. Bazı araştırmacıların bulgusu ise sade tasarımların karmaşık tasarımlara göre daha çok tercih edildiğini göstermiştir. Bu gelen ziyaretçilerin web sayfanızda daha çpk vakit geçirmesi demektir. Bu faktörler bağlantılarınızın tıklanmasını belirleyen etkenlerdir.
    Devamını Oku »

    30 Ekim 2017 Pazartesi

    Yorum yok

    Alternatif bir adsense reklamı

    En İyi Alternatif adsense Reklam

    Blogunuzdan / sitenizden para kazanmak için reklam seçeneklerini gözden geçiren arkadaşlar için alternatif bir adsense reklam veren popads sitesinden kısaca bahsedicem. Blogunuzdan kaynaklanan içerik veya tasarım, herhangi bir eksiklikten dolayı google adsense'ye kabul edilmeyen site sahipleri, her tür kategoriye sahip blog ve sitelerini, popads şartsız olarak kabul ediyor. Blogunuzun ziyaretçi sayısına güvenerek alacağınız reklam ücreti 1000 tekil kişi için bile oldukça yüksek bir mevla ödeme yapıyor. Belirli kategorilere sahip sitelere verilmeyen google adsense reklamları, bu siteyle koşulsuz bir şekilde sadece forum üzerinden kayıt yaparak anında onay alıyor.
    popads reklam alternatifi

    Bir kumar, spor, film, dizi, en önemliside blogspot siteniz varsa anında onay alacağınızı garanti ederim. Dünya genelinde reklam veren popads reklam ağına katıldığınızda sadece tıklama değil Google adsense gibi gösterim içinde kazanacaksınız. En önemli olayı hangi ülkelerden hit aldığınızdır. Popads reklam veren ağı amerika, kanada başta olmak üzere avrupa ülkelerinden gelen hit'lere çok daha iyi oranlarda ödeme yapıyor. Geri kalan asya ülkeleri için bu oran yüksek denecek kadar büyük bir tutar değil ama ziyaretçi yoğunluğunuza bağlı olarak denemenizi öneririm. Google adsense veya diğer reklam veren sitelerden onay alamayan blog / web siteleri başta olmak üzere herkes için bir adsens alternatifi olabilir. Popads pop-up reklam veren sitesi minimum olarak 5 ABD doları odeme yapıyor ve aynı gün içerisinde (paypal veya payoneer) ile ödemeyi sağlıyor. Sizin alacağınız ödeme yöntemi şimdilik sadece paypal ile mümkün.

    Popads alternatif reklam seçeneği, genel özelliklerini sıralarsak.
    • Sitenizin hit tırafiğine ihtiyaç yok.
    • Belirli bir reklam alanı gerektirmez.
    • Otomatik reklam onayı.
    • Her türlü site/blog kabul edilir.
    • Günlük ödeme gerçekleştirir.
    • paypal ile kolayca ödemenizi alırsınız.
    • Amerikan doları üzerinden çalışır.
    • En az ödeme taleb edebileceğiniz tutar 5$ ABD dolarıdır.
    Bizim ülkemizde pek bilinmeyen bir reklam ağı olsada avrupai ülkelerde en popüler ve en çok kazandıran adsense'e alternatif bir pop-up reklam ağıdır. Yayıncı forumu doldurup gönderdikten 24 saat içerisinde garanti reklam yayını onayı alacaksınız. Reklam seçenekleri SEO dostu olup hiçbir şekilde hitinizde bir değişiklik yapmaz. Verilen reklam seçeneği kodu JavaScrip olarak site veya blogunuza eklersiniz. Tüm verdiğim bilgilerden sonra bu alternatif adsense reklamını kendi blogspot sitenizde kullanmak isterseniz popads.net sitesine giderek birkaç adımda üye olarak reklam onayı alabilirsiniz.
    Devamını Oku »

    29 Ekim 2017 Pazar

    Yorum yok

    Blogger yazar yorumu

    Blogger Yazar Yorumuna icon Ekleme

    Bloglarda blog yazarlarının yorumlara verdiği yanıtı diğer yorumlardan ayırd etmek ve daha çekici bir yorum görünümü sağlamak için kullandığı icon veya yazar yorumu gibi isimden sonra kullanılan eklentilerin, iki şekilde bllogger sitenize eklemenizi göstericem. Bu şekilde bir eklenti ile her giren ziyaretçi, yorumlardaki dikkat çekici yazar yorumunu görebilecek. Yaptığınız yorumlarla ziyaretçilerin dikkatini çekecek, yorum formunu sade halinden daha çekici bir görünüm sağlayacak.
    Örnek olarak yaptığım yorumlara bakabilirsiniz. Blog panelinden tema > html'yi düzenle dedikten sonra sizin için belirlenmiş profil ID'nizi bulun, yaptığınız yorumlardaki kullanıcı adınıza tıklayarak bulabilirsiniz, sayfanızın url linki kısmını. HTML editöründen CTRL-F yardımı ile 'b:skin' yani CSS kodlarımızın bulunduğu kısmı aratıp en alt kısmına aşağıda verdiğim CSS kodunu kopyalayıp yapıştırın.
    a[href="https://www.blogger.com/profile/09582703341938352010"]:after { padding: 2px; border-radius: 5px; margin-left: 10px; background: #21759b; border: 1px solid #1f6f93; content: "yazar"; font-weight: bold; font: normal normal normal 18px/1 FontAwesome; font-size: 10pt; color: #f5f5f5; }
    Buradaki turuncu renk ile belirlediğim kısma kendi profil linkinizi yazın. Tanımlarda kullandığım content:"yazar"; kısmını dilediğiniz gibi değiştirip temanızda yaptığınız yorum için kullanabilirsiniz. Siz bunun yerine gif veya icon kullanmak istiyorsanız turuncu renk ile belirlediğim kısmı silip onun yerine background: url(icon url'si) no-repeat right; yazarak, yazar yorumlarından sonra icon kullanabilirsiniz. Ayrıca background tanımından ilkinide silmeniz gerekir.
    Devamını Oku »

    27 Ekim 2017 Cuma

    Yorum yok

    Blogger için css buton oluşturma

    Blogger buton eklentisi oluşturma

    Bloglar için kullanılan butonları, kolaylık olsun diye css tanımlarıyla birleştirip demo ve download gibi butonlar ortaya çıkarıcaz. CSS tanımlarıyla oluşturduğumuz bu  çok amaçlı butonlar renk ve hover özelliğini alt kısımda verdiğim renkli kod yerleşkesinde renk kodunu belirleyerek rengini değiştirebilirsiniz. İlk olarak div ismi belirleyelim, div ismini bloga ve blogb veriyorum.

    css butonlar
    <div class="bloga"><a href="http://demo">Demo</a></div> <div class="blogb"><a href="http://download">Download </a> <div>
    Bunlar sadece link verilmiş divlerimiz şimdi bunları tanımlayan CSS kodlarına geçicez, her biri için farklı css kodları hazırlayalım. İlk olarak 'bloga' buton için tanım belirleyelim renk, kenarlık, alan açısı, yazı büyüklüğü, arka plan gibi tanımlar kullanıcaz.

    CSS buton bloga için:
    .bloga a{margin-right: 5px; a display: inline-block; height: 30px; width: 100px; line-height: 30px; padding: 7px 10px; border-radius: 8px 0 0 8px; font-size: 14px; border: solid 1px #4c4c4c; background-color: #0084b4; color: white; }

    Burada radius yani kenar eğimi kullanarak farklı bir kombin yapalım.

    CSS buton blogb için:
    .blogb a{ display: inline-block; height: 30px; width: 100px; line-height: 30px; padding: 7px 10px; border-radius: 0 8px 8px 0; font-size: 14px; border: solid 1px #4c4c4c; background-color: #82b440; color: white; }

    Bu buton için de CSS kodlarımızı hazırladık şimdi her ikisinide kapsayan yeni bir div oluşturalım, bu divimizin ismide blogg olsun.

    bloga, blogb kapsamı:
    <div class="blogg"> <div class="bloga"><a href="http://demo">demo</a></div> <div class="blogb"><a href="http://download">download </a> <div></div>
    Olay burada bitmiyor şimdide düzene oturtmak için kapsama divimizin CSS kodlarını kullanalım.
    .blogg { position: relative; margin: auto; display: flex; text-align: center; width: 240px;}
    En son olarak hover özeeliğimizide ekleyerek bitiriyoruz. Bu butona eklediğim hover özelliği her iki buton içinde aynı tanımları içeriyor siz isterseniz farklı hover tanımlarıyla stillerde değişiklik yapabilirsiniz.
    .bloga :hover{ background-color: #f7f7f7; color: #230f0f; }
    .blogb :hover{ background-color: #f7f7f7; color: #230f0f; }
    Evet artık bu butonları dilediğiniz gibi kullanabilirsiniz. İster demo ve download olarak, isterseniz oyun ve eklentilerin önizlemesinde.
    Devamını Oku »

    26 Ekim 2017 Perşembe

    Yorum yok

    Blogger wepress magazin teması

    Blogger Magazin Teması

    blogger için magazin teması

    Bloglar için tema seçmek çok zor. Her telden tema bulmak mümkün artık. Googleye arama yapıldığında binbir çeşit tema görseli ve tema paylaşımı yapan binlerce blog ve w.prees sitesi var. Genel içerikler paylaşmak için genellikle magazin temaları kullanılıyor. Bende genel içerik paylaşmak isteyen arkadaşlara çok şık ve tasarımı etkileyici bir tema seçip paylaşmak istedim. Bulduğum bu magazin temasında herşeye yer verilmiş ve oldukça basit bir kullanıcı deneyimine sahip. Lafımı fazla uzatmadan wepress responsive blogger temasının kaynak kodunu paylaşmak isterim. Demo kullanmadan sadece tema görselini paylaştım umarım beğenirsiniz.
    Tema özellikleri

    • Oldukça hızlı bir tema.
    • Google adsense uyumlu.
    • Duyarlı responsive (mobil) uyumlu.
    • Çoklu reklamlar için, Mobil / Beyaz Arka Plan Şablonunu.
    • Seo uyumlu.

    Devamını Oku »

    9 Ekim 2017 Pazartesi

    Yorum yok

    Kod editörü araçlarini özelleştirme

    Makale editörü - seçenekleri özelleştirme

    Araç editöründen yararlanmayı bilenler için makale, konu yazmak ve sayfa düzeninde fark yaratmak çeşitli özelliştirmeler yaparak mümkün. Kullandığımız platformların bize sunduğu genellikle üst veya sağ kısımda bulunan bu araçlar CSS tanımlarıyla sayfamıza uygun renk ve biçim vererek makale, konularda kısa yazı ve kod paylaşımında kolaylıklar sağlayacak şekilde düzenleyebiliriz. Genellikle kullanacağımız araçlar div, pre, code, blockquote gibi makale araç çubuğunda bulunan seçenekler için CSS kodlarını paylaşıcam. Bu araçları daha önce kullanmayan arkadaşlar için açıklama yapmama gerek yok, deneyerek nasıl kullanıldığını öğrenebilirsiniz. Bu araçlar için kendim oluşturduğum ve kullandığım özelleştirme kodlarını paylaşıcam.

    Div kullanımı ve kodlama(özelleştirme)

    Div'e özellik vermek için CSS tanımlarını div ile birleşik veya CSS kısmına yazabilirsiniz. Bunun için style tagı arasında css tanımı kullanılır. Comi adını verdiğim div'in kullanıldığı kodlar aşağıdadır.

    Div ile birleşik css kodu:
    <div id="pre_header" style=" padding: 8px 15px; color: #fff; font-size: 16px; font-weight: bold; padding-left: 5px; padding-bottom: 2px; padding-top: 2px; background-color: #24a0ab; ">nerdesin:&nbsp;<strong>ziyaretci defteri</strong>&nbsp;
    </div>
    CSS kısmı için kullandığım div kodu: 
    .comi {  padding: 8px 15px; color: #fff; font-size: 16px; font-weight: bold; padding-left: 5px; padding-bottom: 2px; padding-top: 2px; background-color: #24a0ab;}
    Önizlemesi:
    Bu bir div

    Özelleştirilmiş (pre) biçimli yazı kullanımı

    Pre kısaltması kullanılan bu tag biçimli yazı olarak tanımlanır. Sayfada tek satır olarak uzar, bunu  css tanımıyla değiştirip sayfa içerisinde kullandım.örnek görünüm ve kod aşağıdadır.
    Kullandığım pre kodu:
    pre { color: #000; background: #f7f1c6; margin: 0 05px; padding: 8px; border: 1px solid #040404; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; }
    Önizlemesi:
    buraya

    Kod yayınlama kutucuğu(özelleştirme)

    Kod kullanımını genellikle alıntı tagı ile (blockquate) yağtığım için kod kutucuğunu kısa kodlar için kullanıyorum.Ama genel olarak şu şekilde kullanılır <code><pre>kodlar</pre></code> burada kullandığım kutucuk kısa kodlar için. Siz tam kod buyutunda kullanarak kod paylaşımı yapabilirsiniz. Ben kullandığım kod kutucuğu kodlarını paylaşıcam, siz bu ek üzerinde oynama yaparak  kendinize göre boyut ayarlaması yapabilirsiniz. Her hangi bir sorun veya yardım gerektirecek bir durumda yorum kısmına yazarsanız yardımcı olucam. Ayrıca textarea tanımlamasıylada kod kutucuğu oluştura bilirsiniz.

    kod editörü özelleştirme


    Code kutucuğu kodları:
    code { background: rgba(144, 144, 144, 0.075); border-radius: 4px; border: solid 1px; font-family: "Courier New", monospace; font-size: 0.9em; margin: 0 0.25em; padding: 0.25em 0.65em; }
    Kullandığınız tanımlara ait ID araçlarda var olmasına dikkat ederek tüm araçlar'da özelleştirme yapıp renk veya biçimini zevkinize göre ayarlaya bilirsiniz. Vermiş olduğum editör araç seçeneklerinin kullanımını farklı amaçlarla kullanabilir ve kolaylıklar sağlayacak sekilde oluştura bilirsiniz. Genellikle kutucuk oluşturan seçeneklerde değişikliklere değindim, her makale veya konularda bir alıntı yada kod kullanımına ihtiyaç duyulduğu için.

    BLOCKQOTE özelleştirme

    Makale araçları arasında en çok kullandığım ve tüm kod paylaşımlarını yaptığım bu seçenek ,blogger oluştur sekmesinde göz önünde olduğu için seçtim. Fazla bir söze gerek yok.
    blockquote { white-space: pre-wrap; word-wrap: break-word; background: url(http://www.teknobeyin.com/wp-content/themes/astra/images/kodcubugu.png) no-repeat scroll 0 0 #f9f9f9; border: 1px solid #ddd; display: block; font: 500 1em/1.5em Verdana,Sans-Serif; margin: 5px 0; overflow: auto; padding-top: 12px; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; text-align: left; }
    Bu seçenekler dışında tasarım veya içerikler arasında değişiklik yapmak istediğiniz ve kendi tarzınızı yaratmak isterseniz eğer size önerim jQuery öğrenin.
    Devamını Oku »