Blogger ‘son yazılar’ ve ‘son yorumlar’ eklentisi

Blogger, ücretsiz olmasına rağmen, kullanıcılarına bir çok eklentiyi kullanabilme imkânı veriyor. Dolayısı ile, Blogger için milyon tane eklenti var diyebilirim. Bu eklentilerin, en başlarında gelen eklenti ise, çoğu kişinin WordPress‘ten tanıdığı, son yazılar ve son yorumlar eklentisi. Bu eklenti sayesinde, çok kolay bir şekilde, blogunuza yazdığınız son yazılarınızı ve blogunuz için yapılan son yorumları, blogunuzda gösterebilirsiniz. Bu eklentiyi blogunuza kurmak için ise, aşağıdaki adımları takip etmeniz yeterli olacaktır.

Yerleşim > Gadget Ekle > HTML/JavaScript Ekle bölümüne giriş yapın. Ardından ise, karşınıza çıkan editöre aşağıdaki JavaScript kodlarını yapıştırın.

Son Yazılar eklentisi için;<script style="text/javascript"> function showrecentposts(json) { for (var i = 0; i < numposts; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } } posttitle = posttitle.link(posturl); var readmorelink = "(more)"; readmorelink = readmorelink.link(posturl); var postdate = entry.published.$t; var cdyear = postdate.substring(0,4); var cdmonth = postdate.substring(5,7); var cdday = postdate.substring(8,10); var monthnames = new Array(); monthnames[1] = "Jan"; monthnames[2] = "Feb"; monthnames[3] = "Mar"; monthnames[4] = "Apr"; monthnames[5] = "May"; monthnames[6] = "Jun"; monthnames[7] = "Jul"; monthnames[8] = "Aug"; monthnames[9] = "Sep"; monthnames[10] = "Oct"; monthnames[11] = "Nov"; monthnames[12] = "Dec"; if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var re = /<S[^>]*>/g; postcontent = postcontent.replace(re, ""); if (!standardstyling) document.write('<div>'); if (standardstyling) document.write('<br/>'); document.write(posttitle); document.write('<br/>'); if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday); if (!standardstyling) document.write('</div><div>'); if (showpostsummary == true) { if (standardstyling) document.write('<br/>'); if (postcontent.length < numchars) { if (standardstyling) document.write('<i>'); document.write(postcontent); if (standardstyling) document.write('</i>');} else { if (standardstyling) document.write('<i>'); postcontent = postcontent.substring(0, numchars); var quoteEnd = postcontent.lastIndexOf(" "); postcontent = postcontent.substring(0,quoteEnd); document.write(postcontent + '...' + readmorelink); if (standardstyling) document.write('</i>');} } if (!standardstyling) document.write('</div>'); } } var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 250; var standardstyling = false; </script> <script src="http://www.siteadresiniz.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Son Yorumlar eklentisi için;<script style="text/javascript"> function showrecentcomments(json) { for (var i = 0; i < numcomments; i++) { var entry = json.feed.entry[i]; var alturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } alturl = alturl.replace("#", "#comment-"); var postlink = alturl.split("#"); postlink = postlink[0]; var linktext = postlink.split("/"); linktext = linktext[5]; linktext = linktext.split(".html"); linktext = linktext[0]; var posttitle = linktext.replace(/-/g," "); posttitle = posttitle.link(postlink); if ("content" in entry) { var comment = entry.content.$t;} else if ("summary" in entry) { var comment = entry.summary.$t;} else var comment = ""; var re = /<S[^>]*>/g; comment = comment.replace(re, ""); if (!standardstyling) document.write('<div>'); document.write('<a href="' + alturl + '"><b><font color="#FF0000" style="font-size: 9pt">' + entry.author[0].name.$t + '</font></b> ; '); if (!standardstyling) document.write('</div><div>'); if (comment.length < numchars) { if (standardstyling) document.write(''); document.write('<i><font style="font-size: 9pt"> ' + comment + '</font></i><br>'); if (standardstyling) document.write('');} else { if (standardstyling) document.write(''); comment = comment.substring(0, numchars); var quoteEnd = comment.lastIndexOf(" "); comment = comment.substring(0, quoteEnd); document.write('<i><font style="font-size: 9pt">' + comment + ' ...)</font></i><br>'); if (standardstyling) document.write('</a>');} if (!standardstyling) document.write('</div>'); if (standardstyling) document.write(''); } if (!standardstyling) document.write('<div>'); if (standardstyling) document.write(''); document.write(); if (!standardstyling) document.write('</div>');} var numcomments = 10; var numchars = 20; var standardstyling = true; </script> <script src="http://www.siteadresiniz.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Önemli Not: Lütfen yukarıdaki kodlarda yer alan (siteadresiniz.com) kısmını kendi site adresiniz ile değiştirmeyi unutmayın. Aksi durumda, eklenti çalışmayacaktır.

