Blogger Renkli Kategori 2

Merhaba arkadaşlar,bugün size renkli kategoriler 2 'yi paylaşmak istedim

Yerleşim>gatget ekle>html kısmına yapıştırıyoruz

<center><div class="widget-content">

<div id="main">

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

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

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

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

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

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

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

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

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

</div>

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

Bu konu bana ait alıntı  için link bırakın.

Blogger Yazım Kaç Kere Okundu Eklentisi

Blogunuzdaki yazıların kaç kere okunduğunu takipçilerinizle paylaşmak istemez misiniz? Eğer bunu istiyorsanız bu eklenti tam size göre yapmanız gereken aşağıda yazmaktadır.





İlk olarak şablondan Tasarım > Html'yi düzenle > widget şablonlarını genişleyi seçip aşağıdaki kodu buluyoruz.

data:post.body

Kodu bulduktan sonra hemen üstüne üstüne aşağıdaki kodu ekliyoruz ve şablonu kaydediyoruz.

<div style='text-align: left;'> <b:if cond='data:blog.pageType == &quot;item&quot;'><span style='color: magenta;'><b> Siz bu yazıyı okuyan <img alt='counter' expr:src='&quot;http://www.e-zeeinternet.com/gd-count.cgi?page=&quot; + data:post.id + &quot;&amp;style=times&amp;nbdigits=1&amp;reloads=1&quot;'/> kişiden birisiniz.</b></span><b:else/></b:if></div>

Blogger'da 468x60 Reklam Alanı Oluşturmak

    Merhaba arkadaşlar bu yazım da ise Blogger‘da 468′e 60 reklam alanları oluşturmayı anlatacağım. Eklentiyi düzenler iken dikkat ettiğim nokta ise, görsellik oldu. Dolayısı ile bu yüzden eklenti de reklam alanlarının tamamını CSS ile yapmaktansa, görsellerden yapmaya özen gösterdim. Elbette, isterseniz görsellerde değişiklikler yapabilirsiniz. Ayrıca, ben kodları direk paylaşacağım için her kısım için kodları gösterme gereği duymadım. Yani aşağıdaki kodları, reklam alanı eklemek istediğiniz herhangi bir yere de ekleyebilirsiniz. Örneklendirmek gerekir ise; yazı içerisine, en alt kısıma, yazı üstüne vs. istediğiniz alanı reklam alanı olarak kullanabilirsiniz.
    Yapmanız gereken tek şey, aşağıdaki kodları HTML’yi Düzenle kısmından Gadget Ekle linkine tıkladıktan hemen sonra HTML/JavaScript Ekle bölümüne aşağıdaki kodu eklemektir.


Not : Yukarıdaki "http://i52.tinypic.com/2v8ka6p.png" yere resimini , "http://iletisimlinki" yere adresini yazacaksınız... Bizden bu kadar iyi günler...
Not : Yukarıdaki "http://i52.tinypic.com/2v8ka6p.png" yere resimini , "http://iletisimlinki" yere adresini yazacaksınız... Bizden bu kadar iyi günler...Not : Yukarıdaki "http://i52.tinypic.com/2v8ka6p.png" yere resimini , "http://iletisimlinki" yere adresini yazacaksınız... Bizden bu kadar iyi günler...

Blogger Renkli Popüler Yayınlar Eklentisi

Merhaba Arkdaşlar Size Bügün Yeni Kullanmaya Başladığım Renkli Popüler Eklentisini Anlatıcağım Başlıyalım.

Not: İsterseniz Renkli Popüler Eklentisinin Arka Planını Değiştirebilirsiniz Renk kodlarına burdanulaşabilirsiniz.


İlkbaş Şablon Sonra HTML Düzenle Sonra Aşağıdaki Kodu buluyoruz.

]]></b:skin> 

