Blogger Eklenti
Together is beautiful
Life is to survive
Life is choice 
1 Blogger için ‘Sayfa İle Kayan Twitter Kuşu’ eklentisi
Ş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.
0 Blogger için ‘Google Tipi’ arama kutusu
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 "X" button
$("#field").keyup(function() {
$("#x").fadeIn();
if ($.trim($("#field").val()) == "") {
$("#x").fadeOut();
}
});
// on click of "X", delete input field value and hide "X"
$("#x").click(function() {
$("#field").val("");
$(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>0 Blogger için ‘E-Posta ile takip et’ eklentisi
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 == '') {this.value = 'E-Posta adresinizi yazınız...';}" onfocus="if (this.value == 'E-Posta adresinizi yazınız...') {this.value = '';}" 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.
Not 2: Yukarıda kalın harflerle yer alan kodların en sonunda yer alan “-” işaretini kaldırmayı unutmayınız.
0 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-->0 Blogger için “Uçan Twitter Kuşu” eklentisi
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 = "twitterhesabinizinadi";
var tweetThisText = " <data:blog.pageTitle/> : <data:blog.url/> ";
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.
0 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ı 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.
Delete this element to display blogger navbar
