Blogger Eklentileri | Blogger Widgets View RSS

Blogger eklentileri , Blogger eklenti , Blogger
Hide details



Yeni Eklentiler 4 Oct 2016 5:26 PM (9 years ago)

http://eklentisel.blogspot.com.tr/ 



blogger eklentileri ve daha fazlası burada

 eklentisel.blogspot.com.tr

 








Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Blogger dinamik resim eklentisi 10 Apr 2016 1:25 PM (9 years ago)


BU EKLENTİNİN ÖN İZLEMESİ İÇİN TIKLAYINIZ

Blogunuza dinamik bir resim eklentisi istermisiniz ?

Bu eklentimiz , fare ile resim üzerine gelindiğinde resmi bir miktar yatırır , oldukça güzel bir eklenti olduğunu düşündümüz dinamik resim efektini sizde blogunuzda kullanabilirsiniz..


öncelikle blogunuzda aşağıda kodu buluyorsunuz.

yukarıdaki kodun hemen üstüne bu kodu yapıştırıyoruz


kaydedip çıkıyoruz...

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Multi Color CSS3 Blogger Menü 10 Apr 2016 1:08 PM (9 years ago)


Multi Color CSS3 Blogger Menü Eklentisi

Blogger blogunuzda , rengarenk bir menü kullanmak istermisiniz ?

Bu eklentimizle , Blogunuzda post üstüne ,  bu renkli menüyü ekleyip , hem görsel açıdan hemde ziyaretçilerinizin yararlanması amaçlı bir menü oluşturabilirsiniz..

DEMO

Aşağıda yer alan kodu buluyoruz.. 
]]></b:skin>
Bir satır üstüne , alttaki kodları ekliyoruz.. 
/* CSS3 Multi color blogger menu widget başlangıç kodu eklentileri.blogspot.com */
.cbdb-menu li {
    display: block;
    float: left;
    line-height: 35px;
    list-style:none;
    margin: 0 5px;}
.cbdb-menu li a {
    /* This generators the gradient on top of the solid color */
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, rgba(255,255,255,.5)),
        color-stop(1, rgba(0,0,0,.1))
    );
    background-image: -moz-linear-gradient(
        center top,
        rgba(255,255,255,.5) 0%,
        rgba(0,0,0,.1) 100%
    );
    color: #f4f4f4; /* IE */
    color: rgba(255, 255, 255, 0.8);
    display: block;    
    font: bold 18px "Myriad Pro","Lucida Grande",Helvetica,Arial,sans-serif;        
    outline:none;
    padding: 5px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);    }
    .cbdb-menu li a:active {
        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0,rgba(255,255,255,.5)),
            color-stop(.1,rgba(255,255,255,.2)),
            color-stop(.85, rgba(0,0,0,.2)),
            color-stop(100, rgba(0,0,0,.4))
        );
        background-image: -moz-linear-gradient(
            center bottom,
            rgba(255,255,255,.5) 0%,
            rgba(255,255,255,.2) 10%,
            rgba(0,0,0,.2) 85%,
            rgba(0,0,0,.4) 100%
        );
    }
/* Dark Text */
.cbdb-menu li a.dark {
    color: #333; /* IE */
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
}
/*********** COLORS *************/
/* Create your own class for your own colors */
.red {
    background: #B80202;
    border: #B80202 1px solid}
    .red:hover, .red:focus{
        background-color:#e30606
   }
.green {
    background: #46c431;
    border: #46c431 1px solid}
    .green:hover,.green:focus {
        background-color:#44e329
    }
.yellow {
    background: #D9CE1C;
    border: #D9CE1C 1px solid}
    .yellow:hover,.yellow:focus {
     background-color:#eee117}
.cyan {
    background: #23c6de;
    border: #23c6de 1px solid}
    .cyan:hover,.cyan:focus {
     background-color:#18d8f4
    }
.blue {
    background: #3271d9;
    border: #3271d9 1px solid}
    .blue:hover,.blue:focus {
     background-color:#377ef2
    }
Yukarıdaki işlemi yaptıysanız , şablonunuzu kaydedin ve Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile açılan panele aşağıdaki kodlarımızı ekliyelim 
<ul class="cbdb-menu">

 <li><a href="http://eklentileri.blogspot.com/" class="red">Ana Sayfa</a> </li>
 <li><a href="http://eklentileri.blogspot.com/" class="green">Deneme</a></li>
 <li><a href="http://eklentileri.blogspot.com/" class="yellow">Deneme</a></li>
 <li><a href="http://eklentileri.blogspot.com/" class="cyan">Deneme</a></li>
 <li><a href="http://eklentileri.blogspot.com/" class="blue">iletişim</a></li> 
</ul>
Kod içinde kalın belirtilmiş yerleri kendinize göre düzenleyiniz , son olarak gadgeti, post kısmının üstüne taşıyın ki yukarıda kalsın..


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

Multi Color CSS3 Blogger Menü , Renkli CSS3 Blogger Menü , Blogger Menü , Menü , Blogger Menu Widget , Renkli , CSS3 , Blogger Menu Ekleme


Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Sola Kayma Efektli Açılır Menü Bar 9 Apr 2016 4:18 PM (9 years ago)


CSS3 Sola Kayma Efektli Blogger Menü Bar Eklentisi

Bu eklentimiz ile , blogger blogunuzda , üst menü yaratabilirsiniz , Menü bar eklentimizle alt kategoriler yaratabilirsiniz , alt kategorilerimiz soldan uçarak gelir...

DEMO

Alttaki kodumuzu şablon kısmında buluyoruz 
]]></b:skin>
Bir satır üstüne , altta yer alan kodlarımızı ekliyoruz.. 
/*Soldan Kayma Efektli Blogger Menü Bar Eklentisi Kod Baslangici www.eklentileri.blogspot.com*/

#flyingmenubt,#flyingmenubt ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    height:500px;}
#flyingmenubt {
    font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
    font-size: 13px;
    height: 36px;
    list-style: none outside none;
    margin: 40px auto;
    text-shadow: 0 -1px 3px #202020;
    width: 980px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f;
}
#flyingmenubt ul {
    left: -9999px;
    position: absolute;
    top: -9999px;
    z-index: 2;
}
#flyingmenubt li {
    border-bottom: 1px solid #575757;
    border-left: 1px solid #929292;
    border-right: 1px solid #5d5d5d;
    border-top: 1px solid #797979;
    display: block;
    float: left;
    height: 34px;
    position: relative;
    width: 105px;
}
#flyingmenubt li:first-child {
    border-left: 0 none;
    margin-left: 5px;
}
#flyingmenubt li a {
    color: #FFFFFF;
    display: block;
    line-height: 34px;
    outline: medium none;
    text-align: center;
    text-decoration: none;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f;
}

/* keyframes #animation1 */
@-webkit-keyframes animation1 {
    0% {-webkit-transform: scale(1);}
    30% {-webkit-transform: scale(1.3);}
    100% {-webkit-transform: scale(1);}}
@-moz-keyframes animation1 {
    0% {-moz-transform: scale(1);}
    30% {-moz-transform: scale(1.3);}
    100% {-moz-transform: scale(1);}}
#flyingmenubt li > a:hover {

    -moz-animation-name: animation1;
    -moz-animation-duration: 0.7s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-name: animation1;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
