Blogspot Destek

Gallery Blog

2011-10-02T04:48:00.000-07:00

Gallery Blog

Blogger için ‘Sayfa İle Kayan Twitter Kuşu’ eklentisi

2011-10-02T04:30:00.001-07:00

Şu yazımda sayfa içerisinde uçan Twitter kuşu ile ilgili eklentiyi paylaşmış idim. Şimdi ise bu eklentiye alternatif olarak, sayfa ile beraber kayan Twitter kuşu eklentisini paylaşıyorum. Bu eklentinin diğer eklentiden farkı ise, tasarım bakımından da farklı olması. Yani bu eklenti görsellik açısından biraz daha fazla ön plana çıkıyor desek yeridir. Fakat belirtmekte fayda var; eklentideki Twitter kuşu bir ağaç üzerinde durduğu için Türkçesini bulamadım. Yani mevcut yazılar ingilizce. Eğer biraz Photoshop bilginiz var ise mevcut resimdeki yazıları Türkçeleştirebilirsiniz. Herneyse, eklentinin kurulumuna geçelim..

Tek yapmamız gereken; Tasarım > Sayfa Öğeleri > Gadget Ekle > HTML/JavaScript Eklebölümüne aşağıdaki kodları eklemek..

<div style='position: fixed; bottom: 20%; right: 0%;'/><a href="http://www.twitter.com/twitterhesabinizinadi" target="_blank"><img src="http://4.bp.blogspot.com/_rKG-ziTSNUQ/TRCOKoKQsKI/AAAAAAAACjc/dD-rTURK_HE/s1600/follow+on+twitter+float.png" /></a></div>

Not: Yukarıda yer alan kırmızı renkli yazıyı, kendi Twitter hesabınızın adı ile değiştirmeyi unutmayınız.

Blogger için ‘Google Tipi’ arama kutusu

2011-10-02T04:29:00.003-07:00

Blogger derslerimize ara vermeden devam ediyoruz. Bu dersimizde sanıyorum ki birçok kişinin seveceği bir eklentiyi kurmuş olacağız. Bildiğiniz gibi uzun bir süre önce Google yeni tasarımına geçiş yaptı. Ve bu tasarımındaki yeniliklerine devam ediyor. Konumuza dönmek gerekir ise; bizlerde Blogger için Google tipinde bir arama kutusu yapacağız. JavaScript ile yoğurulmuş bu arama motoru; arama yazısını yazdığınız an sağ tarafta yazıyı silme butonu bulunduruyor. Böylelikle yanlış aramaları bu butona tıklayarak anında silebiliyorsunuz. Dolayısı ile fazlası ile fonksiyonel olan bu arama motoru, diğer arama motorlarına nazaran oldukça profesyonel. Kullanımı ise oldukça basit. İsterseniz hemen anlatıma geçelim..

Öncelikle aşağıdaki kodları temanızın CSS bölümüne ekleyiniz..

