29 Eki 2012

15 Yorum

29 ekim Cumhuriyet Bayramı Eklentisi


29 Ekim Cumhuriyet Bayramını için blogunuza eklenti istermisiniz ?

Bu eklenti başka hiç bir yerde yok...Bu eklentimizle , Blogger blogunuzun sağ ve sol üst köşesinde cumhuriyet bayramına ait görseller ekleyebilirsiniz..

Önizlemesini 29 ekim tarihi boyunca blogumuzun sağ ve sol üst köşesinde görebilirsiniz..

Yapmanız gereken aşağıdaki kodu , blogger blogunuza Yerleşim >> Gadget Ekle >> HTML/JavaScript seçeneği ile gadget olarak eklemek..
<img src="http://2.bp.blogspot.com/-0zDRsdp-Vq0/UI2yBEBwJsI/AAAAAAAACTE/78P5ZaFhLl4/s1600/29-ekim-blogger-eklenti-sol.png" style="position:fixed; top: 0px;left:0px;border:none;z-index:5;"/><img src="http://2.bp.blogspot.com/-shUfgTK3hJE/UI2x_8SzkoI/AAAAAAAACTA/3nY-UA3Dx-0/s1600/29-ekim-blogger-eklenti-sag.png" style="position:fixed; top: 0px;right:0px;border:none;z-index:5;"/>
Yukarıdaki kodu eklediyseniz , her iki tarafta gözükecektir resimler...Sadece sağ tarafa Atatürk resmini eklemek için aşağıdaki kodu kullanınız..
<img src="http://2.bp.blogspot.com/-shUfgTK3hJE/UI2x_8SzkoI/AAAAAAAACTA/3nY-UA3Dx-0/s1600/29-ekim-blogger-eklenti-sag.png" style="position:fixed; top: 0px;right:0px;border:none;z-index:5;"/>
Sadece sol tarafa Cumhuriyet bayramı resmini eklemek için ise aşağıdaki kodu ekleyiniz..
<img src="http://2.bp.blogspot.com/-0zDRsdp-Vq0/UI2yBEBwJsI/AAAAAAAACTE/78P5ZaFhLl4/s1600/29-ekim-blogger-eklenti-sol.png" style="position:fixed; top: 0px;left:0px;border:none;z-index:5;"/>



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

29 ekim Cumhuriyet Bayramı Eklentisi , 29 ekim Cumhuriyet Bayramı widget , 29 ekim eklenti , Blogger bayram eklentisi , Blogger bayram eklentileri , Blogger bayram, 29 ekim



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

28 Eki 2012

9 Yorum

Resimli En Çok Yorum Yapanlar Eklentisi


Blogger için Resimli En Çok Yorum Yapanlar Eklentisi Widget

Daha önceden ŞU konuda , en çok yorum yapanlar eklentisini paylaşmıştık..Şimdi ise en çok yorum yapanlar eklentisinin resimli versiyonunu sizlerle paylaşacağız..

Yapmanız gereken , aşağıdaki kodları Yerleşim >> Gadget Ekle >> HTML/JavaScript ile blogunuzda uygun bir yere gadget olarak eklemek..
<style type="text/css">

.top-commenter-line img {

-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style>
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://eklentileri.blogspot.com/
//
// CONFIG:
var maxTopCommenters = 5;   // how big a list of top commentators
var minComments = 1;        // how many comments must top commentator have at least
var numDays = 0;            // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true;       // true: exclude my own comments
var excludeUsers = ["Anonymous", "someotherusertoexclude"];     // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';      // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 56;
var cropAvatar = true;
//
var urlNoAvatar = "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = '';  // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author;
 
  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t;
 
  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
 
  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
 
  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';
 
  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
}
 
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date();
 
  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  }
 
  for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
 
      //Calculate difference btw the two dates, and convert to days
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;
 
    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue;
 
    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }
 
  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
 
  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  });
 
  // list top topcommenters:
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commenter-line">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
}  
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

Eklediyseniz , eklentimiz hazır halde blogunuzdan görebilirsiniz , bu eklentinin demosunu paylaşmıyoruz, yukarıdaki resime tıklayarak inceleyebilirsiniz..



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

Resimli En Çok Yorum Yapanlar Eklentisi , Blogger en çok yorum yapanlar , Resimli yorumlar , resimli en çok yorum yapanlar , yorumlar , Blogger yorum Eklentisi ,Blogger yorum resimli eklenti , Top Comment Gadget , Top Comment , Top Comment Gadget Avatars



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

25 Eki 2012

6 Yorum

Kurban Bayramı Eklentisi



Blogger blogunuza giren kullanıcılara, sayfanızın sağ üstünde yada sağ altında yer alan bir bayram mesajı vermek istermisiniz ?

Bu eklentiye bayram boyunca blogumuzun sağ üstünde veya sağ alt tarafta yer vereceğiz , ön izlemesini blogumuz üzerinden yapabilirsiniz..

Yerleşim >> Gadget Ekle >> HTML/JavaScript tıklayalım ve açılan yere aşağıda yer alan kodları ekleyelim...
<img src="http://1.bp.blogspot.com/-O3TF0cTJXqY/UIkbdzCevrI/AAAAAAAACR0/FhmtxXt2sPw/s1600/bayram-eklentisi.png" style="position:fixed; top: 0px;right:0px;border:none;z-index:5;"/>
Yapmanız gereken bu kadar , eklentiyi sayfanın altında göstermek için , top kısmını bottom olarak değiştirmeniz gerekli..bu blogger eklentisini blogunuzdan kaldırmak için , yerleşim kısmından gerekli gadgeti kaldırmanız yeterli..

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

iyi Bayramlar...


Eklentileri.blogspot.com , Tüm blogcuların kurban bayramını kutlar , bol keyifli günler diler =)

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

19 Eki 2012

3 Yorum

Blogger MenuBar eklentisi


Blogger menü bar eklentisi...

Blogger blogunuz için kullanışlı bir menü eklentisi istermisiniz ? bu eklentimizde , linkin üzerine gelindiğinde açıklama belirtebiliyorsunuz..

Blogger menü bar eklentisini kullanmak için yapmanız gerekenler aşağıda..


Alttaki kodu bulunuz..
]]></b:skin>
Bir satır üstüne aşağıdaki kodları ekleyiniz.
/* menu kodu eklentileri.blogspot.com */

#menu1 ul {
    list-style:none;
    font-family: Georgia, serif;
    font-size: 20px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 0.8em;
    border:2px solid #000;
    border-left:none;
    float:left;
    clear:both;
    margin:10px;
}
#menu1 ul li{
    float:left;
}
#menu1 ul li a{
    display:block;
    text-decoration:none;
    background-color:#444;
    padding:5px 10px;
    color:#fff;
    width:140px;
    border-right:1px solid #666;
    border-left:1px solid #000;
}
#menu1 ul li a span{
    display:block;
}
#menu1 ul li a span.title{
    border-bottom:1px solid #444;
}
#menu1 ul li a:hover span.title{
    border-bottom:1px dashed #f0f0f0;
    color:#ef0000;
}
#menu1 ul li a span.text{
    visibility:hidden;
    font-size:12px;
    text-align:right;
}
#menu1 ul li a:hover span.text{
    visibility:visible;
}
   

Şimdide Yerleşim >> Gadget Ekle >> HTML/JavaScript seçeneği ile açılan panele aşağıdaki kodlarımızı girelim..
..
tavsiye edilen ; alttaki resimdeki yere ekleyiniz ( BLOG KAYITLARI üstüne )


<div id="menu1">
            <ul>
                <li><a href="http://eklentileri.blogspot.com/">
                        <span class="title">ANA SAYFA</span>
                        <span class="text">Home Page</span>
                    </a>
                </li>
                <li><a href="">
                        <span class="title">Kategoriler</span>
                        <span class="text">Seçenekler</span>
                    </a>
                </li>
                <li><a href="">
                        <span class="title">LİNK 1</span>
                        <span class="text">Açıklama</span>
                    </a>
                </li>
                <li><a href="">
                        <span class="title">iletişim</span>
                        <span class="text">Bize ulaşın</span>
                    </a>
                </li>
                 <li><a href="http://eklentileri.blogspot.com/">
                        <span class="title">Link 2</span>
                        <span class="text">Açıklama 2</span>
                    </a>
                </li>              
            </ul>
        </div>
yapmanız gerekenler bu kadar , renkli bölümleri kendinize göre düzenleyiniz..

DEMO


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

Blogger MenuBar eklentisi , Blogger MenuBar , Blogger Menü
 Bar eklentisi , Blogger menü , blogger menu , menü , menu , blogger menü ekleme , blogger üst menü , blogger widgets


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