#flyingmenubt li:hover > a {
    z-index: 4;
}
#flyingmenubt li:hover ul.subs {
    left: 0;
    top: 34px;
    width: 150px;
}
#flyingmenubt ul li {
    background: none repeat scroll 0 0 #838383;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    opacity: 0;
    width: 100%;
    /*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}

/* keyframes #animation2 */
@-webkit-keyframes animation2 {
    0% {margin-left:185px;}
    100% {margin-left:0px;opacity:1;}
}
@-moz-keyframes animation2 {
    0% {margin-left:185px;}
    100% { margin-left:0px;opacity:1;}
}
#flyingmenubt li:hover ul li {
    /* css3 animation */
    -moz-animation-name: animation2;
    -moz-animation-duration: 0.3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-name: animation2;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    /*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}
/* animation delays */
#flyingmenubt li:hover ul li:nth-child(1) {
    -moz-animation-delay: 0;
    -webkit-animation-delay: 0;
}
#flyingmenubt li:hover ul li:nth-child(2) {
    -moz-animation-delay: 0.05s;
    -webkit-animation-delay: 0.05s;
}
#flyingmenubt li:hover ul li:nth-child(3) {
    -moz-animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
}
#flyingmenubt li:hover ul li:nth-child(4) {
    -moz-animation-delay: 0.15s;
    -webkit-animation-delay: 0.15s;
}
#flyingmenubt li:hover ul li:nth-child(5) {
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}
#flyingmenubt li:hover ul li:nth-child(6) {
    -moz-animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;
}
#flyingmenubt li:hover ul li:nth-child(7) {
    -moz-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}
#flyingmenubt li:hover ul li:nth-child(8) {
    -moz-animation-delay: 0.35s;
    -webkit-animation-delay: 0.35s;
}
Şablonumuzu kaydediyoruz ve Yerleşim >> Gadget Ekle >> HTML/JavaScript seçenekleri ile açılan blogger paneline altta yer alan kodlarmızı ekliyoruz.. 
<ul id="flyingmenubt">
    <li><a href="http://eklentileri.blogspot.com/">Ana Sayfa</a></li>
    <li><a class="hsubs" href="#">Menu 1</a>
        <ul class="subs">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
            <li><a href="#">Submenu 4</a></li>
            <li><a href="#">Submenu 5</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="http://eklentileri.blogspot.com/">Menu 2</a>
        <ul class="subs">
            <li><a href="#">Submenu 2-1</a></li>
            <li><a href="#">Submenu 2-2</a></li>
            <li><a href="#">Submenu 2-3</a></li>
            <li><a href="#">Submenu 2-4</a></li>
            <li><a href="#">Submenu 2-5</a></li>
            <li><a href="#">Submenu 2-6</a></li>
            <li><a href="#">Submenu 2-7</a></li>
            <li><a href="#">Submenu 2-8</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 3</a>
        <ul class="subs">
            <li><a href="#">Submenu 3-1</a></li>
            <li><a href="#">Submenu 3-2</a></li>
            <li><a href="#">Submenu 3-3</a></li>
            <li><a href="#">Submenu 3-4</a></li>
            <li><a href="#">Submenu 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="http://eklentileri.blogspot.com/">Blogger Eklenti</a></li>
</ul>
Yukarıdaki kodları kendinize göre düzenleyiniz, daha iyi anlamak için üstte yer alan demo linkinden yararlanabilirsiniz..Son olarak gerekli gadgeti yerleşim kısmından , post yayınlarının üstündeki alana taşıyınki eklenti yukarda gözüksün..


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

Sola Kayma Efektli Blogger Menü Bar , Blogger Menü Bar , Menu Bar , MenuBar , Bar , Blogger Menü Eklentisi , Kayma Efektli Blogger Menü , Açılır Menü , Blogger Açılır Menü




Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Blogger Animasyonlu Etiket Eklentisi 7 Aug 2015 1:27 PM (10 years ago)


Blogger Animasyonlu Etiket Eklentisi

Bu eklentimizde, Blogger blogunuza yer alan etiketlerin üstüne gelindiğinde , Etiketimiz Sağa doğru hareket ediyor...

Demo için BURAYA tıklayın , açılan sayfada sağ taraftaki etiketlerin üstüne gelin.

Blogger Animasyonlu Etiket Eklentisini blogger blogunuza eklemek için aşağıdaki adımı izleyin..

Aşağıdaki kodu blogunuzun şablon kısmında bulun.. 
</head>
Hemen üstüne aşağıdaki kodları ekleyiniz.. 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 450;
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '20px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
});</script>
Yapmanız gereken bu kadar...


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

Blogger Animasyonlu Etiket Eklentisi , Blogger Animasyonlu Etiket  , Blogger Etiket , Blogger Etiket Eklentisi , Blogger Etiket Ekleme

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Sadece Konu Başlıklarını Gösterme Eklentisi 5 Aug 2015 2:00 PM (10 years ago)


Sadece Konu Başlıklarını Gösterme Eklentisi

Bu eklentimizde, ziyaretçileriniz blogunuzda arama yaptığında yada gerekli etikete tıkladığında, konularınız sadece başlık halinde listelenecektir..

Blogunuzda Sadece Konu Başlıklarını Gösterme Eklentisini kullanmak için aşağıda anlatılan adımı takip edin..

Hemen anlatıma geçelim..

Aşağıdaki kodumuzu buluyoruz.. 
<b:include data='post' name='post'/>
Bulduğumuz bu kodun yerine aşağıdaki kodlarımızı ekleyelim..( Daha net anlatmak gerekirse, üstte yer alan kodu silin ve aşağıdaki kodu sildiğiniz yere ekleyin.. ) 
<b:if cond='data:blog.homepageUrl
!= data:blog.url'>

<b:if cond='data:blog.pageType != "item"'>

<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:else/>

<b:include data='post' name='post'/>

</b:if>
Anlatılan adımı doğru yaptıysanız , Sadece Konu Başlıklarını Gösterme Eklentisini blogunuzda artık kullanabileceksiniz.. << DEMO >>


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

Sadece Konu Başlıklarını Gösterme Eklentisi , Konu Başlıklarını Gösterme Eklentisi , Blogger Konu Başlıkları Gösterme , Blogger Sadece Başlıklar Görünsün , Bloggerda Başlıkları Gösterme


Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Kilitli , Kaldırılamayan Eklentileri Kaldırma 5 Aug 2015 1:16 PM (10 years ago)


Kilitli , Kaldırılamayan Eklentileri Kaldırma

Blogger blogunuzda , Şablon değişikliği sonucu , Bazı eklentileri kaldıramayabilirsiniz, yada yukarıdaki resimdeki gibi , powered by blogger yazısının bulunduğu eklenti kilitli , kaldırılamayabilir olabilir..

Bu yazımızda, blogger için kaldıramadığınız kilitli eklentilerinizi nasıl kaldırabileceğinizi anlattık..


Blogger blogunuzda Yerleşim sayfanıza girin..


Yukarıdaki örnek resimde gördüğünüz , Attribution eklentisi kilitli durumda kaldırılamıyor , yanındaki Düzenle butonuna bastığımızda aşağıdaki resimdeki panelimiz açılıyor..


Üstteki örnek resimde gördüğünüz gibi , Attribution adlı eklentimizin Kaldır bağlantısı yok , bu yüzden bu eklentiyi kaldıramıyoruz...

Aşağıdaki anlatılanları uyguladıktan sonra şu şekilde bir sonuç alacağız..


Yukarıdaki resimde gördüğünüz gibi , eklentimizin artık Kaldır Butonu aktif..

Eğer blogger blogunuzda , sizinde kaldıramadığınız , kilitli eklentiler varsa aşağıdaki anlatım ile , blogunuzdan kaldırabilirsiniz..

Anlatıma Geçelim..

