Google Adsense Ve Diğer Reklam Ağları

Google Adsense kadar etkili olamasalarda, internet reklamcılığı yapan bir çok farklı şirketin olduğundan bahsetmekte fayda var. Peki Google bu reklam ağlarına nasıl bakıyor. Hem başka reklamları hem de Google Adsense reklamlarını sitenizde görüntüleyebilir misiniz? Bu yazımızda bu sorulara cevap arayacağız.

Tahmin edersiniz ki Google, Adsense'ten başka reklam ağlarını sevmez. Kendisine zarar verdiği için ayırca o reklam içeriklerinin nereye gittiğiyle ilgili kendisine garanti veremeyeceğiniz için, kendi reklamlarıyla başka reklam ağlarının reklamlarını aynı anda kullanmanıza izin vermez. Bu çok açık ve net olarak Google Adsense kullanıcı sözleşmesinde yer alıyor. Google yönergeleri bu şekilde haraket etmenizi gerektiriyor. Özellikle Satış Ortaklığı programı ile sitenize koyduğunuz reklamlar konusunda kesinlikle Google sizi uyarıyor. Adsensele aynı sayfada görüntülemeyin.

Diğer reklamlar konusunda Google'ın size izin vermesi için bazı önemli değişiklikler yapmanız gerekiyor. Örneğin, asla diğer reklamlar yapı bakımından Google Adsese reklamlarına benzememeli. Ziyaretçi hangi reklamın kime ait olduğunu hemen anlayabilmeli. Hem renk hem de şekil bakımından bu önemli.

Google Adsense bu şartları karşılayamadığınız durumlarda sitenizin Adsense programına katılmasına izin vermez. Zaten siteniz Adsense reklamlarını yayınlıyorsa, sizi Adsense'ten banlama hakkı vardır ve tespit edildiğinizde bunu yapacaktır.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Neden Yandex Metrica?

Yandex genel olarak, arama motoru dünyasındaki Google egemenliğine son verebilecek kapasitedeki tek
rakip diyebiliriz. Son zamanlarda Yahoo, özellikle Amerika'da atak yapsada arama motoru konusunda, daha fazla çaba göstermesi gerekiyor. Rus arama motoru Yandex, agresif tutumuyla Google'a en yakın rakip olarak görülüyor. Elbette verdiği hizmetler bakımında da aynı şeyi düşünüyoruz. Google'ın verdiği bütün hizmetlerin alternatifi Yandex'te mevcut, neredeyse hepsi.

O hizmetlerden biri Yandex Metrica... Google'ın analitik hizmetine karşı Yandex Metrica hizmeti gerçekten kullanılmaya değer. Şimdi size bunun sebeplerini tek tek sıralamaya çalışacağız. Elbette Analitik'ten de bahsedeceğiz.

Arama sorguları...

Yandex Metrica'da en çok seveceğiniz özelliklerden biri geniş bir arama sorguları yapısı olması. Analitik, sadece Google arama motorunun verilerini ele alıp ona göre size bir yapılan aramalar tablosu sunarken Yandex Metrica, neredeyse bütün arama motorlarının sorgularına yer verir. Yani bir kişi Google'da arama yapıp sitenize geldiyse, ya da Bing veya Yahoo'da arama yapıp sitenize geldiyse bunuda Yandex Metrica'da görmeniz mümkün.

Sadece arama sorgusu değil, ayrıca görsel ve video aramaları içinde aynı durum söz konusu. Bir kişi herhangi bir arama motorunda görsel araması yapıpta sitenize geldiyse bunu diğer aramalardan ayırt edebilmeniz mümkün ve bu çok kolay hale getirilmiş.

Arama sorgularının bu kadar detaylı olması ve diğer bütün arama

motorlarını kapsaması, Analitiğin verdiği sonuçlarla Metrica'nın verdiği sonuçların farklı çıkmasına neden oluyor. Analitik sadece Google sorgularını hesaba kattığı için sizi yanıltabiliyor. Oysa siteniz başka arama motorlarından da ziyaret alıyor.

Gelişmiş arayüz...

Bu konunun üstünde fazla durmayacağız, çünkü aynı özelliğin Google'da da olduğunu biliyoruz. Arayüz konusunda Google, her hizmetinde gayet başarılı. Metrica'nın da en az Google kadar başarılı olduğunu söyleyebiliriz. Yine Google gibi Metrica'da da gelişmiş seçeneklerden, çok çeşitli verilere ulaşabiliyorsunuz. Bu konuyla ilgili son söylenmesi gereken Yandex'in arayüz konusunda Google'dan daha basit olduğunu ve Metrica arayüzünün Analitiğe göre daha kullanıcı dostu olduğunu söylemekte fayda var.

Anlık bilgi...

Google bu konuda Metrica'nın önüne geçmiş; fakat Metrica'nında yakın zaman içinde anlık gösterimleri, şu
anki online sayısını gösteren bir teknoloji geliştireceğine eminiz. Zira anlık olmasada Yandex Metrica'nın böyle bir hizmeti var. Şu anki ziyaretçi sayısını göremeseniz de günün istatistiklerini gün içinde alabiliyorsunuz. Google'da da bu özellik var...

Kod ekleme...

Analitiği ya da Metricayı kullanmaya başlamak için bildiğiniz gibi sitenizin belli kısımlarına uygulamanız gerekiyor. İşte bu anda yine Metrica, basitliği ile ön plana çıkıyor. Bir çok kişi, özellikle yeni başlayanlar, Analitik kodlarını nereye ekleyeceğini bulamazken, Yandex Metrica'nın kodlarını HTML Widgetleriyle bile ekleseniz veriler alınmaya başlıyor. Google'ın kodlarını ise
etiketinden önce yapıştırmanız gerekiyor. Başlangıç seviyesi kullanıcıların bu kısımları kullanmaktan çekindiklerini veya kullanamadıklarını düşündüğünüzde Yandex'in daha kullanışlı olduğunu söylemek, yanlış olmaz.

