DEMO

Blogger paneline girin ve Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile aşağıdaki kodlarımızı açılan panele ekleyelim..

 <style>.blogtrixfb {
width: 280px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.blogtrixfb, .blogtrixfb:before, .blogtrixfb:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.blogtrixfb:before, .blogtrixfb:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.blogtrixfb:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
</style>
<div class="blogtrixfb">
<div style="height:155px;overflow:hidden">
<fb:like-box href="http://www.facebook.com/pages/Blogger-Eklentileri/126895440798640" data-width="300" data-height="250" data-show-faces="true" data-border-color="#f4f4f4" data-stream="false" data-header="false" class=" fb_iframe_widget "><span><iframe id="f5741c08" name="fdd6ca2ec" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; overflow-x: hidden; overflow-y: hidden; height: 250px; width: 300px; " class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?border_color=%23f4f4f4&amp;channel=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2babfba84%26origin%3Dhttp%253A%252F%252Feklentileri.blogspot.com%252Ff1ae6f85bc%26relation%3Dparent.parent%26transport%3Dpostmessage&amp;colorscheme=light&amp;header=false&amp;height=300&amp;href=http://www.facebook.com/pages/Blogger-Eklentileri/126895440798640&amp;locale=tr_TR&amp;sdk=joey&amp;show_faces=true&amp;stream=false&amp;width=300"></iframe></span></fb:like-box>
</div>
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/tr_TR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Yukarıdaki kod içinde kırmızı olan yerlere , kendi facebook sayfasınızın adresini yazmayı unutmayınız..

Blogger blogunuzda , ziyaretçileriniz sayfada aşağı indiklerinde , rastgele bir yazı göstermek istermisiniz ?

Blogger Bu Yazıyı Okudunuz mu Eklentisi , blogunuzun sağ altında çıkar , ziyaretçiniz isterse bu eklentiyi X butonu ile minimize edebilir

Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile açılan panele altta yer alan kodları ekliyoruz

<div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Bu Yazıyı Okudunuz mu ?</p> <div id="bpslidein_image"></div> <div  id="bpslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("http://yourjavascript.com/22209113892/recom.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://eklentileri.blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4rFZc8RHczxDP5v8bWu8tgNMGM8KcXov6h9_GOGc7y24cxnLD8dAk9-nmots6k3c2i505i2F9-745eGylEHIaJmMCyfTbJkEssnuER3nUiTGOMHo1qW_XEay3hsA4auxaqFHrwWNxdLU/I/bloggerplugins.png" alt="Bu yazıyı okudunuz mu" /></a>

Şimdide şablon kısmına giryoruz , (Widget Şablonlarını Genişlet kutucuğunu işaretlemeyi unutmayın) Aşağıdaki kodları arıyoruz , bu 3 koddan sizde olanın altına ekliyeceksiniz..kodlar blogunuzda 2-3 tane olabilir , hepsini deneyin mutlaka çalışacaktır..

<div class='post-footer-line post-footer-line-1'>


YADA


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


YADA


<data:post.body/>




ÜSTTEKİ 3 KODDAN BLOGUNUZDA OLANI BULUN
 VE HEMEN ALTINA ALTTAKİ KODLARI EKLEYİNİZ

<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>

Yapmanız gereken bu kadar , Blogger Bu Yazıyı Okudunuz mu Eklentisi hazır...son olarak bu eklenti anasafada çalışmaz , yazı sayfalarınızda çalışacaktır..

DEMO

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

Blogger Bu Yazıyı Okudunuz mu Eklentisi , Blogger Bu Yazıyı Okudunuz mu , Rastgele yazı kutusu , Blogger  Rastgele yazı , Recommended Post Slide out for Blogger , Recommended Post Slide out for Blogger widget  , Bu Yazıyı Okudunuz mu , Bu Yazıyı Okudunuzmu

Blogger blogunuzun sidebar kısmında yada istediğiniz bir bölgesinde 125x125 reklam alanı oluşturmak istermisiniz ?

Blogger 125x125 Reklam Alanı Oluşturma eklentisi ile , blogunuza reklam alabilirsiniz..

Yerleşim >> Gadget Ekle >> HTML/JavaScript seçeneği ile açılan kutucuğa aşağıda yer alan kodları ekliyoruz..

<center><table border="1"><tr><td width="125" height="125" align="center">
<a href="http://eklentileri.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIXtkMWSvhguyjj5oQeqmAY9lO_R-LBATtkZfej6u1ni9fARQxz1hLiTVJhqd4vSEjGvwTJbPwsQyNS305-iug7DEhs-1xT9YKG76bdn8kEmQ-8yF-RqOC3zTHwiyq2XJAmYThsXR5Znw4/s1600/125x125.gif"/></a></th>
<td width="125" height="125" align="center"> <a href="http://eklentileri.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIXtkMWSvhguyjj5oQeqmAY9lO_R-LBATtkZfej6u1ni9fARQxz1hLiTVJhqd4vSEjGvwTJbPwsQyNS305-iug7DEhs-1xT9YKG76bdn8kEmQ-8yF-RqOC3zTHwiyq2XJAmYThsXR5Znw4/s1600/125x125.gif"/></a> </th>
</tr><tr>
<td width="125" height="125" align="center">
<a href="http://eklentileri.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIXtkMWSvhguyjj5oQeqmAY9lO_R-LBATtkZfej6u1ni9fARQxz1hLiTVJhqd4vSEjGvwTJbPwsQyNS305-iug7DEhs-1xT9YKG76bdn8kEmQ-8yF-RqOC3zTHwiyq2XJAmYThsXR5Znw4/s1600/125x125.gif"/></a> </td>
<td width="125" height="125" align="center">
<a href="http://eklentileri.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIXtkMWSvhguyjj5oQeqmAY9lO_R-LBATtkZfej6u1ni9fARQxz1hLiTVJhqd4vSEjGvwTJbPwsQyNS305-iug7DEhs-1xT9YKG76bdn8kEmQ-8yF-RqOC3zTHwiyq2XJAmYThsXR5Znw4/s1600/125x125.gif"/></a> </td></tr></table></center>

Kodlar içinde kalın olarak vurgulanmış yerlere link adresleriniz ve resim adresleriniz gelicek..width="125" height="125" kodlarında geçen 125 değerini değiştirerek resim  boyutlarını ayarlayabilirsiniz..

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

Blogger 125x125 Reklam Alanı Oluşturma , Blogger 125x125 Reklam Alanı , Blogger 125x125 Reklam , 125 , 125x125 , Reklam Alanı , Blogger Reklam Kodu , Blogger Reklam Yayınlama , How To Add 125×125 Ad Slots To Your Blog , 125x125 banners for blogs , Advertise Here 125x125 Ad Banner , Blogger 125X125 widget

Blogger blogunuzda , yazılarınızın/yayınlarınızın hemen altında , sizi yada blogunuzu tanıtan bir eklenti istermisiniz ?

Bu eklentimizde , Blogunuzu yada kendinizi , ziyaretçilerinize tanıtabilir , veya detaylı bilgi verebilirsiniz..

DEMO için bu yayının hemen altına bakabilirsiniz..

Öncelikle , Widget Şablonlarını Genişlet kutucuğunu işaretleyin ve aşağıdaki kodu bulunuz..

]]></b:skin>

Bir satır üstüne , altta yer alan kodları ekleyiniz..

.authbio{
color: #454545; /* Yazı rengi*/
font-weight: normal;
font-size:0.9em;
background: #fff;
border: 1px dotted #cc0000;
width: 580px;
padding: 15px;
margin-bottom:25px;

}

.biotitle {
width: 580px;
background: #f57100; /* Turuncu olan arka renk.*/

width: 580px;
padding: 0px;
border: 1px dotted #000000;

}

.biotitle h2 {
font-weight: bold;
color: white;
padding:3px;

}
.authbio a{

color:#cc0000;

text-decoration:underline;}

Şimdide <data:post.body/  kodunu buluyoruz..( Lütfen hangisi diye sormayın , bazı bloglarda 2-3 tane olabiliyor, genellikle ilk olan , ilki olmazsa diğerlerini deneyin mutlaka çalışacaktır eklenti. ) hemen altına aşağıdaki kodları ekliyoruz..

<div class='authbio'>
<div class='biotitle'>
<h2> Eklentileri.blogspot.com Hakkında.</h2>
</div>

<br/>
<div style='float: left;'>
<img alt='' height='75' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi41kLKLYQjikuqugE3nsqk6nx79IdMkbE7vO-fpKfBHAyAlL6Wi9OZxqOPFJHjRHpA4CBr_XFvjkRH49cbhRSN6XJXwNY4c8VqXQ4XOb2Lm7SXxhBqbXQqSafP2RzEpNa25C7chjNHdTMq/s1600/yorum.png' width='75'/>
</div>

     Blogumuz ilk yayınından bu güne , blogger eklentilerini , tüm blogger kullanıcılarına ulaştırmak için yayın yapmış , bu süre içinde hiç bir şekilde kar/gelir elde etmemiş , etmiyecektir..Lütfen desteklerinizi bizden esirgemeyin..
<br/>
<br/>
Bizi <b><a href='http://www.facebook.com/pages/Blogger-Eklentileri/126895440798640' target='_blank'>Facebook</a></b> ve <b><a href='https://twitter.com/BloggerEklenti' target='_blank'>Twitter</a></b> üzerinden de takip edebilirsiniz..

Yukarıdaki anlatılanları yaptıysanız eklentimiz hazırdır..

Kırmızı olan yerlere, kendi facebook ve twitter adresleriniz.
Mavi olan yere , Görünmesini istediğiniz resminiz.
Siyah olan yerlere ise tanıtım yazınız..

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

Blogger Yazar bilgisi eklentisi , Blogger yazar eklenti , yazar hakkında , yazar , Blogger Yazar bilgi kutusu , About the Author , About the Author widget , About the Author box

Blogger blogunuza eklediğiniz resimlerin üzerine fare ile gelindiğinde, aşağı doğru açılan metin/bilgi kutusu eklentisini blogger blogunuza eklemek için aşağıdaki anlatımı takip edip , blogger blogunuzda bu eklentiyi kullanabilirsiniz.

Alttaki kodu bulunuz..

]]></b:skin>

Bir satır üzerine aşağıdaki kodları ekleyiniz..

.imagepluscontainer{ /* main image container */
position: relative;
z-index: 1;
}

.imagepluscontainer img{ /* CSS for image within container */
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a{
color: white;
}

.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */

-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */
}

Yukarıdaki işlemi yaptıysanız eklentimiz hazırdır , bu eklentiyi kullanmak için , aşağıdaki kod dizilimini kullanmanız gerekiyor..

<div class="imagepluscontainer" >
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQX-tclp_3KEvx6Vvngp7SRzeqyY_WkS6Ml_hXlXKzwcbt5AXXKKfRf4DZ6qIu6yJIyUseS0cu0BoGw6jDQuusCkv3w8mug0MHD7qQ-47MMu6qDZj5jqGgNrzIm6rrryVWyJwj-TKsRsb/s1600/yorum.png" style="width:263px; height:199px; z-index:2" />
<div class="desc">
Tüm Blogger eklentilerini , eklentileri.blogspot.com adresinde bulabilir , blogunuza ekleyebilirsiniz..
</div>
</div>

Kırmızı olan yere , resim linkiniz..Mavi olan yer ise görünmesini istediğiniz yazınız..düzenlemeri ona göre yapınız..

DEMO

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

Resim üzerine gelince açılan açıklama kutusu , blogger resim üstüne gelince açıklama ekleme , blogger resim eklentisi , blogger resim üstü yazı eklentisi , blogger image widget , Image With Description Hover Effect , Blogger hower widget ,

Yazı Altına Facebook Hayran Kutusu Widget

Bu eklentimizde , blogger blogunuzda yazmış olduğunuz yazıların/konuların altına facebook haryan kutusu eklemeyi anlatacağız..

Bu eklenti sayesinde, ziyaretçileriniz blogunuzda yazmış olduğunuz yazıyı beğenebilecekler.

Hemen anlatıma geçelim..

Öncelikle , Widget Şablonlarını Genişlet kutucuğunu işaretleyerek , aşağıdaki kodu bulunuz..

<data:post.body/>

Hemen altına , aşağıda yer alan kodları ekleyelim..

<b:if cond='data:blog.pageType == &quot;item&quot;'><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/XXXXX&amp;width=570&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false' style='border:none; overflow:hidden; width:570px; height:180px;'/></b:if>

Yukarıdaki kod içinde kırmızı ile yazılmış olan yere , kendi facebook sayfa adresinizi yazmayı unutmayın... << DEMO >>

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

Yazı Altına Facebook Hayran Kutusu Eklentisi , Blogger Yazı Altına Facebook Hayran Kutusu Eklentisi , Facebook Hayran Kutusu Eklentisi , Facebook hayran kutusu , Facebook box widget , facebook eklentileri

Eklentilere Kaydırma Çubuğu Ekleme ( Scroll Box Widget )

Blogger blogunuzda kullandığınız eklentiler blogunuzda çokmu yer kaplıyor ? Bu eklentimizle , blogger blogunuzda kullandığınız eklentinizi kaydırma çubuğu olan bir kutu içine alabileceksiniz..

Böylelikle , Uzayıp giden eklentileriniz fazla yer kaplamayacak..

Üstelik bunu yapmak çok basit hemen anlatıma geçelim..

<div style="width:200px;height:350px;overflow:auto; ">

Buraya eklediğiniz eklentinin kodları gelicek

</div>

Yukarıdaki kod içinde kırmızı ile yazılmış olan yazı yerine , siz blogunuzda kullanmak istediğiniz eklentinin kodlarını yazacaksınız..Mavi ile işaretlenmiş olan rakamlardan, eklentinin genişlik ve yükseklik ayarlarını yapacaksınız..örnek olarak , sidebar kısmınız 200px genişliğinde ise 200px değeri vermeniz uygundur..uzunluk değerini eklentinize göre düzenlersiniz..

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

Eklentilere Kaydırma Çubuğu Ekleme , Eklentilere Kaydırma Çubuğu Ekleme ( Scroll Box Widget ) , Kaydırma Çubuğu Ekleme , Blogger Kaydırma Çubuğu Ekleme , Kaydırma Çubuğu Eklentisi , Kaydırma Çubuğu Widget , Scroll Blogger

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