Blogger blogunuzda Yerleşim sekmesine girin , Kaldırılamayan eklentiniz, yani kilitli olan eklentinizin ismini blogger şablonunda aratacağız...Bizim örneğimizde Attribution eklentisi olduğu için , biz şablon kısmında Attribution şeklinde arama yaptık , siz kaldırmak istediğiniz eklenti adını yazın.... ( Widget Şablonlarını Genişlet kutucuğunu işaretlemeyi unutmayın ) 
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
    <b:if cond='data:feedbackSurveyLink'>
      <div class='mobile-survey-link' style='text-align: center;'>
        <data:feedbackSurveyLink/>
      </div>
    </b:if>




/// Yukarıdaki kod içinde geçen kırmızı true yazısını

Aşağıdaki gibi false olarak değiştiriyoruz ///






<b:widget id='Attribution1' locked='false' title='' type='Attribution'>
<b:includable id='main'>
    <b:if cond='data:feedbackSurveyLink'>
      <div class='mobile-survey-link' style='text-align: center;'>
        <data:feedbackSurveyLink/>
      </div>
    </b:if>
Attribution kelimesini aramamız sonucunda yukarıdaki kod dizilimini buluyoruz , Kod içinde kırmızı ile geçen true kısmını false olarak değiştireceğiz , böylelikle blogger blogunuzda kaldıramadığınız eklentinizi kaldırabilecekseniz..



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

Blogger Kaldırılamayan Eklentileri Kaldırma , Kaldırılamayan Eklenti , Blogger Eklenti Kaldırma , Kaldırılamayan Widget Kaldırma , Blogger Eklenti Kaldırma Sorunu , Eklenti Nasıl Kaldırılır , Kilitli Blogger Eklentisi

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Döner Sosyal Butonlar Eklentisi 4 Aug 2015 5:37 PM (10 years ago)


Blogger blogunuz için , Döner Sosyal Butonlar Eklentisi ile , ziyaretçiniz fare ile ikonların üzerine geldiğinde , ikonumuz dönme efekti gösterir..

DEMO

Altta yer alan kodlarımızı , Yerleşim >> Gadget Ekle >> HTML/JavaScript yardımı ile ekleyiniz.. 
<style>
 #social a:hover {
 background-color: transparent;
 opacity:0.7;
 }
 #social img {
 -moz-transition: all 0.8s ease-in-out;
 -webkit-transition: all 0.8s ease-in-out;
 -o-transition: all 0.8s ease-in-out;
 -ms-transition: all 0.8s ease-in-out;
 transition: all 0.8s ease-in-out;
 }
 #social img:hover {
 -moz-transform: rotate(360deg);
 -webkit-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 transform: rotate(360deg);
 }
</style>

<center>
 <div id="social">
<!--Start Rss Icon-->
 <a href="http://draft.blogger.com/YOUR-FEED-URL-HERE" target="_blank" title="Grab Our Rss Feed"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOxYyYTlnTCOWw5v-mtirc4jq7VxV9JiOxvkq_QLtBi4E6LUOnQbTsEkTKbyPLnit7EkJeEToo13Xzc5UtYSXZLGtGyhdicXxgCuCjxhRRKv35G9ecwTNeq5195VMnt-3HpJ6-vQfSJVBw/s1600/RSS-48x48.png" style="margin-right: 1px;" /></a> 
 <!--End Rss Icon-->
 <!--Start Email Rss Icon-->
 <a href="http://draft.blogger.com/YOUR-EMAIL-RSS-URL-HERE" rel="nofollow" target="_blank" title="Get Free Updates Via Email"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3C3DmA7whKveS3ki6QlN7aFzgu5JrWbf6NdHpZm5cUCR7PyWn_AaLfRrezE0yAAIk0E9rrVfHGMQAzn7spYIAzcSEeCL6LKFEvWCLluv4gQcEa7mRC-qJe3RerFOPmZ42bvl9LuMls7-0/s1600/RSS-EMAIL-48x48.png" style="margin-right: 1px;" /></a> 
 <!--End Email Rss Icon-->
 <!--Start Facebook Icon-->
 <a href="http://draft.blogger.com/YOUR-FACEBOOK-PAGE-URL-HERE" rel="nofollow" target="_blank" title="Like Our Facebook Page"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyXXuEjQL5BgoBp9C4No0UCBNESr2zLcr0nCPjo9e9b5PyoHJeu9SswbAcTSSmLiZcXhWWJsl3RRSl_BHmMZQuuCoxxf8PEsleCzeZRGNTFYlswDDnLuos-2dCt0QhBSx0CbEUfDFiHMoI/s1600/FACEBOOK-48x48.png" style="margin-right: 1px;" /></a> 
 <!--End Facebook Icon-->
 <!--Start Twitter Icon-->
 <a href="http://draft.blogger.com/YOUR-TWITTER-URL-HERE" rel="nofollow" target="_blank" title="Follow Our Updates On Twitter"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGws7DvPKJYSUUAkBkVA1dK7oI9Byml-0n1UaP8-9wj1ij1FyInWuurdpz31zKX-5lU36cwE5AnXTLYozd0Mzb0S0iD-K6z-wnZv-ZETLH7JCH87pNbRtgPDCdX344v7dy-peVIywBJ-Ec/s1600/TWITTER-48x48.png" style="margin-right: 1px;" /></a> 
 <!--End Twitter Icon-->
 <!--Start Google+ Icon-->
 <a href="http://draft.blogger.com/YOUR-GOOGLE-PLUS-URL-HERE" rel="nofollow" target="_blank" title="Follow Us On Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLPn3fbVcNe-S8HOmh57sJ47nXN5m1e6Vo3LJ3Jr_sr_D5ryNlGIFsbuI8bot1AXS75biNGmI-P8W9cRQDK_Wlvm4n1gi2Ac4vaL_saKSX3tFyLW8KetMwEN8b2V1AxVFNMzK-U_nHldGb/s1600/GOOGLE-PLUS-48x48.png" style="margin-right: 1px;" /></a> 
 <!--End Google+ Icon-->
 <!--Start Pinterest Icon-->
 <a href="http://draft.blogger.com/YOUR-PINTEREST-URL-HERE" rel="nofollow" target="_blank" title="Follow Our Pins"><img alt="Follow Me on Pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhfNQ2DP9JvD_OD_qqGA-dqkzXQDea01-D_cZZcqwuIkjNdfN7R3U9cOGBN1hDY8O1Z3pNZWZFlNkJu-viHJUQZ1VVK2eGUODKZ1MUWxkeYtIyc4kZ_2GIWYf4PsOjKtLRcvBdT74njqtp/s1600/PINTEREST-48x48.png" style="margin-right: 1px;" /></a>
 <!--End Pinterest Icon-->
 </div>
</center>



Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Blogger Resimlerinize Zoom Efekti Eklentisi 3 Aug 2015 3:54 PM (10 years ago)


Blogger blogunuzda kullandığınız resimlere zoom özelliği eklemek istermisiniz ?

Blogger zoom eklentisi ile , kullanıcılar resimlerin üzerine geldiğinde , resimleriniz belli bir miktarda büyüyerek zoom etkisi gösterir..

Blogger resimlere zoom eklentisini blogger blogunuza eklemek için yapmanız gerekenler aşağıda..

