Flash Animasyonlu Etiket Bulutu Oluşturma

Flash Animasyonlu Etiket Bulutu Oluşturma
Flash Animated Label Cloud Widget

Websitenize, blogunuza hareketli etiket bulutu ekleyerek görsellik katabilirsiniz. Flash olduğu için google bir indexleme yapmıyor yararı ise görsellik kattığı için ziyaretcilerin dikkatini çekerek ziyaret süresini uzatmayı amaçlamaktadır. Blog yazılarınızda kullandığınız etiketleri flash animasyonlu bir bulut olarak sidebarınıza ekleyebilirsiniz.

Live Demo

1. Kumanda paneline giriş yapın.
2. Yerleşim → Gadget ekle → HTML/Javascript bulun.
3. Aşağıda kodu kopyalayıp yapıştırın.
4. Kod içinde;
blogurl: Blog adresiniz.
color : Yazı rengi.
hoverColor: Etiketin üzerine gelindiginde oluşan renk.
backgroundColor: Arka plan rengi.
size: Yazı boyutu.
speed: Hızı.
width: Flash etiket bulutunuzun genişliği.
height: Flash etiket bulutunuzun yüksekliği.
transparency: Flash etiket bulutunuzun şeffaflığı.
Html Renkleri için HTML Renk Kodu Bulucu'yu kullanabilirsiniz.

<div id="MEFFlashContent"></div>  
<script type="text/javascript">
/*<![CDATA[*/  var MEFFlashLabelSettings = {      
blogurl        : "http://meftunmede.blogspot.com/",      
color          : "000000",      
hoverColor     : "333333",      
backgroundColor: "FFFFFF",      
size           : 12,      
speed          : 100,      
width          : 250,      
height         : 300,      
transparency   :true  };  
/*]]>*/  </script>  
<script type="text/javascript" src="https://meftun-mede.googlecode.com/svn/trunk/MEFflash_label_cloud.js">
</script>

Kodu denemek için Online html editor'ü kullanabilirsiniz. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...

İndirim Kodlarıyla İnternetten Daha Ucuza Alışveriş

İnternet üzerinden alışveriş Türkiye’de gün geçtikçe büyüyen bir pazar. Eminim çoğunuz benim gibi online alışveriş yapıyorsunuzdur. İlk zamanlarda cesaret edemediğim ve uzak durduğum online alışverişin rahatlığını ve pratikliğini gördükten sonra elektronikten giyime, ev aksesuarlarından ofis ihtiyaçlarıma çoğu ürünü internet üzerinden almaya başladım.

 

Yazının başında belirttiğim gibi internet üzerinden alışveriş ülkemizde hızla gelişen bir pazar. Bu durum büyük bir rekabeti de beraberinde getiriyor. Firmalar, yeni müşteriler kazanmak için farklı promosyon teknikleri deniyorlar. Tüketici tarafında olduğumuz için bu durum bizim oldukça işimize yarıyor.

 

Firmaların sık kullandığı promosyon yöntemlerinden biri de indirim kodu uygulaması. İndirim kodları sayesinde internet üzerinden yaptığımız alışverişleri daha ucuza getirebiliyoruz. Peki bu promosyon kodlarını nereden ve nasıl temin edebiliriz?

 

 

Türkiye’de henüz yeni bir firma olan ve birçok online mağazanın resmi paylaşım merkezi olan indirimkodlarim.com bu işi bizim yerimize yapıyor. Yüzlerce marka ve mağazada alışveriş yaparken kullanabileceğiniz kupon kodlarını bir araya getiriyor. Üstelik ücretsiz!

 

Örneğin Electro World’den 150 TL’lik teknoloji alışverişi mi yaptınız? Giriyorsunuz Electro World kupon kodları bölümüne, ücretsiz 50 TL’lik kuponu kullanıyorsunuz ve sadece 100 TL ödüyorsunuz.  Ya da D&R’dan bir kitap veya DVD almak istediniz. Giriyorsunuz D&R indirim kodları bölümüne, ücretsiz kargo kuponunu kullanıyorsunuz ve kargo ücreti ödemeden ürünleri satın alabiliyorsunuz. Harika değil mi?

 

Bunlar gibi pek çok özel indirim, fırsat ve hediye için indirimkodlarim.com sitesini incelemenizi öneririm. Unutmayın “Ucuza Almak Akıl İşidir!”

Google Tarzı Sabit Arama Kutusu

Arama kutuları ziyaretçilerin aradıkları içeriğe kolayca ulaşabilmesi açısından çok önemli. Hatta zaman zaman siz bile ardığınız bir konu için blogunuzdaki arama kutusunu kullanabilirsiniz. Özellikle içerik sayınız fazla ise. Bu bakımdan daha önce 2 farklı arama kutusu paylaşmıştım. Bunlar:

 

• Açılır Arama Kutusu
• PSD Arama Kutusu

Bu kez paylaşacağım arama kutusunu diğerlerinden ayıran pek çok özellik var. Örneğin tarz olarak Google’ın tarzına sahip. Ayrıca daha önce paylaştığım açılır arama kutusundaki tıklayınca açılma efekti bunda da var. En önemli özelliği ise blogun bir köşesinde sabit kalması. Floating ( yüzen, kayan ) denen bu özellik sayesinde ziyaretçiler sayfayı aşağı yukarı kaydırsa bile arama kutusu hep önlerinde olacak.

 

 

Sadece CCSS3 tekniği kullanılarak oluşturulan bu arama kutusunun nasıl çalıştığını daha iyi anlamak için aşağıdaki demo videoyu izleyebilirsiniz.

 

 

Bu arama kutusunu kullanmak için yapmanız gereken tek şey Blogger kumanda paneline girdikten sonra Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu izlemek ve aşağıdaki kodları eklemek.

 

<!-- Blog Hocam Google Tarzı Sabit Arama Kutusu -->
    <div class='bh-arama' id='bh-arama'>
      <form action='/search' id='bh-aramaformu' method='get'>
        <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ara...&quot;;}' onfocus='if (this.value == &quot;Ara...&quot;) {this.value = &quot;&quot;}' type='text' value='Ara...'/>
        <button id='sbutton' type='submit'>
          <span id='simg'/>
        </span></button>
      </form>
    </div>
<style type="text/css">
#sbutton {
background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));
background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;
border: 1px solid #3079ED;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
height: 27px;
min-width: 76px;
padding: 0 21px;padding-bottom: 2px;
}
#sbutton:hover{ background-color: #357AE8;
background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));
background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);
border: 1px solid #2F5BB7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
#simg {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihM3xp58AhNMgylaVefld5Gy_0dj9ZRVVIQP49si0VEViyFGYqykBtLjxA0LmMaw4FhWboLrC65WMpIi6NjwKG9Sj0spAnLT5j4rFvYlE_VySgl_vINRonipLBtdc55mNUq_5PFRXHNhI/s1600/searchicon.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 14px;
margin: 0;
width: 17px;z-index:101;
}#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}
#s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}
#s:focus {width: 200px;}
.bh-arama {
display: block;
position: fixed;
right: 0;
top: 1%;
max-width: 300px;min-width: 238px;
z-index: 100;
}
</style>
<!-- Blog Hocam Google Tarzı Sabit Arama Kutusu –>

 

Arama kutusu sayfanın sağ üst köşesinde konumlanacak şekilde kodlanmış. Eğer sol üst köede durmasını istiyorsanız right: 0; yazan yeri left: 1% olarak değiştirmeniz yeterli.

Google AdSense Reklamları İçin Başlangıç Rehberi

Blog yazarak para kazanma yöntemleri arasında en yaygını PPC yöntemidir. PPC, Pay Per Click kelimelerinin baş harflerinden oluşmuş bir kısaltmadır ve ziyaretçilerin blogdaki reklamlara tıklamalarından para kazanma esasına dayanır. Dünyada ve Türkiye’de en popüler PPC reklamları ise Google AdSense reklamlarıdır. Blogunuza Google AdSense reklamlarını yerleştirerek hiç bir şey yapmadan pasif olarak para kazanmaya başlayabilirsiniz.

 

 