Blogger ‘En Çok Yorum Yapanlar’ eklentisi

Yeni bir blogger dersleri yazı dizisinden herkese merhabalar. Bu sefer ki blogger eklentisi de gerçekten çok güzel bir eklenti. Bu eklenti sayesinde, blogunuza en çok yorum yapan ziyaretçilerinizi görebileceksiniz. Dolayısı ile, bunla beraber blogunuzu takip eden kişiler hakkında az da olsa bilgi sahibi olmuş oluyorsunuz. Eklenti kullanımı çok basit, sadece aşağıda yer alan kodu ekledikten sonra ufak bir ayar sonucunda, eklentiyi kullanmaya başlayabilirsiniz. Lütfen aşağıdaki anlatımı inceleyiniz;

Aşağıdaki kodları, Yerleşim >> Sayfa Ögeleri >> HTML/JavaScript bölümüne ekleyin;

<script type="text/javascript">
function pipeCallback(obj) {
document.write("<ol>");
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write("</ol>");
}
</script>
<script src= "http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&
_id=c92ac21897d8b56e61cfa85930dd89a1&url=http%3A%2F%2Fblogunuzunadi.blogspot.com&num=10" type="text/javascript"></script>

Not: Yukarıdaki, blogunuzunadi kısmını blogunuzun adı ile değiştirmeyi unutmayın.

Blogger için ‘Çoklu Dil’ desteği!

Blogunuzda çoklu dil desteğinin olmasını ister misiniz? Velev ki, blogunuza yabancı birisi girdi, ve blogunuzda yazılanlardan hiç birşey anlamadı. İşte tam bu anda devreye, bu eklenti giriyor. Ve bu eklenti sayesinde, blogunuzdaki yazıları diğer bir dile çevirebiliyorsunuz. Sonuçta Türkçe bir bloga neden yabancı birisi girsin diye düşünebilirsiniz, fakat oldu da girdi diye de düşünmekte yarar diye düşünüyorum. O yüzden bu eklentinin yararlı bir eklenti olduğunu söyleyerek eklenti kodlarını vermek istiyorum. Aşağıdaki kodları, blogunuzda istediğiniz bir yere ekleyebilirsiniz.

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=tr&w=160&h=60&title=&border=&output=js"></script>

Blogger’da yazılar için bilgi alanı oluşturmak!

Blogger’daki yazılarınız için, bilgi alanı oluşturmak ister misiniz? Yani, yazılarınızın altına veyahut istediğiniz bir yerine; yazınızı yazdığınıztarihin, yazınızda bulunan toplam yorumu gösteren bir eklenti eklemek ister misiniz? Eklenti aslında basit, fakat görselleştirdiğiniz taktirde gerçekten güzel bir hâl alacağını düşünüyorum. Kodlar aşağıda yer alıyor. Kodlarda yer alan yazıları, blogunuza göre veya istediğiniz herhangi bir şekilde düzenleyebilirsiniz. Ayrıca bilgi alanını, istediğiniz şekilde de özelleştirebilirsiniz.

<div style="background-color: #252525; font-family: arial, sans serif; border-bottom: #333333 1px solid; border-left: #333333 3px solid; border-right: #333333 1px solid; border-top: #333333 1px solid; margin-top: 10px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px;">Bu yazı (Adınız) tarafından, <BlogDateHeader>"<$BlogDateHeaderDate$>"</h2></BlogDateHeader> tarihinde yazılmıştır.Bu yazıda toplam "<$I18NNumComments$>" bulunmaktadır.Eğer sen de bu yazı hakkında düşüncelerini paylaşmak istiyorsan, yorum yapmak için <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>> buraya tıklayabilirsin.</div>

Not: Yukarıda, kırmızı renkli olan (Adınız) kısmını kendi isminiz ile değiştirmeyi unutmayınız.

Blogger için köşeden açılan ‘reklam sayfası’ oluşturmak!