Aşağıda yer alan kodu bulunuz.. 
]]></b:skin>
Hemen üstüne alttaki kodlarımızı ekleyelim.. 
/* eklentileri.blogspot.com zoom efekti kod sonu  */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;  /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQztzNjNUJJX01j85gu6dH1VWJfX3AVr7D5uPRYNVGH5n0h4Ux_9NfZpOjjegMhyuVG-JuJ2jaQqmYsUqv2gO6cwhoI6W-a9jSmQqCtPprEjiPiApz3vKdCNZu_nQ2_iEUW4OPZdxJak5u/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* eklentileri.blogspot.com zoom efekti kod sonu*/
}
Yukarıdaki işlemi yaptıktan sonra , şimdide bu kodumuzu bulalım. 
</head>
Bu kodumuzunda hemen üstüne şu kodları ekleyelim.. 
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false; 
});

});
</script>
Blogger resimlerinize zoom efekti eklentimiz hazır , nasıl kullanılacağına gelirsek , yazılarınızı yazarken , resimlerinizi alttaki şekilde ekleyeceksiniz.. 
<ul class="thumb">
<li><a href="http://eklentileri.blogspot.com/"><img src="Resim linki 1" alt="" /></a></li>
<li><a href="http://eklentileri.blogspot.com/"><img src="Resim linki 2" alt="" /></a></li>
<li><a href="http://eklentileri.blogspot.com/"><img src="Resim linki 3" alt="" /></a></li>
<li><a href="http://eklentileri.blogspot.com/"><img src="Resim linki 4" alt="" /></a></li>
</ul>
güle güle kullanın =)

DEMO


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

 Blogger Resimlerinize Zoom Efekti Eklentisi , Blogger Resimlerinize Zoom Efekti , Blogger Resimlerinize Zoom , Blogger zoom , zoom eklentisi , zoom , blogger resim yakınkaştırma , resim zoom , zoom efekti , zoom eklentisi , zoom widget , blogger photo zoom effect

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

CSS3 Dairesel Blogger Buton Eklentisi 3 Aug 2015 2:16 PM (10 years ago)


CSS3 Dairesel Blogger Buton Widget

Blogger blogunuz için , üzerine gelince hareketlilik gösteren buton veya butonlar kullanmak istermisiniz ?

O halde aşağıdaki yazıyı takip edin..

Alttaki kodu blogger blogunuzda bulun.. 
]]></b:skin>
Hemen üstüne aşağıda yer alan kodları ekleyiniz.. 
.a-btn{
    width:60px;
    height:60px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    display:block;
    margin:20px;
    float:left;
    background:#f0ad4e;
    position:relative;
    -webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff;
    -moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff;
    box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
.a-btn span{
    display:table-cell;
    width:40px;
    height:40px;
    padding:10px;
    text-align:center;
    vertical-align:middle;
    font-size:16px;
    color:#fff;
    text-shadow:0px 1px 1px #A03F16;
    font-family:"Arvo", "Myriad Pro", "Trebuchet MS", sans-serif;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
.a-btn span:nth-child(1), 
.a-btn span:nth-child(3){
    position:absolute;
    top:0px;
    left:0px;
    font-size:16px;
    line-height:19px;
    opacity:0;
}
.a-btn span:nth-child(1){
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMvpzSP3tbW9nFHgbnW7xZM77q4yRBftHpWqdkxlgzWW8EnyA0ExjSfRHPSa3mrEjgdPY2s9omIVypRzLuEY5fRBwzD30YgOqDJ6Bd5R8fQZ7Eg6EV2PSCDeQ0R5Yffss4N7BzSUDqO8g/s1600/star.png) no-repeat center center;
    opacity:0.2;
}
.a-btn:hover{
    background:rgba(170, 77, 27, 0.6);
    -webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff;
    -moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff;
    box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff;
}
.a-btn:hover span:nth-child(3){
    opacity:1;
}
.a-btn:hover span:nth-child(2){
    opacity: 0; 
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
}
.a-btn:hover span:nth-child(1){
    -webkit-animation:rotate 1s linear;
    -moz-animation:rotate 1s linear;
    animation:rotate 1s linear;
}
.a-btn:active{
    -webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff;
    -moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff;
    box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff;
}
.a-btn:active span:nth-child(2){
    color:rgba(170, 77, 27, 0.8);
    text-shadow:0px 1px 1px rgba(255, 255, 255, 0.6);
}
@keyframes rotate{
    0% { transform: scale(1) rotate(0);}
    50% { transform: scale(0.5) rotate(180deg);}
    100% { transform: scale(1) rotate(360deg);}
}
@-webkit-keyframes rotate{
    0% { -webkit-transform: scale(1) rotate(0);}
    50% { -webkit-transform: scale(0.5) rotate(180deg);}
    100% { -webkit-transform: scale(1) rotate(360deg);}
}
@-moz-keyframes rotate{
    0% { -moz-transform: scale(1) rotate(0);}
    50% { -moz-transform: scale(0.5) rotate(180deg);}
    100% { -moz-transform: scale(1) rotate(360deg);}
}

Yukarıdaki işlemi yaptıysanız eklentimiz hazır , şimdi nasıl kullanılacağını görelim..yaınların içinde yada eklenti olarak kullanmak için aşağıdaki kodları kullanıyoruz. 
div class="button-wrapper">

<a href="#" class="a-btn"><span></span>
<span>Sign up</span>
<span>It's free!</span></a>

<a href="#" class="a-btn"><span></span>
<span>Join Now</span>  
<span>It's free!</span></a>

<a href="#" class="a-btn"><span></span>
<span>Enter</span> 
<span>It's free!</span></a>

<a href="#" class="a-btn">
<span></span>
<span>Get in</span>
<span>It's free!</span></a>
</div>




DEMO


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

 CSS3 Dairesel Blogger Buton Eklentisi , Dairesel Blogger Buton Eklentisi , Blogger Buton Eklentisi , Blogger Buton Ekleme , Blogger Butonları , Blogger Button Widget , CSS3 Circle Effect Buttons Style For Blogger



Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Yazı altına url - html - forum linki bağlantısı verme 2 Aug 2015 5:22 PM (10 years ago)


Blogger blogunuzda yazmış olduğunuz yazıların altına , konu linki + forum linki + html linki eklemek istermisiniz ?

Ziyaretçileriniz yazılarınızın linkini paylaşmak istediklerinde bu linkleri kullanabilirler.

Bu eklentiyi kullanmak için aşağıdaki anlatımları takip ediniz..
aşağıda yer alan kodumuzu buluyoruz.. 
</head>
hemen üstüne , aşağıda yer alan kodları ekliyoruz.. 
<style type='text/css'>
.about-article{
background-color:#f9f9f9;
padding-bottom:5px;
padding-left:20px;
font-size:11px;
}
.about-article input{
background-color:#ffffff;
}
</style>
yukarıdaki işlemi yaptıktan sonra , şimdi de bu kodumuzu buluyoruz.. 
<data:post.body/>
Bu kodumuzun hemen altına aşağıda yer alan kodlarımızı ekliyoruz.. 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;div class=&quot;about-article&quot;&gt;<p>Bu yazıyı sitenizde/forumunuzda paylaşmak için aşağıdaki linkleri kullanabilirsiniz..</p>&lt;p class=&quot;noborder&quot;&gt;&lt;label for=&quot;aa-url&quot;&gt;URL:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;&lt;/p&gt;&lt;p&gt;&lt;label for=&quot;aa-forum&quot;&gt;HTML Link:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;&lt;/p&gt;&lt;p&gt;
&lt;label for=&quot;aa-forum&quot;&gt;Forum Link:&lt;/label&gt;&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]/<data:post.title/>[/url]&quot; /&gt;&lt;/p&gt;
<p align='center'><a href='http://eklentileri.blogspot.com/' style='display:none;' target='_blank'>Blogger eklentileri</a></p>
&lt;/div&gt;<br/>
</b:if>
Eklentimiz hazır , güle güle kullanın...

DEMO



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

Blogger yazı altına url ekle , blogger yazı altına forum linki ekle , blogger yazı altına html kodu ekle , blogger yazı altına ekle , blogger konu altına url forum linki ekleme , blogger yazı altına ekleme , blogger url widget



Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

En Çok Yorum Yapanlar Eklentisi 2 Aug 2015 1:19 PM (10 years ago)


Blogger En Çok Yorum Yapanlar Eklentisi Widget

Blogger blogunuzda , en çok yorum yapanları göstermek istermisiniz ?

DEMO

Bu eklentimizle , blogunuzun istediğiniz bir yerine ekleyeceğiniz gadget ile , blogunuzda en çok yorum yapan kullanıcıları listeleyecektir..

Blogunuzun yerleşim kısmına girerek gadget ekle >> HTML/JavaScript seçeneği ile açılan panele aşağıdaki kodları ekleyin.. 
<script type='text/javascript'>
function pipeCallback(obj) {
 document.write('<ol>');
 var i;
 for (i = 0; i < obj.count ; i++)
 {
 var href = "'" + obj.value.items[i].link + "'";
 var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
 document.write(item);
 }
 document.write('</ol>');
 }
 </script>
<script type="text/javascript" src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=918c4b96efdf63fee389f2f025085904&EntertheURL=http%3A%2F%2Feklentileri.blogspot.com&number=5&Nametobeexcluded=XXXXX"></script>
Yukarıdaki kodlarda dikkat etmeniz gereken ,

      Kırmızı ile yazılmış eklentileri.blogspot.com adresi yerine kendi blog adresinizi

      Mavi renk ile yazılmış 5 yerine , göstermek istediğiniz kişi sayısı

      Siyah ile yazılmış XXXXX yerine ise , görünmesini istemediğiniz kullanıcı adı ( Kendinizin görünmesini istemiyorsanız , kendi kullanıcı adınızı yazabilirsiniz.. )


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

En Çok Yorum Yapanlar Eklentisi , Blogger En Çok Yorum Yapanlar Eklentisi , Blogger en çok yorum yapanlar , Blogger yorum eklentisi , blogger en yorumcular , blogger en fazla yorum yapanlar , Blogger en çok yorum yapanları gösterme


Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Blogger Bu Yazıyı Okudunuz mu Eklentisi 31 Jul 2015 3:30 PM (10 years ago)


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/AVvXsEhL-3QDB-AOygCuSVKS0RUyone6NSLYfK2CA2eikCkYz_b1W9G56IvD45Rzu1-GQYPiZl6rjMJAnMaevqZ14T7y9m60uk3c_pBGPo6wpuY0F_0rmBoeXvSgpW6Z1WlsMFUd_gxlNJJ4AsU/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

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Blogger Hareketli Sosyal Medya Butonlar Eklentisi 29 Jul 2015 4:07 PM (10 years ago)


Blogger Hareketli Sosyal Butonlar Eklentisi Widget..

Bu eklentimizle , blogger blogunuza üzerine gelince renkelenen sosyal butonları ekliyeceğiz...Bu eklentimizle , rss, google , facebook ve twitter sayfalarınızı ziyaretçilerinize oldukça şık bir görünümle sunabilirsiniz..

DEMO

Blogger Hareketli Sosyal Butonlar Eklentisini blogger'a eklemek için aşağıdaki adımı takip edin..

Blogunuzun yönetim panelinden Yerleşim >> Gadget Ekle >> HTML/JavaScript seçeneğini seçelim ve açılan panele aşağıdaki kodları ekleyelim.. 
<style> 
/*--------eklentileri.blogspot.com hareketli menu ------*/ 
.touchme a { 
display:block; 
height:50px; 
width:50px; 
padding:0 4px; 
float:left; 
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTwjS3BSBw0Uo_JJT-L2K81FssERTapXcVtdDc5P53GQN-DeFxahpOPOjIkay7xZfnFjv-NkDBOODUUDIdZhUo-HAPBCj3vd5OFGdS-89oqCLUuheV8tTgVA0scQJszT8gqd5VJGLB6hD/s1600/eklentileri.blogspot.com.png) no-repeat; 
-webkit-transition: ease-in 0.2s all;    
-moz-transition: ease-in 0.2s all;    
-o-transition: ease-in 0.2s all;    
-ms-transition: ease-in 0.2s all;    
transition: ease-in 0.2s all; 
cursor:pointer;
}

.touchme a.googleplus { 
background-position: 0px -58px;
} 
.touchme a.googleplus:hover { 
background-position: 0px 0px; 
}

.touchme a.twitter { 
background-position: 0px -290px;
} 
.touchme a.twitter:hover { 
background-position: 0px -232px;
} 
.touchme a.facebook { 
background-position: 0px -406px;
} 
.touchme a.facebook:hover { 
background-position: 0px -348px;
}

.touchme a.rss { 
background-position: 0px -174px;
} 
.touchme a.rss:hover { 
background-position: 0px -116px;
}

</style>

<div class='touchme'>
<!--RSS--> 
<a class='rss' href="RSS ADRESI" rel='external nofollow' target='_blank'></a>
<!--Google Plus--> 
<a class='googleplus' href="GOOGLE PROFIL ADRESI" rel='external nofollow' target='_blank'></a>
<!--Facebook--> 
<a class='facebook' href="FACEBOOK ADRESI" rel='external nofollow' target='_blank'></a>
<!-- Twitter --> 
<a class='twitter' href="TWITTER ADRESI" rel='external nofollow' target='_blank' ></a>

</div>
Yukarıdaki kodlarda kırmızı ile yazılmış olan yerlere , kendi adreslerinizi yazmayı unutmayın...yapmanız gereken sadece bu kadar..


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

Blogger Hareketli Sosyal Butonlar Eklentisi , Blogger Hareketli buton , blogger sosyal medya butonları , renk değiştiren butonlar , blogger sosyal ağ butonları , blogger facebook twitter buton


Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Renkli Populer Yayınlar Eklentisi 29 Jul 2015 1:51 PM (10 years ago)


Blogger Renkli Populer Yayınlar Eklentisi

Bu eklentimizle , blogunuzda bulunan populer yayınlar eklentinizi dahada renklendirmeyi anlatacağız..

Renkli popüler yayınlar eklentimiz ile  blogunuzu daha çekici bir hale getirebilirsiniz..

Hemen anlatıma geçelim...aşağıdaki kodumuzu buluyoruz.. 
]]></b:skin>
Hemen üstüne aşağıda yer alan kodlarımızı ekliyoruz.. 
/*Renkli Populer Yayınlar Eklentisi Baslangıcı http://eklentileri.blogspot.com*/
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:30px;background:transparent;padding:0;width:51px;height:51px}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:89%}
#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:#f6993d;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:89%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:89%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:89%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:89%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
/*Renkli Populer Yayınlar Eklentisi Sonu http://eklentileri.blogspot.com*/
Yapmanız gereken sadece bu kadar = ) Bu eklentinin çalışabilmesi için , blogunuza daha önceden popüler yayınlar eklentisini eklemiş olmanız gerekmektedir...Eğer ekli değilse , popüler yayınlar eklentisini eklemeyi unutmayınız...

Bu eklentinin önzilemesini , blogumuzun sağ üst tarafında görebilir yada BURAYA tıklayabilirsiniz..



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

 Renkli Populer Yayınlar Eklentisi , Blogger Renkli Populer Yayınlar Eklentisi , Blogger Renkli Populer Yayınlar , Renkli Populer Yayınlar Eklentisi Nasıl Eklenir , Renkli Populer  Eklentisi , Blogger Populer Yayınlar Eklentisi



Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Facebook , Twitter Yalancı Takipci Sayısı Eklentisi 15 Feb 2013 2:30 PM (12 years ago)


