29 Nis 2012

39 Yorum

Otomatik Thumbnail ve Devamını Oku Eklentisi


Otomatik Thumbnail ve Devamını Oku Eklentisi

Bir çok kişinin kullandığı Otomatik Thumbnail ve Devamını Oku Eklentisinde , blogunuzda yazdığınız yazılara otamatik olarak konu içerisindeki resim ve devamını oku bağlantısının nasıl ekleneceğini bu yazımızda bulabilirsiniz...

Görüntü açısından da kullanışlı olan Otomatik Thumbnail ve Devamını Oku Eklentisi , Blogunuzda konuların uzayıp gitmesini engeller..Ana sayfada ve diğer sayfalarda daha iyi bir görüntü sağlar..

Hemen anlatıma geçelim..

Widget Şablonlarını Genişlet kutucuğunu işaretlediğinizden emin olun ve aşağıdaki kodu bulun..
</head>
Bulduğumuz kodun hemen üstüne , aşağıda yer alan kodları ekleyelim..
<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 400;
summary_img = 400;
img_thumb_height = 140;
img_thumb_width = 140;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");

if(img.length<=0) {
imgtag = '<span style="float:left;margin-right:5px;"><img src="http://1.bp.blogspot.com/-gL37DI0AlJY/TjmThr0YhVI/AAAAAAAAAjY/y601RxVhXw8/s000/2nrklth.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}

if(img.length>=1) {
imgtag = '<span style="float:left;margin-right:5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>  
Şimdi ise aşağıdaki kodumuzu bulalım..
<data:post.body/>
Bu kodumuzu aşağıdaki kod ile değiştirelim..( Daha detaylı olarak , bu kodu silin ve yerine aşağıdaki kodları ekleyin )
<!-- eklentileri.blogspot.com thumbnail devamını oku başlangıcı -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Devamını oku...</a>
</b:if>
</b:if>
<!-- eklentileri.blogspot.com thumbnail devamını oku bitişi -->
Yukarıdaki işlemleri yaptıysanız Otomatik Thumbnail ve Devamını Oku Eklentisini artık blogger blogunuzda kullanabileceksiniz..

Yukarıda eklemeniz gereken ilk kod içinde yer alan ;

img_thumb_height = 140;

img_thumb_width = 140;
Değerlerini değiştirerek , thumbnail yani ana sayfanızda görünecek resmin boyutunu ayarlayabilirsiniz..



<<< Bu Yazı için Arama Sonuçları  >>>

Otomatik Thumbnail ve Devamını Oku Eklentisi , Blogger Otomatik Thumbnail ve Devamını Oku Eklentisi , Blogger Thumbnail ekleme , Blogger Devamını oku Eklentisi , Blogger Devamını Oku ekleme , Blogger Thumbnail ve Devamını Oku


By Eklentileri.Blogspot Devamını Oku >>>

28 Nis 2012

22 Yorum

Blogger Resimli Benzer Yazılar Eklentisi v.2


Blogger Resimli Benzer Yazılar Eklentisi v.2

Blogger blogunuz için Resimli benzer yazılar eklentisi istermisiniz ?

Daha önce BU yazımızda , resimli benzer yazılar eklentisinin nasıl yapılacağını anlatmıştık , farklı olarak bu eklentimizde , benzer yazılarınız , alt alta resimli şekilde listeleniyor..

Ziyaretçilerinizin ilgisini çekmek için resimli benzer yazılar eklentisini blogunuza eklemek için aşağıdaki anlatımı takip edin.

Öncelikle , Widget Şablonlarını Genişlet kutucuğunu işaretleyin ve Aşağıda yer alan kodumuzu bulun..
</head>
Hemen üstüne , altta yer alan kodlarımızı ekleyelim..
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
text-transform:none;
padding-left:5px;
}
#related-posts li {
list-style:none;
}
#related-posts h2{
font-size: 18px;
font-weight: bold;
color: #003300;
}
#related-posts a{
font-size: 16px;
color:#868686;
}
#related-posts a:hover{
color:black;
}
a.hidden img{
filter:alpha(opacity=70);
-moz-opacity: 0.5;
opacity: 0.5;
}
 a.hidden:hover img{
filter:alpha(opacity=100);
 -moz-opacity: 1.0;
 opacity: 1.0;}