Kayıt Olmadan Önce

 

Google AdSense ile para kazanmak kulağa çok hoş geliyor fakat bu sisteme kabul edilmek çok da kolay değil. Bazı şartları sağlamış olmanız gerekir.

• Öncelikle 18 yaşından büyük olmalısınız.
• Blogunuz pornografik ve şiddet barından içerik içermemeli .
• Blogunuzda ağır küfür, ırkçı hoşgörüsüzlükle ilişkili veya herhangi bir şahıs, grup veya kuruluş aleyhinde propaganda niteliğindeki içerik yer almamalı.
• Blogunuzda hack, crack, warez ve  uyuşturucu ile ilgili içerikler olmamalı.
• Blogunuzda alkol, tütün, reçeteli ilaç, silah, markaların taklit ürünleri, tez, ödev gibi şeylerin satışı yapılmamalı.
• Blogunuz yasa dışı, yasa dışı etkinlikleri teşvik eden veya başkalarının yasal haklarını ihlal eden diğer herhangi bir içerik içermemeli.
• Blogunuz Google’ın kalite yönergelerine uygun olmalı.
• Ayrıca blogunuzda bir “gizlilik politikası” sayfası oluşturmalısınız. Gizlilik politikası oluşturmayla ilgili bilgi almak için buraya bakabilirsiniz.

 

Kayıt Aşaması

 

Blogunuzu kayıt aşamasına hazır hale getirdikten sonra Blogger kumanda panelindeki Kazançlar sekmesinden veya AdSense kayıt sayfasından başvurunuzu yapabilirsiniz.

 

1. Onay Süreci: Başvurunuzu yaptıktan sonra yaklaşık 2-3 günlük inceleme sürecinin ardından ilk onayı alıp almadığınızla ilgili bir e-posta gönderilir. Eğer blogunuz onaylandıysa sizden reklam birimi oluşturarak blogunuza eklemeniz istenir.

 

2. Onay Süreci: Reklam birimi oluşurmak için Google AdSense hesabınıza giriş yaparak Reklamlarım > Reklam birimleri > Yeni reklam birimi yolunu izleyerek istediğiniz boyutlarda bir reklam birimi oluşturduktan sonra verilen kodu blogunuza eklemelisiniz. Onay aşamasında 1 adet reklam birimi oluşturmanız yeterlidir ve bu reklam birimine ait kodu Blogger kumanda panelinde Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu takip ederek ekleyebilirsiniz.

 

Onay sürecinin tamamlanması yaklaşık 1 ata sürer bu sürede eklediğiniz reklam biriminde boş bir alan gözükür. Blogunuzun incelenmesi tamamlanıp ikinci onayı da aldıktan sonra size bir bilgi e-postası gönderilir ve birkaç saat içinde boş reklamların yerinde AdSense reklamları gözükmeye başlar. Bu andan itibaren ziyaretçileriniz reklamlara tıkladıkça hesabınızda para birikmeye başlar.

 

Kayıt ve onay işlemi tamamlandaıktan sonra da Google blogunuzu incelemeye devam eder sizden bazı kurallara uymanızı ister.

• Kendi reklamlarınıza tıklamayın, kimseden Google reklamlarınızı tıklamasını istemeyin.
• Reklamların yanlışlıkla tıklanmasını sağlayacak numaralardan kaçının.
• Bir sayfaya en fazla 3 reklam birimi ekleyin ve reklam kodlarında değişiklik yapmayın.

 

Reklam Yerleşimi Ve Optimizasyonu

 

Reklam birimlerinin yerleşimini yaparken performansı olduğu kadar kullanıcı deneyimini ve Google AdSense politikalarını da göz önünde bulundurmalısınız.

• Blogunuzun içeriğini mantıklı bir şekilde düzenleyin ve blogunuzda gezinmeyi kolaylaştırın.
• Reklamlarınızı kullanıcıların ilgilendikleri içeriğin yakınına yerleştirin ve kullanıcıların aradıkları içeriği kolayca bulabildiklerinden emin olun.
• Blogunuzdaki resimleri reklamlarınızla hizalamayın veya reklamın yakınındaki içeriğin reklamlarınızın biçimlendirmesini taklit etmemesine özen gösterin.
• Reklamları, menü, gezinme veya indirme bağlantılarıyla karıştırılabilecekleri konumlara yerleştirmeyin.