Bu eklentimiz resimde gördüğünüz gibi, rss , twitter ve facebook takip sayısı göstergesi şeklindedir..

Tabi burda yazan rakamlar , tamamen hayal ürünü olup , size kalmıştır...

Adı üstünde Yalancı Takipci Sayısı Eklentisi !
<style> 
.rss-mbt { 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYhLVEuB1-CzWE1_Egt70QPPSDTgqWkmOudOD6Ojicpy7MFy8Bzs51Z54Vu-ZUOIwA42GX2_WFQtQ-X7FVh_KsgkVSM0466x0_TJ-neVp5tkXBqPVpSMkEWrfEhHYDhfJC5ilMZhxDk8I/s800/RSS1.png) no-repeat; 
    height: 64px; 
    padding: 0px 20px 0px 80px; 
    margin-top: 20px; 
}
.twitter-mbt { 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-sXGO4wD9RTjlY_6_RQUHox4L8_japM3v26TbzOcpVv7PECHMq9PkMHTrb6UHWrCw4TZ13yYvUg7jZpomDFsPN863d90y1WK9x-Z1c3VE7qTm0MyUfy1H5HyiPpWq6UUc0ez6UYvrVZs/s800/TWITTER1.png) no-repeat; 
    height: 64px; 
    padding: 0px 20px 0px 80px; 
    margin-top: 20px; 
}
.facebook-mbt { 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8qcXPhelPNv9O5krEiMNIJKz3Ciitf1vQsqaks8UgWi81IGb3yvmEPZ-3DHiG2f7rIW6_hDLxLs-45xFcc4SQkd3P_ffU2icFf3hVs1Iz5V34SZSZmbsBxoYQJzEprvWndycrUS_mH08/s800/FACEBOOK1.png) no-repeat; 
    height: 64px; 
    padding: 0px 20px 0px 80px; 
    margin-top: 20px; 
}
.follower-rss, .follower-twitter, .follower-facebook { 
    font-family: Georgia,  sans-serif, Times; 
    font-size: 1.1em; 
        font-style:italic; 
        color:#289728; 
}
.follower-rss span { 
    font-size: 1.9em; 
    font-weight: bold; 
        font-style:italic; 
        color:#FFB93C;     
}
.follower-twitter span { 
    font-size: 1.9em; 
    font-weight: bold; 
        font-style:italic; 
        color:#6DB6E6;     
}
.follower-facebook span { 
    font-size: 1.9em; 
    font-weight: bold; 
        font-style:italic; 
        color:#3889BA;     
}
</style>
<div class="rss-mbt"> 
<div class="follower-rss"> <span>78</span> Okuyucu 
</div> 
<a href="Rss adresiniz" rel="nofollow">RSS feed</a> 
| <a href="E-mail adresiniz" target="_blank" rel="nofollow">E-mail</a> 
</div>
<div class="twitter-mbt"><div class="follower-twitter"><span>138</span> Takipçi</div>                            
<a href="Twitter Adresiniz" target="_blank" rel="nofollow" title="I definitely follow you back">Bizi Twitter'da Takip et</a> 
</div>                       
<div class="facebook-mbt">                        
<div class="follower-facebook"><span>403</span> Takipçi                           </div>                            
<a href="Facebook Adresiniz" target="_blank" rel="nofollow">Bizi Facebook'da takip et</a> 
</div>
Yukarıdaki kodu blogunuza gadget şeklinde istediğiniz yere , yerleşim'den ekleyiniz..Kod içinde kırmızı olan yerlere, kendi twitter , facebook , rss ve mail adresinizi yazınız..Mavi olan yerler ise , takipçi sayısı kısmı, buralara istediğiniz rakamı yazabilirsiniz..

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Blogger Sabit Açılır Yan Menü Eklentisi 11 Feb 2013 2:30 PM (12 years ago)


Blogger Sabit Açılır Yan Menü Eklentisi

Bu eklentimizde , blogunuzun sol ortasında resimde gördüğünüz gibi bir menü yaratıyoruz.

Oldukça şık bir görüntüye sahip olan Sabit Açılır Yan Menü Eklentisini blogger blogunuzda kullanmak isterseniz aşağıdaki adımları izlemeniz yeterli..

Aşağıdaki kodumuzu bulalım.. 
]]></b:skin>
Hemen üstüne aşağıdaki kodlarımızı ekleyelim.. 

/* CSS Style for Horizontal Menu - info @ http://eklentileri.blogspot.com*/
#hor {
list-style:none;
padding:0;
margin:0; 
}

#hor li {
float:left;
padding:5px;
}

#hor a {
display:block;
height: 12px;
text-indent:-999em;
}

#hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0; 
}

#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0; 
}

#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}


/* CSS Style for Vertical Menu */ 

#ver {
list-style:none;
padding:0;
margin:0; 
}

#ver li {
padding:2px; 
}

#ver li a {
display:block;
height:12px;
text-indent:-999em;
} 

#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0; 
}

#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0; 
}

#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}


.clear {
clear:both;
} 


*{
/* A universal CSS reset */
margin:0;
padding:0;
}


#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;


/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}

#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;

/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;

/* CSS3 Transition: */
-webkit-transition: 0.25s;

/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}

#navigationMenu a{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnnOIaKZSSbN5gGZOmQuj2AZRg-mGssrW0_F3toNV8thYErBFHbx6idFW8qfFKRwcEKnIurToePTHGdPYUL6UXxFPBEbaQ2Gab8r86mDW76MIoYu0JzDjEIIPpdtNGJBjxx-xCwfLPQ5E/s1600/navigation.jpg') no-repeat;

height:39px;
width:38px;
display:block;
position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;

/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}

/*End menu css - info @ http://eklentileri.blogspot.com */

Yukarıdaki işlemi yaptıysanız kaydedin ve yerleşim >> gadget ekle >> HTML/JavaScript seçeneği ile açılan yere aşağıdaki kodlarımızı yapıştıralım.. 
<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Ana Sayfa" href="http://eklentileri.blogspot.com">
<span>ANA SAYFA</span>
</a>
</li>

<li>

<a class="about" href="LİNK">
<span>About</span>
</a>
</li>

<li>
<a class="services" href="LİNK">
<span>Services</span>
</a>

</li>

<li>
<a class="portfolio" href="LİNK">
<span>Portfolio</span>
</a>
</li>

<li>
<a class="contact" href="LİNK">

<span>Contact us</span>
</a>
</li>
</ul>
</div>
Burada dikkat etmemiz gereken yerler , kırmızı ile yazılmış olan yerleri kendinize göre düzenlemeniz, eklentinin ön izlemesi için TIKLAYIN


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

Blogger Sabit Açılır Yan Menü Eklentisi , Blogger Sabit Menü , Blogger Menü Eklentisi , Blogger Menü Ekleme , Blogger Nasıl Menü Eklenir , Blogger Renkli Menü Yapımı

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

En Çok Yorum Yapılan Yazılar / Konular Eklentisi 8 Feb 2013 2:19 PM (12 years ago)


En Çok Yorum Yapılan Yazılar / Konular Eklentisi Widget


Blogger blogunuzda , en çok yorum yapılan yazılarınızı göstermek istermisiniz ?

DEMO

Lafı uzatmadan hemen anlatıma geçelim..