</style>
<script src='http://yourjavascript.com/1124875421/benzer.js' type='text/javascript'/>
</b:if>
Şimdi ise bu kodumuzu buluyoruz..
<data:post.body/>
Hemen altına aşağıdaki kodlarımızı ekleyelim..
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;BENZER YAZILAR&quot;;
removeRelatedDuplicates_thumbs(); 
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
Anlatılanları doğru yaptıysanız eklentimiz artık hazır... << DEMO >>


<<< Bu Yazı için Arama Sonuçları  >>>

Blogger Resimli Benzer Yazılar Eklentisi v.2 , Blogger Resimli Benzer Yazılar Eklentisi  , Blogger Resimli Benzer Yazılar  , Blogger Benzer Yazılar Eklentisi , Blogger Benzer Yazı Nasıl Eklenir


By Eklentileri.Blogspot Devamını Oku >>>

27 Nis 2012

11 Yorum

Blogger Mause imleci Değiştirme ( 28 adet )


Blogger Mause imleci Değiştirme ( 28 adet )

Blogger blogunuzda kullandığınız mause ( fare ) imlecini değiştirmek istermisiniz ?

Bu eklentimizle , blogger blogunuzda bulunan imleciniz, farklı şekillerde gösterebileceksiniz..

Hemen anlatıma geçelim..

