Blogger Canlı TV Teması



Tema Özellikleri ;
- Seo Uyumlu
- Kategorilere ayrılmış tab menü
- Özel css ile kodlanmış navbar
- Reklam alanları
- Benzer yazılar eklentisi
- Sosyal paylaşım butonları beğen eklentisi
- Dilerseniz radyo kanalları için tab menü özelliğini kullanabilirsiniz
- Sağ tarafta özel hazırlanmış sidebar

Blogger Eklentileri Nasıl Eklenir ?

Merhaba arkadaşlar bugün size blogger' da eklentiler nasıl eklenir onu öğreteceğim. Öncelikle biliyorsunuz ki blogunuza bişeyler eklemek istiyorsanız bunu yapmayı garanti bilmeniz gerekmektedir. İşlem gerçekten oldukça basit. Eklenti yapmak istediğiniz kodu kopyalıyorsunuz ve blogger panelinizden Yerleşim > Gadget Ekle > HTML/JavaScript ' a geliyoruz ve açılan pencereye kodumuzu giriyoruz ve kaydet diyoruz pencere kendisi otomatik kaydediyor. Daha sonra üst tarafta Düzenlemeyi Kaydet yazan butonu tıklıyoruz ve yaptıgımız düzenlemeleri kaydediyoruz. Bir diğer yol ise Şablon sekmesine tıklıyoruz HTML 'yi düzenle butonuna basarak açılan kodların içinden eklemek istediğiniz satırı buluyoruz. Satırı nasıl bulucaz diyorsanız Ctrl + F yardımı ile <head> (örnek olarak) yazıyor ve buluyoruz. Ve verilen kodu üst tarafa yapıştırıyoruz işlemlerimiz bu kadar kaydedip çıkıyoruz. Anlamadığınız bir yer varsa veya başka bir şey arıyorsanız yorum atark söyleyiniz yardımcı olmaya çalışırız teşekkürler arkadaşlar okuduğunuz için.

Site tasarımı yapılır. İletişim için; ayseyldrm55@gmail.com mail atarak bize ulaşabilirsiniz.

Blogger Animasyonlu Son Yazılar Eklentisi !

Merhaba arkadaşlar bugün sizlere blogger da gerekli olan bir konudan bahsedeceğim. Bu eklenti ne işe yarar isterseniz kısaca ondan bahsedeyim. Bu eklenti blogunuzda yayınladığınız son konuları gösterir ve gelen ziyaretcilerinize başka sayfalarınızda yayınlanmış olan seçenekleri de gösterir. Böylelikle yazılarınıza daha çok bakılmış olur. İsterseniz hiç uzatmadan sizler için kodu vereyim arkadaşlar.




Öncelikle Blogger panelinizde Yerleşim > Gadget Ekle > HTML/JavaScript ekrana çıkan pencereye şu kodu yapıştırıyoruz.

<!--http://kisiselblogcumuz.blogspot.com/ -->
<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul><small><a href="http://guney59.blogspot.com/2013/03/son-yazlar-eklentisi-animisyonlu.html" target="_blank">Sitene Ekle</a></small><!--http://kisiselblogcumuz.blogspot.com/ -->

Ve işlem bu kadar arkadaşlar.. Yapabilen herkeze hayırlı uğurlu olsun.

Blogger Alternatif Facebook Beğeni Kutusu Eklentisi

Merhaba arkadaşlar size bugün blogger facebook beğeni kutusu eklemeyi göstereceğim. Biliyorsunuz ki artık blogger lerın vazgecilmezi oluyor Facebook kutusu, hem böylece facebook sayfanızı beğendirebiliyorsunuz hemde blogger adresiniz ün kazanmış oluyor. Veya 2 sindende kazanc elde edebiliyorsunuz. Şimdi size nasıl yapıldıgını söyleyecegim ve kodu verecegim.




1 - Öncelikle Blogger panelimizden Yerleşim > Gadget Ekle > HTML/JavaScript diyoruz ve şimdi aşağıda vereceğim kodu oraya yapıştırıyoruz.

<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="FACEBOOK SAYFA LİNKİNİZİ BURAYA GİRİYORSUNUZ" 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>