AdSense yetkilileri  yaptığı araştırmalar ve A/B testleri sonucunda bloglar için en uygun reklam yerleşiminin şu şekilde olduğunu tespit etmişlerdir:

 

 

 

AdSense Reklamları Ne Kadar Kazandırır?

 

AdSense reklamları ile elde edilen kazanç siteden siteye farklılık gösterir. Kazancınızı belirleyecek 2 temel faktör vardır. Reklamlara tıklanma sayısı ve tıklama başına maliyet. Örneğin reklamlarınıza bir ayda 100 kez tıklandıysa ve TBM (Tıklama Başına Maliyet) 0.5$ ise o ay kazancınız 100x0.5 = 50$ olur.

 

Reklamlara tıklanma sayısını arttırmaya yönelik yerleşim ipuçlarından yukarıda kısaca bahsettim. Şimdi de TBM yani tıklama başına maliyeti arttırmak için neler yapabileceğinizden bahsedelim.

• Reklam birimlerinizin tümü için hem metin reklamların hem de resim reklamların/zengin medya reklamlarının gösterilmesi seçeneğini etkinleştirin.
• Filtre listenizi kısa tutun, böylece yüksek ödeme yapan reklamları engelleyerek gelir potansiyelinizi azaltmamış olursunuz.
• Yerleşim hedeflemeye yönelik özel kanallarınızı oluşturarak siteniz için rekabet eden reklam sayısını artırın.
• Blogunuzda belli konulara odaklanarak kaliteli içerik üretin.

 

Başlangıç için bu kadar bilgi yeterli diye düşünüyorum. İlerleyen günlerde AdSense reklamları ile daha fazla kazanmanıza yardımcı olacak makaleler yazmaya devam edeceğim.

 

Bol kazançlar!

Faydalandığım kaynaklar: - https://support.google.com/adsense/

                                  - http://adsense.blogspot.com/

                                  - http://productforums.google.com/forum/#!forum/adsense-tr

Dönme Efektli Sosyal Takip Eklentisi

Google’dan sonra en önemli trafik kaynaklarından biri olan sosyal medya kanallarında yer almaya dikkat etmeliyiz. Facebook, Twitter, Google+ gibi popüler sosyal platformlarda takipçi sayımız ne kadar çok olursa, blog trafiğimiz o kadar artar. Bu yüzden blogumuza sosyal medya butonları koyarak ziyaretçilerimizi bu platformlardaki hesaplarımıza yönlendirmeliyiz. İşte blogunuzun kenar çubuğuna ekleyebileceğiniz, hover efektli şık bir sosyal takip eklentisi…

 

 

Bu resimden başlıkta bahsettiğim dönme efektini anlamanız elbette mümkün değil. Bu yüzden aşağıdaki demo videoyu izlemenizi de öneririm.

 

 

Eklentiyi blogunuzda kullanmaya karar verdiyseniz Blogger kumanda paneline girdikten sonra Yerleşim > Gadge Ekle > HTML/JavaScript Gadget yolunu izleyerek aşağıdaki kodları eklemeniz yeterli.

 

<!--Blog Hocam Metro Spinning Sosyal Takip Eklentisi-->

<div class="subscribe">
<ul> <li class="rss"><a href="http://feeds.feedburner.com/bloghocam" target='_blank'><span></span>RSS</a></li>
<li class="twitter"><a href="http://twitter.com/bloghocam" target='_blank'><span></span>Twitter</a></li>
<li class="gplus"><a href="https://plus.google.com/108761595756468128383" target='_blank'><span></span>Google Plus</a></li>
<li class="facebook"><a href="http://facebook.com/bloghocam" target='_blank'><span></span>Facebook</a></li> </ul>
</div> 

<style>
.subscribe li {
display: block !important;
margin-right: 0 !important;
width: auto !important;
}
.subscribe li a span {
display: block;
height: 32px;
left: 0;
position: absolute;
top: 2px;
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transition-duration: 0.8s;
transition-property: all;
width: 32px;
}
.subscribe .twitter span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzZs2f8DWLOycRlXpG0ciEdDAHnKnKCsKhP1bpdJbw3B45oJsGCxbhYU0maAD8dIGoY55vdCJnDv1s-n7zSqKli8xPhuTJvQKIgB5B96ZlisvVCuapmKooDKPdzVio_Tm6-LJw7B2TBt8/s1600/twitter_icon.png) no-repeat;
}
.subscribe .twitter a {
background: #91C661;
}
.subscribe li a:hover span {
transform:rotate(340deg);
-webkit-transform:rotate(340deg);   
}   
ol, ul {
list-style: none outside none;
}
.subscribe li {
display: block !important;
margin-right: 0 !important;
width: auto !important;
}
.subscribe li {
display: inline-block;
margin: 0 20px 10px 0;
position: relative;
width: 200px;
}
.subscribe .rss span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguxRhfs-uw3yE6zFQX8OWWZUSl1LPD5ej8TmhlqqxOEwDso19pB1WmQXk1Y28M7eoK85HDVmWkelg_4qxydZN7opYsbiXZS448AYZDX4JEtm0bmNSuges75-0dxCxyVNN07BCTsBCJPfE/s1600/rss-icon.png) no-repeat;
}
.subscribe .rss a {
background: #F67F00;
}
.subscribe li a {
color: #FFFFFF;
display: block;
font-family: verdana;
font-size: 12px;
padding: 10px 10px 10px 40px;
text-decoration: none;
font-weight: bold;
}
.subscribe li a span {
display: block;
height: 32px;
left: 0;
position: absolute;
top: 2px;
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
transition-property: all;
width: 32px;
}
.subscribe li a:hover span {
transform:rotate(340deg);
-webkit-transform:rotate(340deg);
} 
.subscribe .twitter span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzZs2f8DWLOycRlXpG0ciEdDAHnKnKCsKhP1bpdJbw3B45oJsGCxbhYU0maAD8dIGoY55vdCJnDv1s-n7zSqKli8xPhuTJvQKIgB5B96ZlisvVCuapmKooDKPdzVio_Tm6-LJw7B2TBt8/s1600/twitter_icon.png) no-repeat;
}
.subscribe .twitter a {
background: #91C661;
}
.subscribe .gplus span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimmq1UMQJwINOC81tWrJ3MMZqTu3eUW7ON2x0jeK6GJjC4tCX5xSNl_9q8n05b8IRv7CiTM7UEzmCjFPoiSEJ8jTfqXlwdyGWjhSEbzcpRPCnThtahIAj-j5W5_OvEpLCH-1Ns5d4Ym8Q/s1600/googleplus.png) no-repeat;
}
.subscribe .gplus a {
background: #D74D2F;
}
.subscribe .facebook span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlxfia2v5c-uwu5g9hUcCejoEzEXiu5y5RvlJlzJWJMrNwn1Wtp6s9gKc5ZrNbqBxm31nP_Uqm0v5V1IJO8ndHP807J6gFJSpE5gYUoQ8cY_PGa4g1oCiJjGddxW0DA5GZpHlVC9CAuos/s1600/facebook-icon.png) no-repeat;
}
.subscribe .facebook a {
background: #3B5998;
}
</style>

<!--Blog Hocam Metro Spinning Sosyal Takip Eklentisi-->

 

Bordo renkle gösterdiğim Blog Hocam’a ait hesap adreslerinin yerine kendi adreslerinizi yazmayı unutmayın!

 

Alternatif sosyal takip eklentisi arayanlar daha önce paylaştığım şu eklentilere de bakabilirler:

 

• Blogunuz için Şık Bir Abonelik Widget'ı
• Blogunuza Sosyal Takip Butonları Ekleyin
• Hover Efektli Sosyal Takip Eklentisi
• Metro Tarzı Sosyal Medya Eklentisi
• İpucu Balonu Tarzında Sosyal Takip Butonları