Blogunuzun Yerleşim kısmına girerek Gadget Ekle >> HTML/JavaScript seçeneği ile açılan panele aşağıdaki kodları ekleyin.. 
<!-- Popular posts with comment eklentileri.blogspot.com -->
<script type="text/javascript">
function getYpipePP(feed) {
 document.write('<ol style="">');
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " \(" + feed.value.items[i].commentcount + "\)";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
 document.write(pList);
 document.write(pComment); //to remove comment count delete this line
 document.write('</a></li>');
 }
 document.write('</ol>');
 }
 </script>
 <script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://eklentileri.blogspot.com
 &ShowHowMany=10
 &_id=390e906036f48772b2ed4b5d837af4cd
 &_callback=getYpipePP
 &_render=json" 
type="text/javascript"></script>

<!-- Popular posts with comment eklentileri.blogspot.com -->
Yukarıdaki kodları eklediyseniz , kod içinde geçen ; eklentileri.blogspot.com adresi yerine , kendi blog adresinizi , mavi ile yazılmış olan 10 rakamını değiştirerek göstermek istediğiniz yazı sayısını ayarlayabilirsiniz..



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

En Çok Yorum Yapılan Yazılar , En Çok Yorum Yapılan Yazılar eklentisi , Blogger En Çok Yorum Yapılan Yazılar , En Çok Yorum Yapılan Konular ,En Çok Yorum Yapılan konular eklentisi , Blogger En Çok Yorum Yapılan Konular , Blogger yorum yapılan knouları gösterme , en çok yorum 


Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Sayfada Aşağı inince Açılan Paylaş Eklentisi 7 Feb 2013 2:08 PM (12 years ago)


Sayfada Aşağı inince Açılan Paylaş Eklentisi

Blogger için , ziyaretçileriniz sayfada biraz aşağı inince açılan paylaş eklentisi istermisiniz ?

Bu eklentimizde , Twitter paylaş butonu , facebook paylaş butonu vb.. butonlar yer alacak , böylelikle ziyaretçileriniz yazlarınızı rahatlıkla paylaşabilecek..

Resimden ön izlemesini yapabilir Yada BU SAYFAdan demosunu görebilirsiniz ( Sayfa açılınca biraz aşağı inin  )

Anlatıma geçelim..

Aşağıdaki kodumuzu bulalım.. 
</head>
Bu kodumuzun üstüne , aşağıdaki kodlarımızı ekleyelim.. 
<script type="text/javascript">
var addthis_config = {
    bar_show_below : 150
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>
Şimdide bu kodumuzu bulalım.. 
</body>
Bu kodumuzun da üstüne , aşağıdaki kodlarımızı ekleyelim.. 
<div class="addthis_bar addthis_bar_medium">
    <label>Share This Page:</label>
    <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
        <span><a class="addthis_button_preferred_1"></a></span>
        <span><a class="addthis_button_preferred_2"></a></span>
        <span><a class="addthis_button_preferred_3"></a></span>
        <span><a class="addthis_button_preferred_4"></a></span>
        <span><a class="addthis_button_compact"></a></span>
        <span><a class="addthis_counter addthis_bubble_style"></a></span>
    </div>
</div>
Artık Sayfada Aşağı inince Açılan Paylaş Eklentisine sahipsiniz, güle güle kullanın..


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

Sayfada Aşağı inince Açılan Paylaş Eklentisi , blogger paylaş eklentisi, blogger paylaş butonları , facebook paylaş butonu , twitter paylaş butonu , Blogger paylaş butonları ekleme , blogger paylaş butonları eklentisi


Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Blogger Yandan Açılır Menü Eklentisi 29 Jan 2013 12:34 PM (12 years ago)


Blogger blogunuzda , Yandan açılır menü eklentisi isterseniz , bu eklenti çok hoşunuza gidecek..

Fare ile üzerine gelindiğinde açılan menümüz , blogunuza hoş bir görsellik katabilir..

DEMO

Altta yer alan kodumuzu buluyoruz 
]]></b:skin>
Bir satır üstüne altta yer alan kodları ekliyoruz.. 
/* Blogger Yandan Açılır Menü Eklentisi eklentileri.blogspot.com */

ul.nav8 {
    list-style:none;
    height:120px;
    margin:0;
    padding:0;
}

ul.nav8 table {
    border-collapse:collapse;
    width:0;
    height:0;
    margin:-1px 0 -5px -1px;
}

ul.nav8 > li {
    float:right;
    height:120px;
    width:40px;
    position:relative;
    overflow:hidden;
    -webkit-transition-duration:.5s;
    -moz-transition-duration:.5s;
    -o-transition-duration:.5s;
}

* html ul.nav8 > li {
    width:auto;
}

ul.nav8 > li a.ie6 {
    float:left;
    height:120px;
    width:39px;
    position:relative;
    overflow:hidden;
}

ul.sub {
    list-style:none;
    height:120px;
    width:600px;
    background:url(http://www.script-tutorials.com/demos/107/images/panel.png) no-repeat right top;
    position:absolute;
    left:0;
    top:0;
    margin:0;
    padding:0;
}

ul.sub li {
    float:left;
}

ul.sub li:first-child {
    margin-left:45px;
}

ul.sub li a {
    display:block;
    width:110px;
    height:120px;
    float:left;
    overflow:hidden;
    position:relative;
    text-decoration:none;
    color:#000;
}

ul.sub li a b {
    font-size:14px;
    display:block;
    padding:15px 15px 5px;
}
ul.sub li a b:hover {
    font-size:16px;
    color:#FF0000;
    display:block;
    padding:15px 15px 5px;
}
ul.sub li a p {
    font-size:12px;
    display:block;
    margin:0;
    padding:0 10px;
}

ul.sub li a p:hover {
    font-size:13px;
    display:block;
    margin:0;
    padding:0 10px;
}

ul.nav8 > li:hover {
    width:600px;
}

ul.nav8 > li a.ie6:hover {
    direction:ltr;
    width:600px;
}

ul.sub li a:hover i {
    opacity:1.0;
}
Şablonumuzu kaydediyoruz ve Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile açılan panele altta yer alan kodlarımızı ekliyoruz 
<ul class="nav8">
<li>
        <!--[if lte IE 6]><a class="ie6" href="#url"><table>
<tr><td><![endif]-->
            <ul class="sub">
<li><a href="http://eklentileri.blogspot.com/"><b>Ana Sayfa</b>Bu alana bilgi yazısı<br />
<i></i></a></li>
<li><a href="http://eklentileri.blogspot.com/"><b>Link 1</b>Bu alana bilgi yazısı<br />
<i></i></a></li>
<li><a href="http://eklentileri.blogspot.com/"><b>Link 2</b>Bu alana bilgi yazısı<br />
<i></i></a></li>
<li><a href="http://eklentileri.blogspot.com/"><b>Link 3</b>Bu alana bilgi yazısı<br />
<i></i></a></li>
<li><a href="http://eklentileri.blogspot.com/"><b>Link 4</b>Bu alana bilgi yazısı<br />
<i></i></a></li>
</ul>
<!--[if lte IE 6]></td></tr>
</table>
</a><![endif]-->
        </li>
</ul>
Yukarıdaki işlemleri yaptıysanız Blogger Yandan Açılır Menü Eklentisi hazır , yukarıdaki kodları kendinize göre düzenleyiniz..



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

 Blogger Yandan Açılır Menü Eklentisi , Blogger Menü Eklentisi , Blogger Açılır Menü , Menü Eklentileri , Blogger Yana Açılan Menü , Menü , Slideout Menu Bar For Blogger , Blogger Menu Widget



Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Retro Tazı Blogger Sosyal Paylaşım Eklentisi 21 Jan 2013 5:20 AM (12 years ago)


Retro Tazı Blogger Sosyal Paylaşım Widget

DEMO

Altta yer alan kodlarımızı , Yerleşim >> Gadget Ekle >> HTML/JavaScript yardımı ile ekleyiniz..
<style>
/* Retro tarzı blogger sosyal paylasim eklentisi eklentileri.blogspot.com */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}</style>

<br />
<center>
<br />
<ul class="bubblewrap">
<li><a href="http://www.plus.google.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXTjUooaFo082uT0o-JIyNAwC9-ZiCLr-TZeiE7xjCltdQ46apy-KCI8W5prB2TNzggKmfbFhKHjl1Pjf_1B6vCT-eEgoRsRpsDfKK5Ur41N9bmwh4W2P-PCRJiCLmUZFjjTWaSaTqSPI/s1600/bloggertrix-google-icon.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.facebook.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXc-4QIsvqJG0HOYdM_RGb_GndqP7Yxkwk9kK0KV8mv9IEpOWkJRPxcmK-2S1rgywrI8sdgW3KIT7J5VyITWrVWmVR3Sy7REPJLOhY_S766qXNehSMhSudHF8EoWxL0dMcLfHbmqRTOU4/s1600/bloggertrix-facebook-icon.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.pinterest.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWOpTC-WJfSqwJ9VG4Cj4XIvsUGOR_hX-ULSwlHCOP46RNp9vJo6RaF7oLkcNpRkxgE4RypkAtzMNFVh8VYgUMiGtYreGi-V0888HpGJDefcl8V-DwoLW54JcjfAVxl9v0Ib__lllLxGw/s1600/bloggertrix-pinterest-icon.png" title="Add to Digg" /></a></li>

<li><a href="http://www.twitter/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibjGB298_fGH5epee3MJJlW-E1YXK7bV6pSAofwTiGNZQMsO1C9TZJcrDVkdyhzstdzgmNzhEJvDM-nnVGhrNoFYCA3ITTNBTqWnItmlPsJVjwekL5N2dj_e7iEqoHaOMHaYa25WhduaM/s1600/bloggertrix-twitter-icon.png" title="Add to Twitter" /></a></li>

<li><a href="http://feeds2.feedburner.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH54-NNvhwOnCt7xBeAZEyoeKbNJHLwZpysZhGEFIjPuz7yQiChoiLLgUQuDJ1h9ToNjypDYKUQG3jvw7jDp1rS-PQHCS1cUOyA6zbP8VjVmbf7u0l_OykFghrsoFR593S20Zy2KSLEMY/s1600/bloggertrix-rss-feed-icon.png" title="Add RSS Feed" /></a></li>
</ul>
Yukarıdaki kod içinde geçen XXXXX yazısı yerlerine kendi asreslerinizi yazmayı unutmayınız..

Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Alternatif Facebook Beğeni Kutusu 15 Jan 2013 3:20 PM (12 years ago)


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


Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Yazı Altına Sosyal Paylaşım Kutucukları 12 Jan 2013 2:26 PM (12 years ago)


Blogger Yazı Altı Sosyal Paylaşım Kutucukları Eklentisi..

Bu eklentimiz ile, yazılarınızın altına , twitter , facebook ve google+ kutucukları eklenecektir , ziyaretçileriniz böylelikle yazılarınızı twitter , facebook ve google+ da paylaşabilecekler..

DEMO

Aşağıdaki kodlardan birini bulunuz , ilk denediğiniz olmazsa diğerini deneyiniz , bazı bloglarda bu kodlardan bir kaç tane olabilir , üşenmeyin deneyin..
<data:post.body/>


YADA


<div class='post-footer-line post-footer-line-1'/>
Bir satır altına aşağıdaki kodları ekleyelim.. 
<b:if cond="data:blog.pageType == &quot;item&quot;">
<style>
.promote_post_bg {
    height: 103px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwvKfQnQ3299ZZ7oMYvmwAKf3-MNNi-HNKDjncqOT1NFh8pnC6utynBVXxKCUApBpOlNHxSmU8QCq4C6TgN2N2SnfEVjiIKd-3ULZivo27itfHtK4ccnwfyzVbIpjWfGt1TwhZFNiL_0d5/s1600/social-kutucuk.png) 0 -7px no-repeat;
    width: 500px;
    margin-left: 65px;}
.promote_twitter {
    width: 130px;
    height: 38px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 13px;
    text-align: center;}
.promote_facebook {
    width: 115px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 63px 0 0 28px;
    text-align: center;}
 .promote_google {
    width: 65px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 28px;
    text-align: center;
}
</style>
<div class="promote_post_bg">
<div class="promote_twitter">
<a class="twitter-share-button" data-via="BloggerEklenti" href="https://twitter.com/share">Tweet</a>
<script>
                !
                function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = "//platform.twitter.com/widgets.js";
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, "script", "twitter-wjs");
          
</script></div>
<div class="promote_facebook">
<fb:like action="like" colorscheme="light" expr:href="data:post.canonicalUrl" font="verdana" layout="button_count" send="false" show_faces="false"></fb:like>
<div>
<b:if cond="data:post.isFirstPost">
<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/en_US/all.js#xfbml=1";
                            d.getElementsByTagName('head')[0].appendChild(js);
                        }(document));
                  
</script>
</b:if></div>
</div>
<div class="promote_google">
<g:plusone annotation="none" size="medium"></g:plusone>
<script type="text/javascript">
                (function () {
                    var po = document.createElement('script');
                    po.type = 'text/javascript';
                    po.async = true;
                    po.src = 'https://apis.google.com/js/plusone.js';
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(po, s);
                })();
          
</script></div>
</div> 
</b:if>



Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Blogger Tema GameMix Theme 10 Jan 2013 1:23 PM (12 years ago)


GameMix Blogger Teması

Blogger için uyarlanan , GameMix teması , oyun blogları için tasarlanmış , GameMix temasını özelleştirerek , farklı alanlarda da kullanabilirsiniz..

DEMO INDIR


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

Blogger Tema , Blogger Temaları , GameMix Blogger Tema , GameMix Blogger Teması , GameMix Blogger Theme , GameMix Blogger Template , Blogger Oyun Teması


Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?

Blogger Tema / Sablon Yükleme 9 Jan 2013 1:58 PM (12 years ago)


Son zamanlarda , sıkça blogger tema nasıl yüklenir , bu blogger temasını nasıl yüklerim , Beğendiğim bir temayı blogger bloga nasıl eklerim , şeklinde sorular almaya başladım..

Her ne kadar , blogger blogunuza şablon eklemek basit olsa da , bilmeyenler ve yeni blogger kullanıcıları için bu anlatımı yapalım..

Blogger yönetim panelinizde , Şablon kısmına giriyoruz..
Sağ üst bölümde yer alan Yedekle / Geri yükle bağlantısına tıklıyoruz..
Açılan panelde , Dosya Seç butonuna tıklıyoruz...
İndirdiğiniz temayı bulun...uzantısı xml olmalı...
Son olarak Yükle butonuna basıyoruz ve yeni temanız hazır..


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

 Blogger Tema Yükleme , Blogger Tema Yükle , Blogger Tema Ekle , Blogger Tema Nasıl Eklenir , Blogger Tema Nasıl Yüklenir , Blogger Blog Tema Değiştirme , Blogger Şablon Ekleme ,Blogger Şablon Yükleme , Blogger Tema Nasıl Eklenir


Add post to Blinklist Add post to Blogmarks Add post to del.icio.us Digg this! Add post to My Web 2.0 Add post to Newsvine Add post to Reddit Add post to Simpy Who's linking to this post?