18 Eki 2012

9 Yorum

Blogger 3D arama kutusu Eklentisi


Blogger blogunuz için 3d arama kutusu ( butonu ) eklentisi istermisiniz ?

Özellikle blogger blogunda , arama kutusu olmayanlar için , yada olupta beğenmeyenler için bu eklenti işe yarayabilir..

Görüntü olarakta oldukça şık olduğunu düşündüğümüz blogger 3d arama kutusunu blogger blogunuza eklemek için aşağıdaki anlatımı takip ediniz..

Blogger blogunun yönetim paneline giriniz ve Yerleşim >> Gadget Ekle >> HTML/JavaScript seçeneği ile açılan panele aşağıdaki kodlarımızı ekleyelim.
<style type="text/css">
.form-wrapper {
width: 250px;
padding: 8px;
margin: 10px auto;
overflow: hidden;
border-width: 1px;
border-style: solid;
border-color: #dedede #bababa #aaa #bababa;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: #f6f6f6;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}
.form-wrapper #search {
width: 160px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #ccc;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.form-wrapper #search:focus {
outline: 0;
border-color: #aaa;
-moz-box-shadow: 0 1px 1px #bbb inset;
-webkit-box-shadow: 0 1px 1px #bbb inset;
box-shadow: 0 1px 1px #bbb inset;
}
.form-wrapper #search::-webkit-input-placeholder {
color: #999;
font-weight: normal;
}
.form-wrapper #search:-moz-placeholder {
color: #999;
font-weight: normal;
}
.form-wrapper #search:-ms-input-placeholder {
color: #999;
font-weight: normal;
}
.thumb{position:relative;left:4px;top:1px; border:8px solid transparent;-webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}
.form-wrapper #submit {
float: right;
border: 1px solid #00748f;
height: 42px;
width: 70px;
padding: 0;
cursor: pointer;
font: bold 15px Arial, Helvetica;
color: #fafafa;
text-transform: uppercase;
background-color: #0483a0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
background-image: linear-gradient(top, #31b2c3, #0483a0);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}
.form-wrapper #submit:hover,
.form-wrapper #submit:focus {
background-color: #31b2c3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
background-image: linear-gradient(top, #0483a0, #31b2c3);
}
.form-wrapper #submit:active {
outline: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
.form-wrapper #submit::-moz-focus-inner {
border: 0;
}
</style>
<form class="form-wrapper" action="/search" method="get">
    <input id="search" name="q" type="text" placeholder="ARA.." />
    <input id="submit" type="submit" value="ARA.." />
</form>
Yapmamız gereken sadece bu kadar , artık blogger blogunuzda , 3d bir arama kutusuna sahipsiniz..

DEMO


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

Blogger 3D arama kutusu Eklentisi , Blogger 3D arama kutusu , Blogger 3D arama Eklentisi , Blogger Arama Kutusu , Blogger Arama butonu , Blogger Search Bar , Blogger 3D search box


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

15 Eki 2012

6 Yorum

Blogger Sürgülü Buton Eklentisi


Blogger Blogunuz için Sürgülü CSS Buton Eklentisi

Blogger blogunuzda , yazılarınızın içinde yada istediğiniz bir yerde kullanmak üzere , farklı bir buton istermisiniz ?

Bu eklentimizde , üzerine gelindiğinde , sağa doğru sürgülü bir biçimde açılan buton eklentimizin nasıl yapılacağını anlatacağız.

Bu Blogger Buton eklentisini kullanmak içibn aşağıda yer alan adımları takip ediniz..