Zaman içinde Yandex'in diğer hizmetlerinden ve gelişmiş özelliklerinden siz webmasterlara bahsedeceğiz.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İletişim Formu

Blogger kullanıcılarının sıklıkla aradıkları “Blogger İçin İletişim Formu” bu yazımızda sizlerle. Yakın zaman önce Blogger'ın faliyete geçirdiği Widgetlerden “Contact Form” widgetini bir sayfaya adapte etmekle Wordpress benzeri bir iletişim formuna sahip olacağız. Bildiğiniz gibi Blogger için henüz böyle bir eklenti veya herhangi bir iletişim aracı geliştirilmedi. Şimdi teknik detaylara geçelim ve Blogger için harika bir iletişim formu yapalım. Herşeyden önce şablonunuzun yedeğini mutlaka alın.

Adım 1 – Blogger'a iletişim formu ekleyin

Bunun için yönetim panelinden yerleşim sekmesine geçtiğinizde Gadget Ekle deyip “Diğer Gadgetler” kısmından iletişim formunu buluyoruz. Bu formu blogumuza görselde de görüldüğü gibi eklediğimiz zaman ikinci adıma geçebiliriz.

Adım 2 – İletişim formu sayfası oluşturun

Bunun için yönetim panelinden sayfalara tıklayın. Görselde görüldüğü gibi işlemleri sırayla yapın. Daha sonra oluşturduğunuz bu sayfaya bir isim verin. HTML kısmına geçip aşağıdaki kodları sayfaya yapıştırın. Kodda değişiklik yapabileceğiniz yerlere kırmızı şekilde düzenlenmiştir.

<form name='contact-form'>
<div>İsminiz: </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>E-Posta Adresiniz: <em>(Gerekli)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Mesajınız: <em>(Gerekli)</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

Kodu yerleştirdikten sonra bu sayfada yorum yörülmemesi için bir kaç ayar yapmamız lazım. Sağ tarafta bulunan seçeneklere tıklayın. Okuyucu yorumları kısmını “izin verme, mevcut olanı gizle” şeklinde düzenleyin. Oluşturma modunu ise “yazılan htmli yorumla” şeklinde işaretleyin. Görselde herşey gösterilmiştir. Bu işlemden sonra sayfayı kaydedlim.

Adım 3 – Contact Form Widgetini silmek

İlk adımda eklediğimiz Widget'i blogumuzdan kaldırmalıyız. Heryerde görünmesini istemiyorsak eğer. İletişim sayfamızdakinin görünmesi için bazı bölgelerini kaldıracağız. Bu sayede sayfadaki görünecek ve çalışacak. Widget kısmındaki kaybolacak.

Yönetim panelinden şablon sekmesine gelin ve html düzenleye tıklayın. Bundan sonra görselde gördüğünüz üzere Widget'a Atla sekmesinden ContactForm1 kodlarına direk ulaşın. Bu kodlar içerisinden aşağıdaki kodu silin.

Kodun son hali şu şekilde görülmelidir.

Bu işlemleri yaptıktan sonra şablonunuzu kaydedin. Blogger iletişim formunuzu doya doya kullanın. Bu formdan size iletilen mesajlar blogunuzun kayıtlı olduğu maile gönderilecektir. Gayet estetik olduğunu söylemekte fayda var. Bu işlemleri yapma esnasında herhangi bir kısımda sıkıntı yaşayanlar mutlaka bana “Blogger iletişim formumuz” :) ya da yorum yoluyla bize ulaşsınlar.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Nofollow – Google Webmaster Help

Bir Youtube kanalı olan Google Webmaster Help'te nofollow ile ilgili bir soruya, kısa bir video ile cevap

verildi. Bu yazımızda biraz nofollowdan bahsedeceğiz ve videoyu sizlerle paylaşacağız. İlk önce soruyu verelim; Bir site sahibi link inşası yapıyor. Bunu seo için değil direk tıklamalar için gerçekleştirdiğini söylüyor. Bu linklerin nofollow olduğunuda belirtiyor. Bu linkler sitesine Google, ve arama motoru açısından zarar verir mi onu merak ediyor.

Nofollow ile ilgili yayınlanan videoda verilen cevap kısaca “Hayır”... Nofollow linkler kesinlikle sitenize zarar vermez; fakat link inşası işini abartırsanız zarar görebilirsiniz. Bıraktığınız linkler nofollow olsa bile abarttığınız zaman bundan rahatsız olan insanlar muhtemelen sizi spam olarak şikayet edeceklerdir. Spam olarak şikayet edilen yorum ve diğer konu içi linkleriniz Google tarafından hoş karşılanmayabilir. Size zarar veren bu olacaktır. Videoda açıklanan bu kadar. İşte video;

Nofollow Hakkında Detay

Nofollow; arama motoruna takip edilmemesi gereken linkleri belirtmenin kolay yoludur. Nofollow ile etiketlenmiş linkler arama motoru botları tarafından görmezden gelinir. Nerede kullanmanız gerektiğini çok iyi bilmelisiniz. Her yerde nofollow kullanırsanız seo açısından gelişiminiz durabilir. Gerekli yerlerde kullanmazsanız arama motoru sizi sıkıntıya sokabilir.

Nofollow Kullanılması Gereken Yerler

Yorum ve ziyaretçi içerikleri; site sahipleri, yorumlarını herkese açtılarsa ve yorum yapanların paylaşabilecekleri linklerin güvenliğini garanti edemiyorlarsa yorumlar kısmında mutlaka nofollow kullanmalılar. Spam yorumlar sitenize zarar verebilir.

Parayla satılan bağlantılar; bazı webmasterlar bloglarında ücret karşılığı link yayınlamaktadırlar. Bu footerda olabileceği gibi yazı içi link şeklinde de olabiliyor. Pr arttırmak, veya herhangi bir sistemde rank arttırmak isteyen kişiler kaliteli içerik sahibi sitelerden para karşılığı link talep etmektedirler. Sizde bu şekilde link satıyorsanız nofollow olmasına dikkat edin. Zira arama motoru botu içeriğin ne olduğunu bilmesi gerekmektedir. İçerik bir reklamsa, ya bunun reklam olduğunu belirteceksiniz. Ya da nofollow kullanacaksınız. Sık tekrarlanan bir durum olduğunda arama motoru sıralamasında sıkıntıya düşebilirsiniz.

Gereksiz linkler; blogunuzu ziyaret eden arama motoru botuna yol göstermek içinde nofollow kullanmalısınız. Blogunuzdaki ya da genel olarak sitenizdeki bot için gereksiz linkleri taramasına izin vermeyerek işlemlerini hızlandırabilir ve temiz bir site olduğunuzu kanıtlayabilirsiniz. Örnek vermek gerekirse, blogunuzdaki oturum açma linklerine nofollow etiketi verin. Çünkü bot sitenize kayıt olmayacaktır. Bu nedenle o link onun için gereksizdir.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Yandan Açılan Sosyal Paylaşım Sitesi Eklentisi

Sitenizin yan tarafında görselde gördüğünüz gibi sosyal paylaşım siteleri (Facebook, Twitter, Google +, E-mail) çıkmasını istiyorsanız bu eklentiyi eklemelisiniz. Bu eklentiyi eklemek için aşağıdaki kodu sitenize Gadget ile ekleyin. 

<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#twitter_div{width:246px;height:353px;overflow:hidden;}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px;}#knfeedburner_div{width:300px;height:97px;margin-top:25px;overflow:hidden;}#kakinetwork_div{width:300px;height:97px;overflow:hidden;}/* right side style */#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right img{position:absolute;top:-2px;left:-35px;}#facebook_right iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px;}#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0;}#google_plus_right{z-index:10003;background-color:#f2f2f2;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-right:2px solid #0056a0;border-left:hidden;width:152px;height:97px;position:fixed;right:-154px;}#google_plus_right_img{position:absolute;top:-2px;left:-33px;border:0;}#feedburner_right{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left:hidden;width:300px;height:97px;position:fixed;right:-303px;}#feedburner_right_img{position:absolute;top:-2px;left:-33px;border:0;}#kakinetwork_right{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_right img{position:absolute;top:-2px;left:-101px;}/* left side style */#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}#twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px;}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0;}#google_plus_left{z-index:10003;background-color:#006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-left:2px solid #0056a0;border-right:hidden;width:152px;height:97px;position:fixed;left:-154px;}#google_plus_left_img{position:absolute;top:-2px;right:-33px;border:0;}#feedburner_left{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-left:2px solid #5b5b5b;border-right:hidden;width:300px;height:97px;position:fixed;left:-303px;}#feedburner_left_img{position:absolute;top:-2px;right:-33px;border:0;}#kakinetwork_left{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_left img{position:absolute;top:-2px;right:-101px;}.box-title1{border:1px solid #ddd;/*border-radius*/-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;/*box-shadow*/-webkit-box-shadow:5px 5px 5px #CCCCCC;-moz-box-shadow:5px 5px 5px #CCCCCC;box-shadow:5px 5px 5px #CCCCCC;padding:10px;margin:10px 0;}.enteryouremail{background:#fff !important;border:1px solid #d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:165px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0px;}.submitbutton{background:#f2f2f2;border:1px solid #F66303;/*box-shadow*/-webkit-box-shadow:3px 3px 3px #666;box-shadow:3px 3px 3px #666;font:bold 12px Arial, sans-serif;color:#000000;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;/*border-radius*/-webkit-border-radius:5px;border-radius:5px;cursor:pointer;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });</script><div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyRqYZHZrNMWFleIC2z9a6rPU1xmhHc_0LT-Dw4f0C-FKemlv2_T0T8dOOdebe6geJ07lKTzSknklwAGKiU03WwXCEnEyVLJ1U-DRRyoxp7DDSZCsPPiKtYVSyC3HM63c8RRdQ9FZkLrg/s1600/helperblogger.com-facebook-icon.png" alt="" /><iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/XXXXX&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356" scrolling="no"></iframe></div></div></div><div id="on"><div id="twitter_right" style="top: 35%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixzvCv7aPf-U7k3N8sOnESfqHiEv3bRlO0pNMhbfW1k-OMKWO1TZINCjQJhq_08oAulseB933hhzGG-GZrB-qCuMLKD-2W0lXZTCPgif8uh2gvLyTV3U149rwwear9PIapk5tMrem0SQk/s1600/helperblogger.com-twitter-icon.png" /><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('TWİTTERADRES').start();</script></div></div></div><div id="on"><div id="google_plus_right" style="top: 52%;"><div id="google_plus_div"><img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieHrvkni9nKGezDEmCzTe-nM9JbLPV3Q_3J9VnYqhcf6l0PsSXA7DJcDG2OwiiktCFqz9C7z-qnivw-v5q1J3l0pWudDAz9XrxoyuJYj5nbV4kIxult2JbamGkicqtF2kZsoaupvQ9ZJg/s1600/helperblogger.com-google-plus-icon.png" /><div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone></div></div></div><div id="on"><div id="feedburner_right" style=" top: 69%;"><div id="knfeedburner_div"><center><h4 style="color:#F66303;">You can also receive Free Email Updates:</h4><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNERADRES', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="FEEDBURNERADRES" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXr5c0gJ5ygO_am_Jl3bCyST8fASXigdaMif11ZuUEsU83v1hz23xZx0bckOn6f9m2nFbIjRz06hfqQHs6OHi0fkYqtXfwz6eGZNhpwXFMdmkHsbrAIdJK5DTs8Ziu_jF9Fnce7wzx1Eg/s1600/helperblogger.com-subscribe-icon.png" /></div></div></div></div> 