/*Start Css For Google Style Search Box*/
/* div container containing the form */
#searchContainer {
margin:20px;
}
/* Style the search input field. */
#field {
float:left;
width:200px;
height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-right:none;
}
/* Style the "X" text button next to the search input field */
#delete {
float:left;
width:16px;
height:29px;
line-height:27px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:22px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
/* Set default state of "X" and hide it */
#delete #x {
color:#A1B9ED;
cursor:pointer;
display:none;
}
/* Set the hover state of "X" */
#delete #x:hover {
color:#36c;
}
/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */
#submit {
cursor:pointer;
width:70px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(http://4.bp.blogspot.com/-GX7E4j3jwR0/ThMXKjuQ9VI/AAAAAAAAEsE/rJE5Ip1qDEg/s1600/ico-search.png) no-repeat #4d90fe center;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
/* Style the search button hover state */
#submit:hover {
background: url(http://4.bp.blogspot.com/-GX7E4j3jwR0/ThMXKjuQ9VI/AAAAAAAAEsE/rJE5Ip1qDEg/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}
/*End Google Style Search Bar - Info @ http://www.spiceupyourblog.com*/

Daha sonra, aşağıdaki kodu bulalım..

</head>

Ve aşağıdaki kodları, yukarıdaki koddan önce ekliyoruz..

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the &quot;X&quot; button
$(&quot;#field&quot;).keyup(function() {
$(&quot;#x&quot;).fadeIn();
if ($.trim($(&quot;#field&quot;).val()) == &quot;&quot;) {
$(&quot;#x&quot;).fadeOut();
}
});
// on click of &quot;X&quot;, delete input field value and hide &quot;X&quot;
$(&quot;#x&quot;).click(function() {
$(&quot;#field&quot;).val(&quot;&quot;);
$(this).hide();
});
});
</script>

Son olarak ise; Tasarım > Sayfa Öğeleri > Gadget Ekle bölümünden HTML/JavaScript Ekle seçeneğine tıklayarak aşağıdaki kodları ekliyoruz..

<div id="searchContainer">
<form name="SUYB" action="/search" method="get">
<input type="text" id="field" id="s" name="q"/>
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search" />
</form>
</div>

Blogger için ‘E-Posta ile takip et’ eklentisi

2011-10-02T04:29:00.001-07:00

Herkese yeni bir blogger dersinden merhabalar. Bu dersimizdeWordPress‘te de yer alan E-Posta ile takip etme eklentisini kurmayı ve kullanmayı öğreneceğiz. Belki önceden Blogger için bu tarz eklentiler paylaşılmış olabilir. Fakat bu eklentinin diğer eklentilerden olan farkı şu ki; tasarım ve ilgi çekme bakımından daha iyi. Yani eklentide, RSS adresinin yanı sıra Facebook ve Twitter gibi bağlantılar da yer alıyor. Ve dolayısı ile tasarım konusunda da sağlıklı bir eklenti olması da eklentiyi diğer benzerlerinden ayıran bir eklenti olmasını sağlıyor. Herneyse, hemen eklentinin kurulum aşamasını anlatmaya geçelim.

Tasarım > Sayfa Öğeleri > Gadget Ekle bölümünden HTML/JavaScript Ekle seçeneceğini seçerek aşağıdaki kodları ekliyoruz ve kaydediyoruz..

<style>
.mbtbar{width: 100%; float: left;}
.mbtbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: #fff; height: 45px; line-height: 45px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;}
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: top; padding-right:3px;}
.mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
.mbtbar .subicons a{text-decoration: none; color:#333333;}
.mbtbar .subicons a:hover{text-decoration: underline; color:#333333;}
.mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(http://2.bp.blogspot.com/-39kJ8qyqrVs/TdpYPqKjAhI/AAAAAAAADf8/FDkLDuCwF7E/s400/rss.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(http://4.bp.blogspot.com/-6_H2QDYGHpI/TdpYPF7LYmI/AAAAAAAADf0/wBev_aveLGw/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.mbtbar .subicons .twittericon{background: url(http://3.bp.blogspot.com/-rbsZjAPUA2c/TdpYQO7m2zI/AAAAAAAADgE/VLRVbnICkZA/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.mbtbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.mbtbar .emailsub .emailicon{background: url(http://2.bp.blogspot.com/-h72a-fyDTWw/TdpYO0gOhRI/AAAAAAAADfs/s-5_Ckdp-bQ/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }
.mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
</style>
<!--[if IE 7]>
<style>
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; }
</style>
<![endif]-->
<div class="mbtbar"><div class="count">Blogumu <span class="bigcount">+1000</span> kişi takip ediyor!</div><div class="subicons"><div class="rssicon"><a href="http://blogunuzunadi.blogspot.com/feeds/posts/default" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/facebookhesabinizinadi" target="_blank" rel="nofollow nofollow nofollow nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/twitterhesabinizinadi" target="_blank" rel="nofollow nofollow nofollow nofollow">Twitter</a></div></div>
<div class="emailsub">
<div class="emailicon">E-Posta ile takip et</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=feedburnerhesabinizinadi', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput-" name="email" value="E-Posta adresinizi yazınız..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;E-Posta adresinizi yazınız...&#39;;}" onfocus="if (this.value == &#39;E-Posta adresinizi yazınız...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="feedburnerhesabinizinadi" name="uri" type="hidden" /><input value="TAKİP!" class="joinemailupdates-"type="submit" /></form></div></div></div>

Not 1: Yukarıdaki kırmızı renkli yazıları kendinize göre düzenlemeyi unutmayınız.
Not 2: Yukarıda kalın harflerle yer alan kodların en sonunda yer alan “-” işaretini kaldırmayı unutmayınız.

Blogger için ‘Küçülüp Büyüyen’ yukarı çık butonu

2011-10-02T04:28:00.001-07:00

Evet arkaşlar bu dersimizde ‘küçülüp büyüyen‘ bir yukarı çık butonu oluşturmayı öğreneceğiz. Ayrıca eğer ki jQuery ile hazırlanmış olan biryukarı çık butonu kullanmayı istiyor iseniz şu yazımı ziyaret etmeniz yeterli olacaktır. Herneyse, konumuza dönmek gerekir ise; bu dersimizde JavaScript ile hazırlanmış bir yukarı çık butonu kuracağız. Mantık çok kolay, şöyle ki; yukarı çık butonu normal bir şekilde işlevine devam edecek. Fakat butonun üzerine geldiğiniz an butonun bir büyük versiyonu karşımıza çıkacak. Yani amaç nedir? diye düşünebilirsiniz. Amaç, farklılık. Yani blogunuzda farklılıklar yaratmak istiyor iseniz bu eklentiyi kurabilirsiniz. Ayrıca kurulum bakımından da oldukça basit.

Tasarım > Sayfa Öğeleri > Gadget Ekle > HTML/JavaScript Ekle adlı bölüme girerek aşağıdaki kodları ekliyoruz;

<!--BACK-TO-TOP-STARTS-->
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src='http://i56.tinypic.com/b7z7r7.png?imgmax=800'" src="http://i54.tinypic.com/zvzom0.png?imgmax=800" onmouseout="this.src='http://i54.tinypic.com/zvzom0.png?imgmax=800'"/></a>
<!--BACK-TO-TOP-STOPS-->

Blogger için “Uçan Twitter Kuşu” eklentisi

2011-10-02T04:27:00.005-07:00

Arkadaşlar bu blogger dersimizde sizler ile gerçekten çok sevdiğim bir eklentiyi paylaşacağım. Bildiğiniz gibi arkadaşlar, çoğunlukta bloglarda yan menüde Twitter butonları sabit bir şekilde yer alır. Ve bu zaman zaman çok dikkat çekmemektedir. Fakat sizlere anlatacağım bu eklentinin neredeyse dikkat çekmeme gibi bir olasılığı yok. Çünkü ilgili eklenti ile, blogunuzda Twitter kuşu uçuyor. Yani her sayfayı kaydırdığınızda Twitter kuşu uçmaya başlıyor. Ve böylelikle bu durumda ziyaretçilerin Twitter adresinize bakma olasılığını yükseltiyor diye düşünüyorum. Kaldı ki eklenti bu denli profesyonel olmasına rağmen kurulum bakımından fazlası ile kolay. Herneyse, hemen eklentinin anlatımına geçmek istiyorum.

Temanızda yer alan aşağıdaki kodu bulun;

</body>

Aşağıdaki kodu, yukarıdaki koddan önce ekleyin;

<script src='http://teknobeyin.googlecode.com/files/way2blogging.org-tripleflap.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var twitterAccount = &quot;twitterhesabinizinadi&quot;;
var tweetThisText = &quot; <data:blog.pageTitle/> : <data:blog.url/> &quot;;
tripleflapInit();
</script>

Not: Yukarıda yer alan kırmızı renkli “twitterhesainizinadi” adlı bölümü kendinize ait olan Twitter hesabınızın adı ile değiştirmeyi unutmayınız.

Blogger’da Twitter ve Facebook sayacı yapmak

2011-10-02T04:27:00.003-07:00

Arkadaşlar bu dersimizde Blogger’da Twitter ve Facebook sayfalarımız için sayaç yapmayı öğreneceğiz. Yani örneklendirmek gerekir ise; yan menümüze “1000+ Twitter Takipçimiz Var!” yazacağız. Ve buradaki “1000+” sayısını, Twitter’daki takipçimiz her 1000 tane arttığı zaman kendimiz güncelleyeceğiz. İsterseniz bu sayıyı elbetteazaltabilir veyahut yükseltebilirsiniz. Şimdi aklınızda, “normal yazı için eklenti mi gerekir?” sorusu gelebilir. Haklısınız, fakat bizler bu sayacı öyle bir görselleştireceğiz ki gerçekten her tema da çok sağlıklı bir görüntü ile karşı karşıya kalacağız. Ki zaten eklentiyi kurduktan sonra da eklentinin ne denli görsel ve göze güzel gözüktüğünü farkedeceğinize eminim.

Sayfa Ögeleri > Gadget Ekle > HTML/JavaScript Ekle bölümüne giriş yapıyoruz ve..

Twitter sayacı için aşağıdaki kodları ekliyoruz;

<center>
<div style="width:145px;height:130px;margin-bottom:-23px;border-top: 1px solid #F2F2F2; border-right: 1px solid #8A8A8A; border-left: 1px solid #F2F2F2;">
<img src="http://i51.tinypic.com/qoym4o.png" />
</div>
<br />
<span sans ms style=" background-color:#F2F2F2; border-top: 1px solid #F2F2F2; border-right: 1px solid #8A8A8A; border-left: 1px solid #F2F2F2; border-bottom: 1px solid #8A8A8A; padding: 2px 4px 4px 4px; color: #666; font-family: sans-serif, arial; font-size: 10px;">
<span style=" background-color:#D2E9F8; font-size: 9px; border-top: 1px solid #8A8A8A; border-right: 1px solid #ddd; border-left: 1px solid #8A8A8A; border-bottom: 1px solid #ddd; padding: 0px 1px;">1000<blink>+</blink></span> Twitter Takipçimiz Var!</span>
</center>

Facebook sayacı için ise aşağıdaki kodları ekliyoruz;

<center>
<div style="width:158px;height:130px;margin-bottom:-23px;border-top: 1px solid #F2F2F2; border-right: 1px solid #8A8A8A; border-left: 1px solid #F2F2F2;">
<img src="http://i53.tinypic.com/16irvuq.png" />
</div>
<br />
<span sans ms style=" background-color:#F2F2F2; border-top: 1px solid #F2F2F2; border-right: 1px solid #8A8A8A; border-left: 1px solid #F2F2F2; border-bottom: 1px solid #8A8A8A; padding: 2px 4px 4px 4px; color: #666; font-family: sans-serif, arial; font-size: 10px;">
<span style=" background-color:#D2E9F8; font-size: 9px; border-top: 1px solid #8A8A8A; border-right: 1px solid #ddd; border-left: 1px solid #8A8A8A; border-bottom: 1px solid #ddd; padding: 0px 1px;">1000<blink>+</blink></span> Facebook Takipçimiz Var!</span>
</center>

Not: Yukarıda yer alan kırmızı renkli sayıları; Twitter ve Facebook takipçi sayılarınıza göre düzenlemeyi unutmayınız.

Blogger’da 468×60 reklam alanları oluşturmak

2011-10-02T04:27:00.001-07:00

Arkadaşlar şu yazımda sizlere Blogger’da 125′e 125 reklam alanları oluşturmayı anlatmış idim. Bu yazım da ise Blogger‘da 468′e 60 reklam alanları oluşturmayı anlatacağım. Eklentiyi düzenler iken dikkat ettiğim nokta ise, görsellik oldu. Dolayısı ile bu yüzden eklenti de reklam alanlarının tamamını CSS ile yapmaktansa, görsellerden yapmaya özen gösterdim. Elbette, isterseniz görsellerde değişiklikler yapabilirsiniz. Ayrıca, ben kodları direk paylaşacağım için her kısım için kodları gösterme gereği duymadım. Yani aşağıdaki kodları, reklam alanı eklemek istediğiniz herhangi bir yere de ekleyebilirsiniz. Örneklendirmek gerekir ise; yazı içerisine, en alt kısıma, yazı üstüne vs. istediğiniz alanı reklam alanı olarak kullanabilirsiniz.

Yapmanız gereken tek şey, aşağıdaki kodları HTML’yi Düzenle kısmından Gadget Ekle linkine tıkladıktan hemen sonra HTML/JavaScript Ekle bölümüne aşağıdaki kodu eklemektir.

<div style="float:left;margin:10px 0px 20px 0px;width:574px;height:84px;background-color:#eee; margin-left:3px;border:2px solid #999;">
<img src="http://i52.tinypic.com/2v8ka6p.png" style="margin-left:10px;margin-top:10px;float:left;border:1px solid #999;" />
<a href="http://iletisimlinki"><img src="http://i53.tinypic.com/10r8u3p.jpg" style="margin-right:10px;margin-top:10px;float:right;border:1px solid #999;" /></a></div>

Not: Yukarıdaki kırmızı renkli resimi, reklama ait görsel ile değiştirebilirsiniz. Ayrıca “iletisimlinki”yazan linki de, reklam bilgilerinin yer aldığı link ile değiştirmeyi unutmayınız.

Blogger’da 125×125 reklam alanları oluşturmak

2011-10-02T04:26:00.001-07:00

Uzun bir süredir Blogger derslerimize ara vermiş idim. Bu ara verişimin en temel sebebi, diğer kategorilerimizin de güncellenmeye ihtiyacı olması idi. Fakat artık eskisi gibi en güncel ve en güzel blogger dersleri ile karşınızda olacağım. Herneyse, blogger derslerimizin bu bölümünde 125′e 125 reklam alanları oluşturacağız. Esasında bu reklam alanlarını oluşturmak oldukça basit. Fakat maalesef ki reklam kodlarının çoğunda temaya uyumsuzluk, taşma vs. gibi durumlar olduğu için bu dersimizde anlatacağım eklenti ile bu problemleri aşmış olacağız. Ki eklentiyi denediğim süre zarfında herhangi bir şekilde taşma veya tema ile uyumsuzluk ile karşılaşmadım. Umarım siz de eklentiyi kurarken bir problem ile karşılaşmazsınız diyerek dersimize geçiş yapıyoruz.

Blogunuzun HTML’yi Düzenle bölümüne giriş yaparak, CSS kısmına aşağıdaki kodları ekleyiniz;

.banners {
background:#F5F4F0 url(http://i54.tinypic.com/282g70j.jpg);
border:#DDD 1px solid;
margin:10px 0 10px;
padding:15px 0 9px 10px;
}
.banners img {
padding:2px;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-top:2px solid #ccc;
border-bottom:1px solid #ccc;
}

Daha sonra ise Tasarım > Sayfa Ögeleri > Gadget Ekle > HTML/JavaScript Ekle adlı bölüme aşağıdaki kodları ekliyoruz;

<div class='sidebox banners'>
<a href='http://reklamlinki'><img src="http://i54.tinypic.com/33ati5l.jpg"/></a>
<a href='http://reklamlinki'><img src="http://i54.tinypic.com/33ati5l.jpg"/></a>
<a href='http://reklamlinki'><img src="http://i54.tinypic.com/33ati5l.jpg"/></a>
<a href='http://reklamlinki'><img src="http://i54.tinypic.com/33ati5l.jpg"/></a>
<br clear='all'/>
</div>

Yukarıdaki kırmızı yerleri kendinize göre değiştirmeyi unutmayın arkadaşlar. Reklam linki yazan yere ilgili reklamın linkini, kırmızı reklam resmi yerine de reklam resmini ekleyebilirsiniz.

Not: Kodları ekleyeceğiniz bölümün 125′e 125 reklam alanları ile uyumlu olması gerekmektedir. Aksi taktirde taşma gibi problemler olasıdır. Ayrıca CSS kodları kendime göre düzenledim. Eğer isterseniz arkaplan, kenarlıklar vs. gibi CSS kodlarını da düzenleyebilirsiniz.

Blogger’da tasarım değişiklikleri başladı

2011-10-02T04:25:00.003-07:00

Blogger‘da tasarım değişikleri başladı başlamasına fakat bence bu yeni tasarım fazlası ile sade olmuş. En azından önceki tasarımda sade sayılır idi fakat en azından renkler belli oluyordu. Fakat şimdiki tasarımın neredeyse sadece beyaz renklerden oluştuğunu söyleyebilirim. Turuncu renklerde mevcut, fakat beyaz ağırlıklıolduğunu söylemek yanlış olmaz sanırım. Ayrıca, kontrol paneli dışında yazı yazma alanlarında da farklılıklar mevcut. Fakat yeni tasarım henüz blogger.com’da aktifleştirilmedi. Yeni tasarımı incelemek için draft.blogger.com‘u ziyaret etmeniz gerekiyor. Blogger’ın yeni tasarımı ile ilgili söyleyeceğim son şey ise şudur; bu kadar sadeliğe gerek yoktu.

Blogger’da “whos.amung.us” sayacının kullanımı

2011-10-02T04:25:00.001-07:00

Yeni bir blogger yazısından herkese merhabalar demek istiyorum. Bu yazımda blogger’da, bana göre dünya’nın en iyi sayacı olan(whos.amung.us) sayacını kullanmayı anlatacağım. Aslında çok ama çok basit, fakat en azından bilenler kadar bilmeyenlerin de olduğunu düşünerek bu yazıyı yazmak istedim. Öncelikle şuraya tıklayarak sayacın sitesine giriş yapıyoruz. Daha sonra ise sağ üst tarafta yer alan seçeneklerdeki showcase adlı bölüme tıklıyoruz. Son olarak ise karşımıza çıkan sayaç şekillerinden bize göre olana tıklıyoruz ve karşımıza çıkan kodları kopyalıyoruz. Şimdi gelelim, sayacı blogger’da kullanmaya. Blogger hesabımıza ait olan yönetici panelimize giriş yapıyoruz. Sonra ise, Tasarım bölümünde yer alan Gadget Ekle linkine tıklıyoruz. Ve HTML/JavaScript Ekle adlı seçeneği seçerek kopyaladığımız sayaç kodlarını buraya ekliyoruz. İşte her şey bu kadar, bu şekilde sayacı blogumuza eklemiş olduk…

Blogger’daki mouse imlecini değiştirmek!

2011-10-02T04:24:00.003-07:00

Normal mouse imlecinden sıkıldınız mı? İşte, bu yazımda sizlereblogger‘daki mouse imlecini değiştirmeyi anlatacağım. Dolayısı ile, mouse imleci değiştiği zaman da güzel bir görünüm ortaya çıkmış olacak. Ayrıca, bu özelliği kullanmak emin olun hiç zor değil. Fakat, maalesef ki bir çok mouse imleci sunamayacağım. Yani, siz istediğiniz herhangi bir mouse imlecini de kullanabilirsiniz. Kodlar arasında mevcut bir tane mouse imleci mevcut. İster mevcut olan mouse imlecini kullanırsınız, isterseniz de kendi beğendiğiniz herhangi bir mouse imlecini kullanabilirsiniz. Herneyse, şimdi bu güzel özelliği uygulayalım isterseniz.

Öncelikle Tasarım > HTML’yi Düzenle kısmına giriş yapıyoruz.

Daha sonra ise, aşağıdaki kodu buluyoruz

</head>

Ve yukarıda bulduğumuz kodu aşağıdaki kod ile değiştiriyoruz;

<style type="text/css">body, a, a:hover {cursor: url(http://teknobeyin.googlecode.com/files/mouseimleci.ico), progress;}</style>
</head>

Not: Eğer mouse imlecini değiştirmek isterseniz, yukarıda yer alan kırmızı renkli linki değiştirmeniz yeterli olacaktır.

Blogger için sağ tuş ve yazı kopyalama yasağı!

2011-10-02T04:24:00.001-07:00

Herkese Blogger dersleri yazı dizisinden merhabalar. Bu Blogger dersimizde, blogumuz için sağ tuş ve yazı kopyalama yasağıözelliğini uygulamayı öğreneceğiz. Öncelikle belirtmekte fayda var; Ne olursa olsun yazı kopyalamalarını engellemek mümkün değildir. Sonuçta maalesef, yazı kopyalamak isteyen kişi ne olursa olsun yazı kopyalayabiliyor. Dolayısı ile bizim amacımız sadece bu kopyalama işlemini yorucu bir hâle getirmek. Sonuçta normalde sağ tuş ve yazı kopyalama mümkünken, bu özellik kapandığı zaman yazı kopyalama daha yorucu bir olacak.

Yapmanız gerekenler çok basit arkadaşlar. Aşağıdaki kodlardan istediğinizi Tasarım > Sayfa Öğeleri > Gadget Ekle > HTML/JavaScript bölümünden eklemeniz yeterli olacaktır.

Yazı Kopyalama Yasağı;

<script type="text/javascript">

//form tags to omit in NS6+:
var omitformtags=["input", "textarea", "select"]

omitformtags=omitformtags.join("|")

function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}

function reEnable(){
return true
}

if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}

</script>

Sağ Tuş Yasağı;

<SCRIPT LANGUAGE="Javascript"><!--
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
var EnableRightClick = 0;
if(isNS)
document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
  if(EnableRightClick==1){ return true; }
  else {return false; }
}
function mousehandler(e){
  if(EnableRightClick==1){ return true; }
  var myevent = (isNS) ? e : event;
  var eventbutton = (isNS) ? myevent.which : myevent.button;
  if((eventbutton==2)||(eventbutton==3)) return false;
}
function keyhandler(e) {
  var myevent = (isNS) ? e : window.event;
  if (myevent.keyCode==96)
    EnableRightClick = 1;
  return;
}
document.oncontextmenu = mischandler;
document.onkeypress = keyhandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
//-->
</script>

Blogger’a “Google +1 Butonu” eklemek

2011-10-02T04:23:00.003-07:00

Google kısa süre önce “+1” butonunu sunmuştu. Akabinde, neredeyse bir çok blog Google +1 butonunu kullanmaya başlamış idi. Ve dolayısı ile bu butonu Blogger’da da kullanan kullanıcı sayısı bir hayli fazla olsa gerek. Şimdi gelelim bu butonu blogumuza nasıl ekleyeceğimize. Arkadaşlar, bu butonu blogunuza eklemek için kodlarla hiç uğraşmanıza gerek yok. Aslında bu yazıyı belki kodlarla uğraşmadan Google +1 butonunu eklemeyi bilmeyen arkadaşlarımız olabilir diye yazıyorum. Bu butonu eklemek için öncelikle Blogger Yönetim Paneli‘nize giriş yapıyorsunuz. Daha sonra ise Tasarım kısmına giriş yaptıktan hemen sonra, Blog kayıtları adlı kısımda yer alan Düzenle linkine tıklıyorsunuz. Ve karşınıza çıkan seçenekler arasında yer alanPaylaşım Düğmelerini Göster adlı seçeneği aktif ediyorsunuz. İşte her şey bu kadar, bu şekilde Google +1 Butonunu blogunuzda kodlarla uğraşmadan kullanabilirsiniz.

Blogger’da sayfa ile kayan Bookmark eklentisi!

2011-10-02T04:23:00.001-07:00

Arkadaşlar blogger derslerimize ara vermeden devam ediyoruz. Bu sefer anlatacağım Blogger eklentisi ise gerçekten hem kullanım bakımından çok kullanışlı hem de tasarımsal açıdan nerede isehiçbir eksiği yok diyebilirim. Eklentiyi blogunuza yerleştirdiğiniz zaman, eklenti blogunuzun tam ortasında beliriyor. Ve sayfa ile hareket ediyor. Yani sayfa aşağıya indikçe eklenti de aşağıya iniyor, sayfa yukarı çıktıkça eklenti de yukarı çıkıyor. Ayrıca, istediğiniz zaman eklenti de yer alan ikona tıklayarak eklentiyi küçük bir görünüme sokabiliyorsunuz. Eklentiyi kurmak ise fazlası ile kolay. Aşağıdaki yolu izleyerek eklentiyi hızlıca kurabilirsiniz.

Tasarım > Sayfa Ögeleri > Gadget Ekle > HTML/JavaScript Ekle bölümüne aşağıdaki kodları eklemeniz yeterli olacaktır;

<a href="http://web.informer.com/button/providers/list"><img id="Webinformer_FavoritesButton_Button" src="http://s.web.informer.com/b2.gif" alt="Web Informer Button" style="border: 0" /></a></div><div><script src="http://s.web.informer.com/favorites-button.js?glass" type="text/javascript" charset="UTF-8"></script>

Blogger’da sayfa ile kayan reklam alanları oluşturmak!

2011-10-02T04:22:00.003-07:00

Uzun zamandır Blogger kategorimizi ihmal etmiş idim. Ve yine, kaldığımız yerden Blogger derslerimize devam ediyoruz arkadaşlar. Bu sefer ki dersimiz de ise; Blogumuz için sağ veyahut solda yer alan ve sayfa ile beraber birlikte kayan sabit reklam alanıoluşturmaktan bahsedeceğim. Esasında ilk baştan zor ve çok karışık görülebilir. Fakat, inanın ki ne zor ne de karışık. Yapmanız gerekenleri elimden geldiğince detaylı bir şekilde anlatmaya çalışacağım. Sizin yapmanız gereken tek şey, aşağıdaki kodlarda yer alan kırmızı renkli kodları kendinize göredeğiştirmektir. Onun haricinde, başka yapmanız gereken hiçbir şey bulunmamaktadır.

Öncelikle; Tasarım > Sayfa Ögeleri > Gadget ekle kısmından HTML/JavaScript ekle yolunu izleyelim.

Daha sonra aşağıda yer alan kodları kutucuğa yapıştıralım..

Not: Aşağıdaki kodlar, reklamın sağ kısımda çıkmasını sağlayacaktır.

<style type="text/css">
#topbar{
position:absolute;
border: 0px solid black;
padding: 0px;
width: 111px;
visibility: hidden;
z-index: 0;
}
</style>
<script type="text/javascript">
var persistclose=1 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 10 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopright=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopright()", 0);
}
ftlObj = ml("topbar");
stayTopright();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<div id="topbar">
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://reklamresmi"><img style="cursor:pointer; cursor:hand;width: 80px; height: 400px;" src="http://aynlireklamresmi" border="0" alt="" id="reklam" /></a>
</div>

Reklamı solda göstermek istiyorsanız, aşağıdaki kodu kullanınız;

<style type="text/css">
#topbar{
position:absolute;
border: 0px solid black;
padding: 0px;
width: 111px;
visibility: hidden;
z-index: 0;
}
</style>
<script type="text/javascript">
var persistclose=1 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 10 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopleft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopleft()", 0);
}
ftlObj = ml("topbar");
stayTopleft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<div id="topbar">
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://reklamresmi"><img style="cursor:pointer; cursor:hand;width: 80px; height: 400px;" src="http://aynireklamresmi" border="0" alt="" id="reklam" /></a>
</div>

Not: Yukarıdaki her iki kodda da, iki tane resim alanı bulunmaktadır. Lütfen her iki alana da aynı reklam resmini yerleştiriniz.

Blogger özel alan adı sorunu için kesin çözüm!

2011-10-02T04:22:00.001-07:00

Maalesef ki Blogger hâlâ engelli durumda. Dolayısı ile bir çok blogger kullanıcısı uzun bir süredir bloglarına erişemiyor. Ve bu yüzden bir çok yeni İP Adresi geliyor. Fakat bu İP’lerin de engellenmesi ile bloglar bir türlü açılamıyor. Dolayısı ile yeni bir İP adresi daha bulunmuş. Ben bu yeni İP adresini denedim ve sorunsuz bir şekilde çalışıyor. Bu İP adresinin ne kadar kalıcı olacağı bilinmez. Fakat en azından uzun bir süreden sonra bloglarınıza, bu durumun ‘kısa süreliolabileceğini düşünerekte’ erişebilmek istiyorsanız aşağıdaki İP adresini kullanabilirsiniz.

Öncelikle domain ayarlamalarınızdan Kayıt Tipi olarak A seçeneğini seçin.
Daha sonra karşınıza çıkan kutucuğa 199.71.214.27 yazın.

Her şey bu kadar.. Umarım bu İP Adresi kalıcı olur..

Blogger için ‘Facebook’ta Paylaş’ eklentisi!

2011-10-02T04:21:00.003-07:00

Herkese yeni bir blogger dersleri yazısından merhaba demek istiyorum. Bu sefer anlatacağım eklenti de, Facebook ile ilgili bir eklenti. Bu eklenti sayesinde, blogunuzdaki her yazının en altına ‘Facebook’ta Paylaş’ butonu ekleyebileceksiniz. Ve dolayısı ile, ziyaretçileriniz tarafından da bu butona tıklandığı zaman yazılarınızFacebook’ta paylaşılmış olacak. Akabinde, bu durum da yazılarınızın bir çok kişiye ulaşılmasına zemin hazırlamış olacak diyebiliriz. Kaldı ki, eklentinin kurulumu da oldukça basit. Yapmanız gerekenleri aşağıda belirtiyorum, umarım bu eklentinin bir çok kişiye yararı olur.

Öncelikle Widget Şablonlarını Genişlet seçeneğinin yanında yer alan kutucuğu işaretliyoruz.

Daha sonra ise, aşağıdaki kodu buluyoruz;

<div class='post-footer'>

Son olarak ise, aşağıdaki kodu yukarıdaki koddan önce ekliyoruz;

<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'>Paylaş</a>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

Blogger için Highslide eklentisi