Aşağıdaki kodu bulalım..
</head>
Hemen üstüne aşağıda yer alan kodu ekleyelim..
<style type="text/css">body, a, a:hover {cursor: url(http://LİNK), progress;}</style>
Kod içinde bulunan kırmızı ile yazılmış http://LİNK yerine aşağıdaki beğendiğiniz imlecin linkini ekleyiniz..

http://www.fileden.com/files/2010/2/27/2776887/pen.jpg  http://www.fileden.com/files/2010/2/27/2776887/pen.cur

http://www.fileden.com/files/2010/2/27/2776887/link.jpg http://www.fileden.com/files/2010/2/27/2776887/link.cur

http://www.fileden.com/files/2010/2/27/2776887/dragon.jpg http://www.fileden.com/files/2010/2/27/2776887/dragon.cur

http://www.fileden.com/files/2010/2/27/2776887/dragonn.jpghttp://www.fileden.com/files/2010/2/27/2776887/dragonn.cur

http://www.fileden.com/files/2010/2/27/2776887/dragonnn.jpg http://www.fileden.com/files/2010/2/27/2776887/dragonnn.cur

http://www.fileden.com/files/2010/2/27/2776887/dragonnnn.jpg http://www.fileden.com/files/2010/2/27/2776887/dragonnnn.cur

http://www.fileden.com/files/2010/2/27/2776887/grndr.jpg http://www.fileden.com/files/2010/2/27/2776887/grndr.cur

http://www.fileden.com/files/2010/2/27/2776887/grndr2.jpg http://www.fileden.com/files/2010/2/27/2776887/grndr2.cur

http://www.fileden.com/files/2010/2/27/2776887/bilquer.png http://www.fileden.com/files/2010/2/27/2776887/bilquer.cur

http://www.fileden.com/files/2010/2/27/2776887/bilquer2.png http://www.fileden.com/files/2010/2/27/2776887/bilquer2.cur

http://www.fileden.com/files/2010/2/27/2776887/bilquer3.png http://www.fileden.com/files/2010/2/27/2776887/bilquer3.cur

http://www.fileden.com/files/2010/2/27/2776887/bilquer4.png http://www.fileden.com/files/2010/2/27/2776887/bilquer4.cur

http://www.fileden.com/files/2010/2/27/2776887/bilquer5.png http://www.fileden.com/files/2010/2/27/2776887/bilquer5.cur

http://www.fileden.com/files/2010/2/27/2776887/bilquer6.png http://www.fileden.com/files/2010/2/27/2776887/bilquer6.cur

http://www.fileden.com/files/2010/2/27/2776887/bilquer7.png  http://www.fileden.com/files/2010/2/27/2776887/bilquer7.cur

http://www.fileden.com/files/2010/2/27/2776887/bilquer8.png http://www.fileden.com/files/2010/2/27/2776887/bilquer8.cur

http://www.fileden.com/files/2010/2/27/2776887/bilquer9.png http://www.fileden.com/files/2010/2/27/2776887/bilquer9.cur

http://www.fileden.com/files/2010/2/27/2776887/bilquer10.png http://www.fileden.com/files/2010/2/27/2776887/bilquer10.cur

http://www.fileden.com/files/2010/2/27/2776887/bilquer11.png http://www.fileden.com/files/2010/2/27/2776887/bilquer11.cur

http://www.fileden.com/files/2010/2/27/2776887/bilquer12.pnghttp://www.fileden.com/files/2010/2/27/2776887/bilquer12.cur

http://www.fileden.com/files/2010/2/27/2776887/bilquer14.pnghttp://www.fileden.com/files/2010/2/27/2776887/bilquer14.cur

http://www.fileden.com/files/2010/2/27/2776887/bilquer16.png http://www.fileden.com/files/2010/2/27/2776887/bilquer16.cur

http://www.fileden.com/files/2010/2/27/2776887/bilquer17.png  http://www.fileden.com/files/2010/2/27/2776887/bilquer17.cur

http://www.fileden.com/files/2010/2/27/2776887/bilquer18.png  http://www.fileden.com/files/2010/2/27/2776887/bilquer18.cur

http://www.fileden.com/files/2010/2/27/2776887/bilquer23.png http://www.fileden.com/files/2010/2/27/2776887/bilquer23.cur

http://www.fileden.com/files/2010/2/27/2776887/bilquer24.pnghttp://www.fileden.com/files/2010/2/27/2776887/bilquer24.cur

http://www.fileden.com/files/2010/2/27/2776887/bilquer25.pnghttp://www.fileden.com/files/2010/2/27/2776887/bilquer25.cur

http://www.fileden.com/files/2010/2/27/2776887/grgr.png http://www.fileden.com/files/2010/2/27/2776887/prfcto.cur


<<< Bu Yazı için Arama Sonuçları  >>>

Blogger Mause imleci Değiştirme , Blogger Fare imleci Değiştirme , Blogger fare imleçleri , blogger fare imleci nasıl değiştirilir , Blogger mause imleci ekleme , blogger mause imlecleri

By Eklentileri.Blogspot Devamını Oku >>>

25 Nis 2012

1 Yorum

Gazete Tarzı Yazı Yazma Eklentisi


Gazete Tarzı Yazı Yazma Eklentisi

Blogger Blogunuzda , Gazete Tarzı Yazı Yazma Eklentisi istermisiniz ?

Bu eklentimizde, blogger blogunuzda yayınlamak istediğiniz yazılarınızı 2 sütun şeklinde yan yana gösterebileceksiniz , Görüntü açısından da kullanışlı olan bu eklentimizi kullanmak isterseniz aşağıdaki adımları takip ediniz..

Öncelikle Demo için BURAYA tıklayınız..

Blogger blogunuzda , Yeyi yayın oluştur butonuna basın...Yazı alanı içinde HTML seçeneğini şeçerek aşağıdaki kodları yapıştırın..
<table cellpadding="10" cellspacing="10"><tbody>
<tr><td align="justify" valign="top" width="320">Deneme Yazısı Sol Tarafı</td><td align="justify" valign="top" width="300">Deneme Yazısı Sağ Tarafı</td></tr>
</tbody></table>
Kodu eklediyseniz , HTML Seçeneği yerine Oluştur seçeneğine girip ordan düzenleyebilirsiniz..Yukarıdaki kod içinde , Kırmızı ile geçen yer sol taraftaki yazınız, mavi ile geçen yer ise sağ taraftaki yazınız , buna göre düzenlersiniz..


By Eklentileri.Blogspot Devamını Oku >>>

21 Nis 2012

4 Yorum

Blogger Blogunuz Daha Hızlı Açılsın



Blogger Blogunuz Daha Hızlı Açılsın

Öncelikle bu yazımız bir eklenti değildir , Sadece blogger blogunuzun daha hızlı açılması için ipuçları içerir..

<< Resim >>
Blogger bloglarınızda , yazı içlerinde onlarca resim kullanmayın , mümkünse tek resim her zaman açılış hızı açısından önemlidir..Blogunuza eklediğiniz resimlerin boyutu büyük olmasın , büyük boyutlu resimler sayfanın yüklenme süresini geciktirir..

<< Eklenti >> 
Blogger bloglarımızda kullandığımız eklentiler vazgeçilmez , olmazsa olmazlardandır..Blogunuzda Gereksiz eklentilerden kaçının , mümkünse , hareketli çok fazla eklenti kullanmayın , örneğin ; flash obje içeren eklentiler blogunuzun açılış hızına etki eder..

<< Javascript >> 
Blogger blogumuzda , Hıza etki eden bir faktörde javascript dosyalarıdır , Bazen kullandığınız temanın içinde zaten varlardır, bazende kullandığınız eklentilerde de yer alırlar , bu javascript dosyaları başka kaynaklarda yüklü olduklarından , Blogger açılırken , kendi barındıkları sunuculara bağlanıp blogunuzun açılışını yavaşlatabilirler..

Sonuç olarak , blogger blogunuzun daha hızlı açılmasını istiyorsanız , yazılarınıza onlarca resim eklemeyiniz, ve gereksiz eklentilerden kaçınınız..


<<< Bu Yazı için Arama Sonuçları  >>>

Blogger Blogunuz Daha Hızlı Açılsın , Blogger  Daha Hızlı Açılsın , Blogger Hzılandırma , Blogger Sayfam Nasıl Hızlı Açılır , Blogum Yavaş Açılıyor , Blogger Hızlandırma teknikleri , Blogunuz Daha Hızlı Açılsın


By Eklentileri.Blogspot Devamını Oku >>>

17 Nis 2012

2 Yorum

Blogger Widget / Eklenti Ortalama


Blogger Widget / Eklenti Hizalama

Tam olarak bir eklenti olmayan bu yazımızda , Bir çok blogger kullanıcısının ortak sorunu olan , eklediğiniz eklenti / gadget'in eklediğiniz yerde sağa yada sola dayalı durarak görüntü bozukluğuna yol açmasını engelleyeceğiz..

Basit olan bu işlemi Bir çok blogger kullanıcısı biliyordur , Bilmeyenler için anlatım aşağıda..

Bloggera eklediğiniz gadget / eklentinin bulunduğu kodu aşağıda kırmızı ile gösterilen kodlar arasına alın..
<center> BURAYA EKLENTİ KODUNUZ </center>
Yapmanız gereken sadece bu kadar..


By Eklentileri.Blogspot Devamını Oku >>>

16 Nis 2012

144 Yorum

Blogger Facebook Yorum Kutusu Ekleme Eklentisi


Blogger Facebook Yorum Kutusu Ekleme Eklentisi


Blogger Blogunuzda bulunan yorum panelini , facebook yorum paneli ile değiştirmek istermisiniz ?

Bu eklentimizle , Ziyaretçileriniz yorumlarını facebook yardımı ile blogunuza gönderebilecek , biraz karışık olan bu eklentimizi , dikkatli şekilde uygularsanız blogger blogunuza ekleyebilirsiniz..

Anlatıma geçelim..


Blogunuzun ayarlar menüsüne girin , resimde gösterilen gibi, 1-2-3 ve 4 yollarını izleyin, ve Gizle seçeneğini seçin..Ayarları kaydet butonu ile çıkın..

Ardından BU adrese girerek , facebookta yeni bir uygulama oluşturalım..


Açılan panelde, Aşağıdaki resimdeki gibi 1 ve 2. adımları izleyin..



Açılan Güvenlik kontrolü Panelinde , aşağıdaki resimdeki gibi 1 ve 2. adımları izleyin..



Aşağıdaki panel açılacaktır..


Yukarıdaki panelde , ID Numaranız lazım olacaktır , isterseniz bir yere not alabilirsiniz, Resimdeki bütün adımları uygulayın..

Artık facebook ile işimiz bitti , şimdi blogunuzun şablon kısmına girerek aşağıdaki adımları takip edin...

Aşağıdaki kodu bulun..
<head>
Hemen bir satır altına , aşağıdaki kodu ekleyin , ID NUMARASI yerine kendi ID numaranızı yazınız ( Yukardaki resimde belirtmiştik )
<meta content='ID NUMARASI'   property='fb:app_id'/>
Şimdi ise aşağıdaki kodlardan birini bulalım..
<div class='post-footer-line post-footer-line-3'>


YADA 


<p class='post-footer-line post-footer-line-3'>


YADA


<data:post.body/>
Bir satır altına aşağıdaki kodlarımızı ekleyelim.
<b:if cond='data:blog.pageType == "item"'>
<div id="fb-root"></div>
<script>(function(d){
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/tr_TR/all.js#xfbml=1";
 d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<fb:comments width='500' colorscheme='light' expr:title='data:post.title' expr:href='data:post.canonicalUrl' expr:xid='data:post.id'/>
</b:if>
Son olarak aşağıdaki kodu bulun
<html
Bu kodumuza xmlns:fb="https://www.facebook.com/2008/fbml" kodunu ekliyeceğiz , örnek olarak aşağıdaki gibi
<html xmlns:fb="https://www.facebook.com/2008/fbml" b:version='2' class='v2' expr:dir='data:blog.languageDirection' 



Sadece Kırmızı yerde gösterilen gibi olacak , Mavi yazılar Örnek amaçlı yazılmıştır eklemeyiniz !!

Mavi yazılar sizde farklı olabilir..Kodu nasıl ekliyeceğinz amaçlı örnektir..
Artık blogunuzda , Blogger Facebook Yorum Kutusu Ekleme eklentisine sahipsiniz, bol yorumlar..DEMO


<<< Bu Yazı için Arama Sonuçları  >>>

Blogger Facebook Yorum Kutusu Ekleme , Blogger Facebook Yorum Kutusu  , Facebook Yorum Kutusu Ekleme , Yorum Kutusu Ekleme , Facebook Yorum Formu , Facebook Yorum Formu Blogger ekle , Facebook Eklentisi


By Eklentileri.Blogspot Devamını Oku >>>
19 Yorum

Aşağı Açılan Sayfayla Kayan Menü Eklentisi


Aşağı Açılan Sayfayla Kayan Menü Eklentisi

Bu eklentimizde , blogger blogunuzun sağ tarafında , sayfayla hareket eden , fare üstüne getirilince aşağı doğru açılan menü eklentisi yapımını anlatacağız..

Demosunu görmek için TIKLAYIN.

Aşağı Açılır Sayfayla Kayan Menü Eklentisi Anlatımı.

Yerleşim - Gadget Ekle - HTML/JavaScript seçeneği ile açılan panele aşağıdaki kodlarımızı ekleyelim..
<style text-type="CSS">
#bmenu{
position:fixed;
right:5px;
center:0px;
background-color:#2059DC;
border-radius:10px;
-moz-border-radius:10px;
border:2px solid #FFF;
width:202px;
height:20px;
color:#FFFFFF;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}

#bmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}

#bmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#9AB2EA;
margin:15px 0;
padding:0 15px;}

#bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}

#bmenu li a:hover{
color:#fff;}

#bmenu:hover{
z-index:5;
height:175px;
</style>

<div id="bmenu">
<h3>
Açılır Menü</h3>
<ul>
<li><a href="#">MENÜ 1</a></li>
<li><a href="#">MENÜ 2</a></li>
<li><a href="#">MENÜ 3</a></li>
<li><a href="#">MENÜ 4</a></li>
<li><a href="#">MENÜ 5</a></li>
</ul>
</div>
Yukarıdaki kodlar içinde dikkat etmemiz gereken yerler renkli olarak belirtilmiştir..
Kırmızı yere >> Görüntü başlığınız...
Mavi yere >> Menü Başlıklarınız
Sarı Yere >> Menü Linkleriniz..

<<< Bu Yazı için Arama Sonuçları  >>>

Aşağı Açılan Sayfayla Kayan Menü Eklentisi , Aşağı Açılan Menü Eklentisi , Aşağı Açılan Kayan Menü Eklentisi , Aşağı Açılır Menü Eklentisi , Blogger Menü Yapımı , Blogger Menü Eklentisi


By Eklentileri.Blogspot Devamını Oku >>>

15 Nis 2012

6 Yorum

Blogger Rastgele Link Eklentisi


Blogger Rastgele Link Eklentisi

Blogger blogunuz için rastgele link eklentisi istermisiniz ?

Bu eklentimiz ile , sayfanızın istediğiniz bir yerinde rastgele link oluşturabileceksiniz, ziyaretçiler linke bastığında , blogger blogunuzda bulunan yazılardan biri rastgele açılacaktır..

Blogger Rastgele Link Eklentisini kullanmak için aşağıdaki yolları takip edin..

Yerleşim - Gadget Ekle - HTML/JavaScript seçeneği ile açılan panele aşağıdaki kodlarımızı ekleyin , herhangi bir başlık kullanmayın...
<script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Rastgele Sayfa'; document.getElementById('Rastgele').appendChild(a); } </script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>
Yukarıdaki kod içinde kırmızı ile geçen Rastgele Sayfa , link eklediğinizde gözükecek yazıdır , dilediğiniz gibi düzenleyebilirsiniz..


Yukarıdaki işlemi yaptıysanız , şimdi ise link eklememiz için aşağıdaki kodu yine Yerleşim - Gadget Ekle - HTML/JavaScript seçeneği ile açılan panele ekleyiniz , yada nerde kullanmak istiyorsanız orayada ekleyebilirsiniz..
<div id="Rastgele"></div>
Kod içinde bulunan Rastgele yazısına dokunmayın , o yazı gözükmeyecek , gözükecek yazı bir üst kodda kırmızı ile gösterilen yer..DEMO


<<< Bu Yazı için Arama Sonuçları  >>>

Blogger Rastgele Link Eklentisi , Blogger Rastgele Link , Blogger Rastgele Link Eklentisi ekleme , Blogger Rastgele Link ekleme , Blogger Rastgele Eklentisi , Blogger Rastgele Yazı Gösterme , Blogger Rastgele Yazı Eklentisi



By Eklentileri.Blogspot Devamını Oku >>>

13 Nis 2012

25 Yorum

4in1 Yandan Açılan Facebook , Twitter , Google , Email Eklentisi


4 in 1 Yandan Açılan Facebook , Twitter , Google , Email Eklentisi

Blogger blogunuzda , yandan açılan facebook takipçi kutusu , Twitter son yazılarınız , Google + butonu ve email takip eklentisi istermisiniz..

Oldukça kullanışlı ve güzel bir eklenti olan 4in1 Yandan Açılan Facebook , Twitter , Google , Email Eklentisini blogger blogunuza eklemek için aşağıdaki yolu izleyin , Aşağıdaki kodu blogunuza Gadget olarak ekleyin..Kod için bulunan Kırmızı yazılmış yerlere , facebook twitter ve feedburner adreslerinizi yazınız , ( https://www.facebook.com/XXXXX , TWİTTERADRES , FEEDBURNERADRES Kısımlarına kendi adreslerinizi yazınız..)   DEMO


<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#twitter_div{width:246px;height:353px;overflow:hidden;}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px;}#knfeedburner_div{width:300px;height:97px;margin-top:25px;overflow:hidden;}#kakinetwork_div{width:300px;height:97px;overflow:hidden;}/* right side style */#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right img{position:absolute;top:-2px;left:-35px;}#facebook_right iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px;}#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0;}#google_plus_right{z-index:10003;background-color:#f2f2f2;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-right:2px solid #0056a0;border-left:hidden;width:152px;height:97px;position:fixed;right:-154px;}#google_plus_right_img{position:absolute;top:-2px;left:-33px;border:0;}#feedburner_right{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left:hidden;width:300px;height:97px;position:fixed;right:-303px;}#feedburner_right_img{position:absolute;top:-2px;left:-33px;border:0;}#kakinetwork_right{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_right img{position:absolute;top:-2px;left:-101px;}/* left side style */#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}#twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px;}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0;}#google_plus_left{z-index:10003;background-color:#006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-left:2px solid #0056a0;border-right:hidden;width:152px;height:97px;position:fixed;left:-154px;}#google_plus_left_img{position:absolute;top:-2px;right:-33px;border:0;}#feedburner_left{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-left:2px solid #5b5b5b;border-right:hidden;width:300px;height:97px;position:fixed;left:-303px;}#feedburner_left_img{position:absolute;top:-2px;right:-33px;border:0;}#kakinetwork_left{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_left img{position:absolute;top:-2px;right:-101px;}.box-title1{border:1px solid #ddd;/*border-radius*/-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;/*box-shadow*/-webkit-box-shadow:5px 5px 5px #CCCCCC;-moz-box-shadow:5px 5px 5px #CCCCCC;box-shadow:5px 5px 5px #CCCCCC;padding:10px;margin:10px 0;}.enteryouremail{background:#fff !important;border:1px solid #d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:165px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0px;}.submitbutton{background:#f2f2f2;border:1px solid #F66303;/*box-shadow*/-webkit-box-shadow:3px 3px 3px #666;box-shadow:3px 3px 3px #666;font:bold 12px Arial, sans-serif;color:#000000;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;/*border-radius*/-webkit-border-radius:5px;border-radius:5px;cursor:pointer;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script><div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="http://4.bp.blogspot.com/-pzM3IebaPHg/T3BF_Cp5ChI/AAAAAAAABTA/uPlhRvqJF2Y/s1600/helperblogger.com-facebook-icon.png" alt="" /><iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/XXXXX&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356"   scrolling="no"></iframe></div></div></div><div id="on"><div id="twitter_right" style="top: 35%;"><div id="twitter_div"><img id="twitter_right_img" src="http://2.bp.blogspot.com/-DoXgccAh568/T3BGBaBhUUI/AAAAAAAABTY/apMnhTjbnnU/s1600/helperblogger.com-twitter-icon.png" /><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('TWİTTERADRES').start();</script></div></div></div><div id="on"><div id="google_plus_right" style="top: 52%;"><div id="google_plus_div"><img id="google_plus_right_img" src="http://1.bp.blogspot.com/-08OfKvSFgp8/T3BF_ifkYhI/AAAAAAAABTI/H-tCpPulBME/s1600/helperblogger.com-google-plus-icon.png" /><div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone></div></div></div><div id="on"><div id="feedburner_right" style=" top: 69%;"><div id="knfeedburner_div"><center><h4 style="color:#F66303;">You can also receive Free Email Updates:</h4><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNERADRES', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="FEEDBURNERADRES" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center><img id="feedburner_right_img" src="http://2.bp.blogspot.com/-92lVWafnEt0/T3BGAWfGPKI/AAAAAAAABTQ/r61lpGWJqew/s1600/helperblogger.com-subscribe-icon.png" /></div></div></div></div>


<<< Bu Yazı için Arama Sonuçları  >>>

4in1 Yandan Açılan Facebook , Twitter , Google , Email Eklentisi , Blogger yandan açılan , Blogger yandan açılan facebook , blogger yandan açılan twitter kutusu 
By Eklentileri.Blogspot Devamını Oku >>>
18 Yorum

Sıkca Sorulan Sorular..S.S.S.


Soru - Blogumda Gerekli kodu bulamıyorum , Ne yapmalıyım ?

1 - Şablon kısmında Widget Şablonlarını Genişlet kutucuğunu seçin ve öyle arayın...

2 - Bazı temalarda kodlar farklı olabiliyor , <.div class='blog-pager' id='blog-pager'.> olan bir kod sizin blogunuzda <.div style='blog-pager' id='blog-pager.'> olabilir , bu yüzden kodun hepsini değil , bu örnekteki gibi sadece 'blog-pager' id='blog-pager' kodunu arayıp bulun...

Soru - Kodları eklediğim halde eklenti çalışmıyor , Ne Yapmalıyım ?

1 - Eklentileri.blogspot.com sayfamızdaki , tüm eklentiler denenerek yayınlanır , Kodu anlatılan şekilde doğru eklediğinizden emin olun..

2 - Bazı kodlarda facebook , twitter vs. tarzı sayfa adreslerinizi yazmanız yada blog adresinizi yazmanız gerekebilir , Yazmanız gereken yerler kodlar içinde farklı renkte gösterilir , Bu kısımları boş bırakmış yada yanlış yazmış olabilirsiniz..

3 - Gerekirse Eklemek istediğiniz Eklentinin sayfasındaki , yorum panelini kullanabilir ve bize sorabilirsiniz..

Soru - Eklentiler Blogum için bir sorun oluşturur mu ?

1 - Eklediğiniz blogger eklentileri , blogunuz için bir sorun oluşturmaz..

2- Bazı eklentiler , başka sunuculardam JavaScript dosyaları içermektedir , Blogunuza onlarca Javascript dosyası içeren eklenti eklerseniz, blogunuzda azda olsa açılışta bir yavaşlama olabilir..

Soru - Eklediğim eklentiyi kaldırmak istiyorum , Nasıl kaldırırım ?

1 - Bazı eklentiler widget şeklindedir , Yerleşim sekmesinden , eklediğiniz eklentiyi düzenle butonu yardımı ile kaldırabilirsiniz..

2 - Eklediğiniz eklenti , css kodları içeriyor ve şablon yardımı ile eklediyseniz, eklentiyi eklerken kullandığınız yolların tam tersini yaparak eklentiyi kaldırabilirsiniz..

Benzer sorularınız için bu sayfadaki yorum panelini yada eklemek istediğiniz eklentinin sayfasında bulunan yorum panelini kulanabilirsiniz..


By Eklentileri.Blogspot Devamını Oku >>>
22 Yorum

Blogger Renkli Popüler Yayınlar Eklentisi


Blogger Renkli Popüler Yayınlar Eklentisi

Bu eklentimizde , blogunuzda bulunan popüler yayınlarınız renkleniyor , Popüler yayınlarınıza renk katmak isterseniz bu eklenti tam size göre..

Görsel açıdan oldukça şık olan Blogger Renkli Popüler Yayınlar Eklentisini tavsiye ediyoruz..

Anlatıma geçelim hemen..

Şablona girerek , Widget Şablonlarını Genişlet diyoruz ve Aşağıdaki kodumuzu buluyoruz
/* Variable definitions
   ====================
Bu kodumuzun hemen altına aşağıdaki kodlarımızı ekliyoruz..
<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
<Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/>
<Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/>
</Group>
Şimdi ise bu kodu bulalım.
]]></b:skin>
Hemen üstüne aşağıdaki kodlarımızı ekliyoruz..
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:$(PopularPosts.background.color6);width:65%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:$(PopularPosts.background.color7);width:60%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
Yukarıdaki işlemleri yaptıysanız eklentimiz şuan için çalışacaktır , ama popüler yayınlarda resim kullanıyorsanız aşağıdaki anlatımıda yapmanızı öneririz , yoksa resimler düzgün görüntülenmeyebilir , resim kullanmıyorsanız üstte anlatılanlar yeterli..

Öncelikle popüler yayınları blogunuza eklediğinizden emin olun , standart olarak popüler yayınlar başlığınız , "Popüler Yayınlar" şeklindedir..Bu yüzden biz popüler yayınlar kelimesini arayacağız , farklı bir isim kullandıysanız siz o ismi aratın..
<b:widget id='PopularPosts1' locked='false' title='Popüler Yayınlar' type='PopularPosts'>
x
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
</b:widget>
Yukarıdaki kodlar , popüler yayınların bulunduğu kodlar , burada yapmamız gereken ilk kod ile son kod arasını silip , aşağıdaki kodlarımızı sildiğiniz yere eklemek , yukarda silmeniz gereken yerleri kırmızı x ile gösterdim( sizde x yerine kodlar olacak) diğer ilk ve son koda dokunmayın...aralarını silip aşağıdaki kodlarımı ekleyin..
<b:includable id='main'>
   <b:if cond='data:title'>
    <h2><data:title/></h2>
   </b:if>
   <div class='widget-content popular-posts'>
    <ul>
     <b:loop values='data:posts' var='post'>
      <li>
       <b:if cond='data:showThumbnails == &quot;false&quot;'>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='http://4.bp.blogspot.com/-A6NQTW-MBZY/T37HVOov53I/AAAAAAAAAys/XLjZX6HrE50/s1600/defaultimage.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='http://4.bp.blogspot.com/-A6NQTW-MBZY/T37HVOov53I/AAAAAAAAAys/XLjZX6HrE50/s1600/defaultimage.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>
Yukarıdaki kodlarıda eklediyseniz , Blogger Renkli Popüler Yayınlar Eklentisine artık sahipsiniz, güle güle kullanın..DEMO


<<< Bu Yazı için Arama Sonuçları  >>>

Blogger Renkli Popüler Yayınlar Eklentisi , Blogger Renkli Popüler Yayınlar Gösterme , Renkli Popüler Yayınlar eklentisi , Popüler Yayınlar , Popüler Yayınlar eklentisi , Blogger Popüler Yayınlar Eklentisi


By Eklentileri.Blogspot Devamını Oku >>>
Blogger tarafından desteklenmektedir.