Kırmızı yazılmış yerlere, Facebook, Twitter ve Feedburner adreslerinizi yazınız , ( https://www.facebook.com/XXXXX, TWİTTERADRES, FEEDBURNERADRES kısımlarına kendi adreslerinizi yazınız.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Sadece Konu Başlıklarını Gösterme Eklentisi

Blogger’da sadece konu başlıklarını görmek istiyorsanız bu eklenti tam size göredir. Bu eklentinin görselini de görüyorsunuz. Eğer Blogger bloğunuza eklerseniz görseldeki gibi konu başlıkları şeklinde görünecektir. 

Bu eklentiyi Blogger’a eklemek için ne yapacaksınız? 

İlk işiniz aşağıdaki kodu bulmak. 

<b:include data='post' name='post'/> 

Yukarıdaki kodu bulduysanız onu silin yerine aşağıdaki kodları yapıştırın. 

<b:if cond='data:blog.homepageUrl
!= data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if> 

Yapmanız gerekenler bu kadar. Bunu yaptığınız zaman artık bloğunuz konu başlıkları şeklinde görünecektir.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Üzerine Fare Gelince Dairesel Çıkan Paylaş Butonları

Bu blogger eklentisinin demosunu bu adresten görebilirsiniz. Ayrıca görselini de sizinle paylaştım. Peki, bu eklentiyi Blogger bloğunuza nasıl eklersiniz? 

İlk olarak aşağıdaki kodu bulun. 

</body> 

Bu kodu bulduktan sonra hemen üstüne aşağıdaki kodu yapıştırın. 

<!-- Start Shareaholic Sassy Bookmarks HTML (webmaster.10line.net)-->
<div class="shr_ss shr_publisher">
</div>
<!-- End Shareaholic Sassy Bookmarks HTML (helperblogger.com) -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type="text/javascript">
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type="text/javascript">
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>
<!-- End Shareaholic Sassy Bookmarks script (webmaster.10line.net) --> 

Şablonunuzu kaydedin ve çıkın. Artık bu eklentiye sahipsiniz.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Dairesel Blogger Eklentisi

Blogunuzun görselliği açısından oldukça yardımcı olacak olan b eklenti göze hitap ediyor. Görselden de gördüğünüz gibi butonlar daire şeklinde. Ayrıca butonların üzerine fareyi getirdiğiniz zaman çeşitli hareketler de yapıyor. 

Bu eklentiyi edinmek isterseniz ne yapmalısınız?

İlk olarak aşağıdaki kodu şablon – HTML’yi düzenle yolunu kullanarak bulun. 

Kod: 

]]></b:skin> 

Yukarıdaki kodun hemen üstüne aşağıdaki kodu ekleyin. 

.a-btn{
width:60px;
height:60px;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
display:block;
margin:20px;
float:left;
background:#f0ad4e;
position:relative;
-webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff;
-moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff;
box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}
.a-btn span{
display:table-cell;
width:40px;
height:40px;
padding:10px;
text-align:center;
vertical-align:middle;
font-size:16px;
color:#fff;
text-shadow:0px 1px 1px #A03F16;
font-family:"Arvo", "Myriad Pro", "Trebuchet MS", sans-serif;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}
.a-btn span:nth-child(1),
.a-btn span:nth-child(3){
position:absolute;
top:0px;
left:0px;
font-size:16px;
line-height:19px;
opacity:0;
}
.a-btn span:nth-child(1){
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBUlJ5LkooyJxdASUhXqQhYKNIA19jFn_TzZYc2plELt5vWg_LsQGcqvBjp_gRFL4mlOhCYpWUJ9s7RmGM92BK_Xc0aiEM3S-hBA2FXKhkSAMlt8BsjeRIc9k29-e4uC_qMaveBUWBPI/s1600/star.png) no-repeat center center;
opacity:0.2;
}
.a-btn:hover{
background:rgba(170, 77, 27, 0.6);
-webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff;
-moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff;
box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff;
}
.a-btn:hover span:nth-child(3){
opacity:1;
}
.a-btn:hover span:nth-child(2){
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0);
}
.a-btn:hover span:nth-child(1){
-webkit-animation:rotate 1s linear;
-moz-animation:rotate 1s linear;
animation:rotate 1s linear;
}
.a-btn:active{
-webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff;
-moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff;
box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff;
}
.a-btn:active span:nth-child(2){
color:rgba(170, 77, 27, 0.8);
text-shadow:0px 1px 1px rgba(255, 255, 255, 0.6);
}
@keyframes rotate{
0% { transform: scale(1) rotate(0);}
50% { transform: scale(0.5) rotate(180deg);}
100% { transform: scale(1) rotate(360deg);}
}
@-webkit-keyframes rotate{
0% { -webkit-transform: scale(1) rotate(0);}
50% { -webkit-transform: scale(0.5) rotate(180deg);}
100% { -webkit-transform: scale(1) rotate(360deg);}
}
@-moz-keyframes rotate{
0% { -moz-transform: scale(1) rotate(0);}
50% { -moz-transform: scale(0.5) rotate(180deg);}
100% { -moz-transform: scale(1) rotate(360deg);}
} 

Bu kodları girerek eklentiyi hazır hale getiriyorsunuz. Yapmanız gereken işlem bu kadar. Ancak siz yazı içinde bu eklentiyi kullanmak isterseniz ekstra olarak aşağıdaki kodları da kullanmalısınız. 

div class="button-wrapper">
<a href="#" class="a-btn"><span></span>
<span>Sign up</span>
<span>It's free!</span></a>
<a href="#" class="a-btn"><span></span>
<span>Join Now</span>
<span>It's free!</span></a>
<a href="#" class="a-btn"><span></span>
<span>Enter</span>
<span>It's free!</span></a>
<a href="#" class="a-btn">
<span></span>
<span>Get in</span>
<span>It's free!</span></a>
</div>

Yapmanız gerekenler bu kadar. Artık eklentiniz tamamen hazır hale gelmiştir.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Dikey Navigation Menüsü

Eğer blogger bloğunuzda görselde gösterdiğimiz gibi bir menü bulundurmak istiyorsanız kodları eklemeniz yeterlidir. 

Bu eklentiyi nasıl yüklersiniz? 

Şablondan HTML’yi düzenleye tıklayın. Orada aşağıdaki kodu bulun. 

Kod: 

]]></b:skin> 

