30 Eylül 2012 Pazar

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

Blogger css3 ile Etiketleri özelleştirme eklentisi

29 Eylül 2012 Cumartesi

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

Yazı altına url - html - forum linki bağlantısı verme

28 Eylül 2012 Cuma

Blogger Renkli Sosyal Medya Eklentisi

Blogunuzda rengarenk sosyal medya eklentisi kullanmak için , aşağıdaki anlatımları takip ederek , blogger blogunuza ekleyebilirsiniz..

Blogunuzun yönetim panelinden Yerleşim >> Gadget Ekle >> HTML/JavaScript seçeneğini seçelim ve açılan panele aşağıdaki kodları ekleyelim..

<div class="btnt-chronicl-social">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/chandeepsBlogTips">Rss ile takip edin</a></li>
<li><a class="twitter" href="https://twitter.com/chandeeban">Twitter ile takip edin</a></li>
<li><a class="facebook" href="https://www.facebook.com/blogtipsntricks">Facebook ile takip edin</a></li>
<li><a class="google" href="https://plus.google.com/u/0/b/101110372634917065358/">Google+ ile takip edin</a></li>
<li><a class="linkedin" href="http://in.linkedin.com/in/blogtipsntricks">LinkedIn ile takip edin</a></li>
<li><a class="youtube" href="http://www.youtube.com/user/chandeep10">YouTube ile takip edin</a></li>
</ul>
</div>
<style type='text/css'>
/*<![CDATA[*/ 
.btnt-chronicl-social {  width: 280px;  margin: -10px;  }
.btnt-chronicl-social ul {  margin: 0;  padding: 0;  }
.btnt-chronicl-social ul li {  list-style:none;   padding: 0; text-transform: none; }
.btnt-chronicl-social ul li a {   color: #fff;   display:block;  }
.btnt-chronicl-social ul li a:hover {  color: #c9c9c9;  background-color: #333;   }
.btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .youtube { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Youtube-1.png") no-repeat scroll 10px center #C6312B; background-size: 20px;  padding: 17.5px 45px; }
/*]]>*/
</style>

Eklemiş olduğunuz kodlar içindeki , kırmızı ile yazılmış olan adresleri kendi adreslerinizle değiştirin..

DEMO

Blogger Renkli Sosyal Medya Eklentisi

27 Eylül 2012 Perşembe

Arkadaşlar Hepinize Merhabalar....

Yönetici arkadaşın bir takım sorunlarından dolayı ilgilenememesi nedeniyle , Eklentileri.blogspot.com adresini bana devretmiş bulunmakta...

Eklentileri.blogspot.com olarak , her zamanki gibi sizlere en iyi blogger eklentilerini sunmaya devam edeceğiz..

Eklentileri.blogspot.com öncedende olduğu gibi , en iyi en kullanışlı blogger eklentilerini paylaşacak , demo linki vererek sizlere yayınlayacaktır..

Anlayışınız için teşekkür eder , iyi bloglamalar dileriz..

Blogger Eklentileri Yönetimi

Blogger Eklentileri Duyuru

30 Eylül 2012 Pazar

Blogger css3 ile Etiketleri özelleştirme eklentisi

29 Eylül 2012 Cumartesi

Yazı altına url - html - forum linki bağlantısı verme

28 Eylül 2012 Cuma

Blogger Renkli Sosyal Medya Eklentisi

27 Eylül 2012 Perşembe

Blogger Eklentileri Duyuru

Öneri Makaleler

Dost Bloglar

Araç Kutusu