Blogger’da, yan tarafa normal reklam resmi koymak yerine, değişikreklam şekilleri oluşturabilirsiniz.  İşte o yollardan birini anlatmak istiyorum. Bir çok blogda görmüşsünüzdür; Yan tarafta üzerine gidince açılan reklam sayfasını. İşte bizler de bunu blogger için kullanacağız. Fakat isterseniz, elbette reklam sayfasını, RSS linkinizi koyarakta kullanabilirsiniz. Gerçekten çok kullanışlı ve blogunuzungörselleşmesi açısından güzel bir eklenti olduğunu düşünüyorum.

Öncelikle aşağıdaki kodu buluyoruz;
]]></b:skin>

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

#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://reklamresmininlinki) no-repeat right top;
}

Sonra ise, aşağıdaki kodu bulalım;

</head>

Yukarıdaki koddan sonra, aşağıdaki kodları ekliyoruz;

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});
});
</script>

Son olarak aşağıdaki kodu buluyoruz;

<body>

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

<div id='pageflip'>
<a href='http://reklamlinki'>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>

Not: Yukarıda yer alan kırmızı alanları, kendi blogunuza göre düzenlemeyi unutmayınız.

Örnek Görüntü;

Eklenti karşımıza ilk olarak aşağıdaki gibi çıkıyor;

Yukarıdaki sayfaya gelince ise, sayfa aralanıyor;

Sayfa aralandıktan sonra çıkan beyaz kısımda da, reklam resmi yer alacak.

Blogger’da toplam yazı ve yorum sayısını göstermek!

Blogger dersleri yazı dizisine ara vermeden devam ediyoruz. Bu sefer anlatacağım eklenti ise şu şekilde; Bu eklenti sayesinde blogunuzda yer alan yazı ve yorum sayısını bu eklenti sayesinde ziyaretçileriniz ile paylaşabiliyorsunuz. Eklentinin renk kodları ile de oynayarak, kendinize göre özelleştirebilirsiniz. Eklentinin kullanımı çok basit. Kodları, blogunuzun Tasarım kısmından Gadget bölümünün,HTML/JavaScript Ekle kısmından eklemeniz yeterli olacaktır. Aşağıda yer alan kırmızı renkli linkleri, kendinize göre düzenlemeyi unutmayınız.

<script style="text/javascript">
function numberOfPosts(json) {
document.write('Toplam Yazı: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('Toplam Yorum: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<font color="black"><script src="http://blogunuzunadi.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>
<script src="http://blogunuzunadi.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></font>

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

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.

Blogger’da sayfa ile kayan Bookmark eklentisi!

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 ise hiç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 Twitter ve Facebook sayacı yapmak

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ı elbette azaltabilir 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 için ‘Küçülüp Büyüyen’ yukarı çık butonu

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’da resimlere soluklaştırma efekti uygulamak

Birçok blog’da sanıyorum ki, yazılara ait resimlerin soluk olduğunuve bu resimlerin üzerine geldiğiniz zaman resimlerin eski renginegeldiğini görmüşsünüzdür. Örnek olarak; yazılarınıza eklediğiniz resimleri soluklaştırarak, çok güzel görünümler elde edebilirsiniz. Elbette, yazınızdaki resimlerin üzerine gelindiği zaman resimler eski rengine geri gelecektir. Fakat farklı bir görünüm elde edildiği için, bu uygulamanın çok iyi olduğunu düşünüyorum. En azından görsellikbazında değerlendirecek olur isek; hem kullanımı basit, hem de güzel bir görünüm elde ediliyor. Kullanımı da oldukça basit. Hemen uygulamaya geçelim isterseniz.

İlk olarak temamızdaki aşağıdaki kodu bulalım;

</head>

Sonra ise aşağıdaki kodları yukarıdaki koddan önce ekleyelim;

<style type="text/css">
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

Hepsi bu kadar. Şimdi ise, bu uygulamayı nasıl resimlere yansıtırız? bunu öğrenelim.

Yazınıza resim ekler iken aşağıdaki kodu kullanmanız yeterli olacaktır. Aşağıdaki kodu kullanmak haricinde, herhangi bir ek ayarlamaya gerek kalmayacaktır.

<a class="linkopacity" href="resimlinki" target="_blank" alt="resimaciklamasi">
<img src="resim" />
</a>

Not: Yukarıdaki kodlarda yer alan kırmızı renkli kısımları kendinize göre değiştirmeyi unutmayınız.

Örnek Görüntü

Blogger için “Uyarı – Bilgi – İndir” yazı stilleri

Blogger derslerimize ara vermeden devam ediyoruz. Bu dersimizde, blogger’da yazı yazar iken farklı yazı stillerini kullanmayı öğreneceğiz. Örnek olarak; yazınıza uyarı kısmı ekler iken, uyarı yazı stilinikullanacağız. Yazınıza bilgi bölümü ekler iken, bilgi yazı stilinikullanacağız ve yazınızda bir indirme bağlantısı verdiğiniz zaman da,indir yazı stilini kullanacağız. Dolayısı ile böylelikle yazılarınız dahailgi çekici bir hâl alacak. Hem görünüm bakımından güzel olan, hem de kullanım bakımından kolay olan bu uygulama gerçekten çok faydalı diye düşünüyorum. Karar sizin, yazılarınızın ilgi çekici olmasını istemez misiniz? Eğer yazılarınızın ilgi çekici olmasını istiyor iseniz, hemen uygulamamıza geçelim.

Öncelikle aşağıdaki kodları, temamızın CSS kısmına ekliyoruz;

.uyari {
background: #f9cccc url(http://f1212.hizliresim.com/14/r/h70l3.png) 15px center no-repeat;
text-align: left;
padding: 10px 20px 10px 65px;
border-top: 2px solid #d34b4b;
border-bottom: 2px solid #d34b4b;
margin:10px auto;
}
.bilgi {
background: #cce1f1 url(http://f1212.hizliresim.com/14/r/h70kb.png) 15px 50% no-repeat;
padding: 10px 20px 10px 65px;
border-top: 2px solid #529bdf;
border-bottom: 2px solid #529bdf;
margin:10px auto;
}
.indir {
background: #d1e8b7 url(http://f1212.hizliresim.com/14/r/h70kl.png) 15px 50% no-repeat;
padding: 10px 20px 10px 65px;
border-top: 2px solid #7dbe31;
border-bottom: 2px solid #7dbe31;
margin:10px auto;
}

Gelelim, bu uygulamayı yazılarımız için kullanmaya. Yazılarınızda bu uygulamayı kullanmak istediğiniz zaman, aşağıdaki kodları kullanmanız yeterli olacaktır. Ek olarak farklı bir ayarlamaya gerek yoktur.

Uyarı Yazı Stilinin Kullanımı

<div class="uyari">Bu bir uyarı yazısıdır...</div>

Bilgi Yazı Stilinin Kullanımı
<div class="bilgi">Bu bir bilgi yazısıdır...</div>

İndir Yazı Stilinin Kullanımı
<div class="indir">Bu bir indirme yazısıdır...</div>

Örnek Görüntü

Blogger için otomatik olarak çalışan slider (manşet) eklentisi

Blogger için geliştirilmiş birçok slider (manşet) eklentisi mevcut. Ben de sizlere bu dersimizde, otomatik olarak çalışan bir manşeteklentisini anlatacağım. Anlatacağım eklenti gerçekten fazlası ilekullanışlı. Şöyle ki; eklenti otomatik olarak çalışıyor. Yani siz sağ ve sol butonlara basmasanızda, manşet kısmı çalışmaya devam ediyor. Fakat elbette, isterseniz sağ ve sol butonlara basarak manşet’teilerleyebiliyor veya geri gelebiliyorsunuz. Fazlası ile güzel olan bu eklentiyi tanıtmak beni keyiflendirecek gibi gözüküyor. Çünkü eminim, birçok kişi kullanışlı bir manşet eklentisi arıyordur. Ve emin olun; tanıtacağım manşet eklentisi fazlası ile kullanışlı. Herneyse, hemen eklentinin yapımına geçelim isterseniz.

İlk olarak Tasarım > Sayfa Ögeleri > HTML’yi Düzenle kısmına giriş yapıyoruz.

Öncelikle aşağıdaki kodu buluyoruz;

</head>

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

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

Aşağıdaki kodu buluyoruz;

]]></b:skin>

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

#myslides{
background-color: #f5f5f5;
border:2px solid #ddd;
width: 650px;
height:165px;margin-bottom:5px;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#f7f7f7;
height:120px;
border:1px solid #cccccc;
}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}
.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;}
.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#f9f9f9; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
border:1px solid #ddd;
}

Sonrasın da ise, aşağıdaki tekrar kodu buluyoruz;

</head>

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

<script type='text/javascript'>
stepcarousel.setup({
galleryid: &#39;mygallery&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;panel&#39;, //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 3, leftnav: [&#39;http://www.yukleresim.com/dm-OAXA.jpg&#39;, -48, 0], rightnav: [&#39;http://www.yukleresim.com/dm-FEX1.jpg&#39;, 0, 0]},
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]
})
</script>