Daha sonra hemen üst kısmına aşağıdaki kodu yapıştırın. 

#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH1AV4EgoPQPg0ZkYjD9RsH95N9JwIPRb44tXyw0xfBAYPijIuKGSAiBgW8vOXU8zW66H3j2FzdIBJncW9yaNg8mOumMC5xLeLb8sBSEXtBtmMcPF-Bf8AhCrJ0DJlV_QCl6FrKfNyu6g/s288/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH1AV4EgoPQPg0ZkYjD9RsH95N9JwIPRb44tXyw0xfBAYPijIuKGSAiBgW8vOXU8zW66H3j2FzdIBJncW9yaNg8mOumMC5xLeLb8sBSEXtBtmMcPF-Bf8AhCrJ0DJlV_QCl6FrKfNyu6g/s288/menu9.gif) 0 -32px; padding: 8px 0 0 35px; } 

Daha sonra Yerleşim – Gatget Ekle – HTML/JavaScript yoluyla istediğiniz yere aşağıdaki kodu ekleyin. 

<div id="menu9"> <ul> <li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 4</a></li>
<li><a href="#">MENU 5</a></li> </ul> </div> 

Kırmızı alanlara görülmesini istediğiniz yazıyı yazın. Mavi alanlara ise gidilmesi gereken linkleri koyun. Yapmanız gereken bu kadar.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Renkli En Popüler Yayınlar Eklentisi!

Blogger bloğunuzda bu eklenti değişik bir ortam katacaktır. Bu eklentiyi edinmek için aşağıda sizlere anlattığımız yolu takip edin. 

Şablon – HTML’yi düzenle butonuna tıklayıp kodların bulunduğu alana gidin. Ardından da aşağıda verdiğim kodu bulun. 

Kod: 

]]></b:skin> 

Bu kodu bulduğunuz zaman hemen üstüne aşağıdaki kodu yapıştırın. 

Kod: 

/*Renkli Populer Yayınlar Eklentisi Baslangıcı http:// webmaster.10line.net */
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:30px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:89%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:89%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:89%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:89%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
/*Renkli Populer Yayınlar Eklentisi Sonu http://webmaster.10line.net*/

Bu kodu hemen üstüne yapıştırdıktan sonra şablonunuzu kaydedin. Yapmanız gereken tüm işlemler bu kadar. Artık renkli popüler yayınlar eklentiniz hazır durumdadır.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger’ınızda Etiketleri Hareketlendirme Eklentisi

Blogger’ınızda etiketlerin hareketlenmesini ister misiniz? Eğer bu eklentiyi yükleyip bloğunuzun daha çekici hale gelmesini istiyorsanız aşağıdaki adımları uygulayın. 

Aşağıdaki kodu bulun. 

Kod: 

]]></b:skin> 

Bu kodun bir satır üstüne aşağıdaki kodu yapıştırın ve şablonunuzu kaydedin. 

/*-----Etiketleriniz hareketlensin webmaster.10line.net----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover {
text-decoration: none;
} 

Kodu yapıştırdıktan sonra şablonu kaydet deyin. Eklenti kullanıma hazırdır.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger’da 3 Boyutlu Arama Kutusu Eklentisi

Blogger’ınızda 3 boyutlu arama kutusu görmek ister misiniz? Diğer arama kutularına göre daha hoş bir ortam yaratıyor. Görselde de gördüğünüz gibi bir arama kutusu ortaya çıkıyor. Bu eklentiyi eklemek için aşağıdaki kodları Yerleşim - Gatget Ekle – HTML/JavaScript yolunu takip edip yapıştırın. 

Kodlar:

<style type="text/css">
.form-wrapper {
width: 250px;
padding: 8px;
margin: 10px auto;
overflow: hidden;
border-width: 1px;
border-style: solid;
border-color: #dedede #bababa #aaa #bababa;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: #f6f6f6;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}
.form-wrapper #search {
width: 160px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #ccc;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.form-wrapper #search:focus {
outline: 0;
border-color: #aaa;
-moz-box-shadow: 0 1px 1px #bbb inset;
-webkit-box-shadow: 0 1px 1px #bbb inset;
box-shadow: 0 1px 1px #bbb inset;
}
.form-wrapper #search::-webkit-input-placeholder {
color: #999;
font-weight: normal;
}
.form-wrapper #search:-moz-placeholder {
color: #999;
font-weight: normal;
}
.form-wrapper #search:-ms-input-placeholder {
color: #999;
font-weight: normal;
}
.thumb{position:relative;left:4px;top:1px; border:8px solid transparent;-webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}
.form-wrapper #submit {
float: right;
border: 1px solid #00748f;
height: 42px;
width: 70px;
padding: 0;
cursor: pointer;
font: bold 15px Arial, Helvetica;
color: #fafafa;
text-transform: uppercase;
background-color: #0483a0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
background-image: linear-gradient(top, #31b2c3, #0483a0);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}
.form-wrapper #submit:hover,
.form-wrapper #submit:focus {
background-color: #31b2c3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
background-image: linear-gradient(top, #0483a0, #31b2c3);
}
.form-wrapper #submit:active {
outline: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
.form-wrapper #submit::-moz-focus-inner {
border: 0;
}
</style>
<form class="form-wrapper" action="/search" method="get">
<input id="search" name="q" type="text" placeholder="ARA.." />
<input id="submit" type="submit" value="ARA.." />
</form> 

Yapmanız gerekenler bu kadar. Artık bloğunuzda 3D arama kutusu yer alıyor.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin En Çok Yorum Yapan Kişiler Eklentisi

Blogunuzdaki yayınlara yorum yapan kişiler bir liste ile kenarda bir yerde çıksın istiyorsanız bu eklenti tam size göredir. Bu bloğunuzu ziyaret eden kişiler tarafından da çok sevilecektir ve onları yorum yapmaya itecektir. 

Peki, bu eklentiyi nasıl bloğunuza eklersiniz? 

Aşağıda verdiğimiz kodları Yerleşim – Gadget Ekle – HTML/JavaScript yolunu takip ederek ekleyin. 

<style type="text/css">
.top-commenter-line img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style>
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://www.webmaster.10line.net/
//
// CONFIG:
var maxTopCommenters = 5; // how big a list of top commentators
var minComments = 1; // how many comments must top commentator have at least
var numDays = 0; // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true; // true: exclude my own comments
var excludeUsers = ["Anonymous", "someotherusertoexclude"]; // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = ''; // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 56;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrgQd6nqgZ58m-Dt6WQDek9pp8qV6-DIUvLPuWbsLgxlOHJt_IvhdsL5Sjexr2vyyDni7_Kjao_8nhM84wI8dPsmn9pMzPLC0Jo_T_WrzMAGdHBeIYR6L3TFMYlSq8PIn55hkrlMdtc1Y/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = ''; // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
Array.prototype.indexOf=function(obj) {
for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
return -1;
}}
function replaceTopCmtVars(text, item, position)
{
if(!item || !item.author) return text;
var author = item.author;
var authorUri = "";
if(author.uri && author.uri.$t != "")
authorUri = author.uri.$t;
var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = author.gd$image.src;
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
avaimg = urlNoAvatar;
var newsize="s"+sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
if(cropAvatar) newsize+="-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
var authorName = author.name.$t;
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
authorName = authorName.substr(0, maxUserNameLength-3) + "...";
var authorcode = authorName;
if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';
text = text.replace('[user]', authorcode);
text = text.replace('[image]', imgcode);
text = text.replace('[#]', position);
text = text.replace('[count]', item.count);
return text;
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
var one_day=1000*60*60*24;
var today = new Date();
if(urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break;
}
}
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
if(numDays > 0) {
var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
//Calculate difference btw the two dates, and convert to days
var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
if(days > numDays) break;
}
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;

if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
continue;
var authorName = entry.author[0].name.$t;
if(excludeUsers.indexOf(authorName) != -1)
continue;
var hash=entry.author[0].name.$t + "-" + authorUri;
if(topcommenters[hash])
topcommenters[hash].count++;
else {
var commenter = new Object();
commenter.author = entry.author[0];
commenter.count = 1;
topcommenters[hash] = commenter;
}
}
if(json.feed.entry.length == 200) {
ndxbase += 200;
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
return;
}
// convert object to array of tuples
var tuplear = [];
for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
tuplear.sort(function(a, b) {
if(b[1].count-a[1].count)
return b[1].count-a[1].count;
return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
});
// list top topcommenters:
var realcount = 0;
for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
var item = tuplear[i][1];
if(item.count < minComments)
break;
document.write('<di'+'v class="top-commenter-line">');
document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
document.write('</d'+'iv>');
realcount++;
}
if(!realcount)
document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script> 

Yapmanız gerekenler bu kadar. Blogunuzda hazır olarak bu eklentiyi görebilirsiniz.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Resim Üzerine Fare Gelince Açıklama Çıkaran Eklenti!

Blogger bloğunuzda kullandığınız resimlerin üzerine fare ile gelindiği zaman açıklama çıkar. Bu eklenti bu görevi görür. Eğer bu eklentiyi edinmek isterseniz aşağıdaki yolları izleyin. 

İlk olarak aşağıdaki kodu bulun: 

]]></b:skin> 

Yukarıdaki kodun üzerine hemen alttaki kodları yapıştırın. 

.imagepluscontainer{ /* main image container */
position: relative;
z-index: 1;
}
.imagepluscontainer img{ /* CSS for image within container */
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}
.imagepluscontainer div.desc a{
color: white;
}
.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */
} 

Bu işlemleri tamamladıysanız aşağıdaki kod dizilimini kullanmalısınız. Bunun ardından her şey hazır olacaktır. 

<div class="imagepluscontainer" >
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8IwEdVfxZ7S7rJcFMqmWXJpy_czg38qBCIr39dBMfpA2PtdnZ23VgsWgfPnNDg8r_vUr_q4RPQ0bcFzoNKkYuJCO5HzuYqVCGQqGKQRElOnbLyEj22JFLnEkRIZOpNmKFu8wbrCajd2TO/s1600/yorum.png" style="width:263px; height:199px; z-index:2" />
<div class="desc">

Birçok Blogger eklentisini www.webmaster.10line.net sitesinde bulabilirsiniz.

</div>
</div> 

Eklentiniz tamamen hazır duruma gelmiştir.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Yağlı Boya Sosyal Paylaşım Butonu

Blogger bloğunuza uygulayabileceğiniz n iyi butonlardan bir tanesidir. Görünüm bakımından muhteşem olan bu paylaşım butonlarını nasıl Blogger’a uygulayabileceğinizi anlatacağız. 

Nasıl eklersiniz? 

İlk olarak altta yazılan kodu bulun. 

]]></b:skin> 

Ardından hemen üst tarafına aşağıdaki kodları yapıştırın. 

/* Yağlı boya tarzında sosyal buton eklentisi başlangıç.....www.webmaster.10line.net */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
} 

Bu işlemi yaptıktan sonra yerleşim – gatget ekle – HTML/JavaScript yolunu takip ederek aşağıdaki kodları ekleyiniz. 

<ul class="bubblewrap">
<li><a href="http://www.plus.google.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtF-PsKMsIQUqR8FhLHwtRQSJzA22dvHVJKu4wLKqCCJMNEviSo7GyNG8ock7ATe6G24Ooir8RzZcJDkcHP-5FPJP4A6cVTHOSC6noZZQvteuwYNCqSkhwyqTMpHky7HIcSAVhsYXSS-U/s1600/bloggertrix.com-Google-icon.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.facebook.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDTsnD_Tv1TDm_bjNzExGFwr7b30yF9_A7Mtwicv7YgRpGPZ3r_CewF7jFeNxsH5V6FVNfswXZtCtsNVijoqBu7rgSNIbO9mARSIHbte04OVVcmdj6q8VsSBGNR7Y-QsqBopUY4VLVTug/s1600/bloggertrix.com-Facebook-icon.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.twitter/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6OYNlEAf2U1N11b8VzZAx_5gjft3hOuecpKY8S-92UWzMMeIOy5YteZEsyJhVLCXBvTS4gujDkU3IQQnJ3h7pM_lQNOG1HvaaWPG9imQLpiIL1v8jDF1ZBtyE7aFVhmq4GaQ68tBZCfk/s1600/bloggertrix.com-Twitter-icon.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3jEM8qCUBhntR3pHnm6FzltXo8lxdgXiwjcxd0ynSXO2PRx2UYtCp3v45wrDjd2gvHb6aJ9PEqoukYO0XegrHCK_SdbJ0tqrebhCepSRObaa2VTEhUnC5ROVFDOC9O1Bwz-KYYoPeJWo/s1600/bloggertrix.com-RSS-icon.png" title="Add RSS Feed" /></a></li>
</ul> 

Yukarıdaki kodda yer alan XXXXX yerine kendi adreslerinizi yazın. Yapmanız gerekenler bu kadar. Eklentiniz hazır ve kullanılabilir.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger Blogunuza Yıl Başı Eklentisi

Blogunuzun sol üst köşesinde “mutlu yıllar” yazmasını istiyorsanız bu eklenti sizin için ideal. Bu eklentiyi yılbaşlarında ya da yılbaşına yaklaştığınızda kullanabilirsiniz. 

<imgsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisySqfVvzGB9wX1KIZXHhT1t-zGCFLuZ-ekyw0E5wL33HnExd7sMWGggaOTnoxBzyoquUo-IliahiNUSrX3wv7dYho0s8jdzL0luOMGu_DqQ8Ny6nrceFnc8_AixRSrGyzURPSdpD7QyH-/s1600/yeniy%C4%B1l.png"style="position:fixed;top: 0px;left:0px;border:none;z-index:5; background-color: transparent;"/> 

Yukarıdaki kodu ,Yerleşim - Gadget Ekle – HTML/JavaScript yolunu izleyerek bloğunuza ekleyeceksiniz. Tüm yapmanız gereken budur. Eğer sol üstte değil de sol alt köşede görünmesini istiyorsanız “top” değerini “bottom” olarak değiştirmeniz yeterlidir.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Yararlı Wordpress Kodları

Wordpress bloğunuz için yararlı bir sürü kod vardır. Kodlarla sitenize komut edebilirsiniz. Bu kodları ve ne işe yaradıklarını aşağıda sizler için paylaştık. 

<?php the_content(); ?>
Makale içeriği gösterir.. 

<?php if(have_posts()) : ?>
Konu olup olmadığını sorgular 

<?php get_header(); ?>
Temanın header.php dosyasını çağırır..(Üst kısım)

<?php get_sidebar(); ?>
Temanın sidebar.php dosyasını çağırır..(Yanmenü) 

<?php get_footer(); ?>
Temanın footer.php dosyasını çağırır..(Alt kısım) 

<?php the_time('m-d-y') ?>
İlgili konunun tarihini çeker. 

<?php comments_popup_link(); ?>
İlgili konunun açılır sayfada yorum sayfası linkini verir. 

<?php the_title(); ?>
İlgili konunun başlığını çeker. 

<?php the_permalink() ?>
İlgili konunun kalıcı bağlantıları (sef url) adresini gösterir.

<?php the_category(', ') ?>
İlgili konunun kategori ismini gösterir..Birden fazla kategori mevcut ise virgülle ayırır.. 

<?php the_author(); ?>
İlgili konunun yazarını gösterir.. 

<?php the_ID(); ?>
İlgili konun id numarasını gösterir. 

<?php edit_post_link(); ?>
İlgili konunun düzeltme linkini gösterir..Sadece admin ve yazarlar görebilir. 

<?php comments_template(); ?>
İlgili konunun tema dosyasını çağırır..Comments.php 

<?php wp_list_pages(); ?>
Son yazdığınız sayfaları listeler.. 

<?php wp_list_cats(); ?>
Kategorileri listeler

<?php next_post_link(' %link ') ?>
Bİr sonraki konunun linkini gösterir. 

<?php previous_post_link('%link') ?>
Bir önceki konunun linkini gösterir. 

<?php get_calendar(); ?>
Takvimi gösterir.. 

<?php wp_get_archives() ?>
Aylık/Yıllık arşivi gösterir.. 

<?php posts_nav_link(); ?>
Sonraki ve önceki konulara geçme menüsünü gösterir.. 

<?php bloginfo(’description’); ?>
Blog açıklamasını gösterir.. 

<?php bloginfo('name'); ?>
Sitenin adını gösterir. 

<?php wp_title(); ?>
Site başlığını gösterir.. 

<?php bloginfo('stylesheet_url'); ?>
Style.css adresini verir..Temanızın içindeki style.css adresini varsayılan olarak alır. 

<?php bloginfo('pingback_url'); ?>
Geri besleme adresini verir.. 

<?php bloginfo('template_url'); ?>
Tema adresinizi verir.. 

<?php bloginfo('version'); ?>
Kullandığınız wordpress versiyonunu gösterir. 

<?php bloginfo('atom_url'); ?>
Atom adresinizi gösterir. 

<?php bloginfo('rss2_url'); ?>
Rss adresinizi gösterir.. 

<?php bloginfo('url'); ?>
Sitenizin adresini gösterir.. 

<?php bloginfo('html_type'); ?>
Html versiyonunu gösterir. 

<?php bloginfo('charset'); ?>
Kullandığınız karakter (dil) parametrelerini gösterir.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Sosyal Paylaşım Eklentisi

Retro tarzı bir sosyal paylaşım eklentisini sizlerle paylaşıyoruz. Çok güzel bir eklenti. Hareketleriyle, görüntüsüyle çok hoş duruyor. 

Nasıl yaparsınız? 

Aşağıda verdiğim kodları yerleşim -> gatget ekle -> HTML -> JavaScript yolunu takip ederek ekleyiniz. 

Kodlar: 

<style>
/* Retro tarzı blogger sosyal paylasim webmaster.10line.net */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}</style>


<br />
<center>
<br />
<ul class="bubblewrap">
<li><a href="http://www.plus.google.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUi4uw_AW9b0lUcpL7bR6oBdXeaDQWX-3HyPpO0wFocE61qXOx-5_3gfLOf_zk3yaL8-SrEXIUUAER4RikBGWX6QnzEc_fjrw2mCmZ47kacxif9p7UCsS8j62v5HvdiZSaqRUf6if1uYw/s1600/bloggertrix-google-icon.png" title="Add to Facebook" /></a></li>


<li><a href="http://www.facebook.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjYrA7a554Nu3ixTqj03fAR3bdJyCPrhY_qPOsXNJTKPaVhacAcWNsUQ-oUa-T35BSQsdiVwOlI7A8T4rv0F4iV79f2rXY6KaVjYq-MxUN_fuipoQ_q_CikfqMq6GVwZi8NtNOH4GtCBU/s1600/bloggertrix-facebook-icon.png" title="Add to Facebook" /></a></li>


<li><a href="http://www.pinterest.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1uvZrdA5G7uKqeCdzU5-g87vhaqxHNVVc89ZhRrB9i5X0Sr4pt-Tb5TFrwqfGo7jTsX-eXeNZ2zEc3SMTtj_gnmG6fwLn43Ptj92bHOfCWDKPzWxTeJCwg4MNJJ3v8DYkst57TawHK8c/s1600/bloggertrix-pinterest-icon.png" title="Add to Digg" /></a></li>


<li><a href="http://www.twitter/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieQNzCJQ0X6BiB5suH0kaZJREjuDHgy0buDUTwqlMZqlNjfHF3r9fPeEwRLlBViyBFydtmnqLQo8RkMFTJ4DBpSHlIEbU88kSjX2gCQ5Q2A2T6KCh62dvYZ5Uc1fYXCx74nydwGu82SHc/s1600/bloggertrix-twitter-icon.png" title="Add to Twitter" /></a></li>


<li><a href="http://feeds2.feedburner.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz9MdNGYZ-Hd8S8VsXxJ0VwoZWLQeAhNfnSsduD24isLvasJQx23ZRoEp7_evs5jZeiLKYWWvbBVp9pc20bLM30DQNp5iQSuZ_Yz6LlHKunUEAYLwHqffSzg4-aBgfWOePB0JJmHswgjY/s1600/bloggertrix-rss-feed-icon.png" title="Add RSS Feed" /></a></li>
</ul> 

Yukarıdaki kodlarda geçen xxxxx yazan yerlere kendi sosyal paylaşım adreslerinizi yazınız.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Yan Menü Eklentisi Nasıl Yapılır?

Bu eklenti bloğunuza şık bir görünüm katar. Görselde de gördüğünüz gibi renkli ve ilgi çekicidir. Simgelerin üzerine gelindiği zaman karşınıza yazılı olarak simgenin nereye gönderdiğini ifade eder. Bu eklentiyi bloğunuza nasıl uygularsınız? 

Bu eklentiyi uygulamak için: 

İlk olarak aşağıda yazılı olan kodu bulmalıyız. 

]]></b:skin>

Bu kodu bulduktan sonra hemen üst tarafına aşağıdaki kodu yapıştıralım.

/* CSS Style for Horizontal Menu - info @ http://www.webmaster.10line.net*/
#hor {
list-style:none;
padding:0;
margin:0;
}
 #hor li {
float:left;
padding:5px;
}
 #hor a {
display:block;
height: 12px;
text-indent:-999em;
}
 #hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0;
}
 #hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;
}
 #hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}
  /* CSS Style for Vertical Menu */
 #ver {
list-style:none;
padding:0;
margin:0;
}
 #ver li {
padding:2px;
}
 #ver li a {
display:block;
height:12px;
text-indent:-999em;
}
 #ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}
 #ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;
}
 #ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}
  .clear {
clear:both;
}
  *{
/* A universal CSS reset */
margin:0;
padding:0;
}
  #navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;
  /* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
 font-family:Arial, Helvetica, sans-serif;
}
 #navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}
 #navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
 /* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
 /* CSS3 Transition: */
-webkit-transition: 0.25s;
 /* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}
 #navigationMenu a{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRpr2DqQz46cEH5uxjjQaYXRmLalnCyrno831-wSukIjWNZFG_pqP7SQw5JNwKgEvywbAwcazbX-TeX-ECAKJg5d-OJon-YJBjg0NBow7IfzJFwZuf6BKhg8kch4KUlWOkDrrkhpsAjmA/s1600/navigation.jpg') no-repeat;
 height:39px;
width:38px;
display:block;
position:relative;
}
 /* General hover styles */
 #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;
 /* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}
 /* Green Button */
 #navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
 /* Blue Button */
 #navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}
 /* Orange Button */
 #navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}
 /* Yellow Button */
 #navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}
 /* Purple Button */
 #navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}
 /*End menu css - info @ http://www.webmaster.10line.net */

Bu kodu yapıştırdıktan sonra şu işlemi yapın. Önce yukarıdaki kodu kaydedin ve yerleşim >> gadget ekle >> HTML/JavaScript seçeneği ile açılan yere aşağıdaki kodları yapıştırın.

<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Ana Sayfa" href="http://www.webmaster.10line.net">
<span>ANA SAYFA</span>
</a>
</li>
 <li>
 <a class="about" href="LİNK">
<span>About</span>
</a>
</li>
 <li>
<a class="services" href="LİNK">
<span>Services</span>
</a>
 </li>
 <li>
<a class="portfolio" href="LİNK">
<span>Portfolio</span>
</a>
</li>
 <li>
<a class="contact" href="LİNK">
 <span>Contact us</span>
</a>
</li>
</ul>
</div>

Yapmanız gereken tüm işlemler bu kadar. Ancak son olarak bir şey belirteyim. Yukarıdaki kodda kırmızı ile yazılan yerleri kendinize göre düzenleyiniz.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.