Kırmızı ile olan yere kendi facebook sayfanızın linkini yapıştırıyorsunuz ve işlem bu kadar.. Şimdi kaydet diyoruz ve çıkıyoruz.

Blogger Renkli Katagori Ekleme !

Merhaba arkadaşlar bugün size blogger da işe yarar bir eklentiden bahsedeceğim. Bu eklenti blogger'ınıza eklemek istediğiniz katagorileri barındırıyor. Yani (resim,müzik,bilgi v.b) gibi şeyleri bu katagoride bulundarabiliyorsunuz. Katagorimiz renklidir ve her çeşit renk vardır. Yapımıda bir o kadar basittir arkadaşlar. 





1-  Aşağıda vereceğim kodu Yerleşim > Gadget Ekle > HTML/JavaScript diyerek oraya kaydediyoruz ve bitiriyoruz... 

<div id="main">

<a href="http://www.sosyalbeyincik.net/" target="_self"><img border="0" src="http://b1301.hizliresim.com/15/d/hwswf.png" style="opacity: 0.4;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>

<a href="http://www.sosyalbeyincik.net/" target="_self"><img border="0" src="http://b1301.hizliresim.com/15/d/hwswj.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>

<a href="http://www.sosyalbeyincik.net/" target="_self"><img border="0" src="http://a1301.hizliresim.com/15/d/hwszl.png" style="opacity: 0.4;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>

<a href="http://www.sosyalbeyincik.net/" target="_self"><img border="0" src="http://a1301.hizliresim.com/15/d/hwszq.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>

<a href="http://www.sosyalbeyincik.net/" target="_self"><img border="0" src="http://a1301.hizliresim.com/15/d/hwt0r.png" style="opacity: 0.4;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>

<a href="http://www.sosyalbeyincik.net/" target="_self"><img border="0" src="http://a1301.hizliresim.com/15/d/hwt0n.png" style="opacity: 0.4;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>

<a href="http://www.sosyalbeyincik.net/" target="_self"><img border="0" src="http://a1301.hizliresim.com/15/d/hwt1l.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>

<a href="http://www.sosyalbeyincik.net/" target="_self"><img border="0" src="http://a1301.hizliresim.com/15/d/hwt1p.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>

<a href="http://www.sosyalbeyincik.net/" target="_self"><img border="0" src="http://a1301.hizliresim.com/15/d/hwt2d.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>

</div>
</div>
<center>
</center>
</center>
 


NOT: www.sosyalbeyincik.net sitesinden alıntıdır. Lütfen eklentideki siteyi kaldırarak kendi sitenizi yazınız.

Arkadaslar islemimiz bu kadar.. Katagorileriniz güle güle kullanın.

Blogger Alexa Kodu Ekleme

Merhaba arkadaşlar size bugün sitenizin dünya üzerinde kaçıncı olduğunu ve Türkiye'de kaçıncı sırada olduğunu gösteren bir koddan bahsedeceğim. Bu kod ile sitenize ekliyorsunuz ve herkez kaçıncı olduğunuzu görebiliyor.  Yararlımı diye sorarsanız yararlı fakat sitenize ister ekleyin ister eklemeyin orası size kalmış. Yapımı kolay arkadaslar kısaca hemen altta anlattım. Kolay gelsin.

Arkadaşlar öncelikle www.alexa.com sitesine girerek oraya sitenizi kayıt yaptırıyorsunuz ve çıkıyorsunuz. Daha sonra Alexa Internet (Bu bağlantıya tıklayarak gidebilirsiniz.) oradan istediğiniz bir görünüm karşısında bir boş yer var oraya sitenizi yazıyorsunuz. Örnek: www.kisiselblogcumuz.blogspot.com ve Build Widget diyorsunuz. Karşınıza kodlar çıkacak istediğiniz bir kodu alıyorsunuz ve Blogger Panelinizden Yerleşim > Gadget Ekle > HTML/JavaScript 'da açılan pencereye kodu yapıştırıyoruz ve kaydediyoruz. İşlemimiz bu kadar arkadaşlar gördüğünüz gibi çok basit. 

NOT: No data diyorsa endişelenmeyin çünki siteniz yenidir ve daha sıralamaya dahil olmamıştır. Bir süre sonra otomatik olarak siteye yansır sıralamanız.

Blogger Blogunda Kaç Online Olduğunu Gösteren Sayaç Eklentisi

Merhaba arkadaşlar bugün size bloggerınza online olarak kaç kişi olduğunu gösteren sayaçdan bahsedeceğim. Bu sayaç ile sitenizde kaç kişi var ve hangi konuda onu görebiliyorsunuz. Gerçekten çok işe yarıyor. Yapımıda bir o kadar kolay arkadaşlar.

İlk önce şu siteye girerek http://whos.amung.us/  Widget bölümüne tıklıyoruz ve istediğimiz sayaç tipini seçiyoruz. Daha sonra o sayaçların yanlarındaki kodu kopyalıyoruz ve Blogger panelimizden Yerleşim > Gadget Ekle > HTML/JavaScript  diyoruz ve kopyaladığımız kodumuzu buraya yapıştırıyoruz. İşlem bu kadar. Eğer en üstte gösteriyorsa eklediğiniz HTML yi yerleşimden istediğiniz bölüme koyabilirsiniz.

Blogger Yukarı Çık Eklentisi !

Merhaba arkadaşlar bugün size blogger da yukarı çık eklentisini göstereceğim. Bu eklenti ne işe yarar diye soruyorsanız, çok basit ve kullanışlı olduğu bilinir sayfa nın en aşağılarına indiğiniz zaman sağ tarafta küçük bir yerde yukarı çık yazısı çıkar ve bastıgınızda sayfanın en başına atar. Eklentimiz bu kadar basit arkadaslar yapımıda bi bu kadar basit. hemen size aşağıda göstereceğim.




1) Blogger panelimizde Yerleşim > Gadget Ekle > HTML/JavaScript diyoruz açılan pencereye şimdi aşağıda vereceğim kodu yapıştırıyoruz ve kaydediyoruz.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" >
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src=" http://1.bp.blogspot.com/-L5XHtSmOd-o/UmA2oR3htSI/AAAAAAAADak/skLqTeHAJUw/s1600/sayfabasina-don.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:25}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },
    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },
    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
   
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Sayfa Başına Dön'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()
</script>



İşlemimiz bu kadar ve basittir.

Blogger Otomatik Sayfa Yenileme Eklentisi !

Merhaba arkadaşlar, size bugün Blogger otomatik sayfa yenileme kodunu vereceğim. İlk önce ne işe yaradığından bahsedeyim biraz isterseniz. Bu eklenti sayfanızı sizin ayarladıgınız belli bir saniye/dakika sonra otomatik olarak yenileniyor ve sayfa görüntüleme sayısını arttırıyor. Aslında Google bu eklentiden hiç memnun değil fakat ünlü siteler de bu kod çok yaygın olarak kullanılmakta bir haber sitesine baktığınızda sayfanın otomatik olarak yenilendiğini göreceksiniz. Bu kod ile ayrıca Alexa'da sıralamadanda düşebilirsiniz. Neyse lafı fazla uzatmadan size kodu vereyim. Yapımı aşağıda verilmiştir. Kolay Gelsin...

Yapımı ;

1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widgetleri genişlet kutucuğunu işaretliyoruz.
2 ) Ardından CTRL+F yardımı ile <head> kodunu bularak hemen  üzerine aşağıda ki sayfa yenileme kodunu ekliyoruz.



<meta HTTP-EQUIV='refresh' content='49;'/>


Arkadaşlar kodda yapmanız gereken tek işlem 49 saniyesini kendinize göre ayarlamaktır. işlememiz bu kadar..

Blogger Arşiv Sayfası Eklentisi !

Blogger arşiv sayfası eklentisi ile sitenizde bulunan tüm konuları 1 sayfada göstermenize yarar.Siteye açtığınız konuları hangi etiket ile açtıysanız o etiket altında göstermenize yarar ve yeni açtığınız konuları yanında yeni olarak işaretlendirir.Kurulumu oldukça basit bir eklentidir.Şimdi anlatıma başlayalım.







Yönetim panelinize girdiğiniz zaman yandaki kategorilerden Sayfalar kategorisini seçip girin.Yeni Sayfa diyip açılan alt pencerede Boş Sayfa sekmesine tıklayın.Gelen düzenleme sayfasında HTML düzenleyicisini açıp aşağıda verceğim kodu ekleyiniz.



<script src="http://yourjavascript.com/9184200431/blogtoc-min.js"type="text/javascript"></script>
<script src="http://kisiselblogcumuz.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script> 



Kırmızı ile yazdığımız yeri kendi site URL'nizi ekleyiniz. İşlemimiz tamamdır.

 




Blogger Yazıların Kaç Kere Okundu Eklentisi !

Merhaba arkadaşlar bugün size blogger' da işe yarayan bir eklentiden bahsedeceğim. Biliyorsunuz ki blogger ' da paylaştığımız konuların kaç kere okunduğunu göremiyoruz. Bende sizler için araştırdım biraz ve buldum. İşte yapılışı ve kod aşağıda verilmiştir. İşinize yarayacağından eminim. Lütfen yorumlamayı unutmayınız :)))




1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widgetleri genişlet kutucuğunu işaretliyoruz.
2 ) Ardından CTRL+F yardımı ile <data:post.body/></div> kodunu bularak hemen altına aşağıda ki Blogger yazılarım kaç kere okundu eklentisi kodlarını ekliyoruz.



<div style='text-align: left;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'><span style='color: magenta;'><b> Bu yazı daha önce  <img alt='counter' expr:src='&quot;http://www.e-zeeinternet.com/gd-count.cgi?page=&quot; + data:post.id + &quot;&amp;style=times&amp;nbdigits=1&amp;reloads=1&quot;'/> kişi tarafından okundu.</b></span><b:else/></b:if></div>

NOTLAR
 
Mavi ile yazılmış alan eklentinizin sayfanızın altında hangi aralıkta duracağını belirler. Sol için left. Sağ için Right ve ortada durması için center yazabilirsiniz. 
 
Kırmızı ile yazılmış alan ise Blogger kullanıcılarınıza sayacı nasıl göstereceğinizi belirler. Kendinize uyacak şekilde değiştirebilirsiniz. 
 
 
Lütfen yorumlamayı unutmayınız :)

 

 





Blogger E-Posta Aboneliği Eklentisi !

Blogumun kenar çubuğunda gördüğünüz e-posta aboneliği kutusu ilk yaptığm günden beri çok beğenildi ve çok kişi tarafından istendi.Sanırım bu eklentiyi siznle paylaşmanın zamanı geldi.


Tasarımı ve kodları bana ait olan bu eklentiyi blogunuzda kullanmak isterseniz değiştirmeniz gereken yerleri değiştirdikten sonra kodları HTML/Java Script > Gadget ekle olarak eklemeniz yeterli.

İşte kodumuz aşağıda verilmiştir.


<style>
#subscribe {
  float:right;
  width:258px;
  padding:10px;
  margin:0 0 20px 0;
background: url(https://lh5.googleusercontent.com/--PGII37MHuc/T4QdJl4a4rI/AAAAAAAACsU/iQgow_B8swY/s266/e-posta.png)  no-repeat 0px 0px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px
  height:auto;
border:1px solid #656E75;
color:#000;
font-weight:bold;
}
#subscribe h {
font-size:12px;
color:#F1921A;
}
.feed {
  width:260px;
  min-height:60px;
  margin:0 0 10px 0;
  padding:0;
}
.input{
  margin:10px 7px 0 0;
  float: left;
  width: 175px;
  padding: 4px 5px;
  -webkit-border-radius:4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
border:1px solid #656E75
}
.sbutton {
  background:#F1921A;
  margin:10px 0 0;
  float: left;
  height:26px;
  border: 1px solid #656E75;
  color: #fff;
  width:65px;
  -webkit-border-radius:4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.sbutton:hover {
  background:#E6E7E8;
color:#669900;
}
</style>
<div id='subscribe'>
<div class='feed'>
         <br/>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=kisiselblogcumuz&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input class='input' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;E-Mail Adresiniz...&quot;;}' onfocus='if (this.value == &quot;E-Mail Adresiniz...&quot;) {this.value = &quot;&quot;;}' type='text' value='E-Mail Adresiniz...'/>
<input name='uri' type='hidden' value='kisiselblogcumuz'/><input name='loc' type='hidden' value='en_US'/><input class='sbutton' type='submit' value='Abone Ol'/></form>
       </div>
       <div>
      kisiselblogcumuz&#39;da yayınlanacak yeni yazılar e-mail adresinize gelsin.
       </div></div>

Kırmızı ile yazılmış yerleri kendinize göre doldurunuz.

 

Blogger Sonraki/Önceki Yayınlar Yönlendirmelerine Title Ekleme Eklentisi !

Her blog yayınınızın sonunda kullanıcıyı yönlendirmeye yönelik önceki ve sonraki yayınlar sekmesi bulunur. Sizlere bahsedeceğim Blogger Eklentisi sayesinde bu sekmelerin altına konu başlıklarını da ekleyeceğiz.








1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widget şablonlarını genişlet kutucuğunu işaretliyoruz.
 2 ) Ctrl + F yardımı ile </head>  kodunu bularak aşağıdaki kodu hemen üzerine ekliyoruz.



<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>


3 ) Ardından Ctrl + F yardımı ile   </body> kodunu buluyoruz ve hemen üzerine aşağıda ki kodları ekliyoruz

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script type='text/javascript'> <![CDATA[ var urlToNavTitle = {}; function getTitlesForNav(json) { for(var i=0 ; i < json.feed.entry.length ; i++) { var entry = json.feed.entry[i]; var href = ""; for (var k=0; k<entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { href = entry.link[k].href; break; } } if(href!="") urlToNavTitle[href]=entry.title.$t; } } document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"></'+'script>'); function urlToPseudoTitle(href) { var title=href.match(/\/([^\/_]+)(_.*)?\.html/); if(title) { title=title[1].replace(/-/g," "); title=title[0].toUpperCase() + title.slice(1); if(title.length > 28) title=title.replace(/ [^ ]+$/, "...") } return title; } $(window).load(function() { window.setTimeout(function() { var href = $("a.blog-pager-newer-link").attr("href"); if(href) { href = href.replace(/\.blogspot\.[^/]+\//, ".blogspot.com/"); var title=urlToNavTitle[href]; if(!title) title=urlToPseudoTitle(href); if(title) $("a.blog-pager-newer-link").html("&lt;&lt; Sonraki Yayın<br />" + title); } href = $("a.blog-pager-older-link").attr("href"); if(href) { href = href.replace(/\.blogspot\.[^/]+\//, ".blogspot.com/"); var title=urlToNavTitle[href]; if(!title) title=urlToPseudoTitle(href); if(title) $("a.blog-pager-older-link").html("Önceki Yayın &gt;&gt;<br />" + title); } }, 500); }); //]]> </script>


4 )  Son olarak tekrar  Ctrl + F yardımı ile ]]></b:skin> kodunu bulup hemen üzerine aşağıda ki kodları ekliyoruz

.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;} .blog-pager-older-link {background-color:transparent !important;padding: 0 !important;} #blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;} #blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}



İşlememiz bu kadar arkadaslar işe yarar bir konudur. Zahmetli ama yapınca gerçekten işe yarıyor.

www.kisiselblogcumuz.blogspot.com







Blogger Skype Contact Eklentisi !

Merhaba arkadaşlar , bugün sizlere bloggerinizda Skype iletişim aracı eklemeyi göstereceğim. Ne işe yarar diyorsanız, bu eklenti sitenizin yan tarafına bir skype kutusu oluşturur ve skype ile iletişim kurmak isteyenler oraya tıkladıklarında sizinle iletişim kurabilirler. Ticaret ve reklam siteleri için bence yararlı bir konudur. İşinize yarayacağından eminim kolay gelsin.




Nasıl Yapılır ?

Skype kutusunu oluşturmak oldukça kolay , bunun için Skype özel bir sayfa hazırlamış Blogger Skype Contact Eklentisi oluşturmak için buradan buyurun ; https://dev.skype.com/skype-uri/generator




Üç adet basamağı kendinize göre doldurmanız gerekiyor. İlk bölüme kullanıcı adınızı , ikinci aralığa size nasıl ulaşılmasını istediğinizi , üçüncü adamdı ise şekli belirleyebilirsiniz. Ardından dördüncü boşlukta sizin için hazırlanmış kodlar olacak. Kodları kullanmak için Blogger kontrol panelinden yerleşim seçeneğine geçerek kullanmak istediğiniz alana Gadget Ekle,  Html/Javascript olarak ekleyebilirsiniz. Ayrıca kodlar yayınlar içerisinde de sorunsuz çalışıyor.









Blogger Popüler Yayın Numaralandırma Eklentisi !

Merhaba arkadaşlar, bugün size sitenizdeki popüler yayınları numaralandırmayı göstereceğim. Önce ne işe yaradığını söyleyeyim. Bu eklenti sitenizde en çok girilen 5 konuyu (Sizin belirlediginiz bir rakam) sizin için en çok girilenden en az girilene kadar sıralıyor. Ve sitenize girenlere bu yazının daha çok okunduğunu gösteriyor. Yapımı aşağıda verilmiştir. Kolay gelsin .





1. Adım : Blogger > Düzene gidiyoruz.
2. Adım : Gadget Ekle seçeneğine tıklıyoruz.
3. Adım : Listeden Popüler Yayınları seçiyoruz.

Aşağıdaki gibi yapıyoruz ayarlarımızı; 


Şimdi özel eklentileri eklemek gerekir. Onun içinde aşağıdaki yolları izleyiniz.

4. Adım : Blogger > Şablon
5. Adım : HTML Düzenlemeye tıklayın. ( HTML Kodlarınız yedeklemeyi unutmayınız.)
6. Adım : Ctrl + F Yardımı ile ]]></b:skin> kodunu arıyoruz.Bulduğunuz  ]]></b:skin> kodun öncesine aşağıdaki kodu yapıştırıyorsunuz.


/*--- kisisel-blogcumuz Popular yaynlar --- */ 
.popular-posts ul { 
padding-left: 0px; 
counter-reset: popcount; 
}
.popular-posts ul li:before { 
list-style-type: none; 
margin-right: 15px; 
padding: 0.3em 0.6em; 
counter-increment: popcount; 
content: counter(popcount); 
font-size: 16px; 
background: #292D30; 
color: #ffffff; 
position: relative; 
font-weight: bold; 
font-family: georgia; 
float: left; 
border: 2px solid #dddddd; 
box-shadow: 1px 2px 9px #666666; }
.popular-posts ul li { 
border-bottom: 1px dashed #dddddd; 
}
.popular-posts ul li:hover { 
border-bottom: 1px dashed #696969; 
}
.popular-posts ul li a { 
text-decoration:none; color:#5A5F63; 
}

.popular-posts ul li a:hover { 
text-decoration:none; 
}


İşlemlerimiz tamamdır. Kodu tamamen okuyunuz bizim kendi adımıza doldurduğumuz yerleri kendinize göre doldururak düzenleyiniz.

Blogger İletişim Kutusu Ekleme !

Merhaba arkadaşlar, bugün size sitenizde iletişim kutusu oluşturmayı göstereceğim. Yapacağım iş çok basit ve işe yarardır. İletişim kutusuna sizinle iletişim kurmak isteyenler mailinize bir mail yollayarak iletişim kurabilir. Bu da size sorunları anında çözme olanağı verebilir. Yapılışı aşağıda verilmiştir. Yolları izleyerek yapabilirsiniz. Kolay Gelsin :)





1. Eklentiye eklemek için Blogger Kontrol panelinden Yerleşim > Gadget Ekle sayfasından ise diğer gadget'lar menüsünü seçiniz.



2.  Diğer Gadget'lar menüsü sectikten sonra İletişim Formu seçeneğini görebileceksinzi.

Yapmış olduğunuz işlem, blogger hesabınızın bağlı olduğu mail adresine yollar. İnşallah yararlı olmuştur arkadaşlar.



Blogger Resim Üzerine Gelince Açıklama Kutusu Eklentisi !

Merhaba arkadaşlar bugün size blogger için işe yarayan bir eklentiyi göstereceğim. Ekletimiz resim üzerine gelince resime yerleştirdiğimiz açıklamayı gösteriyor. Yapımı aşağıdadır. Kolay Gelsin .








Blogger sitemize giriş yapıyoruz. kontrol panelince şablon kısmına giriş yapıyoruz html düzenle diyip.Ctrl F yardımı ile açılan kod penceresine ]]></b:skin> kodunu aratıyoruz. buldugumuz  ]]></b:skin>  kodu öcseni sizlere verdigim kodu ekliyorsunuz ve şablon kaydet diyip cıkıyorsunuz. 


.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 */

}


Yukarda ki işlemi dogru bir şekilde yapdıysanız eklentimiz çalışcakdır.  Bu eklenti yi çalışdırmanız icin aşagıda ki kodları kulanmanız gerekiyor.

<div class="imagepluscontainer" >
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSbruQyk33W8RQqBOM7stcHxs85ZIa4K5wuW1NzSiXQcMcVodBk" style="width:263px; height:199px; z-index:2" />
<div class="desc">
Tüm Blogger eklentilerini , http://kisiselblogcumuz.blogspot.com adresinde bulabilir , blogunuza ekleyebilirsiniz..
</div>

</div>


İşlemimiz bu kadardır. Kırmızı ile yazdığımız yeri kendinize göre doldurunuz. 

İnşallah işinize yarar. 

www.kisiselblogcumuz.blogspot.com

Sitenizi 130 Arama Motoruna Kaydet !



Sizde sitenizi 130 Arama motoruna kaydetmek için aşağıdaki butonları tamamen doldurun ve kaydet deyiniz.

www.kisiselblogcumuz.blogspot.com

Blogger Şu Kadar Gündür Sizinleyiz Ekletisi !

 Merhaba arkadaşlar blogger da işe yarayan ve süper bir içerik ile yine karşınızdayız. Bu kod ile blogger da kaç gündür yayındasınız onu gösteriyoruz. Ayrıca sizin yerinize sayıyor günleri otomatik olarak. Yapımı da bir o kadar basit , aşağıda anlattığımız yolları izleyiniz.. İşinize yaracağından eminim :)






İlk önce Yerleşim > Gadget Ekle > HTML / JavaScript butonları ile açılan pencereye aşağıdaki kodu yapıştırıyoruz; 

<script type='text/javascript'>
function dcountup(startingdate, baseunit){
    this.currentTime=new Date()
    this.startingdate=new Date(startingdate)
    this.timesup=false
    this.baseunit=baseunit
    this.start()
}

dcountup.prototype.oncountup=function(){} //default action for "oncountup"

dcountup.prototype.start=function(){
    var thisobj=this
    this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
    var timediff=(this.currentTime-this.startingdate)/1000 //difference btw target date and current date, in seconds
    var oneMinute=60 //minute unit in seconds
    var oneHour=60*60 //hour unit in seconds
    var oneDay=60*60*24 //day unit in seconds
    var dayfield=Math.floor(timediff/oneDay)
    var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
    var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
    var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
    if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
        hourfield=dayfield*24+hourfield
        dayfield="n/a"
    }
    else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
        minutefield=dayfield*24*60+hourfield*60+minutefield
        dayfield=hourfield="n/a"
    }
    else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
        var secondfield=timediff
        dayfield=hourfield=minutefield="n/a"
    }
    var result={days: dayfield, hours:hourfield, minutes:minutefield, seconds:secondfield}
    this.oncountup(result)
    setTimeout(function(){thisobj.start()}, 1000) //update results every second
}
    </script>
<div id='cpcontainer'>
</div>
<script type='text/javascript'>
//SYNTAX: myvariable=new dcountup(past_date_and_time_string, "baseunit")
var princewedding=new dcountup("October 30, 2013", "days")

princewedding.oncountup=function(result){
    //result is an object containing the current count up date/time, updated every second
    //Available properties: result["days"], result["hours"], result["minutes"], and result["seconds"]
    var mycountainer=document.getElementById("cpcontainer")
    mycountainer.innerHTML=""+result['days']+" Gündür Sizlere Hizmet Vermekteyiz.."
}

</script>


Sonra kaydedip çıkıyoruz. İşlemimiz bu kadar arkadaşlar inşallah işinize yaramıştır.

NOT :  KIRMIZI ile yazılan yerleri kendinize göre doldurabilirsiniz.

www.kisiselblogcumuz.blogspot.com




Blogger tarafından desteklenmektedir.