2011-10-02T04:21:00.001-07:00

Blogger için o kadar güzel eklentiler geliştiriliyor ki, sanırım o güzel eklentilerden birisi de şimdi anlatımını yapacağım Highslide eklentisi olsa gerek. Çünkü, Highslide eklentisi ile, blogunuza gerçek anlamdagörsellik açısından çok güzel bir özellik eklemiş oluyorsunuz. Bu özellikten bahsetmek istiyorum; Highslide eklentisi ile blogunuzda yer alan resimleri yakıntaştırabiliyorsunuz ve ayrıca yakınlaştırdığınız resimi istediğiniz gibi sağa ve sola taşıyabiliyorsunuz. Gerçekten çok güzel bir eklenti olarak düşündüğüm Highslide’ın uygulama adımlarına geçmek istiyorum. Umarım, bir çok kişi içinf faydalı bir eklenti olacaktır.

Öncelikle temanızda yer alan aşağıdaki kodu bulun;

</head>

Sonra ise, aşağıdaki kodu yukarıdaki koddan önce ekliyoruz;

<script src='http://teknobeyin.googlecode.com/files/highslide-full.js' type='text/javascript'/>
<link href='http://highslide.com/highslide/megik.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.allowSizeReduction = false;
hs.showCredits = false;
hs.isUnobtrusiveAnchor = function(el) {
if (el.href && /\.jpg$/.test(el.href)) {
el.className = 'highslide';
return 'image';
}
if  (el.href && /\.gif$/.test(el.href)) {
el.className =  'highslide';
return 'image';
}
if  (el.href && /\.png$/.test(el.href)) {
el.className =  'highslide';
return 'image';
}
}
function fixBloggerImages(searchFor, replaceWith) {
var href;
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++) {
href = anchors[i].href;
if(href.indexOf(searchFor) != -1) {
anchors[i].href = href.replace(searchFor, replaceWith);
anchors[i].setAttribute("onclick", "return hs.expand(this)");
anchors[i].setAttribute("class", "highslide");
anchors[i].setAttribute("title", "Click to enlarge");
}
}
}
//]]>
</script>

Şimdi ise, aşağıdaki kodu buluyoruz;

</body>

Ve yukarıdaki koddan önce, aşağıdaki kodları ekliyoruz;

<script type='text/javascript'>fixBloggerImages("s1600-h", "s1600");</script>

Eklentinin çalışması için başka birşey yapmanıza gerek yok. Normal bir şekilde resim yüklemeye devam edebilirsiniz. Eklediğiniz her resim için, eklenti otomatik olarak çalışacaktır.

Önemli Bilgi: Eklente ekli olan resim türleri (.jpg, .gif ve .png)’dir. Dolayısı ile bu resim türlerini çoğaltmak istiyor iseniz, aşağıdaki kodları kullanmanız yeterli olacaktır.

if  (el.href && /\.resimturununuzantisi$/.test(el.href)) {
el.className =  'highslide';
return 'image';
}
}

Yani, yeni resim türleri eklemek için, uzantıları yazarken yukarıdaki kodları, aşağıdaki kodlardan sonra eklemeniz yeterli olacaktır.

if  (el.href && /\.gif$/.test(el.href)) {
el.className =  'highslide';
return 'image';
}

‘Etiketine sahip yayınlar gösteriliyor’ yazısını kaldırmak!

2011-10-02T04:20:00.001-07:00

Bu dersimiz de, blogumuzda yazdığımız yazılara eklediğimizetiketlere tıkladığımız zaman karşımıza çıkan ‘…etiketine sahip en yeni yayınlar gösteriliyor.’ yazısını kaldırmayı öğreneceğiz. Yani, artık blogunuzdaki herhangi bir etikete tıklandığı zaman karşınıza böyle biruyarı çıkmayacak. Ne kadar gerekli olup olmadığı değişir. Fakat yine de ihtiyacı olanların, olabileceğini düşünerek bu yazıyı yazmak istedim. Umarım ihtiyacı olanların, ihtiyacını giderecek bir yazı olur. Kaldı ki zaten hiçbir şekilde bir zorluğu yok. Yine bir çok zaman olduğu gibi, bazı kodları kaldırıp bazı kodları ekleyeceğiz.

Öncelikle Widget Şablonlarını Genişlet seçeneğini işaretliyoruz.

Daha sonra ise, aşağıdaki kod satırını buluyoruz;

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Yukarıda bulmuş olduğumuz kodların tamamını, aşağıdaki kodlar ile değiştiriyoruz;

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Blogger’a jQuery ile Resim Başlığı eklemek

2011-10-02T04:19:00.003-07:00

Herkese yeni bir blogger dersleri yazısından merhabalar. Bu blogger dersimizde, blogumuzdaki resimlere jQuery ile başlıklar ekleyeceğiz. ‘Bu özellik zaten Blogger’da var!’ demeyin. Blogger’daki sadece başlık ekliyor. Bu eklenti de, resim arkaplanında değişiklikler oluyor. Yani Blogger’daki ile, bu eklentiyi karıştırmamakta fayda var diye düşünüyorum. Belirttiğim gibi, eklenti sayesinde resimlerinize Başlık / Açıklama kısmı ekleyebiliyorsunuz. Ayrıca, CSS kısmından da isterseniz resminizin arkaplanındaki renklerle ilgili olarak vs. ayarlamaları yapabilirsiniz. Herneyse, eklenti adımlarına geçmek istiyorum.

Öncelikle aşağıdaki kodu buluyoruz;

</head>

Yukarıdaki koddan önce aşağıdaki kodları ekliyoruz;

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://teknobeyin.googlecode.com/files/addcaption.js' type='text/javascript'/>

Son olarak ise temamızın CSS kısmına aşağıdaki kodları ekliyoruz;

div.addCaption {margin-bottom:1.5em;padding:10px;text-align:center;background:#f0f0f0;border:1px solid #ccc;color:#565656;display:inline-block;-moz-border-radius:5px;-webkit-border-radius:5px;}
div.addCaption img {display:block;}

Resimlere başlık eklemek için ise, resim kodlarında aşağıdaki koda benzer olan kodu bulun;

<img class="border="0" height="213"

Yukarıdaki kodu bulduktan sonra, kodun en başına aşağıdaki kodu ekleyin. Yani şöyle olacak;

<img class=addCaption" title="Resim Başlığı" border="0" height="213"

Dolayısı ile yukarıda giden kodda yer alan, kırmızı kodları biz eklemiş olduk.. Herşey bu kadar..

İyi bloglamalar.

Not: Yukarıda kırmızı renkle yer alan Resim Başlığı yazısını, resimde gözükmesini istediğiniz yazı ile değiştirmeyi unutmayınız.

Blogger’da yazılara “Yazdır” linki eklemek

2011-10-02T04:19:00.001-07:00

Blogger derslerimize devam ediyoruz. Bu dersimizde, blogumuzda bulunan yazılarımıza yazdır bölümü ekleyeceğiz. Yani, istediğimiz zaman yazıların bir çıktısını alabileceğiz. Eklenti, blogunuzun anasayfasında gözükmemektedir. Yani, sadece yazı sayfalarınızdaresim olarak gözükmektedir. Yazdır resmine tıklayarak yazınızın çıktısını anında alabilirsiniz. Eklenti kurulumu ise oldukça basit, fakat ben yine de elimden geldiğince açıklayıcı bir şekilde anlatmaya özen göstereceğim. Umarım eklentiyi kullanmak isteyen arkadaşlarımız, eklentiyi sorunsuz bir şekilde kurabilirler.

Öncelikle blogumuzun tema bölümünde yer alan Widget Şablonlarını Genişlet seçeneğinde yer alan kutucuğu işaretliyoruz.

Daha sonra ise, aşağıdaki kodu buluyoruz;

<data:post.body/>

Son olarak ise, yukarıdaki kodu aşağıdaki kod ile değiştiriyoruz;

<span class='noprint'><p><data:post.body/></p></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'>
<img src='http://img13.imageshack.us/img13/5553/yazdir.png'/></a></b:if>

Blogger için muhteşem resim eklentisi: Lightbox

2011-10-02T04:18:00.001-07:00

Blogger konulu yazılarımıza devam ediyoruz. Şimdi anlatımını yapacağım eklenti, gerçek anlamda muhteşem diyebileceğim bir eklenti. Bir çok profesyonel olarak hazırlanmış web sitesinde sanıyorum ki bu eklentiye benzer görseller ile karşılaşmışsınızdır. Yani eklentiden biraz bahsetmek gerekir ise; blogunuzdaki resimetıkladığınız zaman direk resmin açılması yerine; bu eklenti sayesindearkaplan kararır ve sonra ortaya resim çıkar. Ve dolayısı ile, blogunuzda gerçek anlamda çok güzel görünüm sağlamış olur. Eklentinin kurulumu başta belki biraz karışık gelebilir. Fakat aşağıdaki adımları yavaş bir şekilde okuyarak, uygular iseniz eklentinin kurulumunun çok basit olduğunu anlayacaksınızdır.

Öncelikle blogumuzun CSS kısmına aşağıdaki kodları ekliyoruz;

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer&gt;#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://img222.imageshack.us/img222/2760/gerih.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://img819.imageshack.us/img819/9932/ileri.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }

Daha sonra, blogumuzun temasında yer alan aşağıdaki kodu bulalım;
</head>

Daha sonra ise, aşağıdaki kodları yukarıdaki koddan önce yerleştiriyoruz;

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>
<script src='http://teknobeyin.googlecode.com/files/scriptaculous.js' type='text/javascript'/>
<script src='http://teknobeyin.googlecode.com/files/lightbox.js' type='text/javascript'/>

İşte herşey bu kadar..

Eklentiyi kullanmak için, yazınıza resim ekler iken eklediğiniz resmin kodlarını aşağıdaki şekilde değiştirmeniz gerekiyor.

Eklediğiniz resimin kodlarında aşağıdaki koda benzer bir kodu bulun;
imageanchor="1"

Yukarıdaki kodu bulduktan sonra, yukarıdaki kodun sağ tarafına aşağıdaki kodu ekleyin;

rel="lightbox" title="Eklediğiniz Resmin Başlığı"

Not: Yukarıda yer alan kırmızı renkli yazıyı, resminizin başlığı ile değiştirmeyi unutmayınız.

Blogger için “Yazıyı Aç – Kapat” eklentisi!

2011-10-02T04:17:00.003-07:00

Herkese yeni bir blogger dersleri yazı dizisinden merhabalar. Bu sefer anlatacağım eklenti de gerçekten çok kullanışlı bir eklenti. Bu sever ki eklenti ise şöyle; Siz normal bir şekilde yazınızı yazıyorsunuz, fakat yazınız bittikten sonra oluşan link doğrultusunda yazınız hemen gözükmüyor. Yani bu linke tıkladığınız zaman yazınız direk açılıyor. Tekrar linke tıkladığınız zaman da ise, yazınız tekrarkapanıyor. Velhasıl kelam, blogunuzda farklıklıklar yapmak istiyorsanız bu eklenti tam size göre. Kaldı ki kurulum açısından da gerçekten çok basit bir eklenti. İsterseniz eğer, eklentinin anlatımına geçmek istiyorum.

Öncelikle blogumuzdaki temada yer alan aşağıdaki kodu bulalım;
]]></b:skin>

Daha sonra ise, yukarıdaki koddan önce aşağıdaki kodları ekleyelim;

.commenthidden {display:none}
.commentshown {display:inline}

Aşağıdaki kodu bulalım;

</head>

Aşağıdaki kodu, yukarıdaki koddan önce yerleştirelim;

<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

Ve herşey bu kadar..

Bu eklentiyi uygulamak için yazı yazarken, yazınızı aşağıdaki kod doğrultusunda yazmanız gerekmektedir;

<a href="javascript:togglecomments('Yazı Aç - Kapat')" title="Tıkla">Yazıyı Aç / Kapat</a>
<div id="Yazı Aç - Kapat">
Linke tıkladığı zaman, görülmesini istediğiniz yazınızı buraya yazınız.</div>

Not: Yukarıda yer alan, kırmızı renkli yazıyı değiştirmeyi unutmayınız.

Blogger’da ‘Yorum Gönder’ yazısını değiştirmek!

2011-10-02T04:17:00.001-07:00

Herkese yeni bir blogger yazısından merhabalar. Bu sefer anlatacağım eklenti ise; yorum gönder yazısı ile ilgili. Sanıyorum ki bir çok blog yazarı, blogger’da varsayılan olarak karşımıza çıkan ‘Yorum Gönder’ yazısını değiştirmeyi istiyor. Bu işlem her ne kadar kolay olsa da, bir çok kişi tarafından yapılamıyor. Ben de bu yüzden, yapamayanları düşünerek bu yazıyı yazmayı uygun gördüm. Bu yazı sayesinde, hem Yorum Gönder yazısını değiştireceğiz hem de Yorum Gönder yazısına CSS ekleyerek, istediğimiz şekilde görsellik katabileceğiz. Eğer isterseniz, hemen anlatıma geçelim.

Öncelikle Widget Şablonlarını Genişlet kısmını işaretliyoruz.

Daha sonra ise aşağıdaki kodları buluyoruz;

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

Yukarıda kırmızı renkle yer alan kodu değiştirerek, Yorum Gönder yazısını da değiştirmiş oluyoruz.

Şimdi ise, Yorum Gönder yazısına CSS kısmı ekliyoruz;

#comments h4 {
font-size:12px;
font-weight: bold;
color:#000000;
}

Yukarıda yer alan CSS kodlarını da, istediğimiz gibi değiştirerek Yorum Gönder yazısına görsellik katıyoruz.

Blogunuzun hızlı açılması için: Lazyload eklentisi!

2011-10-02T04:16:00.003-07:00

Blog yazarlarının bir çoğu bloglarında, bir çok reklam barındırıyor. Dolayısı ile bu yüzden bloglarının sayfa yüklenim hızları da bir o kadar düşüyor. Bu durumu örneklendirmek gerekir ise; blogunuzdaki her yazınızda yazınızla ilgili bir veya iki resim yer alıyor ise, bu durum blogunuza girilirken blog sayfanızın yavaş açılmasına sebebiyet verebilir. Dolayısı ile sizlerle paylaşacağım bu eklenti sayesinde, blogunuzdaki resimler blogunuzda, aşağıya inildikçe açılmaya başlayacak. Dolayısı ile bu durumda elbette, blogunuzun hızını iyi bir şekilde etkileyecek.

Öncelikle aşağıdaki kodu buluyoruz;

</head>

Ve, aşağıdaki kodları yukarıdaki koddan önce ekliyoruz;

<script src="http://teknobeyin.googlecode.com/files/lazyload1.js" type="text/javascript"></script> <script src="http://teknobeyin.googlecode.com/files/jquery.lazyload.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
$(function() {$("img").lazyload({placeholder : "http://img522.imageshack.us/img522/3559/yukleniyor.gif",effect : "fadeIn"});});
// ]]></script>
<script type="text/javascript">// <![CDATA[
if (window.jstiming) window.jstiming.load.tick('headEnd');
// ]]></script>

Blogger’da yorumları numaralandırmak!

2011-10-02T04:16:00.001-07:00

Herkese yeni bir blogger dersleri yazı dizisinden merhabalar demek istiyorum. Bu sefer anlatımını yapacağım eklenti ise gerçekten çok güzel bir eklenti diyebilirim. Yani, olmasa da olur belki fakat olduğu zaman da blogunuza güzel bir görünüm verdiğini söyleyebilirim. Eklenti; blogunuzdaki her bir yorumu numaralandırmanızı sağlıyor. Ayrıca, bu yorum linkleri de blogunuzun teması ile uyumlu oluyor. Yani blog tasarımınız nasıl ise, bir nevi bu numaralarda temanızla uyumlu oluyor. Kaldı ki, yapılış bakımından da hiçbir zorluğu yok. Aşağıdaki adımları uygulayarak, sizler de bu güzel eklentiyi blogunuzda kullanmaya başlayabilirsiniz.

Öncelikle Widget Şablonlarını Genişlet seçeneğinin yanındaki kutucuğu işaretliyoruz.

Daha sonra ise aşağıdaki kodlardan herhangi birisini buluyoruz;
<dl id='comments-block'>

Veya;

<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>

Yukarıdaki kodlardan herhangi birisini bulduktan sonra, bulduğumuz koddan sonra aşağıdaki kodu ekliyoruz;

<script type='text/javascript'>var CommentsCounter=0;</script>

Daha sonra ise, aşağıdaki kodu buluyoruz;

<data:commentPostedByMsg/>

Ve yukarıdaki koddan sonra, aşağıdaki kodları ekliyoruz;

<span class='numberingcomments' style='float: right; font-size: 20px;'>
<a exprCoolref='data:comment.url' title='Yorum Linki'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Blogger’da ‘Kaydol: Kayıtlar (Atom)’ linkini kaldırmak!

2011-10-02T04:15:00.003-07:00

Herkese merhabalar. Bu sefer anlatacağım blogger dersi ise; bir çok kişinin Blogger’ın RSS servisine nazaran, alternatif RSS servisi seçmesi üzerine olacak. Günümüzde, ben de dahil olmak üzere bir çok kişi FeedBurner kullanıyor. Yani her açıdan ben beğeniyorum açıkçası, bu yüzden de kullanıyorum. Dolayısı ile, FeedBurner kullanırken Blogger temalarında yer alan Kaydol: Kayıtlar (Atom)linkine de hiç gerek kalmıyor. İşte bu linki kaldırmayı anlatmak istiyorum. Aslında işlem çok basit, fakat bilmeyenlerin de olabileceğini düşünerek bu yazıyı yazmak istedim. Umarım yazım faydalı olabilir.

Öncelikle, Tasarım > HTML’yi Düzenle bölümüne girerek, Widget Şablonlarını Genişletseçeneğinin yanındaki kutucuğu işaretleyelim.

Daha sonra ise aşağıdaki kodu bulalım;

<b:include name='feedLinks'/>

Yukarıdaki kodu bulduktan sonra, yukarıdaki kodu silerek blogumuzda yer alan Kaydol: Kayıtlar (Atom) linkini kaldırmış oluyoruz.

Blogger için ‘güzel sözler’ eklentisi!

2011-10-02T04:15:00.001-07:00

Yeni bir blogger dersleri yazı dizisinden herkese merhabalar. Bu sefer anlatacağım eklentinin kurulumu oldukça basit. İşleyişinden biraz bahsetmek gerekir ise; Eklenti, blogunuzun sayfasını heryenilediğinizde karşınıza mevcut olan sözlerden çıkarıyor. Yani, her sayfa yenilendiğinde güzel sözler değişiyor. Dolayısı ile, blogunuzdafarklılıklar yapmak istiyorsanız, bu eklenti tam size göre. Ayrıca, eklentide yer alan sözleri istediğiniz şekilde değiştirebilirsiniz.

Tasarım > Sayfa Ögeleri > Gadget Ekle > HTML/JavaScript Ekle bölümüne aşağıdaki kodları ekleyiniz;

<script language="JavaScript">
quotes = new Array(7);
quotes[0] = "Öfkelenmek ve sızlanmak ahlaka aykırıdır.";
quotes[1] = "Bir insanın bildiğini zannettiği bir şeyi, öğrenmesi imkansızdır.";
quotes[2] = "Olaylar önemli değildir; onları algılayışımız önemlidir.";
quotes[3] = "İlk önce kendine ne olacağını sor, sonra ne yapmak gerekiyorsa yap.";
quotes[4] = "Yarın bambaşka bir insan olacağım diyorsun. Niye bugünden başlamıyorsun?";
quotes[5] = "İnsanın hakiki asaleti faziletten gelir, doğuştan değil.";
//calculate a random index
index = Math.floor(Math.random() * quotes.length);
document.write("\n");
document.write(quotes[index]);
</script>

Yukarıdaki sözleri aşağıdaki gibi, farklı sözlerle çoğaltabilirsiniz;

quotes[6] = "Yeni bir güzel söz.";
quotes[7] = "Yeni bir güzel söz.";
quotes[8] = "Yeni bir güzel söz.";
quotes[9] = "Yeni bir güzel söz.";
quotes[10] = "Yeni bir güzel söz.";

Blogger’da yazar yorumlarını belirginleştirmek!

2011-10-02T04:14:00.003-07:00

Herkese yeni bir blogger dersleri yazısından merhaba. Bu sefer ki dersimizde, yazarı olduğumuz blogumuzdaki yorumlarımızı, ziyaretçilerimizin yorumlarına nazaran daha belirgin bir hâle getireceğiz. Bu şekilde, yazar olduğumuz fazlası ile belirginleşmiş olacak. Dolayısı, hem kendi yorumlarımızın nasıl olacağını hem deziyaretçilerimizin yorumlarının nasıl olacağını belirleyeceğiz. Bu işlem gerçekten çok basit, aşağıdaki adımları yavaş yavaş okuyarak uygularsanız, hiçbir şekilde bir sorunla karşılaşmazsınız. Herneyse, isterseniz anlatıma geçelim;

Öncelikle Widget Şablonlarını Genişlet seçeneğinin yanında yer alan kutucuğu işaretliyoruz.

Daha sonra ise, blogumuzda yer alan kodlardan olan aşağıdaki kod satırını buluyoruz;

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</dt>

Yukarıdaki kod satırını bulduktan sonra hemen, altına aşağıdaki kodu ekliyoruz;

<b:if cond='data:comment.author == data:post.author'>
<p class='yazar'><data:comment.body/></p>
<b:else/>
<p class='okur'><data:comment.body/></p>
</b:if>

Daha sonra ise aşağıdaki kodu buluyoruz;

]]></b:skin>

Son olarak ise, aşağıdaki kodları yukarıdaki koddan önce ekliyoruz;

.yazar{
background:#BFEAFF;
padding:10px;
}
.okur{
background:#EFFAFF;
padding:10px;
}

Yazar: Yukarıdaki CSS kodlarında yer alan (.yazar) kısmını özelleştirerek, kendi yorumlarınızın nasıl gözükmesi gerektiğini ayarlayabilirsiniz.

Okur: Yukarıdaki CSS kodlarında yer alan (.okur) kısmını özelleştirerek, ziyaretçilerinizin yorumlarının nasıl gözükmesi gerektiğini ayarlayabilirsiniz.

Blogger’da linkleri hareketlendirmek!

2011-10-02T04:14:00.001-07:00

Blogger için geliştirilmiş bir çok eklenti mevcut, bu eklentilerin bazıları sadece blog’a görsellik katmak açısından olsa bile gerçekten çok seviliyor. İşte bu eklentilerden bir tanesini sizlerle paylaşmak istiyorum. Eklentiden bahsetmek gerekir ise; bu eklenti sayesinde yazılarınızdaki linklerin hareketlenmesini sağlayabiliyorsunuz. Yani, yazınızdaki linke gelindiği zaman link sağa doğru ilerliyor. Ve gerçekten hoş bir görünüm ortaya çıkıyor. Üstelik, kurulumu da bir o kadar basit diyebilirim. Aşağıdaki adımları doğru bir şekilde uygulayarak, eklentiyi kullanmaya başlayabilirsiniz.

Öncelikle temamızda yer alan aşağıdaki kodu bulalım;
</head>

Daha sonra ise, yukarıdaki koddan önce aşağıdaki kodları ekleyelim;

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '20px' },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>

İşte herşey bu kadar.. Yazılarınızdaki linklerin hareketlenmesini istiyorsanız, yazılarınıza linkleri şu şekilde eklemeniz gerekiyor;

<a href="http://denemelink" class="nudge">Deneme</a>

Blogger yan menüde bütün yazıları listelemek!

2011-10-02T04:13:00.001-07:00

Yeni bir blogger dersleri yazı dizisinden herkese merhabalar. Bu sefer anlatacağım eklentinin kurulumu oldukça basit. Fakat kuruluma geçmeden önce, eklentiden biraz bahsetmek istiyorum. Eklenti; yan menünüzde blogunuzda bulunan bütün yazılarınızı listelemenizi sağlıyor. Dolayısı ile bir nevi arşiv görevini görse de, kullanmak isteyenlerin olabileceğini düşünerek paylaşmak istedim. Eklenti kurulumu çok basit, aşağıdaki kodları Tasarım > Sayfa Ögeleri >Gadget Ekle > HTML/JavaScript Ekle bölümüne yapıştırın. Ve kırmızı renkli yerleri kendinize göre değiştirin.

<span id="preservef0db62897a8147d195e41e46b80f056f"><script language="JavaScript" src="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2Fblogunuzunadi.blogspot.com%2Ffeeds%2Fposts%2Fdefault%3Fstart-index%3D1%26max-results%3D999&chan=n&num=1000&desc=0&date=n&targ=y" type="text/javascript"></script></span><a href="http://blogunuzunadi.blogspot.com/feeds/posts/default">RSS Takipçisi Ol!</a>