Eklentiyi kullanmak için ise; Tasarım > Sayfa Ögeleri > Gadget Ekle > HTML/JavaScript Ekle kısmına aşağıdaki kodları ekliyoruz;

<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">
<!-- 1st Template -->
<div class="panel">
<a href="link" target="blank" title="resimbasligi">
<img width="160" alt="resimaciklamasi" src="resim" height="110"/>
</a></div>
<!-- 2nd Template -->
<div class="panel">
<a href="link" target="blank" title="resimbasligi">
<img width="160" alt="resimaciklamasi" src="resim" height="110"/>
</a>
</div>
<!-- end code of 2nd -->
<!-- 3rd Template -->
<div class="panel">
<a href="link" target="blank" title="resimbasligi">
<img width="160" alt="resimaciklamasi" src="resim" height="110"/>
</a>
</div >
<!-- end code of 3rd -->
<!-- 4th Template -->
<div class="panel">
<a href="link" target="blank" title="resimbasligi">
<img width="160" alt="resimaciklamasi" src="resim" height="110"/>
</a></div><!-- end code of 4th -->
<!-- 5th Template -->
<div class="panel">
<a href="link" target="blank" title="resimbasligi">
<img width="160" alt="resimaciklamasi" src="resim" height="110"/>
</a>
</div><!-- end code of 5th -->
<!-- 6th Template -->
<div class="panel">
<a href="link" target="blank" title="resimbasligi">
<img width="160" alt="resimaciklamasi" src="resim" height="110"/> </a>
</div><!-- end code of 6th -->
<!-- 7th Template -->
<div class="panel">
<a href="link" target="blank" title="resimbasligi">
<img width="160" alt="resimaciklamasi" src="resim" height="110"/>
</a></div>
<!-- end code of 7th -->
<!-- 8th Template -->
<div class="panel">
<a href="link" target="blank" title="resimbasligi">
<img width="160" alt="resimaciklamasi" src="resim" height="110"/>
</a></div>
<!-- end code of 8th -->
</div>
</div>
</div>

Not: Yukarıdaki kırmızı renkli kısımları kendinize göre değiştirmeyi unutmayınız.

Örnek Görüntü

Blogger için alternatif slayt eklentisi

Blogger için en çok tercih edilen eklentilerden biri de elbette slayt geçişleridir. Birçok farklı çeşidi olan bu eklentinin bugün bahsedeceğim şekli ise, kolay kurulumuyla birlikte hem sade hem de etkileyici bir yapıya sahip. Css kodları üzerinde düzenlemeler yaparak gönlünüzce değiştirebileceğiniz gibi, eklentiyi birazdan paylaşacağım haliyle de kullanabilirsiniz. Slaytımız herhangi tıklama işlemine gerek duymadan da çalışmasının yanı sıra, üzerindeki numaralara tıklayarak da hareket ettirilebilmektedir. Şimdi bu güzel eklentinin kurulumuna geçebiliriz.

Blogger panelimizin Tasarım > Html’yi Düzenle bölümü açarak aşağıdaki kodu buluyoruz.

</head>

Bu kodun hemen üzerine aşağıdaki kodları ekliyoruz.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;.paging&quot;).show();
$(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);
var imageWidth = $(&quot;.window&quot;).width();
var imageSum = $(&quot;.image_reel img&quot;).size();
var imageReelWidth = imageWidth * imageSum;
$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
$active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(&quot;.image_reel&quot;).animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $(&#39;.paging a.active&#39;).next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $(&#39;.paging a:first&#39;); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 5000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(&quot;.image_reel a&quot;).hover(function() {
clearInterval(play);
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(&quot;.paging a&quot;).click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
</script>

Daha sonra aşağıdaki kodu buluyoruz

]]></b:skin>

Bu kodun hemen üzerine de aşağıdaki kodları ekliyoruz.

#galeria{
margin: 0 auto;
padding: 0px 0px;
width: 810px;
z-index:999;
}
.main_view {
float:left;
position: relative;
z-index:999;
}
.window {
height:289px;
width: 800px;
border:1px solid #fff;
overflow: hidden;
position: relative;
-moz-box-shadow:0px 0px 4px #fff;
-webkit-box-shadow:0px 0px 4px #fff;
box-shadow:0px 0px 4px #fff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;z-index:999;
}
.image_reel {
position: absolute;
top: 0; left: 0;
z-index:1000;
}
.image_reel img {
float: left;
z-index:1001;
}
.paging {
position: absolute;
bottom: 40px;
right: -1px;
width: 220px;
height:41px;
z-index: 100;
text-align: center;
line-height: 40px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJwJEaYvYNB2KgORIkOWsjpT0H22cCX-d9xkZsZxLC4JE6kFZR25VDaUPVgNIXwwwNwAzBoE2-M7ExeESowXrjAYxOwP3TgMDAdYKGRgog4rzq652jtLK6mFtvIbv1zvGwLZ9_Q1nxav2Z/s0/slider.png);
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-radius-bottomleft: 15px;
-webkit-border-radius-topleft: 15px;
border:1px solid #fff;
border-right: 0px solid;
display: none;
-moz-box-shadow:inset 0px 0px 2px #d6d6d6;
-webkit-box-shadow: inset 0px 0px 2px #d6d6d6;
box-shadow:inset 0px 0px 2px #d6d6d6;
z-index:1002;
}
.paging a {
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #999;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJwJEaYvYNB2KgORIkOWsjpT0H22cCX-d9xkZsZxLC4JE6kFZR25VDaUPVgNIXwwwNwAzBoE2-M7ExeESowXrjAYxOwP3TgMDAdYKGRgog4rzq652jtLK6mFtvIbv1zvGwLZ9_Q1nxav2Z/s0/slider.png) center;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
-moz-box-shadow: inset 0px 0px 1px #d6d6d6;
-webkit-box-shadow:inset 0px 0px 1px #d6d6d6;
box-shadow:inset 0px 0px 1px #d6d6d6;
border:1px solid #fff;z-index:1002;
}
.paging a.active {
font-weight: bold;
border: 1px solid #fff;
color: #17add8;
background: #f1f1f1;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
-moz-box-shadow: inset 0px 0px 2px #d6d6d6;
-webkit-box-shadow:inset 0px 0px 2px #d6d6d6;
box-shadow:inset 0px 0px 2px #d6d6d6;
z-index:1002;
}
.paging a:hover {
font-weight: bold;
z-index:1002;
}

Son olarak ise slaytımızın yer almasını istediğimiz şablon bölümüne aşağıdaki kodları ekliyoruz.

<div id='galeria'>
<div class='main_view'>
<div class='window'>
<div class='image_reel'>
<a href='#' rel='1'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTigDSiyQZcU91RpRnkTwoIDesvanN1D4hx3EG6Tk_01erDADsDQeZgTYUmLdVONdpazxXB8c9_sbR1HFI43yNABOAkPCXt9d8DnhOBm59PmwgN9ZvfiUMSwvVhFuMUFJoR2z5TjU4Sb39/s0/wallpapersafull_4110..jpg'/></a>
<a href='#' rel='2'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwccE5VCVl8dlioycV691xB05Q0Dx91bsR854URg-Et4VIiQjM8Yj4fKDLrILVH6Arm6k4CYA6dtU3kaJ1uVemet3z3S_v999oNdt0rsxxsx2CpN7d8R2XRYcBYDLoUyjSLQKEjNNs_8zA/s0/wallpapersafull_3986..jpg'/></a>
<a href='#' rel='3'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivhWYlz2olXIQmscVL0_675UG2zL501EDuCqgZOICN7k9-6dZSBCE1LQxNo03o8WpzxAISbuN6pe3zPVt-c5uAVm0hyphenhyphenazqESXkDG98zEQ31FhiMppb11-rC13A_idxT-pG29tuLFb_PYw1/s0/wallpapersafull_4106..jpgg'/></a></div></div>
<div class='paging'><a href='' rel='1'>1</a><a href='' rel='2'>2</a><a href='' rel='3'>3</a>
</div></div>
</div>
Böylece slaytımızı blog sayfamıza eklemiş olduk.

Önemli notlar:

• Script kodları içerisinde kırmızıyla belirttiğim rakamı küçülterek slayttaki resimlerin daha kısa aralıklarla değişmesini sağlayabilirsiniz.
• Slaytta yer alan ve kırmızıyla belirttiğim resimlerin yerine yine 800 px × 289 px boyutlarında farklı resimler koyabilirsiniz.
• Slayttaki resimlere tıklandığında istediğiniz bir adrese yönlendirmesini isterseniz de yine kırmızıyla belirttiğim # kısmını silerek adresi yazabilirsiniz.

Örnek resim: