4 Nisan 2012 Çarşamba
Blogger’dan +1 Düğmesi ve Google+ Rozeti Gadgetları
Bugün test blogmda bir eklenti denerken HTML/JavaScript gadget’ı eklemek için gadget listesini açtığımda Blogger’ın listeye 2 yeni gadget eklediğini farkettim.Neler mi?
+1 Düğmesi
Ziyaretçilerin, içeriğinizi Google Arama'da önermesine ve Google+'da paylaşmasına izin vermelerini sağlayan buton.
Google+ Rozeti
Ziyaretçilerinizin Google+ profilinize veya blogunuz için oluşturduğunuz Google+ sayfanıza ulaşarak sizi çevrelerine eklemelerini sağlayan rozet.
Bunlar yeni özellikler değil ama çoğu blogcu bu butonları bloguna elerken kodlarda yaptığı hatalar nedeniyle sıkıntı yaşayabiliyordu.Bu ayede herkes +1 düğmesini ve Google+ rozetini zahmetsizcer bloguna ekleyebilecek.
3 Sütunlu Türkçe Blogger Teması: WP-OpenCart
Bu güne kadar hiç 3 sütunlu bir Blogger teması paylaşmamıştım.Neden bilmiyorum ama 3 sütunlu blog temalarına bir türlü ısınamadım.İlk defa beğendiğim ve paylaşmaya değer gördüğüm 3 sütunlu bir Blogger teması ile karşılaştım.Temanın ismi WP-OpenCart ve Wordpress ‘ten Blogger’a çevrilmiş bir tema.
3 sütunlu bir tema olarak test bloguma yüklediğimde aynı zamanda 2 sütunlu olarak kullanılabildiğini de farkettim.Sidebarlardan birini boş bıraktığınızda tema otomatik olarak 2 sütunlu bir temaya dönüşünüyor.Hem de hizalama ve yerleşim sorunu yaşamadan.Yorum bölümünde yorum yanıtlama seçeneğinin de aktif olduğunu ve sorunsuz çalıştığını hatırlattıktan sonra sizi temanın demousu izlemeye davet ediyorum…
Temanın demo sitesi ingilizce ve orjinalidir.Ancak indirdiğinizde zip klasörünün içinden türkçe hali çıkacaktır.Bir kaç küçük değişklik yapıp temayı türkçe olarak upload ettim.O yüzden demonun inglizce olması sizi yanıltmasın :)
Temada düzenlemeniz gereken tek yer yatay menü.Yatay menüyü ister açılır, ister normal yatay menü olarak kullanabiliriz.Şablonda menüye ait kodları şunlardır:
<div class='menu'>
<ul>
<li class='page_item'><a href='#' title='Menu #1'>Menu #1</a></li>
<li class='page_item'><a href='#' title='Menu #2'>Menu #2</a></li>
<!-- begin example drop down menu -->
<li class='page_item'><a href='#' title='Menu #3'>Menu #3</a>
<ul class='children'>
<li class='page_item'><a href='#' title='Sub Menu #1'>Sub Menu #1</a></li>
<li class='page_item'><a href='#' title='Sub Menu #2'>Sub Menu #2</a></li>
</ul>
</li>
<!-- end example drop down menu -->
<li class='page_item'><a href='#' title='Menu #4'>Menu #4</a></li>
</ul>
</div>
Arama kutusunun üzerindeki Home – About – Contact yazan yerlerde oluşturduğunuz statik sayfalar otomatik olarak gözükecektir.Orada Sayfalar gadgetı ekli.Her hangi bir değişikliğe gerek yok.
Son olarak paylaşttığım diğer Blogger temalarına ve Blogger temalarının nasıl yükleneceğini bilmeyenler için hazırladığım yazıya bakmanızı öneriyorum.
3 Nisan 2012 Salı
Blogger Son Tweet Kusu Eklentisi
]]></b:skin>
twitter_update_list{
list-style:none;
}
#twitter_update_list li{
background: #f4f8f9; /* Old browsers */
background: -moz-linear-gradient(top, #f4f8f9 1%, #e8f0f2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f4f8f9), color-stop(100%,#e8f0f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f8f9', endColorstr='#e8f0f2',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* W3C */
box-shadow: 1px -1px 2px #bbc6c8;
-webkit-box-shadow: 1px -1px 2px #bbc6c8;
-moz-box-shadow: 1px -1px 2px #bbc6c8;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
padding:15px;
width:250px;
}
#twitter_update_list::after {
content: "";
position: relative;
left: 30px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #e8f0f2 transparent;
display: block;
width: 0;
}
<ul id="twitter_update_list">
<li>Loading Tweets..</li>
</ul>
<a title="Follow Me" href="http://www.twitter.com/XXXXX" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj89LI8VC3SUYSEz1PfuVNR4G7Hi3MmQf9KchntCMgSpkCwVGf8C17BV2Vfsbt9VZFBe69dv4iuMpd2voChIrzGvTeD914458AVyaLiCTEk98v8zHhGBEDdKTCLcMNy_71aTwh4rAThBdjZ/s1600/twitter-bird-gadget.png" /></a>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline/XXXXX.json?callback=twitterCallback2&count=1"></script>
Blogger Son Tweet Kusu Eklentisi , Blogger Tweet Kusu Eklentisi , Blogger Tweet Eklentisi , Blogger Twitter Eklentisi , Twitter eklentileri , Blogger Twitter yazıları eklentisi , Twitter yazılarını blogger da gösterme
2 Nisan 2012 Pazartesi
Blogger Kapanabilir Bilgilendirme Çubuğu Eklentisi
</body>
<style type='text/css'>
#ut-sticky
{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKIGJFb0ECZaJWfWibFnczXTn7eyP2lvBnVcCrFBHQMT5jsp7zEdc4RDjcwjYY9pLzexHk3pE65Ca1QN28auVr2ktchz_B8wawdUYqAKsUNtTjdF_azN688VHRmRdbAz76f1xhbb8nfZTk/s1600/ut-bg.png') repeat;
color:#fff;
text-align: center;
margin:0 auto;
border-top: 1px solid #fff;
height:28px;
font-size:13px;
position:fixed;
bottom:0;
z-index:999;
width:95%;
border-top-left-radius:15px;
border-top-right-radius:15px;
display:block;
font-weight: bold;
font-family: arial,"Helvetica";
font-color:#fff;
}
#ut-sticky:hover
{background:#333;}
#ut-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#ut-sticky p a{ text-decoration:underline; color:#FFFF33;}
.ut-cross{display:block; position:relative; right:15px; float:right;}
.ut-cross a{font-size:18px; font-weight:bold; font-family:"Arial"; color:#FF0000; line-height:30px;}
</style>
<div id='ut-sticky'>
<p>Blogger Şeffaf bilgilendirme çubuğu eklentisi <a href='http://eklentileri.blogspot.com' target='_blank'>Blogger Eklentileri</a></p>
<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>
</div>
<script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById("ut-sticky");
crosstbox.style.visibility = 'hidden';
}
</script>
Blogger Kapanabilir Bilgilendirme Çubuğu Eklentisi , Blogger bilgilendirme çubuğu , Blogger bilgi kutusu eklentisi , blogger sayfa altında bilgilendirme , blogger kapanabilir bilgilendirme çubuğu
Blogger Yazı Boyutu Değiştirme Eklentisi
</head>
<!-- eklentileri.blogspot.com kod başlangıcı -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){
//ID, class and tag element that font size is adjustable in this array
//Put in html or body if you want the font of the entire page adjustable
var section = new Array('span','.section2');
section = section.join(',');
// Reset Font Size
var originalFontSize = $(section).css('font-size');
$(".resetFont").click(function(){
$(section).css('font-size', originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(section).css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$(".decreaseFont").click(function(){
var currentFontSize = $(section).css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(section).css('font-size', newFontSize);
return false;
});
});
</script>
<!-- eklentileri.blogspot.com kod sonu -->
<div class='post-header-line-1'/>
<!-- eklentileri.blogspot.com kod baslangıcı -->
<b:if cond='data:blog.pageType == "item"'>
<table border='0' style='float:right; margin-left:5px;'><tr><td><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoq8jis8IG0TCRCzmfZRFSJXGyNyihbTG3H0TXgGjApamZnWlDERpuFnh9bZHqhYcB2_rAosWzCUT1Y20NWxRETUQT_IzJfmfZtFZVxSyIHciL_zxJSfWIPZkKiTG2zk4YyFA8kbWJxVA/s1600/font-size-blogger-gadget.png'/> | <a class='increaseFont' style='cursor: pointer; cursor: hand;' title='Larger Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqUK-fKgnIV5Rra6XSgvgkQrUjcVvO_PseMWzqDMBSclsBmzXJjQsMihIS9fVlMvxEnIQYH1ffCct9yALaGLNA958iA_dDSi7XgZ-GIuQUfsQM_JqSaDYMeUZEDa-ae-uIwn4l8F0P7qA/s1600/bigger-font+-+Copy.png'/></a>
<a class='decreaseFont' style='cursor: pointer; cursor: hand;' title='Smaller Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgme_kFjfYlJ_Mk3cBCjgmS_Anzo6z4TUc51jMQWh8vJ1b4kuoss-nbaZXcA9PawlGymrMjHdvrWx9n3NLTozR59rSyCB2-j6GwdpVO_dZRMNQe-XD3XCrzcK1vr26_919goIJEOKGHmlA/s1600/smaller-font.png' style='cursor: hand;'/></a>
<a class='resetFont' style='cursor: pointer; cursor: hand;' title='Reset Text Size'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdYoalac3cY1AlX0yH9j5ug6nl2uccfREcGlCoNJ07zSf43xuKKN-Wo4s0_f4G8ST9QzHHJKKAj5fIRwRjQdpWgaxrvgy9vjNOxd8mFPLfId-xDTuQuWUcRsUSMCz_fKMCdKD8XMPnsCs/s1600/reset-font.png' style='cursor: hand;'/></a></td></tr></table>
</b:if>
<!-- eklentileri.blogspot.com kod sonu -->
<data:post.body/>
<span><data:post.body/></span>
Sony Handycam'le Her Yüzey Bir Sinema Perdesine Dönüşüyor!
Teknoloji dünyasına getirdiği yeniliklerle sık sık adından söz ettiren Sony, yeni kamerası ile bir kez daha gündeme oturuyor. Projeksiyon özelliğine sahip olan Sony Handycam, sadece bir kamera olmaktan öteye geçiyor. Kaydettiğiniz videoları dilediğiniz yüzeye yansıtmanızı ve istediğiniz zaman istediğiniz yerde izlemenizi sağlıyor. Böylece hem anılarınızı ölümsüzleştirebiliyor hem de onları sevdiklerinize de izleterek paylaşabiliyorsunuz.
Kısacası; dünyanın ilk projeksiyonlu kamerası olan Sony Handycam, çevrenizdeki her yüzeyi bir sinema perdesine dönüştürüyor.
Bir bumads advertorial içeriğidir.
Kişisel İnfografikler Oluşturabileceğiniz Araçlar
Bazen 100 kelime ile anlatabileceğiniz şeyi sadece 1 resim kullanarak ta anlatabilirsiniz.İşte bu mantıkla doğan infografikler dijital dünyada giderek yaygınlaşmaya ve sıkça karşımıza çıkmaya başladı.Peki nedir bu infografikler? Ne işe yaralar? Nasıl oluşturulurlar.Bu yazıda infografikler konusunda biraz bilgi vereceğim.
İnfografik Nedir?
Adından da anlayacağınız gibi infografik ( info + grafik ) her hangi bir istatiki veri, karşılaştırma, anket sonucu, raporlama gibi bilgilerin görsel öğelerle desteklenerek anlatılmasıdır.
İnfografik Ne İşe Yarar?
İnfografikler dikkat çekici oldukları için anlatılmak istenen şeyin etkili bir şekilde anlatılmasını sağlarlar.Akılda kalıcı ve kolay anlaşılabilir olmaları da infografiklerin önemli avantajlarıdır.
İnfografiklerin blogcular için önemli bir avantajı da trafik sağlamalarıdır.İnsanlar görsel öğeleri sosyal medyada paylaşmayı çok severler.Eğer başarılı ve ilgi çekici bir infografik oluşturabilirseniz infografiğin bir köşesine yerleştireceğiniz blog adresiniz çok sayıda kişiye ulaşacak ve bu da size trafik olarak geri dönecektir.
İnfografik Örnekleri
İnfografik Nasıl Yapılır?
İnfografik hazırlamadan önce biraz teorik bilgi vermekte fayda var.İnfografik oluşturmak birkaç bilgi yazıp etrafını rastgele grafiklerle süslemek değildir.Verdiğiniz bilgilerin sıralaması, renkler, fontlar, kullanılan grafikler birbirleriyle alakalı ve tutarlı olmalıdır.Amaç anlatılmak istenen şeyin daha kolay anlaşılmasını sağlamak olduğu için bilgi – grafik oranına dikkat etmelisiniz.
İşin teknik kısmına geçecek olursak profesyonel infografikler Photoshop, Illustrator, Indesign gibi profesyonel programlar kullanılarak oluşturulabilir ancak bu programları kullanmayı bilmiyorsanız ve kişisel, amatör infografikler oluşturacaksanız şu çevrimiçi araçları kullanarak kolayca oluşturabilirsiniz.
1. Vizify TweetSheet
Bu araç ile Twitter hesabınıza ait harika bir infografik hazırlayabiliriz.Yapmanız gereken tek şey Twitter kullanıcı adınızı yazmak.Vizify TweetSheet hesabınızı analiz edecek ve aylara göre Twitter kullanımınız, en çok RT edilen tweetleriniz, en iyi takipçileriniz, yoğunlukla bahsettiğiniz konular gibi verileri grafiklerle destekleyerek sizin için oldukça profesyonel bir infografik oluşturacaktır. [ http://vizify.com/tweetsheet/ ]
2.Vizualize.me
Oldukça detaylı bir kişisel infografik aracı.Profil bilgileri , iş hayatı, eğitim hayatı, yetenekler, ilgi alanları, yabancı diller, başarılar gibi verleri girdikten sonra karşınızda profesyonel infografiklerden hiç bir farklı olmayan kişisel infografiğinizi bulacaksınız. [ http://vizualize.me ]
3. Re.vu
Kişisel bilgilerinizi, linklerinizi, sosyal medya profillerinizi, iş geçmişinizi, eğitim bilgileriniz, portföyünüzü yazdıktan sonra hazır temalardan birini seçerek infografiğinizi oluşturabiliyorsunuz.Klasik bilgilerin dışında kendi özel verilerinizi grafiklerle destekleyerek infografiğe ekleme imkanınız da var.Yerleşimi ise sürükleme yaparak gerçekleştitrebilirsiniz.Tüm bu özellikleriyle dört dörtlük bir infografik aracı diyebilirim. [ http://re.vu/ ]
4. Kinzaa
Diğer araçlarda olduğu gibi profil, şi, eğitim, karakteristik özellikler, yetenekler gibi bilgileri giriyorsunuz ve infografiğiniz anında oluşturuluyor.Kullanımı kolay arayüzü ve detaylı veri girilebilmesi bu aracın güzel özellikleri. [ http://kinzaa.com ]