Aşağıdaki kodumuzu blogger blogunuzda bulunuz..
]]></b:skin>
Hemen bir satır üstüne , aşağıda yer alan kodları ekleyiniz..
.a-btn{
    background:#80a9da;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
    background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
    padding-left:20px;
    padding-right:80px;
    height:38px;
    display:inline-block;
    position:relative;
    border:1px solid #5d81ab;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
    float:left;
    clear:both;
    margin:10px 0px;
    overflow:hidden;
    -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-text{
    padding-top:8px;
    display:block;
    font-size:18px;
    white-space:nowrap;
    text-shadow:0px 1px 1px rgba(255,255,255,0.3);
    color:#446388;
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.a-btn-slide-text{
    position:absolute;
    height:100%;
    top:0px;
    right:52px;
    width:0px;
    background:#63707e;
    text-shadow:0px -1px 1px #363f49;
    color:#fff;
    font-size:18px;
    white-space:nowrap;
    text-transform:uppercase;
    text-align:left;
    text-indent:10px;
    overflow:hidden;
    line-height:38px;
    -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
    -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
    box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
    -webkit-transition:width 0.3s linear;
    -moz-transition:width 0.3s linear;
    -o-transition:width 0.3s linear;
    transition:width 0.3s linear;
}
.a-btn-icon-right{
    position:absolute;
    right:0px;
    top:0px;
    height:100%;
    width:52px;
    border-left:1px solid #5d81ab;
    -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
    width:38px;
    height:38px;
    opacity:0.7;
    position:absolute;
    left:50%;
    top:50%;
    margin:-20px 0px 0px -20px;
    background:transparent url(http://3.bp.blogspot.com/-Gnazmzurcn4/UG5YSSM5DJI/AAAAAAAAEqA/B2M66jPw04o/s1600/arrow_right.png) no-repeat 50% 55%;
    -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:hover{
    padding-right:180px;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
}
.a-btn:hover .a-btn-text{
    text-shadow:0px 1px 1px #5d81ab;
    color:#fff;
}
.a-btn:hover .a-btn-slide-text{
    width:100px;
}
.a-btn:hover .a-btn-icon-right span{
    opacity:1;
}
.a-btn:active{
    position:relative;
    top:1px;
    background:#5d81ab;
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color:#80a9da;
}
Üstteki işlemi yaptıysanız , butonumuzun css işlemleri tamamdır..
Butonu kullabilmek için ister gadget olarak ekleyebilir isterseniz yazı içlerinde kullanabilirsiniz.. Eklemek için aşağıdaki kodu kullanmanız gerekiyor..
<div class="button-wrapper">
<a class="a-btn" href="http://eklentileri.blogspot.com/">
      <span class="a-btn-text">Blogger</span>
      <span class="a-btn-slide-text">TIKLA</span>
      <span class="a-btn-icon-right"></span>
      </a>
</div>



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

Blogger Sürgülü Buton Eklentisi , Blogger Sürgülü Buton  , Blogger  Buton Eklentisi , Blogger Buton Eklentileri , Blogger Butonlar , Blogger CSS buton , Blogger button Widget

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

10 Eki 2012

2 Yorum

Blogger Etiketleriniz Hareketlensin


Blogger Etiketleriniz Hareketlensin Eklentisi

Blogger blogunuzda bulunan etiketleri biraz hareketlendirmek istermisiniz ?

Bu eklentimiz ile blogunuzda bulunan etiketlerin üstüne fare ile gelindiğinde , etiketimiz belirli bir açı ile sağa doğru yatmaktadır..

Bu eklentiyi blogger blogunuzda kullanmak için aşağıdaki anlatımları takip ediniz..

Aşağıdaki kodumuzu blogger blogumuzda buluyoruz..
]]></b:skin>
Hemen bir satır üstüne , aşağıda yer alan kodları ekliyoruz..
/*-----Etiketleriniz hareketlensin eklentileri.blogspot.com----*/
.label-size{ 
margin:0 2px 6px 0; 
padding: 3px; 
text-transform: uppercase; 
border: solid 1px #C6C6C6; 
border-radius: 3px; 
float:left; 
text-decoration:none; 
font-size:10px; 
color:#666; 
}

.label-size:hover { 
border:1px solid #6BB5FF; 
text-decoration: none;
-moz-transition: all 0.5s ease-out;  
-o-transition: all 0.5s ease-out;  
-webkit-transition: all 0.5s ease-out;  
-ms-transition: all 0.5s ease-out;  
transition: all 0.5s ease-out; 
-moz-transform: rotate(7deg);  
-o-transform: rotate(7deg);  
-webkit-transform: rotate(7deg);  
-ms-transform: rotate(7deg);  
transform: rotate(7deg);  
filter: progid:DXImageTransform.Microsoft.Matrix( 
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); 
zoom: 1;  
}

.label-size a  { 
text-transform: uppercase; 
float:left; 
text-decoration: none; 
}
.label-size a:hover  { 
text-decoration: none; 
}
Yapmamız gerekenler bu kadar , eklentinin çalışması için blogunuzda etiketler widgetinin ekli olması gerekmektedir..ekli değilse ekleyiniz lütfen..Etiketler eklentisini bulut olarak değiştirmeyi unutmayınız...

DEMO


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

Blogger Etiket özelleştirme , etiket eklentileri , blogger etiket eklentisi , blogger etiket efekti , etiketler , blogger etiketleriniz hareketlensin , blogger label widget


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

9 Eki 2012

30 Yorum

Blogger Eklenger Teması ( Sadece Bizde )


Blogger için uyarladığımız ilk tema ile karşınızdayız..


Blogger Eklenger temasını sayfanın en altından , demosunu görebilir ve indirebilirsiniz..

Blogger Eklenger temasınındaki farklılıklar aşağıdaki resimlerde işaretlenmiştir..


Yukarıdaki resimde gördüğünüz gibi ;

 konu başlıklarınızın sağına ve soluna, yorum sayısı ve tarih eklenmiştir..

Sosyal sitelerde yazılarınızın paylaşılması amaçlı , konu altlarına twitter , google+ ve facebook butonları eklenmiştir..

Yine konu altlarına etiketlerinizin daha şık görünmesi için ayarlama yapılmıştır..




Yukarıda gördüğünüz gibi , admin/yönetici yorumlarının yanında Admin logosu çıkmaktadır..

Daha fazlasını aşağıdaki demo linkinden görebilirsiniz...



Tarih sorunu yaşayanlar , aşağıdaki resimdeki anlatımı yapsınlar...Kırmızı kutu içindeki şekilde olduğu gibi olucak saat tarih ayarlarınız..


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

Blogger Eklenger , Blogger Eklenger Teması , Blogger Eklenger Themes , Blogger Tema , Blogger Temaları , Blogger Themes , Blogger 2012 Tema , Blogger Yeni tema 

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

3 Eki 2012

7 Yorum

Blogger Temaları - Blogger Themes


Eklentileri.blogspot.com ilk yayınından itbaren sizlere blogger eklentileri sunmaya devam ediyor , Bugünden itibaren artık blogger temalarınada yer vereceğiz..

Amacımız hiç bir yerde olmayan blogger temalarını sizlerle paylaşmak , Birbirinden farklı blogger temalarımızı görmek için bizi takip etmeye devam edin...

Yapılan temaları görmek için TIKLAYINIZ



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

1 Eki 2012

2 Yorum

Blogger css3 ile Etiketleri özelleştirme eklentisi


Blogger Etiketleri özelleştirme ( renklendirme ) eklentisi

Bu eklentimizde blogger blogunuzda bulunan etiketleri css3 yardımı ile biraz daha görselleştirmeyi anlatacağız..

Öncelikle blogunuzda etiketler gadgetinin ekli olduğundan emin olun , yoksa eklemek için , Yerleşim >> Gadget Ekle >> Etiketler sekmesinden eklentiyi ekleyin..

Etiketler eklentisini eklerken "Görüntüle" kısmını "BULUT" olarak seçelim..

Şimdi şablon ksımına girip alttaki kodumuzu buluyoruz..

]]></b:skin>
Bu kodumuzun hemen üstüne , aşağıda yer alan kodları ekliyoruz..
.label-size {
    float: left;
    margin: 0 0 7px 20px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    z-index: 1;
}
 
.label-size:before {
    content: '';
    width: 1.30em;
    height: 1.39em;
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
    position: absolute;
    left: -0.69em;
    top: .2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0 0 0.25em;
    -moz-border-radius: 0 0 0 0.25em;
    border-radius: 0 0 0 0.25em;
    z-index: 1;
}
 
.label-size:after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    background: #fff;
    -webkit-border-radius: 4.167em;
    -moz-border-radius: 4.167em;
    border-radius: 4.167em;
    border: 1px solid #d99d38;
    -webkit-box-shadow: 0 1px 0 #faeaba;
    -moz-box-shadow: 0 1px 0 #faeaba;
    box-shadow: 0 1px 0 #faeaba;
    position: absolute;
    top: 0.667em;
    left: -0.083em;
    z-index: 9999;
}
 
#Label1 {
    height: 210px;
}
 
.label-size:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}
 
.label-size:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}
Artık blogger blogunuzda bulunan etiketler daha renkli...

DEMO



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

Blogger css3 etiket , blogger etiketleri özelleştirme , blogger etiket renklendirme , blogger css3 eklentileri , blogger etiket eklentileri



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