Kodunu bulalım hemen üstüne aşağıdaki kodu ekleyelim ve kaydedelim.

 #PopularPosts1 ul{margin:0;padding:0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px} #PopularPosts1 ul li:first-child{background:#33c9f7;} #PopularPosts1 ul li:first-child:after{content:""} #PopularPosts1 ul li:first-child + li{background:#33c9f7;} #PopularPosts1 ul li:first-child + li:after{content:""} #PopularPosts1 ul li:first-child + li + li{background:#33c9f7;} #PopularPosts1 ul li:first-child + li + li:after{content:""} #PopularPosts1 ul li:first-child + li + li + li{background:#33c9f7;} #PopularPosts1 ul li:first-child + li + li + li:after{content:""} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:""} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:""} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:""} #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{position:absolute;top:20px;right:-15px;border-radius:50%;background:#fff;width:0px;height:0px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px} #PopularPosts1 ul li a{font-size:12px;color:#808080;text-decoration:none} #PopularPosts1 ul li a:hover{color:#656565;text-decoration:none} #PopularPosts1 img { width:42px; height:42px; border: 1px solid #ddd; padding:0; } #PopularPosts1 li{ list-style-image:none; list-style:none; } 

Hepsi bu kadar, mavi ile işaretlediğim yerleri kendinize göre düzenlemeyi unutmayın görüşmek üzere.

Eklentiden Bir Resim

Blogger Resimli Kategori Yapma

Yeni bir blogger eklentisi ile merhaba. Bu eklenti için bana sürekli mesajlar geliyor resimli kategoriyi bana da verir misin gibisinden. Bende yoğun talep olduğu için paylaştım. Bu eklenti ile sitenizi daha çık görünmesini sağlayabilirsiniz. Bu eklentide ki kategoriler resim şeklindedir. Resimleri kendinize göre değiştirebilirsiniz.

Yapmanız gereken Yerlerişim > Gadget Ekle > HTML/JavaScript seçip aşağıdaki kodu eklemek. Yada sağ tarafta bulunan mavi butona tıklayarak blogunuza eklebilirsiniz.

<a href="http://www.blogger.com/" target="_self"><img alt="" body="" border="0" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://1.bp.blogspot.com/-rIV1I8VCaSs/UK4RFX7OvvI/AAAAAAAABOo/veM70DNIzwE/s1600/fotogaleri-onurbatur.png" style="filter: alpha(opacity=40); opacity: 0.4;"></a> <a href="http://www.blogger.com/" target="_self"><img alt="" body="" border="0" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://2.bp.blogspot.com/-W50ZiNh9HGs/UK4RJzL2TbI/AAAAAAAABPM/5MF7N-5hRzY/s1600/videogaleri-onurbatur.png" style="filter: alpha(opacity=40); opacity: 0.4;"></a> <a href="http://www.blogger.com/" target="_self"><img alt="" body="" border="0" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://2.bp.blogspot.com/-fhbGrSSN5Bk/UK4SRw1v7yI/AAAAAAAABPg/O53KsL_za9M/s1600/haberler-onurbatur.png" style="filter: alpha(opacity=40); opacity: 0.4;"></a> <a href="http://www.blogger.com/" target="_self"><img alt="" body="" border="0" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://2.bp.blogspot.com/-Sm5UgMX2P6U/UK4SCnCG4XI/AAAAAAAABPY/HF6RYYyS3v4/s1600/oyunlar-onurbatur.png" style="filter: alpha(opacity=40); opacity: 0.4;"></a> <a href="http://www.blogger.com/" target="_self"><img alt="" body="" border="0" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://2.bp.blogspot.com/-lCP6mt3jIdc/UK4RHfPsV1I/AAAAAAAABOw/-Z8rWeBaxTM/s1600/kadinlar-onurbatur.png" style="filter: alpha(opacity=40); opacity: 0.4;"></a> <a href="http://www.blogger.com/" target="_self"><img alt="" body="" border="0" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://2.bp.blogspot.com/-393irbm6TDc/UK4RI2LM2hI/AAAAAAAABPA/2ukIXhjzWAk/s1600/sinema-onurbatur.png" style="filter: alpha(opacity=40); opacity: 0.4;"></a>

CSS Filtreler İle Resimlere Zoom Efekti Verme

Bu yazımda sizlere Css Filtre ile resimlere zoom efekti vermeyi göstereceğim. Herkes bu kodu arıyor bende baya uzun süre aramıştım ama sonunda buldum bende sizlerle paylaşmak istedim. Hemen anlatıma geçeyim.

İlk olarak şablondan aşağıdaki kodu buluyoruz.

]]></b:skin>

Yukarıdaki Kodu bulduktan sonra hemen üstüne aşağıdaki kodu ekliyoruz.

.post-body img { -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; } .post-body img:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }